Add Combo theming

src/components/combo/combo-item.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
-import { styles } from './themes/light/item/combo-item.base.css';
+import { styles } from './themes/light/item/combo-item.base.css.js';
 import { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css';
 import { styles as fluent } from '../dropdown/themes/light/dropdown-item.fluent.css';
 import { styles as indigo } from '../dropdown/themes/light/dropdown-item.indigo.css';

src/components/combo/combo.ts

@@ -316,14 +316,14 @@ export default class IgcComboComponent<T extends object>
     return html`
       <igc-input
         part="target"
+        exportparts="container: input, input: native-input, label, prefix, suffix"
         @click=${this.toggle}
         .value=${ifDefined(this.value)}
         readonly
       >
         <span
           slot="suffix"
           part="clear-icon"
-          style="display: flex"
           @click=${this.handleClearIconClick}
           ?hidden=${this.selected.size === 0}
         >
@@ -335,7 +335,7 @@ export default class IgcComboComponent<T extends object>
             ></igc-icon>
           </slot>
         </span>
-        <span slot="suffix" part="toggle-icon" style="display: flex">
+        <span slot="suffix" part="toggle-icon">
           <slot name="toggle-icon">
             <igc-icon
               name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
@@ -352,7 +352,9 @@ export default class IgcComboComponent<T extends object>
         ${this.toggleController.toggleDirective}
       >
         <div part="filter-input">
-          <igc-input></igc-input>
+          <igc-input
+            exportparts="container: input, input: native-input, label, prefix, suffix"
+          ></igc-input>
         </div>
         <slot name="header"></slot>
         <igc-combo-list

src/components/combo/themes/dark/combo.bootstrap.scss

@@ -0,0 +1,5 @@
+@mixin theme() {
+    igc-combo::part(input) {
+        --input-background: transparent;
+    }
+}

src/components/combo/themes/dark/combo.fluent.scss

@@ -0,0 +1,5 @@
+@mixin theme() {
+    igc-combo::part(input) {
+        --container-background: transparent;
+    }
+}

src/components/combo/themes/dark/combo.indigo.scss

@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-combo::part(label) {
+        --label-focus-color: #{utils.color(gray, 800)};
+    }
+}

src/components/combo/themes/dark/combo.material.scss

@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-combo::part(input) {
+        --focus-background: #{utils.color(gray, 100)};
+    }
+}

src/components/combo/themes/light/combo.base.scss

@@ -1,10 +1,59 @@
 @use '../../../../styles/common/component';
 @use '../../../../styles/utilities' as *;
 
+:host {
+    font-family: var(--ig-font-family);
+}
+
+igc-input {
+    cursor: pointer;
+}
+
+igc-input::part(input) {
+    cursor: pointer;
+
+    &::selection {
+        background: transparent;
+    }
+}
+
+:host([disabled]) {
+    ::slotted([slot='helper-text']) {
+        color: color(gray, 400);
+    }
+}
+
+[part='clear-icon'],
+[part='toggle-icon'] {
+    display: flex;
+    cursor: pointer;
+}
+
 [part='list-wrapper'] {
-    height: fit-content;
+    @include border-radius(rem(4px));
+
+    background: color(surface);
+    color: color(gray, 700);
+    padding: rem(8px) 0;
+    box-shadow: elevation(8);
+
+    igc-input {
+        --ig-size: var(--ig-size-small);
+    }
+}
+
+[part='filter-input'] {
+    padding: rem(8px) rem(16px);
+    z-index: 26;
 }
 
 [part='list'] {
-    min-height: 300px !important;
+    $min-width: rem(150px);
+
+    min-width: $min-width;
+    min-height: calc($min-width * 3);
+
+    > * {
+        width: 100%;
+    }
 }

src/components/combo/themes/light/combo.bootstrap.scss

@@ -1,4 +1,5 @@
 @use '../../../../styles/utilities' as *;
+@use '../../../select/themes/light/select.bootstrap' as *;
 
 [part='clear-icon'] {
     border-inline-end: 1px solid color(gray, 400);

src/components/combo/themes/light/combo.fluent.scss

@@ -0,0 +1 @@
+@use '../../../select/themes/light/select.fluent' as *;

src/components/combo/themes/light/combo.indigo.scss

@@ -0,0 +1 @@
+@use '../../../select/themes/light/select.indigo' as *;

src/components/combo/themes/light/combo.material.scss

@@ -0,0 +1 @@
+@use '../../../select/themes/light/select.material' as *;

src/styles/themes/dark/bootstrap.scss

@@ -10,6 +10,7 @@
 @use '../../../components/tree/themes/dark/tree-item.bootstrap' as tree-item;
 @use '../../../components/select/themes/dark/select.bootstrap' as select;
 @use '../../../components/nav-drawer/themes/dark/nav-drawer-item.bootstrap' as nav-drawer-item;
+@use '../../../components/combo/themes/dark/combo.bootstrap' as combo;
 @include base.root-styles($dark-bootstrap-palette);
 @include dropdown.theme();
 @include input.theme();
@@ -20,3 +21,4 @@
 @include nav-drawer-item.theme();
 @include select.theme();
 @include grid.theme();
+@include combo.theme();

src/styles/themes/dark/fluent.scss

@@ -15,6 +15,7 @@
 @use '../../../components/tabs/themes/dark/tab.dark.base' as tab;
 @use '../../../components/tree/themes/dark/tree-item.fluent' as tree-item;
 @use '../../../components/nav-drawer/themes/dark/nav-drawer-item.fluent' as nav-drawer-item;
+@use '../../../components/combo/themes/dark/combo.fluent' as combo;
 @include base.root-styles($dark-fluent-palette);
 @include button.theme();
 @include icon-button.theme();
@@ -30,3 +31,4 @@
 @include tree-item.theme();
 @include nav-drawer-item.theme();
 @include grid.theme();
+@include combo.theme();

src/styles/themes/dark/indigo.scss

@@ -14,6 +14,7 @@
 @use '../../../components/nav-drawer/themes/dark/nav-drawer-item.indigo' as nav-drawer-item;
 @use '../../../components/select/themes/dark/select.indigo' as select;
 @use '../../../components/snackbar/themes/dark/snackbar.indigo' as snackbar;
+@use '../../../components/combo/themes/dark/combo.indigo' as combo;
 @include base.root-styles($dark-indigo-palette);
 @include checkbox.theme();
 @include switch.theme();
@@ -28,3 +29,4 @@
 @include select.theme();
 @include snackbar.theme();
 @include grid.theme();
+@include combo.theme();

src/styles/themes/dark/material.scss

@@ -6,9 +6,11 @@
 @use '../../../components/select/themes/dark/select.material' as select;
 @use '../../../components/tabs/themes/dark/tab.dark.base' as tab;
 @use '../../../components/nav-drawer/themes/dark/nav-drawer-item.base.scss' as nav-drawer-item;
+@use '../../../components/combo/themes/dark/combo.material' as combo;
 @include base.root-styles($dark-material-palette);
 @include input.theme();
 @include select.theme();
 @include tab.theme();
 @include nav-drawer-item.theme();
 @include grid.theme();
+@include combo.theme();

stories/combo.stories.ts

@@ -131,15 +131,20 @@ const Template: Story<ArgTypes, Context> = (
   { globals: { direction } }: Context
 ) => html`
   <igc-combo
+    style="max-width: 500px;"
     name=${ifDefined(name)}
     dir=${ifDefined(direction)}
     value-key="id"
     display-key="name"
     group-key="country"
     .data=${cities}
   >
-    <div slot="header">This is a custom header</div>
-    <div slot="footer">This is a custom footer</div>
+    <header style="text-align:center; padding:4px 0 8px" slot="header">
+      This is a custom header
+    </header>
+    <footer style="text-align:center; padding:8px 0 4px" slot="footer">
+      This is a custom footer
+    </footer>
   </igc-combo>
 `;