@getflip/swirl-components 0.456.3 → 0.457.0

package/dist/cjs/swirl-select.cjs.entry.js

@@ -16,6 +16,7 @@ const SwirlSelect = class {
         this.searchInputLabel = "Search options";
         this.selectId = Math.round(Math.random() * 1000000).toString();
         this.options = [];
+        this.typeaheadBuffer = "";
         this.select = (event) => {
             event.stopPropagation();
             this.value = event.detail;
@@ -35,6 +36,8 @@ const SwirlSelect = class {
         this.onOpen = (event) => {
             this.placement = event.detail.position?.placement;
             this.open = true;
+            this.typeaheadBuffer = "";
+            clearTimeout(this.typeaheadTimeout);
             if (this.withSearch && Boolean(this.searchInput)) {
                 this.searchInput.focus();
             }
@@ -47,6 +50,8 @@ const SwirlSelect = class {
                 this.searchInput.value = "";
                 this.searchChange.emit("");
             }
+            this.typeaheadBuffer = "";
+            clearTimeout(this.typeaheadTimeout);
             this.open = false;
             this.input.focus();
         };
@@ -62,6 +67,11 @@ const SwirlSelect = class {
                 event.target === this.searchInput) {
                 this.optionList.querySelector('[tabIndex="0"]')?.focus();
             }
+            else if (this.isTypeaheadKey(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.handleTypeahead(event.key);
+            }
         };
         this.onSearchInput = (event) => {
             this.searchChange.emit(event.target.value);
@@ -75,6 +85,7 @@ const SwirlSelect = class {
     }
     disconnectedCallback() {
         this.observer?.disconnect();
+        clearTimeout(this.typeaheadTimeout);
     }
     onWindowFocusIn(event) {
         if (event.target === this.el.querySelector("input")) {
@@ -101,6 +112,96 @@ const SwirlSelect = class {
     updateOptions() {
         this.options = utils.querySelectorAllDeep(this.el, "swirl-option-list-item");
     }
+    /**
+     * Returns true for printable single-character keys that should trigger
+     * typeahead, excluding Space (used for selection) and keys combined with
+     * modifiers. Ignores events from the search input.
+     */
+    isTypeaheadKey(event) {
+        if (event.target === this.searchInput) {
+            return false;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return false;
+        }
+        return event.key.length === 1 && event.key !== " ";
+    }
+    /**
+     * Manages the typeahead buffer and delegates to either cycling (repeated
+     * same character) or prefix matching (different characters). Resets the
+     * buffer if transitioning out of cycling mode. The buffer auto-clears
+     * after 500ms of inactivity.
+     */
+    handleTypeahead(key) {
+        const char = key.toLowerCase();
+        clearTimeout(this.typeaheadTimeout);
+        const allSameChar = this.typeaheadBuffer.length > 0 &&
+            [...this.typeaheadBuffer].every((c) => c === char);
+        if (allSameChar) {
+            this.typeaheadBuffer += char;
+            this.cycleTypeahead(char);
+        }
+        else {
+            const wasCycling = this.typeaheadBuffer.length > 1 &&
+                new Set(this.typeaheadBuffer).size === 1;
+            this.typeaheadBuffer = wasCycling ? char : this.typeaheadBuffer + char;
+            if (!this.prefixMatchTypeahead(this.typeaheadBuffer)) {
+                this.typeaheadBuffer = char;
+                this.prefixMatchTypeahead(this.typeaheadBuffer);
+            }
+        }
+        this.typeaheadTimeout = setTimeout(() => {
+            this.typeaheadBuffer = "";
+        }, 500);
+    }
+    /**
+     * Cycles focus/selection through options that start with the given
+     * character, wrapping around to the first match after the last one.
+     */
+    cycleTypeahead(char) {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        const matching = enabledOptions.filter((o) => o.label?.toLowerCase().startsWith(char));
+        if (matching.length === 0) {
+            return;
+        }
+        const anchorValue = this.getTypeaheadAnchorValue();
+        const currentIdx = matching.findIndex((o) => o.value === anchorValue);
+        const nextIdx = (currentIdx + 1) % matching.length;
+        this.applyTypeaheadMatch(matching[nextIdx]);
+    }
+    /**
+     * Finds the first enabled option whose label starts with the given prefix
+     * (case-insensitive) and focuses/selects it. Returns whether a match was
+     * found, so the caller can fall back to a single-character retry.
+     */
+    prefixMatchTypeahead(prefix) {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        const match = enabledOptions.find((o) => o.label?.toLowerCase().startsWith(prefix));
+        if (match) {
+            this.applyTypeaheadMatch(match);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Returns the value of the currently focused option (when open) or the
+     * last selected value (when closed), used as the starting point for cycling.
+     */
+    getTypeaheadAnchorValue() {
+        if (this.open) {
+            const focused = this.options.find((o) => o.querySelector('[role="option"][tabindex="0"]'));
+            return focused?.value;
+        }
+        return this.value?.[this.value.length - 1];
+    }
+    /**
+     * Applies a typeahead match by focusing the option in the open list.
+     */
+    applyTypeaheadMatch(option) {
+        if (this.open) {
+            this.optionList.focusItemWithValue(option.value);
+        }
+    }
     getValueLabel() {
         return Boolean(this.value)
             ? this.value
@@ -126,11 +227,11 @@ const SwirlSelect = class {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (index.h(index.Host, { key: '4a52474a84ddb2f31804ad8c7e593b7f66668136', onKeyDown: this.onKeyDown }, index.h("div", { key: '499bffdf6da163ff865c5ee335473e500b4863b6', class: className }, index.h("swirl-popover-trigger", { key: '1838e94f5ef3b5f0f966618dafc92bc291bad7c2', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("swirl-stack", { key: 'c7280406b0d22b3d5ae4fbe1122f12e74ee48352', class: "select__value-container" }, this.standalone && (index.h("span", { key: '7669d5d4a2768148d47adb9df1c9000543adcc7d', "aria-hidden": "true", class: "select__resize-helper" }, label)), index.h("input", { key: 'e260c10e3a6fbd1c1a5bab59cf27dc034de9a9cd', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), index.h("span", { key: '824f6bee796b8cfd96c883d6e850e80aefa74f28', class: "select__multi-select-values" }, this.value
+        return (index.h(index.Host, { key: 'fb5381d9847789755c891530848715a66612c73a', onKeyDown: this.onKeyDown }, index.h("div", { key: 'ec4a8fd2cf3e29ec98b4855e7962808c97232684', class: className }, index.h("swirl-popover-trigger", { key: 'd8cd5ad295b1b05175c13f5492a44b9d171f07a7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("swirl-stack", { key: 'e488349fbb57486ca6916eae73fe3f222503408f', class: "select__value-container" }, this.standalone && (index.h("span", { key: 'b84c6e890d51940c32780197e1201707fdaabe84', "aria-hidden": "true", class: "select__resize-helper" }, label)), index.h("input", { key: '5e11eeaca9f63f501c0a776d79e2a920188d1f16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), index.h("span", { key: '6a24242f1b1c12b79fb705e905cc56b45edccbb0', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (index.h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), index.h("span", { key: '582b90d8f10aef371fbefbbaa8047473b2050d15', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (index.h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), index.h("swirl-popover", { key: '84aedb5d46959ecca9afd3ad99c1fdc22a54461b', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (index.h("div", { key: '8b1fd39c468f17002698f5695838f22caaf3e85f', class: "select__search" }, index.h("swirl-icon-search", { key: '8bc4856fe8e0c78ec76f49df8d1abe68fa35717c', class: "select__search-icon", size: 20 }), index.h("input", { key: 'ff78bf79652a26b806ede427ae18c9f4a9f0070f', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (index.h("swirl-spinner", { key: '76954ab87f375fa9a95e9bca3106cb055705c550', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: 'c88aeae4f0ae5315e45958e04ef5a836f5d74ba9', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: '00f71a275007321fa3a3fa26d24e1b73d34e9be6', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '8051a991c25c83b394e4ef7e469b65dd4103d0ca', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: '1d380c7e2b549bbd54488c431b8da08e0255ba33', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), index.h("span", { key: '1269e975efb7930b3defdc7e818d044e63bfbf31', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (index.h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), index.h("swirl-popover", { key: '8807a75e712facd319f2a7d62466ea8009bf02e4', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (index.h("div", { key: '744926136b2d2b85623e1388e2e2bab32e5f597d', class: "select__search" }, index.h("swirl-icon-search", { key: 'fb629903439586f28dcc89cc4a13180f93d282e4', class: "select__search-icon", size: 20 }), index.h("input", { key: '7e5e6a98ac828330cb6e3bc5fb735d2bdedfc0c0', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (index.h("swirl-spinner", { key: '180c43636f58b88658181b728dbbd40c26cd89bc', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: 'e0c3e2ec010851a20b99ae33bcff619b1f3c067f', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: '1c9712715420c7b2e390577d21cc0fa2f66e163c', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '8486dce94b93b2bb2471ac26a8ead72aba8b7d4b', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: 'a6684b60611a1b5eab4a19e444b8d6ef113eb59c', onSlotchange: this.onSlotChange }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/swirl-option-list/swirl-option-list.js

@@ -190,6 +190,12 @@ export class SwirlOptionList {
         this.syncItemsWithValue();
         this.setSelectAllState();
     }
+    async focusItemWithValue(value) {
+        const index = this.items.findIndex((item) => item.value === value);
+        if (index >= 0) {
+            this.focusItem(index);
+        }
+    }
     observeSlotChanges() {
         this.observer = new MutationObserver(() => {
             this.updateItems();
@@ -431,7 +437,7 @@ export class SwirlOptionList {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
         const showSelectAll = this.multiSelect && this.showSelectAll;
-        return (h(Host, { key: '2f5d7a97ccbc53533cf65cbde48f0f98736fc9b2' }, h("swirl-visually-hidden", { key: '252aa2a6406948f1f2f4933577e4cf938d692fd6', role: "alert" }, this.assistiveText), h("div", { key: 'c86c8f23b31c1b381aa26ac04544fcafd131995c', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (h("swirl-option-list-item", { key: '793499278cf55067d6cbcb8c878691583d201c3f', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: 'dd268c3b50ddfcfb4ec3a1616d143a69c522d819', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: '23dac33782dc5196ebf9ed3069911c4745499e51' }, h("swirl-visually-hidden", { key: '31f2e96b74cf92d5bb181f878e0dcbe260f96b83', role: "alert" }, this.assistiveText), h("div", { key: '468b98cde9d0dcacc7c00bacc798287a6f094281', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (h("swirl-option-list-item", { key: '5f8c970263e40980e6f5162e07ddbe03220bda54', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: '50e6464cad68af3ba9a7ecf4a628693445e62503', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-option-list"; }
     static get encapsulation() { return "scoped"; }
@@ -725,6 +731,31 @@ export class SwirlOptionList {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusItemWithValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/swirl-select/swirl-select.js

@@ -8,6 +8,7 @@ export class SwirlSelect {
         this.searchInputLabel = "Search options";
         this.selectId = Math.round(Math.random() * 1000000).toString();
         this.options = [];
+        this.typeaheadBuffer = "";
         this.select = (event) => {
             event.stopPropagation();
             this.value = event.detail;
@@ -27,6 +28,8 @@ export class SwirlSelect {
         this.onOpen = (event) => {
             this.placement = event.detail.position?.placement;
             this.open = true;
+            this.typeaheadBuffer = "";
+            clearTimeout(this.typeaheadTimeout);
             if (this.withSearch && Boolean(this.searchInput)) {
                 this.searchInput.focus();
             }
@@ -39,6 +42,8 @@ export class SwirlSelect {
                 this.searchInput.value = "";
                 this.searchChange.emit("");
             }
+            this.typeaheadBuffer = "";
+            clearTimeout(this.typeaheadTimeout);
             this.open = false;
             this.input.focus();
         };
@@ -54,6 +59,11 @@ export class SwirlSelect {
                 event.target === this.searchInput) {
                 this.optionList.querySelector('[tabIndex="0"]')?.focus();
             }
+            else if (this.isTypeaheadKey(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.handleTypeahead(event.key);
+            }
         };
         this.onSearchInput = (event) => {
             this.searchChange.emit(event.target.value);
@@ -67,6 +77,7 @@ export class SwirlSelect {
     }
     disconnectedCallback() {
         this.observer?.disconnect();
+        clearTimeout(this.typeaheadTimeout);
     }
     onWindowFocusIn(event) {
         if (event.target === this.el.querySelector("input")) {
@@ -93,6 +104,96 @@ export class SwirlSelect {
     updateOptions() {
         this.options = querySelectorAllDeep(this.el, "swirl-option-list-item");
     }
+    /**
+     * Returns true for printable single-character keys that should trigger
+     * typeahead, excluding Space (used for selection) and keys combined with
+     * modifiers. Ignores events from the search input.
+     */
+    isTypeaheadKey(event) {
+        if (event.target === this.searchInput) {
+            return false;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return false;
+        }
+        return event.key.length === 1 && event.key !== " ";
+    }
+    /**
+     * Manages the typeahead buffer and delegates to either cycling (repeated
+     * same character) or prefix matching (different characters). Resets the
+     * buffer if transitioning out of cycling mode. The buffer auto-clears
+     * after 500ms of inactivity.
+     */
+    handleTypeahead(key) {
+        const char = key.toLowerCase();
+        clearTimeout(this.typeaheadTimeout);
+        const allSameChar = this.typeaheadBuffer.length > 0 &&
+            [...this.typeaheadBuffer].every((c) => c === char);
+        if (allSameChar) {
+            this.typeaheadBuffer += char;
+            this.cycleTypeahead(char);
+        }
+        else {
+            const wasCycling = this.typeaheadBuffer.length > 1 &&
+                new Set(this.typeaheadBuffer).size === 1;
+            this.typeaheadBuffer = wasCycling ? char : this.typeaheadBuffer + char;
+            if (!this.prefixMatchTypeahead(this.typeaheadBuffer)) {
+                this.typeaheadBuffer = char;
+                this.prefixMatchTypeahead(this.typeaheadBuffer);
+            }
+        }
+        this.typeaheadTimeout = setTimeout(() => {
+            this.typeaheadBuffer = "";
+        }, 500);
+    }
+    /**
+     * Cycles focus/selection through options that start with the given
+     * character, wrapping around to the first match after the last one.
+     */
+    cycleTypeahead(char) {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        const matching = enabledOptions.filter((o) => o.label?.toLowerCase().startsWith(char));
+        if (matching.length === 0) {
+            return;
+        }
+        const anchorValue = this.getTypeaheadAnchorValue();
+        const currentIdx = matching.findIndex((o) => o.value === anchorValue);
+        const nextIdx = (currentIdx + 1) % matching.length;
+        this.applyTypeaheadMatch(matching[nextIdx]);
+    }
+    /**
+     * Finds the first enabled option whose label starts with the given prefix
+     * (case-insensitive) and focuses/selects it. Returns whether a match was
+     * found, so the caller can fall back to a single-character retry.
+     */
+    prefixMatchTypeahead(prefix) {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        const match = enabledOptions.find((o) => o.label?.toLowerCase().startsWith(prefix));
+        if (match) {
+            this.applyTypeaheadMatch(match);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Returns the value of the currently focused option (when open) or the
+     * last selected value (when closed), used as the starting point for cycling.
+     */
+    getTypeaheadAnchorValue() {
+        if (this.open) {
+            const focused = this.options.find((o) => o.querySelector('[role="option"][tabindex="0"]'));
+            return focused?.value;
+        }
+        return this.value?.[this.value.length - 1];
+    }
+    /**
+     * Applies a typeahead match by focusing the option in the open list.
+     */
+    applyTypeaheadMatch(option) {
+        if (this.open) {
+            this.optionList.focusItemWithValue(option.value);
+        }
+    }
     getValueLabel() {
         return Boolean(this.value)
             ? this.value
@@ -118,11 +219,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: '4a52474a84ddb2f31804ad8c7e593b7f66668136', onKeyDown: this.onKeyDown }, h("div", { key: '499bffdf6da163ff865c5ee335473e500b4863b6', class: className }, h("swirl-popover-trigger", { key: '1838e94f5ef3b5f0f966618dafc92bc291bad7c2', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'c7280406b0d22b3d5ae4fbe1122f12e74ee48352', class: "select__value-container" }, this.standalone && (h("span", { key: '7669d5d4a2768148d47adb9df1c9000543adcc7d', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'e260c10e3a6fbd1c1a5bab59cf27dc034de9a9cd', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '824f6bee796b8cfd96c883d6e850e80aefa74f28', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'fb5381d9847789755c891530848715a66612c73a', onKeyDown: this.onKeyDown }, h("div", { key: 'ec4a8fd2cf3e29ec98b4855e7962808c97232684', class: className }, h("swirl-popover-trigger", { key: 'd8cd5ad295b1b05175c13f5492a44b9d171f07a7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'e488349fbb57486ca6916eae73fe3f222503408f', class: "select__value-container" }, this.standalone && (h("span", { key: 'b84c6e890d51940c32780197e1201707fdaabe84', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '5e11eeaca9f63f501c0a776d79e2a920188d1f16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '6a24242f1b1c12b79fb705e905cc56b45edccbb0', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '582b90d8f10aef371fbefbbaa8047473b2050d15', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '84aedb5d46959ecca9afd3ad99c1fdc22a54461b', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '8b1fd39c468f17002698f5695838f22caaf3e85f', class: "select__search" }, h("swirl-icon-search", { key: '8bc4856fe8e0c78ec76f49df8d1abe68fa35717c', class: "select__search-icon", size: 20 }), h("input", { key: 'ff78bf79652a26b806ede427ae18c9f4a9f0070f', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '76954ab87f375fa9a95e9bca3106cb055705c550', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'c88aeae4f0ae5315e45958e04ef5a836f5d74ba9', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '00f71a275007321fa3a3fa26d24e1b73d34e9be6', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '8051a991c25c83b394e4ef7e469b65dd4103d0ca', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '1d380c7e2b549bbd54488c431b8da08e0255ba33', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '1269e975efb7930b3defdc7e818d044e63bfbf31', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '8807a75e712facd319f2a7d62466ea8009bf02e4', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '744926136b2d2b85623e1388e2e2bab32e5f597d', class: "select__search" }, h("swirl-icon-search", { key: 'fb629903439586f28dcc89cc4a13180f93d282e4', class: "select__search-icon", size: 20 }), h("input", { key: '7e5e6a98ac828330cb6e3bc5fb735d2bdedfc0c0', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '180c43636f58b88658181b728dbbd40c26cd89bc', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'e0c3e2ec010851a20b99ae33bcff619b1f3c067f', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '1c9712715420c7b2e390577d21cc0fa2f66e163c', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '8486dce94b93b2bb2471ac26a8ead72aba8b7d4b', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'a6684b60611a1b5eab4a19e444b8d6ef113eb59c', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-select/swirl-select.stories.js

@@ -15,25 +15,45 @@ const Template = (args) => {
     const element = generateStoryElement("swirl-select", args);
     formControl.label = "Select";
     element.innerHTML = `
-    <swirl-option-list-section label="Section 1">
+    <swirl-option-list-section label="Fruits">
       <swirl-option-list-item
-        label="This is an option 1"
+        label="Apple"
         value="1"
       ></swirl-option-list-item>
       <swirl-option-list-item
-        label="This is an option 2"
+        label="Apricot"
         value="2"
       ></swirl-option-list-item>
       <swirl-option-list-item
-        label="This is an option 3"
+        label="Avocado"
         value="3"
       ></swirl-option-list-item>
-    </swirl-option-list-section>
-    <swirl-option-list-section label="Section 2">
       <swirl-option-list-item
-        label="This is an option 4"
+        label="Artichoke"
         value="4"
       ></swirl-option-list-item>
+      <swirl-option-list-item
+        label="Banana"
+        value="5"
+      ></swirl-option-list-item>
+      <swirl-option-list-item
+        label="Blueberry"
+        value="6"
+      ></swirl-option-list-item>
+    </swirl-option-list-section>
+    <swirl-option-list-section label="Vegetables">
+      <swirl-option-list-item
+        label="Carrot"
+        value="7"
+      ></swirl-option-list-item>
+      <swirl-option-list-item
+        label="Celery"
+        value="8"
+      ></swirl-option-list-item>
+      <swirl-option-list-item
+        label="Tomato"
+        value="9"
+      ></swirl-option-list-item>
     </swirl-option-list-section>
   `;
     formControl.append(element);

package/dist/components/FileSaver.min.js

@@ -0,0 +1 @@
+import{a as t}from"./index2.js";var o,n,e={exports:{}},i=(o||(o=1,n=e,function(){function o(t,o,n){var e=new XMLHttpRequest;e.open("GET",t),e.responseType="blob",e.onload=function(){r(e.response,o,n)},e.onerror=function(){console.error("could not download file")},e.send()}function e(t){var o=new XMLHttpRequest;o.open("HEAD",t,!1);try{o.send()}catch(t){}return 200<=o.status&&299>=o.status}function i(t){try{t.dispatchEvent(new MouseEvent("click"))}catch(n){var o=document.createEvent("MouseEvents");o.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),t.dispatchEvent(o)}}var a="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof t&&t.global===t?t:void 0,c=a.navigator&&/Macintosh/.test(navigator.userAgent)&&/AppleWebKit/.test(navigator.userAgent)&&!/Safari/.test(navigator.userAgent),r=a.saveAs||("object"!=typeof window||window!==a?function(){}:"download"in HTMLAnchorElement.prototype&&!c?function(t,n,c){var r=a.URL||a.webkitURL,f=document.createElement("a");f.download=n=n||t.name||"download",f.rel="noopener","string"==typeof t?(f.href=t,f.origin===location.origin?i(f):e(f.href)?o(t,n,c):i(f,f.target="_blank")):(f.href=r.createObjectURL(t),setTimeout((function(){r.revokeObjectURL(f.href)}),4e4),setTimeout((function(){i(f)}),0))}:"msSaveOrOpenBlob"in navigator?function(t,n,a){if(n=n||t.name||"download","string"!=typeof t)navigator.msSaveOrOpenBlob(function(t,o){return void 0===o?o={autoBom:!1}:"object"!=typeof o&&(console.warn("Deprecated: Expected third argument to be a object"),o={autoBom:!o}),o.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(t.type)?new Blob(["\ufeff",t],{type:t.type}):t}(t,a),n);else if(e(t))o(t,n,a);else{var c=document.createElement("a");c.href=t,c.target="_blank",setTimeout((function(){i(c)}))}}:function(t,n,e,i){if((i=i||open("","_blank"))&&(i.document.title=i.document.body.innerText="downloading..."),"string"==typeof t)return o(t,n,e);var r="application/octet-stream"===t.type,f=/constructor/i.test(a.HTMLElement)||a.safari,l=/CriOS\/[\d]+/.test(navigator.userAgent);if((l||r&&f||c)&&"undefined"!=typeof FileReader){var u=new FileReader;u.onloadend=function(){var t=u.result;t=l?t:t.replace(/^data:[^;]*;/,"data:attachment/file;"),i?i.location.href=t:location=t,i=null},u.readAsDataURL(t)}else{var d=a.URL||a.webkitURL,s=d.createObjectURL(t);i?i.location=s:location.href=s,i=null,setTimeout((function(){d.revokeObjectURL(s)}),4e4)}});a.saveAs=r.saveAs=r,n.exports=r}()),e.exports);export{i as F}