igniteui-webcomponents 6.3.4 → 6.4.0-alpha.1

package/components/combo/controllers/navigation.d.ts

@@ -1,50 +1,46 @@
-import type { ReactiveController } from 'lit';
+import type { Ref } from 'lit/directives/ref.js';
+import type IgcInputComponent from '../../input/input.js';
 import type IgcComboListComponent from '../combo-list.js';
-import type { ComboHost, ComboRecord } from '../types.js';
+import type { ComboHost } from '../types.js';
 import type { DataController } from './data.js';
-declare enum DIRECTION {
-    Up = -1,
-    Down = 1
-}
-export declare class NavigationController<T extends object> implements ReactiveController {
-    protected host: ComboHost<T>;
+type ComboNavigationConfig = {
+    /** The primary input of the combo component. */
+    input: Ref<IgcInputComponent>;
+    /** The search input of the combo component. */
+    search: Ref<IgcInputComponent>;
+    /** The combo virtualized dropdown list. */
+    list: Ref<IgcComboListComponent>;
+};
+export declare class ComboNavigationController<T extends object> {
+    protected combo: ComboHost<T>;
     protected state: DataController<T>;
-    protected hostHandlers: Map<string, () => void>;
-    protected mainInputHandlers: Map<string, (() => void) | (() => void) | ((container: IgcComboListComponent) => Promise<void>) | (() => void) | (() => void)>;
-    protected searchInputHandlers: Map<string, (() => void) | ((container: IgcComboListComponent) => void)>;
-    protected listHandlers: Map<string, (() => void) | (() => void) | (() => void) | ((container: IgcComboListComponent) => void) | ((container: IgcComboListComponent) => void) | (() => void) | ((container: IgcComboListComponent) => void) | ((container: IgcComboListComponent) => void)>;
-    protected _active: number;
-    get input(): import("../../input/input.js").default;
-    get dataState(): ComboRecord<T>[];
-    show(): void;
-    hide(): void;
-    toggleSelect(index: number): void;
-    select(index: number): void;
-    protected get currentItem(): number;
-    protected get firstItem(): number;
-    protected get lastItem(): number;
-    protected scrollToActive(container: IgcComboListComponent, behavior?: ScrollBehavior): void;
+    private _active;
+    private _config;
     get active(): number;
-    set active(node: number);
-    constructor(host: ComboHost<T>, state: DataController<T>);
-    protected home(container: IgcComboListComponent): void;
-    protected end(container: IgcComboListComponent): void;
-    protected space(): void;
-    protected escape(): void;
-    protected enter(): void;
-    protected inputArrowDown(container: IgcComboListComponent): void;
-    protected mainInputArrowDown(container: IgcComboListComponent): Promise<void>;
-    protected tab(): void;
-    protected arrowDown(container: IgcComboListComponent): void;
-    protected arrowUp(container: IgcComboListComponent): void;
-    protected getNextItem(direction: DIRECTION): void;
-    protected getNearestItem(startIndex: number, direction: number): number;
-    hostConnected(): void;
+    set active(value: number);
+    get input(): IgcInputComponent;
+    get searchInput(): IgcInputComponent;
+    get list(): IgcComboListComponent;
+    protected get _firstItem(): number;
+    protected get _lastItem(): number;
+    protected _hide(): Promise<boolean>;
+    protected _show(): Promise<boolean>;
+    protected _toggleSelection(index: number): void;
+    protected _select(index: number): void;
+    private _onSpace;
+    private _onEnter;
+    private _onTab;
+    private _onEscape;
+    private _onMainInputArrowDown;
+    private _onSearchArrowDown;
+    private _onHome;
+    private _onEnd;
+    private _onArrowUp;
+    private _onArrowDown;
+    private _scrollToActive;
+    private _getNearestItem;
+    private _getNextItem;
+    constructor(combo: ComboHost<T>, state: DataController<T>, config: ComboNavigationConfig);
     hostDisconnected(): void;
-    navigateTo(item: T, container: IgcComboListComponent): void;
-    navigateHost(event: KeyboardEvent): void;
-    navigateMainInput(event: KeyboardEvent, container: IgcComboListComponent): void;
-    navigateSearchInput(event: KeyboardEvent, container: IgcComboListComponent): void;
-    navigateList(event: KeyboardEvent, container: IgcComboListComponent): void;
 }
 export {};

package/components/combo/controllers/navigation.js

@@ -1,198 +1,176 @@
-const START_INDEX = -1;
-var DIRECTION;
-(function (DIRECTION) {
-    DIRECTION[DIRECTION["Up"] = -1] = "Up";
-    DIRECTION[DIRECTION["Down"] = 1] = "Down";
-})(DIRECTION || (DIRECTION = {}));
-export class NavigationController {
+import { addKeybindings, altKey, arrowDown, arrowUp, endKey, enterKey, escapeKey, homeKey, shiftKey, spaceBar, tabKey, } from '../../common/controllers/key-bindings.js';
+export class ComboNavigationController {
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        this._active = value;
+        this.combo.requestUpdate();
+    }
     get input() {
-        return this.host.singleSelect ? this.host._input : this.host._searchInput;
+        return this._config.input.value;
     }
-    get dataState() {
-        return this.state.dataState;
+    get searchInput() {
+        return this._config.search.value;
     }
-    show() {
-        this.host._show(true);
+    get list() {
+        return this._config.list.value;
     }
-    hide() {
-        this.host._hide(true);
+    get _firstItem() {
+        return this.state.dataState.findIndex((rec) => !rec.header);
     }
-    toggleSelect(index) {
-        this.host.toggleSelect(index);
+    get _lastItem() {
+        return this.state.dataState.length - 1;
     }
-    select(index) {
-        this.host.selectByIndex(index);
+    async _hide() {
+        return await this.combo._hide(true);
     }
-    get currentItem() {
-        const item = this.active;
-        return item === START_INDEX ? START_INDEX : item;
+    async _show() {
+        return await this.combo._show(true);
     }
-    get firstItem() {
-        return this.dataState.findIndex((i) => i.header !== true);
+    _toggleSelection(index) {
+        this.combo.toggleSelect(index);
     }
-    get lastItem() {
-        return this.dataState.length - 1;
+    _select(index) {
+        this.combo.selectByIndex(index);
     }
-    scrollToActive(container, behavior = 'auto') {
-        container.element(this.active)?.scrollIntoView({
+    _scrollToActive(behavior) {
+        this.list.element(this.active)?.scrollIntoView({
             block: 'center',
-            behavior,
+            behavior: behavior ?? 'auto',
         });
-        container.requestUpdate();
+        this.list.requestUpdate();
     }
-    get active() {
-        return this._active;
-    }
-    set active(node) {
-        this._active = node;
-        this.host.requestUpdate();
-    }
-    constructor(host, state) {
-        this.host = host;
-        this.state = state;
-        this.hostHandlers = new Map(Object.entries({
-            Escape: this.escape,
-        }));
-        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,
-            ArrowUp: this.escape,
-            ArrowDown: this.inputArrowDown,
-            Tab: this.inputArrowDown,
-        }));
-        this.listHandlers = new Map(Object.entries({
-            ArrowDown: this.arrowDown,
-            ArrowUp: this.arrowUp,
-            ' ': this.space,
-            Enter: this.enter,
-            Escape: this.escape,
-            Tab: this.tab,
-            Home: this.home,
-            End: this.end,
-        }));
-        this._active = START_INDEX;
-        this.host.addController(this);
-    }
-    home(container) {
-        this.active = this.firstItem;
-        this.scrollToActive(container, 'smooth');
-    }
-    end(container) {
-        this.active = this.lastItem;
-        this.scrollToActive(container, 'smooth');
-    }
-    space() {
-        if (this.active === START_INDEX) {
-            return;
+    _getNearestItem(start, delta) {
+        let index = start;
+        const items = this.state.dataState;
+        while (items[index + delta]?.header) {
+            index += delta;
         }
-        const item = this.dataState[this.active];
-        if (!item.header) {
-            this.toggleSelect(this.active);
+        index += delta;
+        return index >= 0 && index < items.length ? index : -1;
+    }
+    _getNextItem(delta) {
+        const next = this._getNearestItem(this._active, delta);
+        if (next === -1 && this.active === this._firstItem) {
+            this.searchInput.checkVisibility()
+                ? this.searchInput.focus()
+                : this._onEscape();
         }
+        this.active = next;
     }
-    escape() {
-        this.hide();
-        this.host.focus();
-    }
-    enter() {
-        if (this.active === START_INDEX) {
-            return;
-        }
-        const item = this.dataState[this.active];
-        if (!item.header && this.host.singleSelect) {
-            this.select(this.active);
-        }
-        this.hide();
-        requestAnimationFrame(() => this.input.select());
-        this.host.focus();
-    }
-    inputArrowDown(container) {
-        container.focus();
-        this.arrowDown(container);
-    }
-    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);
-        this.scrollToActive(container);
-    }
-    arrowUp(container) {
-        this.getNextItem(DIRECTION.Up);
-        this.scrollToActive(container);
-    }
-    getNextItem(direction) {
-        const next = this.getNearestItem(this.currentItem, direction);
-        if (next === -1) {
-            if (this.active === this.firstItem) {
+    constructor(combo, state, config) {
+        this.combo = combo;
+        this.state = state;
+        this._active = -1;
+        this._onSpace = () => {
+            if (this._active === -1) {
+                return;
+            }
+            const item = this.state.dataState[this._active];
+            if (!item.header) {
+                this._toggleSelection(this._active);
+            }
+        };
+        this._onEnter = async () => {
+            if (this._active === -1) {
+                return;
+            }
+            const item = this.state.dataState[this._active];
+            if (!item.header && this.combo.singleSelect) {
+                this._select(this.active);
+            }
+            if (await this._hide()) {
+                this.input.select();
+                this.combo.focus();
+            }
+        };
+        this._onTab = async ({ shiftKey }) => {
+            if (this.combo.open) {
+                if (shiftKey) {
+                    this.combo.focus();
+                }
+                await this._hide();
+            }
+        };
+        this._onEscape = async () => {
+            if (!this.combo.open) {
+                this.combo.clearSelection();
+            }
+            if (await this._hide()) {
                 this.input.focus();
-                this.active = START_INDEX;
             }
-            return;
-        }
-        this.active = next;
-    }
-    getNearestItem(startIndex, direction) {
-        let index = startIndex;
-        const items = this.dataState;
-        while (items[index + direction]?.header) {
-            index += direction;
-        }
-        index += direction;
-        if (index >= 0 && index < items.length) {
-            return index;
-        }
-        return -1;
+        };
+        this._onMainInputArrowDown = async () => {
+            if (!this.combo.open && !(await this._show())) {
+                return;
+            }
+            if (this.combo.singleSelect) {
+                this._onSearchArrowDown();
+            }
+        };
+        this._onSearchArrowDown = () => {
+            this.list.focus();
+            this._onArrowDown();
+        };
+        this._onHome = () => {
+            this.active = this._firstItem;
+            this._scrollToActive();
+        };
+        this._onEnd = () => {
+            this.active = this._lastItem;
+            this._scrollToActive();
+        };
+        this._onArrowUp = () => {
+            this._getNextItem(-1);
+            this._scrollToActive();
+        };
+        this._onArrowDown = () => {
+            this._getNextItem(1);
+            this._scrollToActive();
+        };
+        this.combo.addController(this);
+        this._config = config;
+        const bindingDefaults = {
+            triggers: ['keydownRepeat'],
+        };
+        const skip = () => this.combo.disabled;
+        addKeybindings(this.combo, { skip, bindingDefaults })
+            .set(tabKey, this._onTab, { preventDefault: false })
+            .set([shiftKey, tabKey], this._onTab, {
+            preventDefault: false,
+        })
+            .set(escapeKey, this._onEscape);
+        addKeybindings(this.combo, {
+            skip,
+            ref: this._config.input,
+            bindingDefaults,
+        })
+            .set(arrowUp, async () => await this._hide())
+            .set([altKey, arrowDown], this._onMainInputArrowDown)
+            .set(arrowDown, this._onMainInputArrowDown)
+            .set(enterKey, this._onEnter);
+        addKeybindings(this.combo, {
+            skip,
+            ref: this._config.search,
+            bindingDefaults,
+        })
+            .set(arrowUp, this._onEscape)
+            .set(arrowDown, this._onSearchArrowDown);
+        addKeybindings(this.combo, {
+            skip,
+            ref: this._config.list,
+            bindingDefaults,
+        })
+            .set(arrowUp, this._onArrowUp)
+            .set(arrowDown, this._onArrowDown)
+            .set(homeKey, this._onHome)
+            .set(endKey, this._onEnd)
+            .set(spaceBar, this._onSpace)
+            .set(enterKey, this._onEnter);
     }
-    hostConnected() { }
     hostDisconnected() {
-        this.active = START_INDEX;
-    }
-    navigateTo(item, container) {
-        this.active = this.dataState.indexOf(item);
-        this.scrollToActive(container, 'smooth');
-    }
-    navigateHost(event) {
-        if (this.hostHandlers.has(event.key)) {
-            event.preventDefault();
-            this.hostHandlers.get(event.key).call(this);
-        }
-    }
-    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();
-            this.searchInputHandlers.get(event.key).call(this, container);
-        }
-    }
-    navigateList(event, container) {
-        event.stopPropagation();
-        if (this.listHandlers.has(event.key)) {
-            event.preventDefault();
-            this.listHandlers.get(event.key).call(this, container);
-        }
+        this._active = -1;
     }
 }
 //# sourceMappingURL=navigation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/components/combo/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\n\nimport type IgcComboListComponent from '../combo-list.js';\nimport type { ComboHost, ComboRecord } from '../types.js';\nimport type { DataController } from './data.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._input : this.host._searchInput;\n  }\n\n  public get dataState() {\n    return this.state.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  public select(index: number) {\n    // @ts-expect-error protected access\n    this.host.selectByIndex(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(\n    protected host: ComboHost<T>,\n    protected state: DataController<T>\n  ) {\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    const item = this.dataState[this.active];\n\n    if (!item.header && this.host.singleSelect) {\n      this.select(this.active);\n    }\n\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    }\n    return -1;\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.indexOf(item as ComboRecord<T>);\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"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/components/combo/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  enterKey,\n  escapeKey,\n  homeKey,\n  type KeyBindingOptions,\n  shiftKey,\n  spaceBar,\n  tabKey,\n} from '../../common/controllers/key-bindings.js';\nimport type IgcInputComponent from '../../input/input.js';\nimport type IgcComboListComponent from '../combo-list.js';\nimport type { ComboHost } from '../types.js';\nimport type { DataController } from './data.js';\n\ntype ComboNavigationConfig = {\n  /** The primary input of the combo component. */\n  input: Ref<IgcInputComponent>;\n  /** The search input of the combo component. */\n  search: Ref<IgcInputComponent>;\n  /** The combo virtualized dropdown list. */\n  list: Ref<IgcComboListComponent>;\n};\n\nexport class ComboNavigationController<T extends object> {\n  private _active = -1;\n  private _config: ComboNavigationConfig;\n\n  public get active(): number {\n    return this._active;\n  }\n\n  public set active(value: number) {\n    this._active = value;\n    this.combo.requestUpdate();\n  }\n\n  public get input(): IgcInputComponent {\n    return this._config.input.value!;\n  }\n\n  public get searchInput(): IgcInputComponent {\n    return this._config.search.value!;\n  }\n\n  public get list(): IgcComboListComponent {\n    return this._config.list.value!;\n  }\n\n  protected get _firstItem(): number {\n    return this.state.dataState.findIndex((rec) => !rec.header);\n  }\n\n  protected get _lastItem(): number {\n    return this.state.dataState.length - 1;\n  }\n\n  protected async _hide(): Promise<boolean> {\n    // @ts-expect-error: protected access\n    return await this.combo._hide(true);\n  }\n\n  protected async _show(): Promise<boolean> {\n    // @ts-expect-error: protected access\n    return await this.combo._show(true);\n  }\n\n  protected _toggleSelection(index: number): void {\n    // @ts-expect-error protected access\n    this.combo.toggleSelect(index);\n  }\n\n  protected _select(index: number): void {\n    // @ts-expect-error: protected access\n    this.combo.selectByIndex(index);\n  }\n\n  private _onSpace = (): void => {\n    if (this._active === -1) {\n      return;\n    }\n\n    const item = this.state.dataState[this._active];\n    if (!item.header) {\n      this._toggleSelection(this._active);\n    }\n  };\n\n  private _onEnter = async (): Promise<void> => {\n    if (this._active === -1) {\n      return;\n    }\n\n    const item = this.state.dataState[this._active];\n\n    if (!item.header && this.combo.singleSelect) {\n      this._select(this.active);\n    }\n\n    if (await this._hide()) {\n      this.input.select();\n      this.combo.focus();\n    }\n  };\n\n  private _onTab = async ({ shiftKey }: KeyboardEvent): Promise<void> => {\n    if (this.combo.open) {\n      if (shiftKey) {\n        // Move focus to the main input of the combo\n        // before the Shift+Tab behavior kicks in.\n        this.combo.focus();\n      }\n      await this._hide();\n    }\n  };\n\n  private _onEscape = async (): Promise<void> => {\n    if (!this.combo.open) {\n      this.combo.clearSelection();\n    }\n\n    if (await this._hide()) {\n      this.input.focus();\n    }\n  };\n\n  private _onMainInputArrowDown = async (): Promise<void> => {\n    if (!this.combo.open && !(await this._show())) {\n      return;\n    }\n\n    if (this.combo.singleSelect) {\n      this._onSearchArrowDown();\n    }\n  };\n\n  private _onSearchArrowDown = (): void => {\n    this.list.focus();\n    this._onArrowDown();\n  };\n\n  private _onHome = (): void => {\n    this.active = this._firstItem;\n    this._scrollToActive();\n  };\n\n  private _onEnd = (): void => {\n    this.active = this._lastItem;\n    this._scrollToActive();\n  };\n\n  private _onArrowUp = (): void => {\n    this._getNextItem(-1);\n    this._scrollToActive();\n  };\n\n  private _onArrowDown = (): void => {\n    this._getNextItem(1);\n    this._scrollToActive();\n  };\n\n  private _scrollToActive(behavior?: ScrollBehavior): void {\n    this.list.element(this.active)?.scrollIntoView({\n      block: 'center',\n      behavior: behavior ?? 'auto',\n    });\n\n    this.list.requestUpdate();\n  }\n\n  private _getNearestItem(start: number, delta: -1 | 1): number {\n    let index = start;\n    const items = this.state.dataState;\n\n    while (items[index + delta]?.header) {\n      index += delta;\n    }\n\n    index += delta;\n\n    return index >= 0 && index < items.length ? index : -1;\n  }\n\n  private _getNextItem(delta: -1 | 1): void {\n    const next = this._getNearestItem(this._active, delta);\n\n    if (next === -1 && this.active === this._firstItem) {\n      this.searchInput.checkVisibility() // Non single-select or disable-filtering combo configuration\n        ? this.searchInput.focus() // Delegate to search input handlers\n        : this._onEscape(); // Close dropdown and move focus back to main input\n    }\n\n    this.active = next;\n  }\n\n  constructor(\n    protected combo: ComboHost<T>,\n    protected state: DataController<T>,\n    config: ComboNavigationConfig\n  ) {\n    this.combo.addController(this as ReactiveController);\n    this._config = config;\n\n    const bindingDefaults = {\n      triggers: ['keydownRepeat'],\n    } as KeyBindingOptions;\n\n    const skip = (): boolean => this.combo.disabled;\n\n    // Combo\n    addKeybindings(this.combo, { skip, bindingDefaults })\n      .set(tabKey, this._onTab, { preventDefault: false })\n      .set([shiftKey, tabKey], this._onTab, {\n        preventDefault: false,\n      })\n      .set(escapeKey, this._onEscape);\n\n    // Main input\n    addKeybindings(this.combo, {\n      skip,\n      ref: this._config.input,\n      bindingDefaults,\n    })\n      .set(arrowUp, async () => await this._hide())\n      .set([altKey, arrowDown], this._onMainInputArrowDown)\n      .set(arrowDown, this._onMainInputArrowDown)\n      .set(enterKey, this._onEnter);\n\n    // Search input\n    addKeybindings(this.combo, {\n      skip,\n      ref: this._config.search,\n      bindingDefaults,\n    })\n      .set(arrowUp, this._onEscape)\n      .set(arrowDown, this._onSearchArrowDown);\n\n    // List\n    addKeybindings(this.combo, {\n      skip,\n      ref: this._config.list,\n      bindingDefaults,\n    })\n      .set(arrowUp, this._onArrowUp)\n      .set(arrowDown, this._onArrowDown)\n      .set(homeKey, this._onHome)\n      .set(endKey, this._onEnd)\n      .set(spaceBar, this._onSpace)\n      .set(enterKey, this._onEnter);\n  }\n\n  public hostDisconnected(): void {\n    this._active = -1;\n  }\n}\n"]}

package/components/combo/operations/group.d.ts

@@ -1,6 +1,5 @@
 import type { DataController } from '../controllers/data.js';
 import type { ComboRecord } from '../types.js';
 export default class GroupDataOperation<T extends object> {
-    protected orderBy: Map<string, number>;
     apply(data: ComboRecord<T>[], controller: DataController<T>): ComboRecord<T>[];
 }

package/components/combo/operations/group.js

@@ -1,33 +1,29 @@
-import { groupBy } from '../../common/util.js';
+const OrderBy = Object.freeze({ asc: 1, desc: -1 });
 export default class GroupDataOperation {
-    constructor() {
-        this.orderBy = new Map(Object.entries({
-            asc: 1,
-            desc: -1,
-        }));
-    }
     apply(data, controller) {
         const { groupingOptions: { groupKey, valueKey, displayKey, direction }, } = controller;
-        if (!groupKey)
+        if (!groupKey) {
             return data;
-        const groups = Object.entries(groupBy(data, (item) => item.value[groupKey] ?? 'Other'));
+        }
+        const grouped = Map.groupBy(data, (item) => item.value[groupKey] ?? 'Other');
+        const keys = Array.from(grouped.keys());
         if (direction !== 'none') {
-            const orderBy = this.orderBy.get(direction);
-            groups.sort((a, b) => {
-                return orderBy * controller.compareCollator.compare(a[0], b[0]);
-            });
+            const orderBy = OrderBy[direction];
+            keys.sort((a, b) => orderBy * controller.compareCollator.compare(a, b));
         }
-        return groups.flatMap(([group, items]) => {
-            items.unshift({
-                dataIndex: -1,
-                header: true,
-                value: {
-                    [valueKey]: group,
-                    [displayKey]: group,
-                    [groupKey]: group,
+        return keys.flatMap((key) => {
+            return [
+                {
+                    value: {
+                        [valueKey]: key,
+                        [displayKey]: key,
+                        [groupKey]: key,
+                    },
+                    header: true,
+                    dataIndex: -1,
                 },
-            });
-            return items;
+                ...(grouped.get(key) ?? []),
+            ];
         });
     }
 }

package/components/combo/operations/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../src/components/combo/operations/group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,MAAM,CAAC,OAAO,OAAO,kBAAkB;IAAvC;QACY,YAAO,GAAG,IAAI,GAAG,CACzB,MAAM,CAAC,OAAO,CAAC;YACb,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC,CAAC;SACT,CAAC,CACH,CAAC;IAkCJ,CAAC;IAhCQ,KAAK,CAAC,IAAsB,EAAE,UAA6B;QAChE,MAAM,EACJ,eAAe,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAC/D,GAAG,UAAU,CAAC;QAEf,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAE3B,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAC3B,OAAO,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,CACzD,CAAC;QAEF,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;YACzB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YAC5C,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACnB,OAAO,OAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnE,CAAC,CAAC,CAAC;QACL,CAAC;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE;YACvC,KAAK,CAAC,OAAO,CAAC;gBACZ,SAAS,EAAE,CAAC,CAAC;gBACb,MAAM,EAAE,IAAI;gBACZ,KAAK,EAAE;oBACL,CAAC,QAAmB,CAAC,EAAE,KAAK;oBAC5B,CAAC,UAAqB,CAAC,EAAE,KAAK;oBAC9B,CAAC,QAAmB,CAAC,EAAE,KAAK;iBACxB;aACP,CAAC,CAAC;YAEH,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { groupBy } from '../../common/util.js';\nimport type { DataController } from '../controllers/data.js';\nimport type { ComboRecord, Keys } from '../types.js';\n\nexport default class GroupDataOperation<T extends object> {\n  protected orderBy = new Map(\n    Object.entries({\n      asc: 1,\n      desc: -1,\n    })\n  );\n\n  public apply(data: ComboRecord<T>[], controller: DataController<T>) {\n    const {\n      groupingOptions: { groupKey, valueKey, displayKey, direction },\n    } = controller;\n\n    if (!groupKey) return data;\n\n    const groups = Object.entries(\n      groupBy(data, (item) => item.value[groupKey] ?? 'Other')\n    );\n\n    if (direction !== 'none') {\n      const orderBy = this.orderBy.get(direction);\n      groups.sort((a, b) => {\n        return orderBy! * controller.compareCollator.compare(a[0], b[0]);\n      });\n    }\n\n    return groups.flatMap(([group, items]) => {\n      items.unshift({\n        dataIndex: -1,\n        header: true,\n        value: {\n          [valueKey as Keys<T>]: group,\n          [displayKey as Keys<T>]: group,\n          [groupKey as Keys<T>]: group,\n        } as T,\n      });\n\n      return items;\n    });\n  }\n}\n"]}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../src/components/combo/operations/group.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,kBAAkB;IAC9B,KAAK,CACV,IAAsB,EACtB,UAA6B;QAE7B,MAAM,EACJ,eAAe,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAC/D,GAAG,UAAU,CAAC;QAEf,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CACzB,IAAI,EACJ,CAAC,IAAI,EAAE,EAAE,CAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAY,IAAI,OAAO,CACtD,CAAC;QAEF,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;QAExC,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;YACzB,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;YACnC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC1B,OAAO;gBACL;oBACE,KAAK,EAAE;wBACL,CAAC,QAAmB,CAAC,EAAE,GAAG;wBAC1B,CAAC,UAAqB,CAAC,EAAE,GAAG;wBAC5B,CAAC,QAAmB,CAAC,EAAE,GAAG;qBACtB;oBACN,MAAM,EAAE,IAAI;oBACZ,SAAS,EAAE,CAAC,CAAC;iBACd;gBACD,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import type { DataController } from '../controllers/data.js';\nimport type { ComboRecord, Keys } from '../types.js';\n\nconst OrderBy = Object.freeze({ asc: 1, desc: -1 });\n\nexport default class GroupDataOperation<T extends object> {\n  public apply(\n    data: ComboRecord<T>[],\n    controller: DataController<T>\n  ): ComboRecord<T>[] {\n    const {\n      groupingOptions: { groupKey, valueKey, displayKey, direction },\n    } = controller;\n\n    if (!groupKey) {\n      return data;\n    }\n\n    const grouped = Map.groupBy(\n      data,\n      (item) => (item.value[groupKey] as string) ?? 'Other'\n    );\n\n    const keys = Array.from(grouped.keys());\n\n    if (direction !== 'none') {\n      const orderBy = OrderBy[direction];\n      keys.sort((a, b) => orderBy * controller.compareCollator.compare(a, b));\n    }\n\n    return keys.flatMap((key) => {\n      return [\n        {\n          value: {\n            [valueKey as Keys<T>]: key,\n            [displayKey as Keys<T>]: key,\n            [groupKey as Keys<T>]: key,\n          } as T,\n          header: true,\n          dataIndex: -1,\n        },\n        ...(grouped.get(key) ?? []),\n      ];\n    });\n  }\n}\n"]}

package/components/combo/themes/combo-header.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;white-space:nowrap;position:relative;pointer-events:none}::slotted(*){font:inherit}:host{--component-size: var(--ig-size, var(--default-size));--default-size: var(--combo-size) !important}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;white-space:nowrap;position:relative;pointer-events:none}::slotted(*){font:inherit}:host{--component-size: var(--ig-size, var(--default-size));--default-size: var(--combo-size) !important;width:100%;white-space:nowrap}:host ::slotted(*){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;width:100%;align-items:center}`;
 //# sourceMappingURL=combo-header.base.css.js.map

package/components/combo/themes/combo-header.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-header.base.css.js","sourceRoot":"","sources":["../../../../src/components/combo/themes/combo-header.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,snDAAsnD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;white-space:nowrap;position:relative;pointer-events:none}::slotted(*){font:inherit}:host{--component-size: var(--ig-size, var(--default-size));--default-size: var(--combo-size) !important}`;\n"]}
+{"version":3,"file":"combo-header.base.css.js","sourceRoot":"","sources":["../../../../src/components/combo/themes/combo-header.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6wDAA6wD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;white-space:nowrap;position:relative;pointer-events:none}::slotted(*){font:inherit}:host{--component-size: var(--ig-size, var(--default-size));--default-size: var(--combo-size) !important;width:100%;white-space:nowrap}:host ::slotted(*){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;width:100%;align-items:center}`;\n"]}

package/components/combo/themes/combo-item.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:flex;justify-content:flex-start;align-items:center;width:100%;white-space:nowrap;position:relative;cursor:pointer;outline-style:none;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.25rem, -1 * 1.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([disabled]){cursor:default;pointer-events:none}::slotted(*){font:inherit}[part=content]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;width:100%;align-items:center}[part=prefix],[part=suffix]{display:flex;align-items:center;justify-content:center}[name=prefix]::slotted(*){--component-size: var(--dropdown-size) !important;margin-inline-end:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[name=suffix]::slotted(*){--component-size: var(--dropdown-size) !important;margin-inline-start:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host{--component-size: var(--ig-size, var(--default-size));--default-size: var(--combo-size) !important;gap:.5rem}igc-checkbox{pointer-events:none}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:flex;justify-content:flex-start;align-items:center;width:100%;white-space:nowrap;position:relative;cursor:pointer;outline-style:none;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.25rem, -1 * 1.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([disabled]){cursor:default;pointer-events:none}::slotted(*){font:inherit}[part=content]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;width:100%;align-items:center}[part=prefix],[part=suffix]{display:flex;align-items:center;justify-content:center}[name=prefix]::slotted(*){--component-size: var(--dropdown-size) !important;margin-inline-end:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[name=suffix]::slotted(*){--component-size: var(--dropdown-size) !important;margin-inline-start:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host{--component-size: var(--ig-size, var(--default-size));--default-size: var(--combo-size) !important;gap:.5rem}:host ::slotted(*){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;width:100%;align-items:center}igc-checkbox{pointer-events:none}`;
 //# sourceMappingURL=combo-item.base.css.js.map