igniteui-webcomponents 5.3.0-beta.1 → 5.3.0-beta.2

package/components/chip/themes/chip.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.base.css.js","sourceRoot":"","sources":["../../../../src/components/chip/themes/chip.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0oKAA0oK,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{display:inline-flex;vertical-align:top}:host button{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:center;align-items:center;font-family:var(--ig-font-family);border-style:none;box-shadow:none;cursor:pointer;padding:max(var(--is-large, 1)*max(12px, -1 * 12px)*var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)),var(--is-medium, 1)*max(6px, -1 * 6px)*var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)),var(--is-small, 1)*max(2px, -1 * 2px)*var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:var(--ig-primary-500);color:var(--ig-primary-500-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:var(--ig-primary-800);color:var(--ig-primary-800-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:var(--ig-primary-600);color:var(--ig-primary-600-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:var(--ig-info-500);color:var(--ig-info-500-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:var(--ig-info-800);color:var(--ig-info-800-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:var(--ig-info-600);color:var(--ig-info-600-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:var(--ig-success-500);color:var(--ig-success-500-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:var(--ig-success-800);color:var(--ig-success-800-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:var(--ig-success-600);color:var(--ig-success-600-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:var(--ig-warn-800);color:var(--ig-warn-800-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:var(--ig-warn-600);color:var(--ig-warn-600-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:var(--ig-error-500);color:var(--ig-error-500-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:var(--ig-error-800);color:var(--ig-error-800-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:var(--ig-error-600);color:var(--ig-error-600-contrast)}[part=prefix],[part=suffix]{display:flex;align-items:center;justify-content:center}[part=prefix]{margin-inline-end:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.1875rem, -1 * 0.1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}[part=suffix]{margin-inline-start:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.1875rem, -1 * 0.1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}::slotted(*){display:flex}`;\n"]}
+{"version":3,"file":"chip.base.css.js","sourceRoot":"","sources":["../../../../src/components/chip/themes/chip.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+tJAA+tJ,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{display:inline-block;vertical-align:top}:host button{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);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;font-family:var(--ig-font-family);border-style:none;box-shadow:none;cursor:pointer;padding:0 max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));gap:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.1875rem, -1 * 0.1875rem))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:var(--ig-primary-500);color:var(--ig-primary-500-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:var(--ig-primary-800);color:var(--ig-primary-800-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:var(--ig-primary-600);color:var(--ig-primary-600-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:var(--ig-info-500);color:var(--ig-info-500-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:var(--ig-info-800);color:var(--ig-info-800-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:var(--ig-info-600);color:var(--ig-info-600-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:var(--ig-success-500);color:var(--ig-success-500-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:var(--ig-success-800);color:var(--ig-success-800-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:var(--ig-success-600);color:var(--ig-success-600-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:var(--ig-warn-800);color:var(--ig-warn-800-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:var(--ig-warn-600);color:var(--ig-warn-600-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:var(--ig-error-500);color:var(--ig-error-500-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:var(--ig-error-800);color:var(--ig-error-800-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:var(--ig-error-600);color:var(--ig-error-600-contrast)}[part=prefix],[part=suffix]{display:flex;align-items:center;justify-content:center}::slotted(*){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:32ch}`;\n"]}

package/components/chip/themes/dark/chip.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/dark/chip.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/dark/chip.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/dark/chip.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/light/chip.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/light/chip.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/light/chip.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/light/chip.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/light/chip.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/shared/chip.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/shared/chip.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/shared/chip.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/shared/chip.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

package/components/combo/combo-header.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export default class IgcComboHeaderComponent extends LitElement {
+    static readonly tagName: string;
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-combo-header': IgcComboHeaderComponent;
+    }
+}

package/components/combo/combo-item.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+export default class IgcComboItemComponent extends LitElement {
+    static readonly tagName: string;
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private _internals;
+    private _selected;
+    index: number;
+    /**
+     * Determines whether the item is selected.
+     * @attr selected
+     * @default false
+     */
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Determines whether the item is active.
+     */
+    active: boolean;
+    /**
+     * Determines whether the item is active.
+     * @attr hide-checkbox
+     */
+    hideCheckbox: boolean;
+    constructor();
+    connectedCallback(): void;
+    private renderCheckbox;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-combo-item': IgcComboItemComponent;
+    }
+}

package/components/combo/combo-list.d.ts

@@ -0,0 +1,11 @@
+import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
+export default class IgcComboListComponent extends LitVirtualizer {
+    static readonly tagName = "igc-combo-list";
+    scroller: boolean;
+    static register(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-combo-list': IgcComboListComponent;
+    }
+}

package/components/combo/combo.d.ts

@@ -0,0 +1,322 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type FormValue } from '../common/mixins/forms/form-value.js';
+import IgcInputComponent from '../input/input.js';
+import { DataController } from './controllers/data.js';
+import { NavigationController } from './controllers/navigation.js';
+import { SelectionController } from './controllers/selection.js';
+import type { ComboItemTemplate, ComboRenderFunction, ComboValue, FilteringOptions, GroupingDirection, IgcComboComponentEventMap, Item, Keys } from './types.js';
+declare const IgcComboComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcComboComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection.
+ * In contrast to the Select component, the Combo component displays all options in a virtualized list of items,
+ * meaning the combo box can simultaneously show thousands of options, where one or more options can be selected.
+ * Additionally, users can create custom item templates, allowing for robust data visualization.
+ * The Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more.
+ *
+ * @element igc-combo
+ *
+ * @slot prefix - Renders content before the input of the combo.
+ * @slot suffix - Renders content after the input of the combo.
+ * @slot header - Renders a container before the list of options of the combo.
+ * @slot footer - Renders a container after the list of options of the combo.
+ * @slot helper-text - Renders content below the input of the combo.
+ * @slot toggle-icon - Renders content inside the suffix container of the combo.
+ * @slot clear-icon - Renders content inside the suffix container of the combo.
+ * @slot value-missing - Renders content when the required validation fails.
+ * @slot custom-error - Renders content when setCustomValidity(message) is set.
+ * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
+ *
+ * @fires igcChange - Emitted when the control's selection has changed.
+ * @fires igcOpening - Emitted just before the list of options is opened.
+ * @fires igcOpened - Emitted after the list of options is opened.
+ * @fires igcClosing - Emitter just before the list of options is closed.
+ * @fires igcClosed - Emitted after the list of options is closed.
+ *
+ * @csspart label - The encapsulated text label of the combo.
+ * @csspart input - The main input field of the combo.
+ * @csspart native-input - The native input of the main input field of the combo.
+ * @csspart prefix - The prefix wrapper of the combo.
+ * @csspart suffix - The suffix wrapper of the combo.
+ * @csspart toggle-icon - The toggle icon wrapper of the combo.
+ * @csspart clear-icon - The clear icon wrapper of the combo.
+ * @csspart case-icon - The case icon wrapper of the combo.
+ * @csspart helper-text - The helper text wrapper of the combo.
+ * @csspart search-input - The search input field of the combo.
+ * @csspart list-wrapper - The list of options wrapper of the combo.
+ * @csspart list - The list of options box of the combo.
+ * @csspart item - Represents each item in the list of options of the combo.
+ * @csspart group-header - Represents each header in the list of options of the combo.
+ * @csspart active - Appended to the item parts list when the item is active of the combo.
+ * @csspart selected - Appended to the item parts list when the item is selected of the combo.
+ * @csspart checkbox - Represents each checkbox of each list item of the combo.
+ * @csspart checkbox-indicator - Represents the checkbox indicator of each list item of the combo.
+ * @csspart checked - Appended to checkbox parts list when checkbox is checked in the combo.
+ * @csspart header - The container holding the header content of the combo.
+ * @csspart footer - The container holding the footer content of the combo.
+ * @csspart empty - The container holding the empty content of the combo.
+ */
+export default class IgcComboComponent<T extends object = any> extends IgcComboComponent_base {
+    static readonly tagName = "igc-combo";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    protected get __validators(): import("../common/validators.js").Validator<IgcComboComponent<any>>[];
+    protected _formValue: FormValue<ComboValue<T>[]>;
+    private _data;
+    private _valueKey?;
+    private _displayKey?;
+    private _groupKey?;
+    private _disableFiltering;
+    private _singleSelect;
+    private _groupSorting;
+    private _filteringOptions;
+    private _activeDescendant;
+    private _displayValue;
+    protected _state: DataController<T>;
+    protected _selection: SelectionController<T>;
+    protected _navigation: NavigationController<T>;
+    protected inputSuffix: Array<HTMLElement>;
+    protected inputPrefix: Array<HTMLElement>;
+    protected _searchInput: IgcInputComponent;
+    private _input;
+    private _list;
+    /** The data source used to generate the list of options. */
+    set data(value: T[]);
+    get data(): T[];
+    /**
+     * The outlined attribute of the control.
+     * @attr outlined
+     */
+    outlined: boolean;
+    /**
+     * Enables single selection mode and moves item filtering to the main input.
+     * @attr single-select
+     * @default false
+     */
+    set singleSelect(value: boolean);
+    get singleSelect(): boolean;
+    /**
+     * The autofocus attribute of the control.
+     * @attr autofocus
+     */
+    autofocus: boolean;
+    /**
+     * Focuses the list of options when the menu opens.
+     * @attr autofocus-list
+     */
+    autofocusList: boolean;
+    /**
+     * The label attribute of the control.
+     * @attr label
+     */
+    label: string;
+    /**
+     * The placeholder attribute of the control.
+     * @attr placeholder
+     */
+    placeholder: string;
+    /**
+     * The placeholder attribute of the search input.
+     * @attr placeholder-search
+     */
+    placeholderSearch: string;
+    /**
+     * Sets the open state of the component.
+     * @attr open
+     */
+    open: boolean;
+    /**
+     * The key in the data source used when selecting items.
+     * @attr value-key
+     */
+    set valueKey(value: Keys<T> | undefined);
+    get valueKey(): Keys<T> | undefined;
+    /**
+     * The key in the data source used to display items in the list.
+     * @attr display-key
+     */
+    set displayKey(value: Keys<T> | undefined);
+    get displayKey(): Keys<T> | undefined;
+    /**
+     * The key in the data source used to group items in the list.
+     * @attr group-key
+     */
+    set groupKey(value: Keys<T> | undefined);
+    get groupKey(): Keys<T> | undefined;
+    /**
+     * Sorts the items in each group by ascending or descending order.
+     * @attr group-sorting
+     * @default asc
+     * @type {"asc" | "desc" | "none"}
+     */
+    set groupSorting(value: GroupingDirection);
+    get groupSorting(): GroupingDirection;
+    /**
+     * An object that configures the filtering of the combo.
+     * @attr filtering-options
+     * @type {FilteringOptions<T>}
+     * @param filterKey - The key in the data source used when filtering the list of options.
+     * @param caseSensitive - Determines whether the filtering operation should be case sensitive.
+     * @param matchDiacritics -If true, the filter distinguishes between accented letters and their base letters.
+     */
+    set filteringOptions(value: Partial<FilteringOptions<T>>);
+    get filteringOptions(): FilteringOptions<T>;
+    /**
+     * Enables the case sensitive search icon in the filtering input.
+     * @attr case-sensitive-icon
+     */
+    caseSensitiveIcon: boolean;
+    /**
+     * Disables the filtering of the list of options.
+     * @attr disable-filtering
+     * @default false
+     */
+    set disableFiltering(value: boolean);
+    get disableFiltering(): boolean;
+    /**
+     * The template used for the content of each combo item.
+     * @type {ComboItemTemplate<T>}
+     */
+    itemTemplate: ComboItemTemplate<T>;
+    /**
+     * The template used for the content of each combo group header.
+     * @type {ComboItemTemplate<T>}
+     */
+    groupHeaderTemplate: ComboItemTemplate<T>;
+    /**
+     * Sets the value (selected items). The passed value must be a valid JSON array.
+     * If the data source is an array of complex objects, the `valueKey` attribute must be set.
+     * Note that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.
+     *
+     * @attr value
+     *
+     * @example
+     * ```tsx
+     * <igc-combo
+     *  .data=${[
+     *    {
+     *      id: 'BG01',
+     *      name: 'Sofia'
+     *    },
+     *    {
+     *      id: 'BG02',
+     *      name: 'Plovdiv'
+     *    }
+     *  ]}
+     *  display-key='name'
+     *  value-key='id'
+     *  value='["BG01", "BG02"]'>
+     *  </igc-combo>
+     * ```
+     */
+    set value(items: ComboValue<T>[]);
+    /**
+     * Returns the current selection as a list of comma separated values,
+     * represented by the value key, when provided.
+     */
+    get value(): ComboValue<T>[];
+    protected _updateSelection(): void;
+    protected toggleDirectiveChange(): void;
+    private _rootClickController;
+    constructor();
+    protected firstUpdated(): Promise<void>;
+    protected _restoreDefaultValue(): void;
+    protected _setDefaultValue(current: string | null): void;
+    protected _setFormValue(): void;
+    protected resetSearchTerm(): void;
+    protected updateValue(initial?: boolean): void;
+    /** Sets focus on the component. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the component. */
+    blur(): void;
+    /**
+     * Returns the current selection as an array of objects as provided in the `data` source.
+     */
+    get selection(): T[];
+    /**
+     * Selects option(s) in the list by either reference or valueKey.
+     * If not argument is provided all items will be selected.
+     * @param { Item<T> | Items<T> } items - One or more items to be selected. Multiple items should be passed as an array.
+     * When valueKey is specified, the corresponding value should be used in place of the item reference.
+     * @example
+     * ```typescript
+     * const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');
+     *
+     * // Select one item at a time by reference when valueKey is not specified.
+     * combo.select(combo.data[0]);
+     *
+     * // Select multiple items at a time by reference when valueKey is not specified.
+     * combo.select([combo.data[0], combo.data[1]]);
+     *
+     * // Select one item at a time when valueKey is specified.
+     * combo.select('BG01');
+     *
+     * // Select multiple items at a time when valueKey is specified.
+     * combo.select(['BG01', 'BG02']);
+     * ```
+     */
+    select(items?: Item<T> | Item<T>[]): void;
+    /**
+     * Deselects option(s) in the list by either reference or valueKey.
+     * If not argument is provided all items will be deselected.
+     * @param { Item<T> | Items<T> } items - One or more items to be deselected. Multiple items should be passed as an array.
+     * When valueKey is specified, the corresponding value should be used in place of the item reference.
+     * @example
+     * ```typescript
+     * const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');
+     *
+     * // Deselect one item at a time by reference when valueKey is not specified.
+     * combo.deselect(combo.data[0]);
+     *
+     * // Deselect multiple items at a time by reference when valueKey is not specified.
+     * combo.deselect([combo.data[0], combo.data[1]]);
+     *
+     * // Deselect one item at a time when valueKey is specified.
+     * combo.deselect('BG01');
+     *
+     * // Deselect multiple items at a time when valueKey is specified.
+     * combo.deselect(['BG01', 'BG02']);
+     * ```
+     */
+    deselect(items?: Item<T> | Item<T>[]): void;
+    protected handleMainInput({ detail }: CustomEvent<string>): Promise<void>;
+    private _handleBlur;
+    protected handleSearchInput({ detail }: CustomEvent<string>): void;
+    protected handleOpening(): boolean;
+    protected handleClosing(): boolean;
+    protected _show(emitEvent?: boolean): Promise<boolean>;
+    /** Shows the list of options. */
+    show(): Promise<boolean>;
+    protected _hide(emitEvent?: boolean): Promise<boolean>;
+    /** Hides the list of options. */
+    hide(): Promise<boolean>;
+    protected _toggle(emit?: boolean): Promise<boolean>;
+    /** Toggles the list of options. */
+    toggle(): Promise<boolean>;
+    private _getActiveDescendantId;
+    protected itemRenderer: ComboRenderFunction<T>;
+    protected listKeydownHandler(event: KeyboardEvent): void;
+    protected itemClickHandler(event: PointerEvent): void;
+    protected toggleSelect(index: number): void;
+    protected selectByIndex(index: number): void;
+    protected clearSingleSelection(): void;
+    protected handleClearIconClick(e: PointerEvent): void;
+    protected handleMainInputKeydown(e: KeyboardEvent): void;
+    protected handleSearchInputKeydown(e: KeyboardEvent): void;
+    protected toggleCaseSensitivity(): void;
+    private _stopPropagation;
+    private renderToggleIcon;
+    private renderClearIcon;
+    private renderMainInput;
+    private renderSearchInput;
+    private renderEmptyTemplate;
+    private renderList;
+    private renderHelperText;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-combo': IgcComboComponent<object>;
+    }
+}
+export {};

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

@@ -0,0 +1,22 @@
+import type { ReactiveController } from 'lit';
+import FilterDataOperation from '../operations/filter.js';
+import GroupDataOperation from '../operations/group.js';
+import type { ComboHost, ComboRecord, FilteringOptions, GroupingOptions } from '../types.js';
+export declare class DataController<T extends object> implements ReactiveController {
+    protected host: ComboHost<T>;
+    protected grouping: GroupDataOperation<T>;
+    protected filtering: FilterDataOperation<T>;
+    private _searchTerm;
+    private _compareCollator;
+    dataState: ComboRecord<T>[];
+    constructor(host: ComboHost<T>);
+    runPipeline(): void;
+    set searchTerm(value: string);
+    get searchTerm(): string;
+    get filteringOptions(): FilteringOptions<T>;
+    get groupingOptions(): GroupingOptions<T>;
+    get compareCollator(): Intl.Collator;
+    private index;
+    hostConnected(): void;
+    apply(data: T[]): ComboRecord<T>[];
+}

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

@@ -0,0 +1,50 @@
+import type { ReactiveController } from 'lit';
+import type IgcComboListComponent from '../combo-list.js';
+import type { ComboHost, ComboRecord } 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>;
+    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;
+    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;
+    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/selection.d.ts

@@ -0,0 +1,33 @@
+import type { ReactiveController } from 'lit';
+import type { ComboHost, ComboValue, Item, Keys } from '../types.js';
+import type { DataController } from './data.js';
+export declare class SelectionController<T extends object> implements ReactiveController {
+    protected host: ComboHost<T>;
+    protected state: DataController<T>;
+    private _selected;
+    /** Whether the current selection is empty */
+    get isEmpty(): boolean;
+    /** Returns the current selection as an array */
+    get asArray(): T[];
+    /** Whether the current selection has the given item */
+    has(item?: T): boolean;
+    /** Clears the current selection */
+    clear(): void;
+    getSelectedValuesByKey(key?: Keys<T>): (T | NonNullable<T[keyof T]>)[];
+    getValue(items: T[], key: Keys<T>): ComboValue<T>[];
+    private handleChange;
+    private getItemsByValueKey;
+    private selectValueKeys;
+    private deselectValueKeys;
+    private selectObjects;
+    private deselectObjects;
+    private selectAll;
+    private deselectAll;
+    select(items?: Item<T> | Item<T>[], emit?: boolean): Promise<void>;
+    deselect(items?: Item<T> | Item<T>[], emit?: boolean): Promise<void>;
+    changeSelection(index: number): void;
+    selectByIndex(index: number): void;
+    constructor(host: ComboHost<T>, state: DataController<T>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,6 @@
+import type { DataController } from '../controllers/data.js';
+import type { ComboRecord, FilteringOptions } from '../types.js';
+export default class FilterDataOperation<T extends object> {
+    protected normalize<T extends object>(string: string, { caseSensitive, matchDiacritics }: FilteringOptions<T>): string;
+    apply(data: ComboRecord<T>[], controller: DataController<T>): ComboRecord<T>[];
+}

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

@@ -0,0 +1,6 @@
+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/themes/combo-header.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/combo-item.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/combo.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/dark/combo.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/dark/combo.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/dark/combo.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/dark/combo.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/light/combo.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/light/combo.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/light/combo.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/light/combo.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/light/combo.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/shared/combo.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/shared/combo.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/shared/combo.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/shared/combo.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/shared/combo.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/combo/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;