npm - igniteui-webcomponents - Versions diffs - 4.1.1 → 4.2.1 - Mend

igniteui-webcomponents 4.1.1 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/components/combo/controllers/navigation.js CHANGED Viewed

@@ -6,7 +6,7 @@ var DIRECTION;
 })(DIRECTION || (DIRECTION = {}));
 export class NavigationController {
     get input() {
-        return this.host.input;
+        return this.host.singleSelect ? this.host.target : this.host.input;
     }
     get dataState() {
         return this.host.dataState;
@@ -49,7 +49,13 @@ export class NavigationController {
         this.host = host;
         this.hostHandlers = new Map(Object.entries({
             Escape: this.escape,
-            ArrowDown: this.hostArrowDown,
+        }));
+        this.mainInputHandlers = new Map(Object.entries({
+            Escape: this.escape,
+            ArrowUp: this.hide,
+            ArrowDown: this.mainInputArrowDown,
+            Tab: this.tab,
+            Enter: this.enter,
         }));
         this.searchInputHandlers = new Map(Object.entries({
             Escape: this.escape,
@@ -63,7 +69,7 @@ export class NavigationController {
             ' ': this.space,
             Enter: this.enter,
             Escape: this.escape,
-            Tab: this.escape,
+            Tab: this.tab,
             Home: this.home,
             End: this.end,
         }));
@@ -79,6 +85,9 @@ export class NavigationController {
         this.scrollToActive(container, 'smooth');
     }
     space() {
+        if (this.active === START_INDEX) {
+            return;
+        }
         const item = this.dataState[this.active];
         if (!item.header) {
             this.toggleSelect(this.active);
@@ -86,17 +95,32 @@ export class NavigationController {
     }
     escape() {
         this.hide();
+        this.host.focus();
     }
     enter() {
+        if (this.active === START_INDEX) {
+            return;
+        }
         this.space();
         this.hide();
+        requestAnimationFrame(() => this.input.select());
+        this.host.focus();
     }
     inputArrowDown(container) {
         container.focus();
         this.arrowDown(container);
     }
-    hostArrowDown() {
+    async mainInputArrowDown(container) {
         this.show();
+        await container.updateComplete;
+        if (this.host.singleSelect) {
+            container.focus();
+            this.arrowDown(container);
+        }
+    }
+    tab() {
+        this.hide();
+        this.host.blur();
     }
     arrowDown(container) {
         this.getNextItem(DIRECTION.Down);
@@ -146,7 +170,14 @@ export class NavigationController {
             this.hostHandlers.get(event.key).call(this);
         }
     }
-    navigateInput(event, container) {
+    navigateMainInput(event, container) {
+        event.stopPropagation();
+        if (this.mainInputHandlers.has(event.key)) {
+            event.preventDefault();
+            this.mainInputHandlers.get(event.key).call(this, container);
+        }
+    }
+    navigateSearchInput(event, container) {
         event.stopPropagation();
         if (this.searchInputHandlers.has(event.key)) {
             event.preventDefault();
@@ -154,6 +185,7 @@ export class NavigationController {
         }
     }
     navigateList(event, container) {
+        event.stopPropagation();
         if (this.listHandlers.has(event.key)) {
             event.preventDefault();
             this.listHandlers.get(event.key).call(this, container);

package/components/combo/controllers/navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/components/combo/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController } from 'lit';\nimport IgcComboListComponent from '../combo-list.js';\nimport { ComboRecord, ComboHost } from '../types.js';\n\nconst START_INDEX: Readonly<number> = -1;\n\nenum DIRECTION {\n Up = -1,\n Down = 1,\n}\n\nexport class NavigationController<T extends object>\n implements ReactiveController\n{\n protected hostHandlers = new Map(\n Object.entries({\n Escape: this.escape,\n ArrowDown: this.hostArrowDown,\n })\n );\n\n protected searchInputHandlers = new Map(\n Object.entries({\n Escape: this.escape,\n ArrowUp: this.escape,\n ArrowDown: this.inputArrowDown,\n Tab: this.inputArrowDown,\n })\n );\n\n protected listHandlers = new Map(\n Object.entries({\n ArrowDown: this.arrowDown,\n ArrowUp: this.arrowUp,\n ' ': this.space,\n Enter: this.enter,\n Escape: this.escape,\n Tab: this.escape,\n Home: this.home,\n End: this.end,\n })\n );\n\n protected _active = START_INDEX;\n\n public get input() {\n // @ts-expect-error protected access\n return this.host.input;\n }\n\n public get dataState() {\n // @ts-expect-error protected access\n return this.host.dataState;\n }\n\n public show() {\n // @ts-expect-error protected access\n this.host._show(true);\n }\n\n public hide() {\n // @ts-expect-error protected access\n this.host._hide(true);\n }\n\n public toggleSelect(index: number) {\n // @ts-expect-error protected access\n this.host.toggleSelect(index);\n }\n\n protected get currentItem() {\n const item = this.active;\n return item === START_INDEX ? START_INDEX : item;\n }\n\n protected get firstItem() {\n return this.dataState.findIndex((i: ComboRecord<T>) => i.header !== true);\n }\n\n protected get lastItem() {\n return this.dataState.length - 1;\n }\n\n protected scrollToActive(\n container: IgcComboListComponent,\n behavior: ScrollBehavior = 'auto'\n ) {\n container.element(this.active)?.scrollIntoView({\n block: 'center',\n behavior,\n });\n\n container.requestUpdate();\n }\n\n public get active() {\n return this._active;\n }\n\n public set active(node: number) {\n this._active = node;\n this.host.requestUpdate();\n }\n\n constructor(protected host: ComboHost<T>) {\n this.host.addController(this);\n }\n\n protected home(container: IgcComboListComponent) {\n this.active = this.firstItem;\n this.scrollToActive(container, 'smooth');\n }\n\n protected end(container: IgcComboListComponent) {\n this.active = this.lastItem;\n this.scrollToActive(container, 'smooth');\n }\n\n protected space() {\n const item = this.dataState[this.active];\n\n if (!item.header) {\n this.toggleSelect(this.active);\n }\n }\n\n protected escape() {\n this.hide();\n }\n\n protected enter() {\n this.space();\n this.hide();\n }\n\n protected inputArrowDown(container: IgcComboListComponent) {\n container.focus();\n this.arrowDown(container);\n }\n\n protected hostArrowDown() {\n this.show();\n }\n\n protected arrowDown(container: IgcComboListComponent) {\n this.getNextItem(DIRECTION.Down);\n this.scrollToActive(container);\n }\n\n protected arrowUp(container: IgcComboListComponent) {\n this.getNextItem(DIRECTION.Up);\n this.scrollToActive(container);\n }\n\n protected getNextItem(direction: DIRECTION) {\n const next = this.getNearestItem(this.currentItem, direction);\n\n if (next === -1) {\n if (this.active === this.firstItem) {\n this.input.focus();\n this.active = START_INDEX;\n }\n return;\n }\n\n this.active = next;\n }\n\n protected getNearestItem(startIndex: number, direction: number) {\n let index = startIndex;\n const items = this.dataState;\n\n while (items[index + direction]?.header) {\n index += direction;\n }\n\n index += direction;\n\n if (index >= 0 && index < items.length) {\n return index;\n } else {\n return -1;\n }\n }\n\n public hostConnected() {}\n\n public hostDisconnected() {\n this.active = START_INDEX;\n }\n\n public navigateTo(item: T, container: IgcComboListComponent) {\n this.active = this.dataState.findIndex((i) => i === item);\n this.scrollToActive(container, 'smooth');\n }\n\n public navigateHost(event: KeyboardEvent) {\n if (this.hostHandlers.has(event.key)) {\n event.preventDefault();\n this.hostHandlers.get(event.key)!.call(this);\n }\n }\n\n public navigateInput(event: KeyboardEvent, container: IgcComboListComponent) {\n event.stopPropagation();\n\n if (this.searchInputHandlers.has(event.key)) {\n event.preventDefault();\n this.searchInputHandlers.get(event.key)!.call(this, container);\n }\n }\n\n public navigateList(event: KeyboardEvent, container: IgcComboListComponent) {\n if (this.listHandlers.has(event.key)) {\n event.preventDefault();\n this.listHandlers.get(event.key)!.call(this, container);\n }\n }\n}\n"]}
1	+ {"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/components/combo/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController } from 'lit';\nimport IgcComboListComponent from '../combo-list.js';\nimport { ComboRecord, ComboHost } from '../types.js';\n\nconst START_INDEX: Readonly<number> = -1;\n\nenum DIRECTION {\n Up = -1,\n Down = 1,\n}\n\nexport class NavigationController<T extends object>\n implements ReactiveController\n{\n protected hostHandlers = new Map(\n Object.entries({\n Escape: this.escape,\n })\n );\n\n protected mainInputHandlers = new Map(\n Object.entries({\n Escape: this.escape,\n ArrowUp: this.hide,\n ArrowDown: this.mainInputArrowDown,\n Tab: this.tab,\n Enter: this.enter,\n })\n );\n\n protected searchInputHandlers = new Map(\n Object.entries({\n Escape: this.escape,\n ArrowUp: this.escape,\n ArrowDown: this.inputArrowDown,\n Tab: this.inputArrowDown,\n })\n );\n\n protected listHandlers = new Map(\n Object.entries({\n ArrowDown: this.arrowDown,\n ArrowUp: this.arrowUp,\n ' ': this.space,\n Enter: this.enter,\n Escape: this.escape,\n Tab: this.tab,\n Home: this.home,\n End: this.end,\n })\n );\n\n protected _active = START_INDEX;\n\n public get input() {\n // @ts-expect-error protected access\n return this.host.singleSelect ? this.host.target : this.host.input;\n }\n\n public get dataState() {\n // @ts-expect-error protected access\n return this.host.dataState;\n }\n\n public show() {\n // @ts-expect-error protected access\n this.host._show(true);\n }\n\n public hide() {\n // @ts-expect-error protected access\n this.host._hide(true);\n }\n\n public toggleSelect(index: number) {\n // @ts-expect-error protected access\n this.host.toggleSelect(index);\n }\n\n protected get currentItem() {\n const item = this.active;\n return item === START_INDEX ? START_INDEX : item;\n }\n\n protected get firstItem() {\n return this.dataState.findIndex((i: ComboRecord<T>) => i.header !== true);\n }\n\n protected get lastItem() {\n return this.dataState.length - 1;\n }\n\n protected scrollToActive(\n container: IgcComboListComponent,\n behavior: ScrollBehavior = 'auto'\n ) {\n container.element(this.active)?.scrollIntoView({\n block: 'center',\n behavior,\n });\n\n container.requestUpdate();\n }\n\n public get active() {\n return this._active;\n }\n\n public set active(node: number) {\n this._active = node;\n this.host.requestUpdate();\n }\n\n constructor(protected host: ComboHost<T>) {\n this.host.addController(this);\n }\n\n protected home(container: IgcComboListComponent) {\n this.active = this.firstItem;\n this.scrollToActive(container, 'smooth');\n }\n\n protected end(container: IgcComboListComponent) {\n this.active = this.lastItem;\n this.scrollToActive(container, 'smooth');\n }\n\n protected space() {\n if (this.active === START_INDEX) {\n return;\n }\n\n const item = this.dataState[this.active];\n\n if (!item.header) {\n this.toggleSelect(this.active);\n }\n }\n\n protected escape() {\n this.hide();\n this.host.focus();\n }\n\n protected enter() {\n if (this.active === START_INDEX) {\n return;\n }\n\n this.space();\n this.hide();\n requestAnimationFrame(() => this.input.select());\n this.host.focus();\n }\n\n protected inputArrowDown(container: IgcComboListComponent) {\n container.focus();\n this.arrowDown(container);\n }\n\n protected async mainInputArrowDown(container: IgcComboListComponent) {\n this.show();\n await container.updateComplete;\n\n if (this.host.singleSelect) {\n container.focus();\n this.arrowDown(container);\n }\n }\n\n protected tab() {\n this.hide();\n this.host.blur();\n }\n\n protected arrowDown(container: IgcComboListComponent) {\n this.getNextItem(DIRECTION.Down);\n this.scrollToActive(container);\n }\n\n protected arrowUp(container: IgcComboListComponent) {\n this.getNextItem(DIRECTION.Up);\n this.scrollToActive(container);\n }\n\n protected getNextItem(direction: DIRECTION) {\n const next = this.getNearestItem(this.currentItem, direction);\n\n if (next === -1) {\n if (this.active === this.firstItem) {\n this.input.focus();\n this.active = START_INDEX;\n }\n return;\n }\n\n this.active = next;\n }\n\n protected getNearestItem(startIndex: number, direction: number) {\n let index = startIndex;\n const items = this.dataState;\n\n while (items[index + direction]?.header) {\n index += direction;\n }\n\n index += direction;\n\n if (index >= 0 && index < items.length) {\n return index;\n } else {\n return -1;\n }\n }\n\n public hostConnected() {}\n\n public hostDisconnected() {\n this.active = START_INDEX;\n }\n\n public navigateTo(item: T, container: IgcComboListComponent) {\n this.active = this.dataState.findIndex((i) => i === item);\n this.scrollToActive(container, 'smooth');\n }\n\n public navigateHost(event: KeyboardEvent) {\n if (this.hostHandlers.has(event.key)) {\n event.preventDefault();\n this.hostHandlers.get(event.key)!.call(this);\n }\n }\n\n public navigateMainInput(\n event: KeyboardEvent,\n container: IgcComboListComponent\n ) {\n event.stopPropagation();\n\n if (this.mainInputHandlers.has(event.key)) {\n event.preventDefault();\n this.mainInputHandlers.get(event.key)!.call(this, container);\n }\n }\n\n public navigateSearchInput(\n event: KeyboardEvent,\n container: IgcComboListComponent\n ) {\n event.stopPropagation();\n\n if (this.searchInputHandlers.has(event.key)) {\n event.preventDefault();\n this.searchInputHandlers.get(event.key)!.call(this, container);\n }\n }\n\n public navigateList(event: KeyboardEvent, container: IgcComboListComponent) {\n event.stopPropagation();\n\n if (this.listHandlers.has(event.key)) {\n event.preventDefault();\n this.listHandlers.get(event.key)!.call(this, container);\n }\n }\n}\n"]}

package/components/combo/controllers/selection.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { ReactiveController } from 'lit';
-import { ComboRecord, ComboHost, Values } from '../types.js';
+import { ComboRecord, ComboHost, Item } from '../types.js';
 export declare class SelectionController<T extends object> implements ReactiveController {
     protected host: ComboHost<T>;
     private _selected;
     get dataState(): ComboRecord<T>[];
+    resetSearchTerm(): void;
     getValue(items: T[]): string;
     private handleChange;
     private getItemsByValueKey;
@@ -13,8 +14,8 @@ export declare class SelectionController<T extends object> implements ReactiveCo
     private deselectObjects;
     private selectAll;
     private deselectAll;
-    select(items?: T[] | Values<T>[], emit?: boolean): Promise<void>;
-    deselect(items?: T[] | Values<T>[], emit?: boolean): Promise<void>;
+    select(items?: Item<T>[], emit?: boolean): Promise<void>;
+    deselect(items?: Item<T>[], emit?: boolean): Promise<void>;
     get selected(): Set<T>;
     changeSelection(index: number): void;
     constructor(host: ComboHost<T>);

package/components/combo/controllers/selection.js CHANGED Viewed

@@ -2,6 +2,9 @@ export class SelectionController {
     get dataState() {
         return this.host.dataState;
     }
+    resetSearchTerm() {
+        this.host.resetSearchTerm();
+    }
     getValue(items) {
         return items
             .map((value) => {
@@ -70,13 +73,19 @@ export class SelectionController {
         this.host.requestUpdate();
     }
     async select(items, emit = false) {
+        const { singleSelect } = this.host;
+        if (singleSelect) {
+            this._selected.clear();
+            this.resetSearchTerm();
+        }
         if (!items || items.length === 0) {
-            this.selectAll();
+            !singleSelect && this.selectAll();
             return;
         }
+        const _items = singleSelect ? items.slice(0, 1) : items;
         const values = this.host.valueKey
-            ? this.getItemsByValueKey(items)
-            : items;
+            ? this.getItemsByValueKey(_items)
+            : _items;
         const selected = Array.from(this._selected.values());
         const payload = [...values, ...selected];
         if (emit &&
@@ -88,14 +97,15 @@ export class SelectionController {
             return;
         }
         if (this.host.valueKey) {
-            this.selectValueKeys(items);
+            this.selectValueKeys(_items);
         }
         else {
-            this.selectObjects(items);
+            this.selectObjects(_items);
         }
         this.host.requestUpdate();
     }
     async deselect(items, emit = false) {
+        const { singleSelect } = this.host;
         if (!items || items.length === 0) {
             if (emit &&
                 !this.handleChange({
@@ -105,12 +115,13 @@ export class SelectionController {
                 })) {
                 return;
             }
-            this.deselectAll();
+            !singleSelect && this.deselectAll();
             return;
         }
+        const _items = this.host.singleSelect ? items.slice(0, 1) : items;
         const values = this.host.valueKey
-            ? this.getItemsByValueKey(items)
-            : items;
+            ? this.getItemsByValueKey(_items)
+            : _items;
         const selected = Array.from(this._selected.values());
         const payload = structuredClone(selected);
         payload.splice(selected.indexOf(values[0]));
@@ -123,10 +134,10 @@ export class SelectionController {
             return;
         }
         if (this.host.valueKey) {
-            this.deselectValueKeys(items);
+            this.deselectValueKeys(_items);
         }
         else {
-            this.deselectObjects(items);
+            this.deselectObjects(_items);
         }
         this.host.requestUpdate();
     }

package/components/combo/controllers/selection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selection.js","sourceRoot":"","sources":["../../../../src/components/combo/controllers/selection.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController } from 'lit';\nimport {\n ComboRecord,\n ComboHost,\n Values,\n IgcComboChangeEventArgs,\n} from '../types.js';\n\nexport class SelectionController<T extends object>\n implements ReactiveController\n{\n private _selected: Set<T> = new Set();\n\n public get dataState() {\n // @ts-expect-error protected access\n return this.host.dataState;\n }\n\n public getValue(items: T[]) {\n return items\n .map((value) => {\n if (typeof value === 'object' && value !== null) {\n return this.host.displayKey\n ? String(value[this.host.displayKey])\n : String(value);\n } else {\n return String(value);\n }\n })\n .join(', ');\n }\n\n private handleChange(detail: IgcComboChangeEventArgs) {\n this.host.requestUpdate('value');\n return this.host.emitEvent('igcChange', { cancelable: true, detail });\n }\n\n private getItemsByValueKey(keys: Values<T>[]) {\n return keys.map((key) =>\n this.dataState.find((i) => i[this.host.valueKey!] === key)\n );\n }\n\n private selectValueKeys(keys: Values<T>[]) {\n if (keys.length === 0) return;\n\n this.getItemsByValueKey(keys).forEach((item) => {\n return item && this._selected.add(item);\n });\n }\n\n private deselectValueKeys(keys: Values<T>[]) {\n if (keys.length === 0) return;\n\n this.getItemsByValueKey(keys).forEach((item) => {\n return item && this._selected.delete(item);\n });\n }\n\n private selectObjects(items: T[]) {\n if (items.length === 0) return;\n\n items.forEach((item) => {\n const i = this.dataState.includes(item as ComboRecord<T>);\n if (i) {\n this._selected.add(item);\n }\n });\n }\n\n private deselectObjects(items: T[]) {\n if (items.length === 0) return;\n\n items.forEach((item) => {\n const i = this.dataState.includes(item as ComboRecord<T>);\n if (i) {\n this._selected.delete(item);\n }\n });\n }\n\n private selectAll() {\n this.dataState\n .filter((i) => !i.header)\n .forEach((item) => {\n this._selected.add(item);\n });\n this.host.requestUpdate();\n }\n\n private deselectAll() {\n this._selected.clear();\n this.host.requestUpdate();\n }\n\n public async select(items?: T[] \| Values<T>[], emit = false) {\n if (!items \|\| items.length === 0) {\n this.selectAll();\n return;\n }\n\n const values = this.host.valueKey\n ? this.getItemsByValueKey(items as Values<T>[])\n : items;\n const selected = Array.from(this._selected.values());\n const payload = [...values, ...selected] as T[];\n\n if (\n emit &&\n !this.handleChange({\n newValue: this.getValue(payload),\n items: values as T[],\n type: 'selection',\n })\n ) {\n return;\n }\n\n if (this.host.valueKey) {\n this.selectValueKeys(items as Values<T>[]);\n } else {\n this.selectObjects(items as T[]);\n }\n\n this.host.requestUpdate();\n }\n\n public async deselect(items?: T[] \| Values<T>[], emit = false) {\n if (!items \|\| items.length === 0) {\n if (\n emit &&\n !this.handleChange({\n newValue: '',\n items: Array.from(this.selected),\n type: 'deselection',\n })\n ) {\n return;\n }\n this.deselectAll();\n return;\n }\n\n const values = this.host.valueKey\n ? this.getItemsByValueKey(items as Values<T>[])\n : items;\n const selected = Array.from(this._selected.values());\n const payload = structuredClone(selected);\n\n payload.splice(selected.indexOf(values[0] as T));\n\n if (\n emit &&\n !this.handleChange({\n newValue: this.getValue(payload),\n items: values as T[],\n type: 'deselection',\n })\n ) {\n return;\n }\n\n if (this.host.valueKey) {\n this.deselectValueKeys(items as Values<T>[]);\n } else {\n this.deselectObjects(items as T[]);\n }\n\n this.host.requestUpdate();\n }\n\n public get selected(): Set<T> {\n return this._selected;\n }\n\n public changeSelection(index: number) {\n const item = this.dataState[index];\n\n if (this.host.valueKey) {\n !this.selected.has(item)\n ? this.select([item[this.host.valueKey]], true)\n : this.deselect([item[this.host.valueKey]], true);\n } else {\n !this.selected.has(item)\n ? this.select([item], true)\n : this.deselect([item], true);\n }\n }\n\n constructor(protected host: ComboHost<T>) {\n this.host.addController(this);\n }\n\n public hostConnected() {}\n\n public hostDisconnected() {}\n}\n"]}
1	+ {"version":3,"file":"selection.js","sourceRoot":"","sources":["../../../../src/components/combo/controllers/selection.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController } from 'lit';\nimport {\n ComboRecord,\n ComboHost,\n Values,\n IgcComboChangeEventArgs,\n Item,\n} from '../types.js';\n\nexport class SelectionController<T extends object>\n implements ReactiveController\n{\n private _selected: Set<T> = new Set();\n\n public get dataState() {\n // @ts-expect-error protected access\n return this.host.dataState;\n }\n\n public resetSearchTerm() {\n // @ts-expect-error protected access\n this.host.resetSearchTerm();\n }\n\n public getValue(items: T[]) {\n return items\n .map((value) => {\n if (typeof value === 'object' && value !== null) {\n return this.host.displayKey\n ? String(value[this.host.displayKey])\n : String(value);\n } else {\n return String(value);\n }\n })\n .join(', ');\n }\n\n private handleChange(detail: IgcComboChangeEventArgs) {\n this.host.requestUpdate('value');\n return this.host.emitEvent('igcChange', { cancelable: true, detail });\n }\n\n private getItemsByValueKey(keys: Values<T>[]) {\n return keys.map((key) =>\n this.dataState.find((i) => i[this.host.valueKey!] === key)\n );\n }\n\n private selectValueKeys(keys: Values<T>[]) {\n if (keys.length === 0) return;\n\n this.getItemsByValueKey(keys).forEach((item) => {\n return item && this._selected.add(item);\n });\n }\n\n private deselectValueKeys(keys: Values<T>[]) {\n if (keys.length === 0) return;\n\n this.getItemsByValueKey(keys).forEach((item) => {\n return item && this._selected.delete(item);\n });\n }\n\n private selectObjects(items: T[]) {\n if (items.length === 0) return;\n\n items.forEach((item) => {\n const i = this.dataState.includes(item as ComboRecord<T>);\n if (i) {\n this._selected.add(item);\n }\n });\n }\n\n private deselectObjects(items: T[]) {\n if (items.length === 0) return;\n\n items.forEach((item) => {\n const i = this.dataState.includes(item as ComboRecord<T>);\n if (i) {\n this._selected.delete(item);\n }\n });\n }\n\n private selectAll() {\n this.dataState\n .filter((i) => !i.header)\n .forEach((item) => {\n this._selected.add(item);\n });\n this.host.requestUpdate();\n }\n\n private deselectAll() {\n this._selected.clear();\n this.host.requestUpdate();\n }\n\n public async select(items?: Item<T>[], emit = false) {\n const { singleSelect } = this.host;\n\n if (singleSelect) {\n this._selected.clear();\n this.resetSearchTerm();\n }\n\n if (!items \|\| items.length === 0) {\n !singleSelect && this.selectAll();\n return;\n }\n\n const _items = singleSelect ? items.slice(0, 1) : items;\n\n const values = this.host.valueKey\n ? this.getItemsByValueKey(_items as Values<T>[])\n : _items;\n const selected = Array.from(this._selected.values());\n const payload = [...values, ...selected] as T[];\n\n if (\n emit &&\n !this.handleChange({\n newValue: this.getValue(payload),\n items: values as T[],\n type: 'selection',\n })\n ) {\n return;\n }\n\n if (this.host.valueKey) {\n this.selectValueKeys(_items as Values<T>[]);\n } else {\n this.selectObjects(_items as T[]);\n }\n\n this.host.requestUpdate();\n }\n\n public async deselect(items?: Item<T>[], emit = false) {\n const { singleSelect } = this.host;\n\n if (!items \|\| items.length === 0) {\n if (\n emit &&\n !this.handleChange({\n newValue: '',\n items: Array.from(this.selected),\n type: 'deselection',\n })\n ) {\n return;\n }\n\n !singleSelect && this.deselectAll();\n return;\n }\n\n const _items = this.host.singleSelect ? items.slice(0, 1) : items;\n const values = this.host.valueKey\n ? this.getItemsByValueKey(_items as Values<T>[])\n : _items;\n const selected = Array.from(this._selected.values());\n const payload = structuredClone(selected);\n\n payload.splice(selected.indexOf(values[0] as T));\n\n if (\n emit &&\n !this.handleChange({\n newValue: this.getValue(payload),\n items: values as T[],\n type: 'deselection',\n })\n ) {\n return;\n }\n\n if (this.host.valueKey) {\n this.deselectValueKeys(_items as Values<T>[]);\n } else {\n this.deselectObjects(_items as T[]);\n }\n\n this.host.requestUpdate();\n }\n\n public get selected(): Set<T> {\n return this._selected;\n }\n\n public changeSelection(index: number) {\n const item = this.dataState[index];\n\n if (this.host.valueKey) {\n !this.selected.has(item)\n ? this.select([item[this.host.valueKey]], true)\n : this.deselect([item[this.host.valueKey]], true);\n } else {\n !this.selected.has(item)\n ? this.select([item], true)\n : this.deselect([item], true);\n }\n }\n\n constructor(protected host: ComboHost<T>) {\n this.host.addController(this);\n }\n\n public hostConnected() {}\n\n public hostDisconnected() {}\n}\n"]}

package/components/combo/themes/light/combo.base.css.js CHANGED Viewed

@@ -43,10 +43,12 @@ export const styles = css `:host {
      text-overflow: ellipsis;
   cursor: pointer;
 }
-:host > igc-input::part(input)::-moz-selection {
+:host(:not([single-select])) > igc-input::part(input)::-moz-selection {
   background: transparent;
 }
-:host > igc-input::part(input)::selection {
+:host(:not([single-select])) > igc-input::part(input)::selection {
   background: transparent;
 }
@@ -61,22 +63,27 @@ export const styles = css `:host {
       -ms-user-select: none;
           user-select: none;
 }
-:host([disabled]) igc-input::part(input)::-webkit-input-placeholder {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]) igc-input::part(input)::-moz-placeholder {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]) igc-input::part(input):-ms-input-placeholder {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+:host([disabled]) igc-input::part(input)::-moz-selection {
+  background: transparent;
 }
-:host([disabled]) igc-input::part(input)::-ms-input-placeholder {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+:host([disabled]) igc-input::part(input)::selection {
+  background: transparent;
 }
-:host([disabled]) igc-input::part(label),
-:host([disabled]) igc-input::part(input)::placeholder,
-:host([disabled]) ::slotted([slot=helper-text]) {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+[part=helper-text] {
+  line-height: 1;
+}
+[part=helper-text] ::slotted([slot=helper-text]) {
+  font-family: var(--ig-caption-font-family);
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+  line-height: inherit;
 }
 [part=clear-icon],

package/components/combo/themes/light/combo.base.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo.base.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2KvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host {\n --component-size: var(--ig-size, var(--ig-size-medium));\n display: block;\n font-family: var(--ig-font-family);\n}\n:host > igc-input::part(input) {\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n:host > igc-input::part(input)::-moz-selection {\n background: transparent;\n}\n:host > igc-input::part(input)::selection {\n background: transparent;\n}\n\n:host([invalid]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n:host([disabled]) igc-input::part(input)::-~~webkit~~-~~input-placeholder~~ {\n ~~color~~: ~~hsla(var(--ig-gray-400), var(--ig-gray-a))~~;\n}\n:host([disabled]) igc-input::part(input)~~::-moz-placeholder~~ {\n ~~color~~: ~~hsla(var(--ig~~-~~gray~~-~~400),~~ ~~var(--ig-gray-a))~~;\n}\n~~:host(~~[~~disabled~~]) ~~igc-input~~::~~part~~(~~input~~)~~:-ms-input-placeholder~~ {\n ~~color~~: ~~hsla(~~var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a));\n~~}\n~~:~~host([disabled])~~ ~~igc-input::part~~(~~input)::-ms~~-~~input~~-~~placeholder {\~~n ~~color~~: ~~hsla(~~var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a));\n~~}\n~~:~~host~~(~~[disabled]) igc~~-~~input::part(label~~),\n~~:host([disabled]) igc~~-~~input::part(input)::placeholder,\n~~:~~host([disabled])~~ ~~::slotted~~(~~[slot=helper~~-text]) {\n ~~color~~: ~~hsla(~~var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a));\n}\n\n[part=clear-icon],\n[part=toggle-icon],\n[part~=case-icon] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n cursor: pointer;\n}\n\n[part=list-wrapper] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) 0.25rem), 0.25rem);\n position: absolute;\n width: 100%;\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n -webkit-box-shadow: var(--ig-elevation-8);\n box-shadow: var(--ig-elevation-8);\n overflow: hidden;\n outline-style: none;\n z-index: 999999;\n}\n[part=list-wrapper] igc-input {\n --ig-size: var(--ig-size-small);\n --ig-theme: material;\n}\n[part=list-wrapper] igc-input::part(container) {\n background: transparent;\n -webkit-border-start: 0;\n border-inline-start: 0;\n border-inline-end-color: transparent;\n -webkit-border-before: 0;\n border-block-start: 0;\n border-radius: 0;\n}\n[part=list-wrapper] igc-input::part(start) {\n display: none;\n}\n[part=list-wrapper] igc-input::part(input) {\n border-radius: 0;\n padding: 0;\n -webkit-border-start: 0;\n border-inline-start: 0;\n border-inline-end-color: transparent;\n -webkit-border-before: 0;\n border-block-start: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n[part=list-wrapper] igc-input::part(input)::-moz-selection {\n background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] igc-input::part(input)::selection {\n background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] [part=\"case-icon active\"] {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part=filter-input] {\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 4px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 8px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n z-index: 26;\n}\n\n[part=list] {\n min-height: 12.5rem !important;\n outline-style: none;\n}\n\n[part=case-icon] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[part=\"case-icon active\"] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part=empty] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n padding: 1rem 1.5rem;\n font-size: 0.8125rem;\n}`;\n"]}
1	+ {"version":3,"file":"combo.base.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host {\n --component-size: var(--ig-size, var(--ig-size-medium));\n display: block;\n font-family: var(--ig-font-family);\n}\n:host > igc-input::part(input) {\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n\n:host(:not([single-select])) > igc-input::part(input)::-moz-selection {\n background: transparent;\n}\n\n:host(:not([single-select])) > igc-input::part(input)::selection {\n background: transparent;\n}\n\n:host([invalid]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n:host([disabled]) igc-input::part(input)::-moz-selection {\n background: transparent;\n}\n:host([disabled]) igc-input::part(input)::selection {\n background: transparent;\n}\n\n[part=helper-text] {\n line-height: 1;\n}\n[part=helper-text] ::slotted([slot=helper-text]) {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n line-height: inherit;\n}\n\n[part=clear-icon],\n[part=toggle-icon],\n[part~=case-icon] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n cursor: pointer;\n}\n\n[part=list-wrapper] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) 0.25rem), 0.25rem);\n position: absolute;\n width: 100%;\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n -webkit-box-shadow: var(--ig-elevation-8);\n box-shadow: var(--ig-elevation-8);\n overflow: hidden;\n outline-style: none;\n z-index: 999999;\n}\n[part=list-wrapper] igc-input {\n --ig-size: var(--ig-size-small);\n --ig-theme: material;\n}\n[part=list-wrapper] igc-input::part(container) {\n background: transparent;\n -webkit-border-start: 0;\n border-inline-start: 0;\n border-inline-end-color: transparent;\n -webkit-border-before: 0;\n border-block-start: 0;\n border-radius: 0;\n}\n[part=list-wrapper] igc-input::part(start) {\n display: none;\n}\n[part=list-wrapper] igc-input::part(input) {\n border-radius: 0;\n padding: 0;\n -webkit-border-start: 0;\n border-inline-start: 0;\n border-inline-end-color: transparent;\n -webkit-border-before: 0;\n border-block-start: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n[part=list-wrapper] igc-input::part(input)::-moz-selection {\n background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] igc-input::part(input)::selection {\n background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n[part=list-wrapper] [part=\"case-icon active\"] {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part=filter-input] {\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 4px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * 8px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n z-index: 26;\n}\n\n[part=list] {\n min-height: 12.5rem !important;\n outline-style: none;\n}\n\n[part=case-icon] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[part=\"case-icon active\"] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part=empty] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n padding: 1rem 1.5rem;\n font-size: 0.8125rem;\n}`;\n"]}

package/components/combo/themes/light/combo.bootstrap.css.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+:host [part=helper-text] {
+  margin-top: 0.25rem;
+}
 :host ::slotted([slot=helper-text]) {
   font-family: var(--ig-body-2-font-family);
   font-size: var(--ig-body-2-font-size);
@@ -26,6 +29,10 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   border-color: hsla(var(--ig-error-500), var(--ig-error-a));
 }
+:host([disabled]) ::slotted([slot=helper-text]) {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
 igc-input[readonly]:not([disabled])::part(prefix),
 igc-input[readonly]:not([disabled])::part(suffix) {
   color: hsla(var(--ig-gray-800), var(--ig-gray-a));
@@ -65,6 +72,10 @@ igc-input[disabled]::part(input) {
   border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
+[part=helper-text] {
+  margin-top: 0.25rem;
+}
 [part=clear-icon] {
   -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));
           border-inline-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));
@@ -87,6 +98,27 @@ igc-input[disabled]::part(input) {
           border-block-end: 0.0625rem solid hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
+:host([disabled]) igc-input::part(input)::-webkit-input-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input)::-moz-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input):-ms-input-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input)::-ms-input-placeholder {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(label),
+:host([disabled]) igc-input::part(input)::placeholder,
+:host([disabled]) ::slotted([slot=helper-text]) {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
 :host([disabled]) [part=clear-icon] {
   -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));
           border-inline-end: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));

package/components/combo/themes/light/combo.bootstrap.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2FvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length */\n:host ::slotted([slot=helper-text]) {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([invalid]) igc-input[readonly]:not([disabled])::part(input),\n:host([invalid]:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix) {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(container) {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(container) {\n background: var(--input-background, #fff);\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(input) {\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled] {\n pointer-events: none;\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(container) {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(input) {\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part=clear-icon] {\n -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-inline-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n[part=list-wrapper] igc-input::part(suffix) {\n background: transparent;\n border: none;\n border-radius: 0;\n}\n[part=list-wrapper] [part=search-input] [part~=case-icon] {\n -webkit-border-after: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-block-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n -webkit-transition: border 0.15s ease-out;\n -o-transition: border 0.15s ease-out;\n transition: border 0.15s ease-out;\n}\n[part=list-wrapper] [part=search-input]:focus [part~=case-icon], [part=list-wrapper] [part=search-input]:focus-within [part~=case-icon] {\n -webkit-border-after: 0.0625rem solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-block-end: 0.0625rem solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([disabled]) [part=clear-icon] {\n -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-inline-end: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}
1	+ {"version":3,"file":"combo.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length */\n:host [part=helper-text] {\n margin-top: 0.25rem;\n}\n:host ::slotted([slot=helper-text]) {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([invalid]) igc-input[readonly]:not([disabled])::part(input),\n:host([invalid]:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix) {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(container) {\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(container) {\n background: var(--input-background, #fff);\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(input) {\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled] {\n pointer-events: none;\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(container) {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(input) {\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part=helper-text] {\n margin-top: 0.25rem;\n}\n\n[part=clear-icon] {\n -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-inline-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n[part=list-wrapper] igc-input::part(suffix) {\n background: transparent;\n border: none;\n border-radius: 0;\n}\n[part=list-wrapper] [part=search-input] [part~=case-icon] {\n -webkit-border-after: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-block-end: 0.0625rem solid hsla(var(--ig-gray-400), var(--ig-gray-a));\n -webkit-transition: border 0.15s ease-out;\n -o-transition: border 0.15s ease-out;\n transition: border 0.15s ease-out;\n}\n[part=list-wrapper] [part=search-input]:focus [part~=case-icon], [part=list-wrapper] [part=search-input]:focus-within [part~=case-icon] {\n -webkit-border-after: 0.0625rem solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-block-end: 0.0625rem solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([disabled]) igc-input::part(input)::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-moz-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input):-ms-input-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-ms-input-placeholder {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(label),\n:host([disabled]) igc-input::part(input)::placeholder,\n:host([disabled]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part=clear-icon] {\n -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-inline-end: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}

package/components/combo/themes/light/combo.fluent.css.js CHANGED Viewed

@@ -1,5 +1,12 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+[part=helper-text] {
+  margin-top: 0.3125rem;
+}
+[part=helper-text] ::slotted([slot=helper-text]) {
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
 :host {
   --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);
 }
@@ -24,6 +31,10 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   height: calc(var(--size) - 0.25rem);
 }
+:host([disabled]) [part=helper-text] ::slotted([slot=helper-text]) {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
 :host ::slotted([slot=helper-text]) {
   font-family: var(--ig-caption-font-family);
   font-size: var(--ig-caption-font-size);
@@ -36,8 +47,30 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   margin-bottom: var(--ig-caption-margin-bottom);
   display: block;
   padding: 0;
-  margin-top: 0.5rem;
-  color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  margin-top: 0.3125rem;
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input)::-webkit-input-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input)::-moz-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input):-ms-input-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(input)::-ms-input-placeholder {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+:host([disabled]) igc-input::part(label),
+:host([disabled]) igc-input::part(input)::placeholder,
+:host([disabled]) ::slotted([slot=helper-text]) {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 :host([invalid]:focus-within) igc-input::part(input) {

package/components/combo/themes/light/combo.fluent.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n:host {\n --size: max(var(--is-large, 1) 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(container) {\n border-width: 0.125rem;\n}\n\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-width: 0.125rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(prefix) {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(suffix) {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(input) {\n height: calc(var(--size) - 0.25rem);\n}\n\n:host ::slotted([slot=helper-text]) {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n display: block;\n padding: 0;\n margin-top: 0.~~5rem~~;\n color: hsla(var(--ig-gray-~~600~~), var(--ig-gray-a));\n}\n\n:host([invalid]:focus-within) igc-input::part(input) {\n height: calc(var(--size) - 0.25rem);\n}\n:host([invalid]:focus-within) igc-input::part(suffix) {\n height: var(--size);\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n -webkit-margin-before: -0.125rem;\n margin-block-start: -0.125rem;\n}\n:host([invalid]:focus-within) igc-input::part(prefix) {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n -webkit-margin-before: -0.125rem;\n margin-block-start: -0.125rem;\n}\n\n[part=filter-input] {\n padding: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 4px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 2px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[part=list-wrapper] igc-input::part(suffix) {\n background: transparent;\n}\n[part=list-wrapper] igc-input::part(input) {\n height: var(--size);\n}`;\n"]}
1	+ {"version":3,"file":"combo.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/combo/themes/light/combo.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length / / stylelint-disable max-line-length /\n[part=helper-text] {\n margin-top: 0.3125rem;\n}\n[part=helper-text] ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host {\n --size: max(var(--is-large, 1) 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(container) {\n border-width: 0.125rem;\n}\n\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-width: 0.125rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(prefix) {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(suffix) {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(input) {\n height: calc(var(--size) - 0.25rem);\n}\n\n:host([disabled]) [part=helper-text] ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host ::slotted([slot=helper-text]) {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n display: block;\n padding: 0;\n margin-top: 0.3125rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-moz-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input):-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(input)::-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled]) igc-input::part(label),\n:host([disabled]) igc-input::part(input)::placeholder,\n:host([disabled]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([invalid]:focus-within) igc-input::part(input) {\n height: calc(var(--size) - 0.25rem);\n}\n:host([invalid]:focus-within) igc-input::part(suffix) {\n height: var(--size);\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n -webkit-margin-before: -0.125rem;\n margin-block-start: -0.125rem;\n}\n:host([invalid]:focus-within) igc-input::part(prefix) {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n -webkit-margin-before: -0.125rem;\n margin-block-start: -0.125rem;\n}\n\n[part=filter-input] {\n padding: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 4px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 2px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[part=list-wrapper] igc-input::part(suffix) {\n background: transparent;\n}\n[part=list-wrapper] igc-input::part(input) {\n height: var(--size);\n}`;\n"]}

package/components/combo/themes/light/combo.indigo.css.js CHANGED Viewed

@@ -4,13 +4,22 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   background: hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
+[part=helper-text] {
+  margin-top: 0.375rem;
+  padding-inline: max(var(--is-large, 1) * 1rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 0.75rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.5rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+}
 :host ::slotted([slot=helper-text]) {
   color: hsla(var(--ig-gray-600), var(--ig-gray-a));
 }
-:host([disabled]) ::slotted([slot=helper-text]) {
+:host([disabled]) [part=helper-text] ::slotted([slot=helper-text]) {
   color: hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
+:host([disabled]) [part=toggle-icon] {
+  background: transparent;
+}
 :host(:focus-within) igc-input[readonly]:not([disabled])::part(container)::after {
   -webkit-transform: scaleY(1);
@@ -25,17 +34,18 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   color: var(--label-focus-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
 }
-:host ::slotted([slot=helper-text]) {
-  font-family: var(--ig-caption-font-family);
-  font-size: var(--ig-caption-font-size);
-  font-weight: var(--ig-caption-font-weight);
-  font-style: var(--ig-caption-font-style);
-  line-height: var(--ig-caption-line-height);
-  letter-spacing: var(--ig-caption-letter-spacing);
-  text-transform: var(--ig-caption-text-transform);
-  margin-top: var(--ig-caption-margin-top);
-  margin-bottom: var(--ig-caption-margin-bottom);
-  padding: 0;
+[part=helper-text] {
+  margin-top: 0.375rem;
+  padding-inline: max(var(--is-large, 1) * 1rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 0.75rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.5rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+}
+[part=helper-text] ::slotted([slot=helper-text]) {
   color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+}
+:host([disabled]) [part=helper-text] ::slotted([slot=helper-text]) {
+  color: hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+:host([disabled]) [part=toggle-icon] {
+  background: transparent;
 }`;
 //# sourceMappingURL=combo.indigo.css.js.map