@getflip/swirl-components 0.197.1 → 0.198.0

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

@@ -2,140 +2,141 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1de6abbd.js');
-const index$1 = require('./index-2ddd0598.js');
-const utils = require('./utils-459fb5e9.js');
+const index = require('./index-2ab5d772.js');
+const index$1 = require('./index-9f94303c.js');
+const utils = require('./utils-fc5855ec.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--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__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;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 SwirlSelectStyle0 = swirlSelectCss;
 
 const SwirlSelect = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.searchChange = index.createEvent(this, "searchChange", 7);
-    this.valueChange = index.createEvent(this, "valueChange", 7);
-    this.select = (event) => {
-      this.value = event.detail;
-      this.valueChange.emit(this.value);
-      if (!this.multiSelect) {
-        this.popover.close();
-      }
-    };
-    this.unselectOption = (value) => {
-      if (!this.allowDeselect) {
-        return;
-      }
-      this.value = this.value.filter((v) => v !== value);
-      this.valueChange.emit(this.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;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.searchChange = index.createEvent(this, "searchChange", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.select = (event) => {
+            this.value = event.detail;
+            this.valueChange.emit(this.value);
+            if (!this.multiSelect) {
+                this.swirlPopover.close();
+            }
+        };
+        this.unselectOption = (value) => {
+            if (!this.allowDeselect) {
+                return;
+            }
+            this.value = this.value.filter((v) => v !== value);
+            this.valueChange.emit(this.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);
+        };
+        this.allowDeselect = true;
+        this.disabled = undefined;
+        this.emptyListLabel = "No results found.";
+        this.inline = undefined;
+        this.invalid = undefined;
+        this.label = undefined;
+        this.multiSelect = undefined;
+        this.required = undefined;
+        this.searchInputLabel = "Search options";
+        this.searchLoading = undefined;
+        this.searchPlaceholder = undefined;
+        this.selectId = Math.round(Math.random() * 1000000).toString();
+        this.swirlAriaDescribedby = undefined;
+        this.value = undefined;
+        this.withSearch = undefined;
+        this.options = [];
+        this.open = undefined;
+        this.placement = undefined;
+    }
+    componentWillLoad() {
+        queueMicrotask(() => {
+            this.updateOptions();
+            this.observeSlotChanges();
+        });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    onWindowFocusIn(event) {
+        if (event.target === this.el.querySelector("input")) {
+            event.stopImmediatePropagation();
         }
-        event.preventDefault();
-        this.popover.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);
-    };
-    this.allowDeselect = true;
-    this.disabled = undefined;
-    this.emptyListLabel = "No results found.";
-    this.inline = undefined;
-    this.invalid = undefined;
-    this.label = undefined;
-    this.multiSelect = undefined;
-    this.required = undefined;
-    this.searchInputLabel = "Search options";
-    this.searchLoading = undefined;
-    this.searchPlaceholder = undefined;
-    this.selectId = Math.round(Math.random() * 1000000).toString();
-    this.swirlAriaDescribedby = undefined;
-    this.value = undefined;
-    this.withSearch = undefined;
-    this.options = [];
-    this.open = undefined;
-    this.placement = undefined;
-  }
-  componentWillLoad() {
-    queueMicrotask(() => {
-      this.updateOptions();
-      this.observeSlotChanges();
-    });
-  }
-  disconnectedCallback() {
-    this.observer?.disconnect();
-  }
-  onWindowFocusIn(event) {
-    if (event.target === this.el.querySelector("input")) {
-      event.stopImmediatePropagation();
     }
-  }
-  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");
-  }
-  render() {
-    const label = Boolean(this.value)
-      ? this.value
-        ?.map((value) => this.options.find((option) => option.value === value)?.label)
-        .join(", ")
-      : "";
-    const ariaInvalid = this.invalid === true || this.invalid === false
-      ? String(this.invalid)
-      : undefined;
-    const formControl = this.el.closest("swirl-form-control");
-    const offset = formControl?.inline || formControl?.labelPosition === "outside"
-      ? -12
-      : -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,
-    });
-    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { swirlPopover: this.popover, setAriaAttributes: false }, index.h("input", { "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", { 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 })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (index.h("div", { class: "select__search" }, index.h("swirl-icon-search", { class: "select__search-icon", size: 20 }), index.h("input", { "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", { class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { onSlotchange: this.onSlotChange }))))));
-  }
-  get el() { return index.getElement(this); }
+    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");
+    }
+    render() {
+        const label = Boolean(this.value)
+            ? this.value
+                ?.map((value) => this.options.find((option) => option.value === value)?.label)
+                .join(", ")
+            : "";
+        const ariaInvalid = this.invalid === true || this.invalid === false
+            ? String(this.invalid)
+            : undefined;
+        const formControl = this.el.closest("swirl-form-control");
+        const offset = formControl?.inline || formControl?.labelPosition === "outside"
+            ? -12
+            : -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,
+        });
+        return (index.h(index.Host, { key: '58916d6039aa612aa0da3051ed299b9fb306b3bd', onKeyDown: this.onKeyDown }, index.h("div", { key: 'd01d0076aa3df876b11f96226505338b63307631', class: className }, index.h("swirl-popover-trigger", { key: 'bba1189aadc9e1825ff7e168a87ec759daf970f7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("input", { key: 'daded0ec5a39aacd87443ed34fde5cd9ce3ab287', "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: '00dca5a7850e925ef3fd318195df82a11dde8588', 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 })))), index.h("span", { key: 'd7f410f0eb4e8704a5f427628f0c8e484f368449', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.h("swirl-popover", { key: '6c36302fb43db41ea9c7fed53ee69921b47a8c30', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (index.h("div", { key: 'ed1717b412892a6fdf56001617d626b33a41b1a2', class: "select__search" }, index.h("swirl-icon-search", { key: '35b83aaae2acf5c76a0d8f69beeabf59f9961702', class: "select__search-icon", size: 20 }), index.h("input", { key: 'f28f116464a57fef366e7d7fbd265c5ced14e7b2', "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: 'ab5fe0412960a2d155fc9edf2dd8f921ec3f309b', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: 'd29f5a5748d347d82bea087ea2d3c0bf571db6da', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: '562628f956eb801a57d8f6102ff3eeb38efc92d8', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '3dd04b241311f841612ab6e154868f7dd4bb7ce5', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: '1465b127ac09dc760ddcd47cba6ff1aa365c303b', onSlotchange: this.onSlotChange }))))));
+    }
+    get el() { return index.getElement(this); }
 };
-SwirlSelect.style = swirlSelectCss;
+SwirlSelect.style = SwirlSelectStyle0;
 
 exports.swirl_select = SwirlSelect;

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

@@ -2,123 +2,124 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1de6abbd.js');
-const index$1 = require('./index-2ddd0598.js');
+const index = require('./index-2ab5d772.js');
+const index$1 = require('./index-9f94303c.js');
 const focusTrap_esm = require('./focus-trap.esm-a1e3774c.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:14rem;--swirl-shell-sidebar-width:21rem;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.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);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:hover{width:var(--swirl-shell-extended-nav-width);padding-right:var(--s-space-12)}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover){scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover)::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.2s;animation-fill-mode:forwards}.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__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;border-bottom:0.0625rem solid var(--s-border-default);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-4);right:var(--s-space-4);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.2s, box-shadow 0.2s, width 0.2s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;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.2s;inset:0}.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)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.2s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@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 SwirlShellLayoutStyle0 = swirlShellLayoutCss;
 
 const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
 const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
 const SwirlShellLayout = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sidebarToggleClick = index.createEvent(this, "sidebarToggleClick", 7);
-    this.skipLinkClick = index.createEvent(this, "skipLinkClick", 7);
-    this.onBrowserBackClick = () => {
-      history.back();
-    };
-    this.onBrowserForwardClick = () => {
-      history.forward();
-    };
-    this.onNavigationToggleClick = () => {
-      this.navigationCollapsed = !this.navigationCollapsed;
-    };
-    this.onNavigationClick = () => {
-      this.hideMobileNavigation();
-    };
-    this.brandedHeader = undefined;
-    this.browserBackButtonLabel = "Navigate back";
-    this.browserForwardButtonLabel = "Navigate forward";
-    this.hideMobileNavigationButtonLabel = "Close navigation";
-    this.navigationLabel = "Main";
-    this.navigationToggleLabel = "Toggle navigation";
-    this.sidebarActive = undefined;
-    this.sidebarToggleBadge = undefined;
-    this.sidebarToggleBadgeAriaLabel = undefined;
-    this.sidebarToggleIcon = "notifications";
-    this.sidebarToggleLabel = "Toggle sidebar";
-    this.skipLinkLabel = "Skip to main content";
-    this.mobileNavigationActive = undefined;
-    this.navigationCollapsed = undefined;
-  }
-  componentWillLoad() {
-    const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
-    this.sidebarActive =
-      this.sidebarActive === undefined
-        ? restoredSidebarState
-        : this.sidebarActive;
-    const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
-    this.navigationCollapsed = restoredNavigationCollapseState;
-  }
-  componentDidLoad() {
-    this.focusTrap = focusTrap_esm.createFocusTrap(this.navElement, {
-      allowOutsideClick: true,
-      tabbableOptions: {
-        getShadowRoot: (node) => {
-          return node.shadowRoot;
-        },
-      },
-    });
-  }
-  componentDidRender() {
-    this.focusTrap?.updateContainerElements(this.navElement);
-  }
-  disconnectedCallback() {
-    this.focusTrap?.deactivate();
-  }
-  onWindowKeyDown(event) {
-    if (event.key === "Escape" && this.mobileNavigationActive) {
-      this.hideMobileNavigation();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sidebarToggleClick = index.createEvent(this, "sidebarToggleClick", 7);
+        this.skipLinkClick = index.createEvent(this, "skipLinkClick", 7);
+        this.onBrowserBackClick = () => {
+            history.back();
+        };
+        this.onBrowserForwardClick = () => {
+            history.forward();
+        };
+        this.onNavigationToggleClick = () => {
+            this.navigationCollapsed = !this.navigationCollapsed;
+        };
+        this.onNavigationClick = () => {
+            this.hideMobileNavigation();
+        };
+        this.brandedHeader = undefined;
+        this.browserBackButtonLabel = "Navigate back";
+        this.browserForwardButtonLabel = "Navigate forward";
+        this.hideMobileNavigationButtonLabel = "Close navigation";
+        this.navigationLabel = "Main";
+        this.navigationToggleLabel = "Toggle navigation";
+        this.sidebarActive = undefined;
+        this.sidebarToggleBadge = undefined;
+        this.sidebarToggleBadgeAriaLabel = undefined;
+        this.sidebarToggleIcon = "notifications";
+        this.sidebarToggleLabel = "Toggle sidebar";
+        this.skipLinkLabel = "Skip to main content";
+        this.mobileNavigationActive = undefined;
+        this.navigationCollapsed = undefined;
     }
-  }
-  watchMobileNavigationState() {
-    if (this.mobileNavigationActive) {
-      // wait for animation
-      setTimeout(() => {
-        this.focusTrap.activate();
-      }, 200);
+    componentWillLoad() {
+        const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
+        this.sidebarActive =
+            this.sidebarActive === undefined
+                ? restoredSidebarState
+                : this.sidebarActive;
+        const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
+        this.navigationCollapsed = restoredNavigationCollapseState;
     }
-    else {
-      this.focusTrap.deactivate();
+    componentDidLoad() {
+        this.focusTrap = focusTrap_esm.createFocusTrap(this.navElement, {
+            allowOutsideClick: true,
+            tabbableOptions: {
+                getShadowRoot: (node) => {
+                    return node.shadowRoot;
+                },
+            },
+        });
     }
-  }
-  watchNavigationCollapsed() {
-    localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
-  }
-  watchSidebarActive() {
-    localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
-  }
-  /**
-   * Opens the mobile navigation.
-   */
-  async showMobileNavigation() {
-    this.mobileNavigationActive = true;
-  }
-  /**
-   * Hides the mobile navigation.
-   */
-  async hideMobileNavigation() {
-    this.mobileNavigationActive = false;
-  }
-  render() {
-    const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
-    const className = index$1.classnames("shell-layout", {
-      "shell-layout--branded-header": this.brandedHeader,
-      "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
-      "shell-layout--navigation-collapsed": this.navigationCollapsed,
-      "shell-layout--sidebar-active": this.sidebarActive,
-    });
-    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { class: "shell-layout__header-left" }, index.h("button", { class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.navigationToggleLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserBackButtonLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserForwardButtonLabel)), index.h("slot", { name: "left-header-tools" })), index.h("div", { class: "shell-layout__logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "shell-layout__header-right" }, index.h("slot", { name: "right-header-tools" }), index.h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
-        ? this.sidebarToggleBadgeAriaLabel
-        : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { name: "avatar" }))), index.h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { class: "shell-layout__mobile-header" }, index.h("slot", { name: "mobile-logo" }), index.h("div", { class: "shell-layout__mobile-header-tools" }, index.h("slot", { name: "mobile-header-tools" }), index.h("button", { class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), index.h("div", { class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", null, index.h("span", { id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { name: "nav" }))), index.h("main", { class: "shell-layout__main", id: "main-content" }, index.h("slot", null)), index.h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, index.h("div", { class: "shell-layout__sidebar-body" }, index.h("div", { class: "shell-layout__sidebar-app-bar" }, index.h("slot", { name: "sidebar-app-bar" })), index.h("div", { class: "shell-layout__sidebar-content" }, index.h("slot", { name: "sidebar" })))))));
-  }
-  static get watchers() { return {
-    "mobileNavigationActive": ["watchMobileNavigationState"],
-    "navigationCollapsed": ["watchNavigationCollapsed"],
-    "sidebarActive": ["watchSidebarActive"]
-  }; }
+    componentDidRender() {
+        this.focusTrap?.updateContainerElements(this.navElement);
+    }
+    disconnectedCallback() {
+        this.focusTrap?.deactivate();
+    }
+    onWindowKeyDown(event) {
+        if (event.key === "Escape" && this.mobileNavigationActive) {
+            this.hideMobileNavigation();
+        }
+    }
+    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));
+    }
+    watchSidebarActive() {
+        localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
+    }
+    /**
+     * Opens the mobile navigation.
+     */
+    async showMobileNavigation() {
+        this.mobileNavigationActive = true;
+    }
+    /**
+     * Hides the mobile navigation.
+     */
+    async hideMobileNavigation() {
+        this.mobileNavigationActive = false;
+    }
+    render() {
+        const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
+        const className = index$1.classnames("shell-layout", {
+            "shell-layout--branded-header": this.brandedHeader,
+            "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
+            "shell-layout--navigation-collapsed": this.navigationCollapsed,
+            "shell-layout--sidebar-active": this.sidebarActive,
+        });
+        return (index.h(index.Host, { key: '0537fcd94b9c1e9036a2a1014db973885162c333' }, index.h("div", { key: 'b4a8e272c26ad948d72b1e08590d2037e79cb6d9', class: className }, index.h("header", { key: '5d469b50e6ab3f0008874a0cd09d510c44e0d404', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: 'f552670d09a5bc55fde4502479cbd5aa3d1d4ae0', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: '0aa664317a2960ea67cf3f8758058472e712c54a', class: "shell-layout__header-left" }, index.h("button", { key: 'abda670d06df03b49d06c8087c5aac3025462233', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: '71eb55d754de002c46f22c80ff5d6f64c643c55b', size: 20 }), index.h("swirl-visually-hidden", { key: '7fffaa71bd000c16d613439a00e04474f09315a4' }, this.navigationToggleLabel)), index.h("button", { key: '2da245bc0c74e28b40289433641966f16b7435e6', class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { key: '7f485ab51d1d8ebf607e7b8492bf96b9c8a51495', size: 20 }), index.h("swirl-visually-hidden", { key: '98b5f0cb2d2a54dab4e9d4938d9ea475d72bf5f7' }, this.browserBackButtonLabel)), index.h("button", { key: '34dc1673c60b58888f65f5bfd8d735c141b81aff', class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { key: 'c02073463549ca59f46ea283d210ba2692bff06d', size: 20 }), index.h("swirl-visually-hidden", { key: '3c62c37fd872b4ff33c5d4f04bef01c393d57f3b' }, this.browserForwardButtonLabel)), index.h("slot", { key: 'a67c4183de71e230ede779a54816ad9a27b93d44', name: "left-header-tools" })), index.h("div", { key: 'c7c55b23a11ebba5c0d1dd43cd6e0f24fd429bb3', class: "shell-layout__logo" }, index.h("slot", { key: '199947a795f2d3047a40a832951d9344b82ea0f7', name: "logo" })), index.h("div", { key: '7fffbcd343cc6258efcefb3d96bbe4a31e478ca7', class: "shell-layout__header-right" }, index.h("slot", { key: '5fdb6f184622ff1d1f06433c35be6011a2253e23', name: "right-header-tools" }), index.h("button", { key: 'e7347cd9ae19487f1bd6aa181fadf6007465d9ec', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: 'c499971777308ce29ed27cc67be1334e84dd3cf9', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: 'bf926492fd9fd409e54ed97e14793bac9fe84f2f' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: '004549923d2c5c63817e9de29dc08b45bd8d1ecc', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+                ? this.sidebarToggleBadgeAriaLabel
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '0849b2725ec5791b6c9464ce73beb41c46c61bbe', name: "avatar" }))), index.h("div", { key: 'f8fb3b13db254602292114ea0529cd07244b0740', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: 'eca701d463a5f0f30b9f35467ee63f78134e7b6b', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: '7ab3d576877ce6d6c098c8c87a1455a4ddd30430', class: "shell-layout__mobile-header" }, index.h("slot", { key: '688ad29080fca45ae368c7d4c8fc4ee9386aeceb', name: "mobile-logo" }), index.h("div", { key: 'd27ebe2c2041d113355f5e4cf1d1b870b3403096', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: '823d203ce91e8a7ded17675ae2e984cc2e84d1bd', name: "mobile-header-tools" }), index.h("button", { key: 'b5d0780ff3da8064b0326a0bcefcac018b1e1c45', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: 'e70757332a6b578d0e9672bc164303668a235a17', size: 20 }), index.h("swirl-visually-hidden", { key: '8f4baa3f5df897d51a20d41c18f4084bf5d23a74' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: 'e461f1cb54d9070836cdaa86ecf064bc75035e33', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '1684349be57057d9bde9ba199b3899807a7e855c' }, index.h("span", { key: '1a567d5ceb0e1e3a7558a1c204db0a64a3bdcb80', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: 'b661b362c39803c2e0808454078f00cacfdb66ce', name: "nav" }))), index.h("main", { key: '6a04abb43878653d6b8f18169e56613550dbeaf2', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: 'd9b508c33f969ae6c213211dfcf21e0e3abd3adf' })), index.h("aside", { key: '253404c1359f5d3d52b6072ea52021ea6b0ab951', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '0cdd6c5b5fe724a2aafcb48e6ce57277206191ad', class: "shell-layout__sidebar-body" }, index.h("div", { key: '57123a5076019647ed7f7aab623bca8a1643fe03', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: 'd584b9d2144b7456e54ac96884a0ce50a9757afa', name: "sidebar-app-bar" })), index.h("div", { key: 'cca8a1755c4531b285a6e99666ba8c108293bcab', class: "shell-layout__sidebar-content" }, index.h("slot", { key: 'a6f3acdfb1bda086c3dc15faea0349e75db689d6', name: "sidebar" })))))));
+    }
+    static get watchers() { return {
+        "mobileNavigationActive": ["watchMobileNavigationState"],
+        "navigationCollapsed": ["watchNavigationCollapsed"],
+        "sidebarActive": ["watchSidebarActive"]
+    }; }
 };
-SwirlShellLayout.style = swirlShellLayoutCss;
+SwirlShellLayout.style = SwirlShellLayoutStyle0;
 
 exports.swirl_shell_layout = SwirlShellLayout;

package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js

@@ -2,34 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1de6abbd.js');
-const index$1 = require('./index-2ddd0598.js');
+const index = require('./index-2ab5d772.js');
+const index$1 = require('./index-9f94303c.js');
 
 const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      background-color: var(--s-background-default);\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      border-width: var(--s-border-width-default);\n      border-style: solid;\n      overflow: hidden;\n    }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n\n    --swirl-app-icon-size: 2rem;\n}\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  min-width: 2rem;\n  min-height: 2rem;\n  height: 2rem;\n  width: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
+const SwirlShellNavigationItemStyle0 = swirlShellNavigationItemCss;
 
 const SwirlShellNavigationItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.active = undefined;
-    this.badgeLabel = undefined;
-    this.href = undefined;
-    this.label = undefined;
-    this.target = undefined;
-    this.boxed = undefined;
-  }
-  render() {
-    const className = index$1.classnames("shell-navigation-item", {
-      "shell-navigation-item--active": this.active,
-      "shell-navigation-item--boxed": this.boxed,
-    });
-    const isLink = Boolean(this.href);
-    const Tag = isLink ? "a" : "button";
-    return (index.h(index.Host, null, index.h(Tag, { class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, index.h("span", { class: "shell-navigation-item__icon" }, index.h("slot", { name: "icon" })), index.h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel !== undefined && this.badgeLabel !== null && (index.h("swirl-badge", { "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
-        "shell-navigation-item__badge--dot": this.badgeLabel === "",
-      }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))));
-  }
-  get el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.active = undefined;
+        this.badgeLabel = undefined;
+        this.href = undefined;
+        this.label = undefined;
+        this.target = undefined;
+        this.boxed = undefined;
+    }
+    render() {
+        const className = index$1.classnames("shell-navigation-item", {
+            "shell-navigation-item--active": this.active,
+            "shell-navigation-item--boxed": this.boxed,
+        });
+        const isLink = Boolean(this.href);
+        const Tag = isLink ? "a" : "button";
+        return (index.h(index.Host, { key: '42cefe5ebcfbe1012e0f21271fefbd3ed6bf0cf6' }, index.h(Tag, { key: '84eda8de7b5d717d8f9c9bc22a84d26405445a0e', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, index.h("span", { key: '4db6afd67cc426fca95e0091e275cea7d299f3ef', class: "shell-navigation-item__icon" }, index.h("slot", { key: '11114270d051d7f42719127afed49b4debcdc9b3', name: "icon" })), index.h("span", { key: '0455d9c0a1438c642cf21b1caffd23f070961619', class: "shell-navigation-item__label" }, this.label), this.badgeLabel !== undefined && this.badgeLabel !== null && (index.h("swirl-badge", { key: '00d02d98a5b3968a8975eed3b2aeea110f8a5dab', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
+                "shell-navigation-item__badge--dot": this.badgeLabel === "",
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))));
+    }
+    get el() { return index.getElement(this); }
 };
-SwirlShellNavigationItem.style = swirlShellNavigationItemCss;
+SwirlShellNavigationItem.style = SwirlShellNavigationItemStyle0;
 
 exports.swirl_shell_navigation_item = SwirlShellNavigationItem;