@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
+require('./utils-UfZG-xPD.js');
+
+const swirlResourceListFileItemCss = ".sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+
+const SwirlResourceListFileItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.remove = index.createEvent(this, "remove", 7);
+        this.icon = "<swirl-icon-file></swirl-icon-file>";
+        this.removeButtonLabel = "Remove file";
+        this.mediaQueryUnsubscribe = () => { };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        if (!Boolean(this.iconEl)) {
+            return;
+        }
+        const icon = this.iconEl.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    render() {
+        const showError = Boolean(this.errorMessage);
+        const showDescription = !showError && Boolean(this.description);
+        const showSpinner = !showError && this.loading;
+        const showRemoveButton = this.removable && !showSpinner;
+        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
+        const containerRole = hostRole === "row" ? "gridcell" : undefined;
+        const className = index$1.classnames("resource-list-file-item", {
+            "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+        });
+        return (index.h(index.Host, { key: 'b09dbdef96f15ac57c5bebb0c115ef033a99c4bb', role: hostRole }, index.h("div", { key: '63b07a708a9782c7b6d05070593c0162edd09ea9', class: className, part: "resource-list-file-item", role: containerRole }, index.h("span", { key: '6c460d1ef0888f496f6a9c9abda6ce61b789dc79', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { key: '26f8d6b0ddc66e7d2306da25e5be7d78e09ea9b8', class: "resource-list-file-item__label-container" }, index.h("span", { key: '944e7098e0eb2292b758d47c3ff939ba04b6c9b2', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (index.h("span", { key: 'ba875cb4d4390a14cc82516ba06e8b5dda77924b', class: "resource-list-file-item__description" }, this.description)), showError && (index.h("span", { key: '97593a07b68c57a5fe1e54957c56209fcf677b28', "aria-live": "polite", class: "resource-list-file-item__error-message" }, index.h("swirl-inline-error", { key: '537f2387b4c4d3b9943de0892084276a5cbf589c', message: this.errorMessage, size: "s" })))), showSpinner && (index.h("span", { key: 'edcaf0d5fce72b06d37c8a7c3338bc84fdd95255', class: "resource-list-file-item__spinner" }, index.h("swirl-spinner", { key: '80c7c457d0342a42d0ea150db844bb3efa3e8ec8', size: "s" }))), showRemoveButton && (index.h("span", { key: 'c9ac687f12e5fe62176a946eb6cb081015602b46', class: "resource-list-file-item__remove-button" }, index.h("swirl-button", { key: '082284dbe3b38db6dff7c1b772d476ef3143d52f', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlResourceListFileItem.style = swirlResourceListFileItemCss;
+
+exports.swirl_resource_list_file_item = SwirlResourceListFileItem;

package/dist/cjs/swirl-resource-list-section.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+
+const swirlResourceListSectionCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlResourceListSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.separatorSpacing = "4";
+        this.spacing = "0";
+        this.hasSeparator = false;
+    }
+    render() {
+        const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
+        const childrenListRole = role === "listitem" ? "list" : undefined;
+        return (index.h(index.Host, { key: 'c34e47e6fd1d0f2da264ca08539dbddcc4a5f897' }, this.hasSeparator && (index.h("swirl-separator", { key: '0ef25b01d019867c30aa5edc1b22f7fb1ae22e35', spacing: this.separatorSpacing, semantics: "none" })), index.h("div", { key: '9113b35ea4c31a473ccac5e696f393dbed3f44bf', "aria-labelledby": "label", role: role }, index.h("span", { key: 'f38ba515e9d5603b572f199ce7b4038260454d3e', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), index.h("swirl-stack", { key: 'e5dd993e7abd78a6886269150eae4827e01ff7c4', spacing: this.spacing, swirlAriaRole: childrenListRole }, index.h("slot", { key: '46cc133e43e38f448d6bfc095b923e6701be5f0d' })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlResourceListSection.style = swirlResourceListSectionCss;
+
+exports.swirl_resource_list_section = SwirlResourceListSection;

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
+require('./utils-UfZG-xPD.js');
+
+const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
+
+const SwirlSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clear = index.createEvent(this, "clear", 7);
+        this.inputBlur = index.createEvent(this, "inputBlur", 7);
+        this.inputFocus = index.createEvent(this, "inputFocus", 7);
+        this.inputInput = index.createEvent(this, "inputInput", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.clearButtonLabel = "Clear search term";
+        this.placeholder = "Search …";
+        this.variant = "filled";
+        this.clearable = true;
+        this.mediaQueryUnsubscribe = () => { };
+        this.handleClear = () => {
+            this.input.value = "";
+            this.input.focus();
+            this.valueChange.emit("");
+            this.clear.emit();
+        };
+        this.onBlur = (event) => {
+            this.inputBlur.emit(event);
+        };
+        this.onChange = (event) => {
+            this.valueChange.emit(event.target.value);
+        };
+        this.onFocus = (event) => {
+            this.inputFocus.emit(event);
+        };
+        this.onInput = (event) => {
+            this.inputInput.emit(event.target.value);
+        };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
+        // see https://stackoverflow.com/a/27314017
+        if (this.autoFocus) {
+            setTimeout(() => {
+                this.input.focus();
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        if (!Boolean(this.iconEl)) {
+            return;
+        }
+        const icon = this.iconEl.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    onKeyDown(event) {
+        if ((event.code === "KeyK" || event.code === "Slash") &&
+            (event.ctrlKey || event.metaKey)) {
+            this.input.focus();
+        }
+    }
+    render() {
+        const className = index$1.classnames("search", `search--variant-${this.variant}`, {
+            "search--disabled": this.disabled,
+        });
+        return (index.h(index.Host, { key: 'e81efc90b3d6a499688011221cc2a15c6f792dc2' }, index.h("span", { key: 'b7790e867c09bf68ffe59ec8d28f3880d4e8545a', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: 'dbda6b7c55171ee6c1d70d2eb12d42ed0158f10c', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '4cebbf2d5e9543728453055bfed8a6d94f6bd935', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (index.h("button", { key: 'a471b4e873ed08cf152c9b60fef8f36df2bb6b65', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, index.h("swirl-icon-cancel", { key: 'c418cfeddcadecbb411e72e5a66dd00ca3a46679' }))))));
+    }
+};
+SwirlSearch.style = swirlSearchCss;
+
+exports.swirl_search = SwirlSearch;

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

@@ -0,0 +1,142 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var utils = require('./utils-UfZG-xPD.js');
+
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";
+
+const SwirlSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.searchChange = index.createEvent(this, "searchChange", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.allowDeselect = true;
+        this.emptyListLabel = "No results found.";
+        this.searchInputLabel = "Search options";
+        this.selectId = Math.round(Math.random() * 1000000).toString();
+        this.options = [];
+        this.select = (event) => {
+            event.stopPropagation();
+            this.value = event.detail;
+            if (!this.multiSelect) {
+                this.swirlPopover.close();
+            }
+        };
+        this.unselectOption = (value) => {
+            if (!this.allowDeselect) {
+                return;
+            }
+            this.value = this.value.filter((v) => v !== value);
+        };
+        this.onSlotChange = () => {
+            this.updateOptions();
+        };
+        this.onOpen = (event) => {
+            this.placement = event.detail.position?.placement;
+            this.open = true;
+            if (this.withSearch && Boolean(this.searchInput)) {
+                this.searchInput.focus();
+            }
+            else {
+                this.optionList.querySelector('[tabIndex="0"]')?.focus();
+            }
+        };
+        this.onClose = () => {
+            if (Boolean(this.searchInput)) {
+                this.searchInput.value = "";
+                this.searchChange.emit("");
+            }
+            this.open = false;
+            this.input.focus();
+        };
+        this.onKeyDown = (event) => {
+            if (event.code === "Space" || event.code === "Enter") {
+                if (event.target === this.searchInput) {
+                    return;
+                }
+                event.preventDefault();
+                this.swirlPopover.open(this.el);
+            }
+            else if (event.code === "ArrowDown" &&
+                event.target === this.searchInput) {
+                this.optionList.querySelector('[tabIndex="0"]')?.focus();
+            }
+        };
+        this.onSearchInput = (event) => {
+            this.searchChange.emit(event.target.value);
+        };
+    }
+    componentWillLoad() {
+        queueMicrotask(() => {
+            this.updateOptions();
+            this.observeSlotChanges();
+        });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    onWindowFocusIn(event) {
+        if (event.target === this.el.querySelector("input")) {
+            event.stopImmediatePropagation();
+        }
+    }
+    onValueChange(newValue, oldValue) {
+        const isValueUnchanged = newValue?.length === oldValue?.length &&
+            newValue?.every((v) => oldValue?.includes(v));
+        if (isValueUnchanged) {
+            return;
+        }
+        this.valueChange.emit(this.value);
+    }
+    observeSlotChanges() {
+        this.observer = new MutationObserver(() => {
+            this.updateOptions();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    updateOptions() {
+        this.options = utils.querySelectorAllDeep(this.el, "swirl-option-list-item");
+    }
+    getValueLabel() {
+        return Boolean(this.value)
+            ? this.value
+                ?.map((value) => this.options.find((option) => option.value === value)?.label)
+                .join(", ")
+            : "";
+    }
+    render() {
+        const label = this.getValueLabel();
+        const ariaInvalid = this.invalid === true || this.invalid === false
+            ? String(this.invalid)
+            : undefined;
+        const formControl = this.el.closest("swirl-form-control");
+        const offset = this.standalone
+            ? [-8, 0]
+            : formControl?.inline || formControl?.labelPosition === "outside"
+                ? [0, -12]
+                : [0, -16];
+        const className = index$1.classnames("select", `select--placement-${this.placement}`, {
+            "select--disabled": this.disabled,
+            "select--inline": this.inline,
+            "select--multi": this.multiSelect,
+            "select--search-loading": this.searchLoading,
+            "select--standalone": this.standalone,
+        });
+        return (index.h(index.Host, { key: '8f635016fafc23d646e43949071d53d5636ece03', onKeyDown: this.onKeyDown }, index.h("div", { key: 'adadc26967eceda49cff1963419e8e43221c3810', class: className }, index.h("swirl-popover-trigger", { key: '17172460877b21492eef6dab51b983787f283abd', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("swirl-stack", { key: 'e2756eae213cdbadbc77c006c3f6c0237af46555', class: "select__value-container" }, this.standalone && (index.h("span", { key: 'b4877e0c1cbab6cf99e2a4367ffe083632138926', "aria-hidden": "true", class: "select__resize-helper" }, label)), index.h("input", { key: '819702a9a4ca946c4dd3c853c57ebef751a21652', "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: '2942ad5674e21e5a7a9961ff00a653590d6a37a3', 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: 'f1cfbdd7ab962d4f8f05c223aff0f8925406cf1f', 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: '3bec6fc755117a723948bb8d12544d2ead692e81', 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: '266ff087c627ef0b26a27ab99628b46e63a779e2', class: "select__search" }, index.h("swirl-icon-search", { key: 'ef6c7375ad6e9baade046418451e97fe17ff0d77', class: "select__search-icon", size: 20 }), index.h("input", { key: 'fc392034d3ed74904b8ea4950d77a4a6d6a71a17', "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: '86ddbbc3dc4b1feb2ef64bc876bfec572702183c', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: 'dfeee17302b603d4496da582ad57ce013f824a44', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: 'a0740a4d04431589ff78454a1ab53e140cc07d09', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '5069bade47c5f2bf5e3c7d8219d987bf7a66df31', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: 'cca977eb6af16eff150f5b65b0be3565bb090d0c', onSlotchange: this.onSlotChange }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChange"]
+    }; }
+};
+SwirlSelect.style = swirlSelectCss;
+
+exports.swirl_select = SwirlSelect;

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+
+const swirlSeparatorCss = ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";
+
+const SwirlSeparator = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.borderColor = "default";
+        this.color = "default";
+        this.orientation = "horizontal";
+        this.semantics = "separator";
+        this.spacing = "8";
+    }
+    componentWillLoad() {
+        this.forceColor();
+    }
+    forceColor() {
+        if (this.borderColor !== "default") {
+            console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.');
+            this.color = this.borderColor;
+        }
+    }
+    render() {
+        const styles = this.orientation === "horizontal"
+            ? {
+                paddingTop: `var(--s-space-${this.spacing})`,
+                paddingBottom: `var(--s-space-${this.spacing})`,
+            }
+            : {
+                paddingRight: `var(--s-space-${this.spacing})`,
+                paddingLeft: `var(--s-space-${this.spacing})`,
+            };
+        const className = index$1.classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
+        const attributes = this.semantics === "separator"
+            ? { "aria-orientation": this.orientation }
+            : {};
+        return (index.h(index.Host, { key: '23acb3a29638b92737838e75a54d7616e6c9150e', ...attributes, class: className, role: this.semantics, style: styles }, index.h("span", { key: '3ebf80f47fb36438403551f560db91ecf7d7e559', class: "separator__line" }), this.label && (index.h(index.Fragment, { key: '84ac7960ba714ab27559751c11bd7c4b56ac3176' }, index.h("span", { key: '6f8dc3ad3bde938789e28ad05c67da657262a4d1', class: "separator__label" }, this.label), index.h("span", { key: '63ddb77ea887a890bb1731d12a939783b592e21a', class: "separator__line" })))));
+    }
+};
+SwirlSeparator.style = swirlSeparatorCss;
+
+exports.swirl_separator = SwirlSeparator;

package/dist/cjs/swirl-shell-layout.cjs.entry.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var focusTrap_esm = require('./focus-trap.esm-kePK98yh.js');
+var utils = require('./utils-UfZG-xPD.js');
+
+const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
+
+const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
+const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
+const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
+const SwirlShellLayout = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.historyBackClick = index.createEvent(this, "historyBackClick", 7);
+        this.historyForwardClick = index.createEvent(this, "historyForwardClick", 7);
+        this.skipLinkClick = index.createEvent(this, "skipLinkClick", 7);
+        this.browserBackButtonLabel = "Navigate back";
+        this.browserForwardButtonLabel = "Navigate forward";
+        this.collapseNavigationButtonLabel = "Collapse navigation";
+        this.enableSecondaryNavGridLayout = true;
+        this.secondaryNavGridLayoutVariant = "tiled";
+        this.expandNavigationButtonLabel = "Expand navigation";
+        this.gridNavLayoutToggleLabel = "Grid";
+        this.hideMobileNavigationButtonLabel = "Close navigation";
+        this.listNavLayoutToggleLabel = "List";
+        this.navigationLabel = "Main";
+        this.secondaryNavCollapseLabel = "Show less";
+        this.secondaryNavExpandLabel = "Show more";
+        this.skipLinkLabel = "Skip to main content";
+        this.isDesktopViewport = true;
+        this.secondaryNavView = "list";
+        this.collectNavItems = () => {
+            this.mainNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item"));
+            this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
+            this.toggleNavItemLabels();
+            this.setSecondaryNavItemsTiled();
+        };
+        this.toggleSecondaryNavView = (event) => {
+            event.stopPropagation();
+            if (this.secondaryNavView === "grid") {
+                this.secondaryNavView = "list";
+            }
+            else {
+                this.secondaryNavView = "grid";
+            }
+            this.setSecondaryNavItemsTiled();
+            localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
+        };
+        this.toggleSecondaryNavCollapse = (event) => {
+            event.stopPropagation();
+            this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
+            localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
+        };
+        this.onNavigationToggleClick = () => {
+            this.navigationCollapsed = !this.navigationCollapsed;
+        };
+        this.onNavigationClick = () => {
+            this.hideMobileNavigation();
+        };
+    }
+    componentWillLoad() {
+        this.isDesktopViewport = utils.isDesktopViewport();
+        this.collectNavItems();
+        const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
+        this.navigationCollapsed = restoredNavigationCollapseState;
+        this.restoreSecondaryNavState();
+    }
+    componentDidLoad() {
+        this.focusTrap = focusTrap_esm.createFocusTrap(this.navElement, {
+            allowOutsideClick: true,
+            tabbableOptions: {
+                getShadowRoot: (node) => {
+                    return node.shadowRoot;
+                },
+            },
+        });
+        this.collectNavItems();
+        this.navMutationObserver = new MutationObserver(() => {
+            this.collectNavItems();
+        });
+        this.navMutationObserver.observe(this.navElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    componentDidRender() {
+        this.focusTrap?.updateContainerElements(this.navElement);
+    }
+    disconnectedCallback() {
+        this.focusTrap?.deactivate();
+        this.navMutationObserver?.disconnect();
+    }
+    onWindowKeyDown(event) {
+        if (event.key === "Escape" && this.mobileNavigationActive) {
+            this.hideMobileNavigation();
+        }
+    }
+    watchEnableSecondaryNavGridLayout() {
+        this.restoreSecondaryNavState();
+    }
+    watchMobileNavigationState() {
+        if (this.mobileNavigationActive) {
+            // wait for animation
+            setTimeout(() => {
+                this.focusTrap.activate();
+            }, 200);
+        }
+        else {
+            this.focusTrap.deactivate();
+        }
+    }
+    watchNavigationCollapsed() {
+        localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
+        this.toggleNavItemLabels();
+        this.setSecondaryNavItemsTiled();
+    }
+    onWindowResize() {
+        if (this.isDesktopViewport !== utils.isDesktopViewport()) {
+            this.isDesktopViewport = utils.isDesktopViewport();
+            this.collectNavItems();
+        }
+    }
+    /**
+     * Opens the mobile navigation.
+     */
+    async showMobileNavigation() {
+        this.mobileNavigationActive = true;
+        this.collectNavItems();
+    }
+    /**
+     * Hides the mobile navigation.
+     */
+    async hideMobileNavigation() {
+        this.mobileNavigationActive = false;
+        this.toggleNavItemLabels();
+    }
+    toggleNavItemLabels() {
+        [...this.secondaryNavItems, ...this.mainNavItems].forEach((item) => {
+            item.hideLabel = this.navigationCollapsed && this.isDesktopViewport;
+        });
+    }
+    setSecondaryNavItemsTiled() {
+        this.secondaryNavItems.forEach((item) => {
+            item.variant =
+                this.enableSecondaryNavGridLayout &&
+                    (this.secondaryNavView === "grid" ||
+                        (this.navigationCollapsed && this.isDesktopViewport))
+                    ? this.secondaryNavGridLayoutVariant
+                    : "default";
+        });
+    }
+    restoreSecondaryNavState() {
+        if (this.enableSecondaryNavGridLayout) {
+            const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
+                "true";
+            this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
+            const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
+            this.secondaryNavView =
+                restoredSecondaryNavigationViewState;
+        }
+    }
+    render() {
+        const mainNavCollapsed = this.navigationCollapsed && this.isDesktopViewport;
+        const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
+        const className = index$1.classnames("shell-layout", {
+            "shell-layout--branded-header": this.brandedHeader,
+            "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
+            "shell-layout--has-secondary-nav": hasSecondaryNav,
+            "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
+            "shell-layout--navigation-collapsed": mainNavCollapsed,
+        });
+        return (index.h(index.Host, { key: '11f27a30db70b481221ba412612a16afd8ef4d72' }, index.h("div", { key: '7cf7daa26a8e221823bf6ae7c121baf48e52e6ea', class: className }, index.h("header", { key: 'a956639386c3687b89a4b6a016ac9ad910fdc473', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '3f3da9e17ac4a7a7b0f8a4f9a467ffc15ae364c0', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: '59e4a09dac753b16ece8644c7db1523f9f173691', class: "shell-layout__header-left" }, index.h("swirl-tooltip", { key: 'cae944de28eb6aaa5b2de822e6386d629ee323a7', content: this.navigationCollapsed
+                ? this.expandNavigationButtonLabel
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, index.h("button", { key: '5d8960db7d687b43757ecb7dbb0863489e05081e', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (index.h("swirl-icon-dock-left-expand", { size: 20 })) : (index.h("swirl-icon-dock-left-collapse", { size: 20 })), index.h("swirl-visually-hidden", { key: 'b48f8efd3a2cb1e0b60473a0b0167ea8408c2176' }, this.navigationCollapsed
+            ? this.expandNavigationButtonLabel
+            : this.collapseNavigationButtonLabel))), index.h("a", { key: '3f990c9fa51549a810aa9bc46cd23269fae8c32c', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: 'c659d9cc48087b6a43346eacbd0d128db073676a', size: 20 }), index.h("swirl-visually-hidden", { key: 'eccaec06098f776a24ce2eb577bd2d8a0ce8e0c0' }, this.browserBackButtonLabel)), index.h("a", { key: 'bb4b28473ebbfa6ec8960db030e2e6e6be3faf24', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '7f187a039f74685d27f65599424bae0ee8271484', size: 20 }), index.h("swirl-visually-hidden", { key: '9519741437ed576e26db2ccdf5d97a3824a589f8' }, this.browserForwardButtonLabel)), index.h("slot", { key: '59891d167faaefb1381bd8c48dbbc6d2ea25fd0c', name: "left-header-tools" })), index.h("div", { key: 'a68dc128184b3823641aecce80beb2aa3cfdad17', class: "shell-layout__logo" }, index.h("slot", { key: '2971db5f2ed47a6ce98ba32eac93e98cf5c098df', name: "logo" })), index.h("div", { key: '38bf7b342407144f4bb8b37629ff0c25313150e3', class: "shell-layout__header-right" }, index.h("slot", { key: 'c95cbfabdd2a59abb23fe91b0f675b86a878b114', name: "right-header-tools" }), index.h("slot", { key: 'aa4153e296bcd85030e5b896552cd3e4d24afab4', name: "avatar" }))), index.h("div", { key: '78d7e653eda4391257d5c20460d4856fca00edd8', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: 'b44c3e844a955970276b6e4d5c19175c99b908f6', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: '7056374cb171bc0a0a3b997c30a9f4d4451a32cf', class: "shell-layout__mobile-header" }, index.h("slot", { key: '99a5b06bb78cce36642beedd4ee0446645afeacb', name: "mobile-logo" }), index.h("div", { key: '361821d5afc9ba23cee0d2e38e907040fa8bffb9', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: 'e7b14d93e085c40f243a0e30b3b7cf6bc2303de6', name: "mobile-header-tools" }), index.h("button", { key: '27c50122fb3f56af21f9ee534f20c77b786c3621', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '17970823b5344ec0e98b3f08f131c4d74f8063a6', size: 20 }), index.h("swirl-visually-hidden", { key: '543dabd9f3972ac4dcf6d837f8a4fae84b6d631a' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '5dfd21448b23b3aea62724b719decf015ccba330', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '2558078eef90297b0021e7752b0734148a94124d' }, index.h("span", { key: '8d5d2c8633a34f6578c7d90a7ff95e7f11d91b02', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: 'c9c10b1e6c7d203cb1dc6888470b8f17b7f95a2a', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '286be02ac7ef9035b37d378736733f338dd5b297', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: 'c3cd977a9731afa485b5035fe0e732e482aa5aa3', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'd6e9d09f11f94ffdb1860d282b1bd1529a1d9a85', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: '70c2d4f3c09c8175a0914e266e561764b9d10d37', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: 'd4d7086d91a2e87d593e266a15d90ba518162669', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
+                : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
+                ? this.secondaryNavExpandLabel
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (index.h("swirl-button", { key: 'fdf6bd0f9e0f5761676d723125f22cd3027efa8a', icon: this.secondaryNavView === "grid"
+                ? "<swirl-icon-menu></swirl-icon-menu>"
+                : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
+                ? this.gridNavLayoutToggleLabel
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '41429cee91120b9015cca9b93f6c4c679ab6e57f', class: {
+                [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
+                "shell-layout__secondary-nav-items": true,
+                "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
+                    this.secondaryNavView === "grid",
+            } }, index.h("slot", { key: 'e5c1b6a114fd13d98632b05f542fa400f4cdf7e9', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: '3ab8d1162dda16dd8c1d5a04345d76237e13b7c2', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: 'ac030ad491554f3e7d6b1645361fe3fb387734f8' })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "enableSecondaryNavGridLayout": ["watchEnableSecondaryNavGridLayout"],
+        "mobileNavigationActive": ["watchMobileNavigationState"],
+        "navigationCollapsed": ["watchNavigationCollapsed"]
+    }; }
+};
+SwirlShellLayout.style = swirlShellLayoutCss;
+
+exports.swirl_shell_layout = SwirlShellLayout;