@getflip/swirl-components-react 0.426.2 → 0.426.3

package/dist/swirl-search.entry.51d2cac9.js

@@ -0,0 +1,51 @@
+import { r as i, c as r, h as a, H as t } from "./index.0c15968e.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import { D as h } from "./media-query.service-BZg4zbFx.7454a4f3.js";
+import "react";
+import "react-dom";
+import "./utils-wi_3Z3FQ.29a3aebe.js";
+const o = ".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%)}", l = class {
+  constructor(e) {
+    i(this, e), this.clear = r(this, "clear", 7), this.inputBlur = r(this, "inputBlur", 7), this.inputFocus = r(this, "inputFocus", 7), this.inputInput = r(this, "inputInput", 7), this.valueChange = r(this, "valueChange", 7), this.clearButtonLabel = "Clear search term", this.placeholder = "Search \u2026", this.variant = "filled", this.clearable = !0, this.mediaQueryUnsubscribe = () => {
+    }, this.handleClear = () => {
+      this.input.value = "", this.input.focus(), this.valueChange.emit(""), this.clear.emit();
+    }, this.onBlur = (s) => {
+      this.inputBlur.emit(s);
+    }, this.onChange = (s) => {
+      this.valueChange.emit(s.target.value);
+    }, this.onFocus = (s) => {
+      this.inputFocus.emit(s);
+    }, this.onInput = (s) => {
+      this.inputInput.emit(s.target.value);
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = h.subscribe((e) => {
+      this.forceIconProps(e);
+    }), this.autoFocus && setTimeout(() => {
+      this.input.focus();
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(e) {
+    if (!Boolean(this.iconEl))
+      return;
+    const s = this.iconEl.children[0];
+    s == null || s.setAttribute("size", e ? "20" : "24");
+  }
+  onKeyDown(e) {
+    (e.code === "KeyK" || e.code === "Slash") && (e.ctrlKey || e.metaKey) && this.input.focus();
+  }
+  render() {
+    const e = c("search", `search--variant-${this.variant}`, {
+      "search--disabled": this.disabled
+    });
+    return a(t, { key: "e81efc90b3d6a499688011221cc2a15c6f792dc2" }, a("span", { key: "b7790e867c09bf68ffe59ec8d28f3880d4e8545a", class: e, ref: (s) => this.iconEl = s }, a("swirl-icon-search", { key: "dbda6b7c55171ee6c1d70d2eb12d42ed0158f10c", "aria-hidden": "true", class: "search__icon" }), a("input", { key: "4cebbf2d5e9543728453055bfed8a6d94f6bd935", "aria-disabled": this.disabled ? "true" : void 0, "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: (s) => this.input = s, type: "search", value: this.value }), !this.disabled && this.clearable && a("button", { key: "a471b4e873ed08cf152c9b60fef8f36df2bb6b65", "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, a("swirl-icon-cancel", { key: "c418cfeddcadecbb411e72e5a66dd00ca3a46679" }))));
+  }
+};
+l.style = o;
+export {
+  l as swirl_search
+};

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

@@ -0,0 +1,92 @@
+import { r as d, c as n, h as t, H as p, g as u } from "./index.0c15968e.js";
+import { c as f } from "./index-orsBiyT_.fc4357c3.js";
+import { q as w } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const b = ".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)}}", v = class {
+  constructor(s) {
+    d(this, s), this.searchChange = n(this, "searchChange", 7), this.valueChange = n(this, "valueChange", 7), this.allowDeselect = !0, this.emptyListLabel = "No results found.", this.searchInputLabel = "Search options", this.selectId = Math.round(Math.random() * 1e6).toString(), this.options = [], this.select = (e) => {
+      e.stopPropagation(), this.value = e.detail, this.multiSelect || this.swirlPopover.close();
+    }, this.unselectOption = (e) => {
+      !this.allowDeselect || (this.value = this.value.filter((a) => a !== e));
+    }, this.onSlotChange = () => {
+      this.updateOptions();
+    }, this.onOpen = (e) => {
+      var a, l;
+      this.placement = (a = e.detail.position) == null ? void 0 : a.placement, this.open = !0, this.withSearch && Boolean(this.searchInput) ? this.searchInput.focus() : (l = this.optionList.querySelector('[tabIndex="0"]')) == null || l.focus();
+    }, this.onClose = () => {
+      Boolean(this.searchInput) && (this.searchInput.value = "", this.searchChange.emit("")), this.open = !1, this.input.focus();
+    }, this.onKeyDown = (e) => {
+      var a;
+      if (e.code === "Space" || e.code === "Enter") {
+        if (e.target === this.searchInput)
+          return;
+        e.preventDefault(), this.swirlPopover.open(this.el);
+      } else
+        e.code === "ArrowDown" && e.target === this.searchInput && ((a = this.optionList.querySelector('[tabIndex="0"]')) == null || a.focus());
+    }, this.onSearchInput = (e) => {
+      this.searchChange.emit(e.target.value);
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions(), this.observeSlotChanges();
+    });
+  }
+  disconnectedCallback() {
+    var s;
+    (s = this.observer) == null || s.disconnect();
+  }
+  onWindowFocusIn(s) {
+    s.target === this.el.querySelector("input") && s.stopImmediatePropagation();
+  }
+  onValueChange(s, e) {
+    (s == null ? void 0 : s.length) === (e == null ? void 0 : e.length) && (s == null ? void 0 : s.every((l) => e == null ? void 0 : e.includes(l))) || this.valueChange.emit(this.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateOptions();
+    }), this.observer.observe(this.el, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  updateOptions() {
+    this.options = w(this.el, "swirl-option-list-item");
+  }
+  getValueLabel() {
+    var s;
+    return Boolean(this.value) ? (s = this.value) == null ? void 0 : s.map((e) => {
+      var a;
+      return (a = this.options.find((l) => l.value === e)) == null ? void 0 : a.label;
+    }).join(", ") : "";
+  }
+  render() {
+    var c, r;
+    const s = this.getValueLabel(), e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, a = this.el.closest("swirl-form-control"), l = this.standalone ? [-8, 0] : (a == null ? void 0 : a.inline) || (a == null ? void 0 : a.labelPosition) === "outside" ? [0, -12] : [0, -16], o = f("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 t(p, { key: "8f635016fafc23d646e43949071d53d5636ece03", onKeyDown: this.onKeyDown }, t("div", { key: "adadc26967eceda49cff1963419e8e43221c3810", class: o }, t("swirl-popover-trigger", { key: "17172460877b21492eef6dab51b983787f283abd", swirlPopover: this.swirlPopover, setAriaAttributes: !1 }, t("swirl-stack", { key: "e2756eae213cdbadbc77c006c3f6c0237af46555", class: "select__value-container" }, this.standalone && t("span", { key: "b4877e0c1cbab6cf99e2a4367ffe083632138926", "aria-hidden": "true", class: "select__resize-helper" }, s), t("input", { key: "819702a9a4ca946c4dd3c853c57ebef751a21652", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, class: "select__input", disabled: this.disabled, readOnly: !0, ref: (i) => this.input = i, type: "text", value: s }))), t("span", { key: "2942ad5674e21e5a7a9961ff00a653590d6a37a3", class: "select__multi-select-values" }, (r = (c = this.value) == null ? void 0 : c.map((i) => this.options.find((h) => h.value === i))) == null ? void 0 : r.map((i) => t("swirl-tag", {
+      "aria-hidden": "true",
+      label: i == null ? void 0 : i.label,
+      onRemove: () => this.unselectOption(i == null ? void 0 : i.value),
+      removable: !this.disabled && this.allowDeselect && !(i != null && i.disabled)
+    }))), t("span", { key: "f1cfbdd7ab962d4f8f05c223aff0f8925406cf1f", class: "select__indicator" }, this.open ? t("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 }) : t("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 })), t("swirl-popover", { key: "3bec6fc755117a723948bb8d12544d2ead692e81", animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: l, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (i) => this.swirlPopover = i, useContainerWidth: this.standalone ? !1 : "swirl-form-control" }, this.withSearch && t("div", { key: "266ff087c627ef0b26a27ab99628b46e63a779e2", class: "select__search" }, t("swirl-icon-search", { key: "ef6c7375ad6e9baade046418451e97fe17ff0d77", class: "select__search-icon", size: 20 }), t("input", { key: "fc392034d3ed74904b8ea4950d77a4a6d6a71a17", "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (i) => this.searchInput = i, type: "search" }), this.searchLoading && t("swirl-spinner", { key: "86ddbbc3dc4b1feb2ef64bc876bfec572702183c", class: "select__search-spinner", size: "s" })), t("swirl-option-list", { key: "dfeee17302b603d4496da582ad57ce013f824a44", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (i) => this.optionList = i, value: this.value }, !this.searchLoading && t("div", { key: "a0740a4d04431589ff78454a1ab53e140cc07d09", "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, t("swirl-text", { key: "5069bade47c5f2bf5e3c7d8219d987bf7a66df31", color: "subdued", weight: "medium" }, this.emptyListLabel)), t("slot", { key: "cca977eb6af16eff150f5b65b0be3565bb090d0c", onSlotchange: this.onSlotChange })))));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      value: ["onValueChange"]
+    };
+  }
+};
+v.style = b;
+export {
+  v as swirl_select
+};

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

@@ -0,0 +1,29 @@
+import { r as e, h as r, F as s, H as i } from "./index.0c15968e.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const c = ":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)}", n = class {
+  constructor(a) {
+    e(this, a), this.borderColor = "default", this.color = "default", this.orientation = "horizontal", this.semantics = "separator", this.spacing = "8";
+  }
+  componentWillLoad() {
+    this.forceColor();
+  }
+  forceColor() {
+    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 a = 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})`
+    }, t = l("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`), o = this.semantics === "separator" ? { "aria-orientation": this.orientation } : {};
+    return r(i, { key: "23acb3a29638b92737838e75a54d7616e6c9150e", ...o, class: t, role: this.semantics, style: a }, r("span", { key: "3ebf80f47fb36438403551f560db91ecf7d7e559", class: "separator__line" }), this.label && r(s, { key: "84ac7960ba714ab27559751c11bd7c4b56ac3176" }, r("span", { key: "6f8dc3ad3bde938789e28ad05c67da657262a4d1", class: "separator__label" }, this.label), r("span", { key: "63ddb77ea887a890bb1731d12a939783b592e21a", class: "separator__line" })));
+  }
+};
+n.style = c;
+export {
+  n as swirl_separator
+};

package/dist/swirl-shell-layout.entry.212bd1f8.js

@@ -0,0 +1,117 @@
+import { r as c, c as s, h as a, H as h, g as y } from "./index.0c15968e.js";
+import { c as u } from "./index-orsBiyT_.fc4357c3.js";
+import { c as v } from "./focus-trap.esm-DIdMBZfn.c41dd5d8.js";
+import { m as o } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const b = `.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"
+      "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}}`, t = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE", i = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE", r = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE", p = class {
+  constructor(l) {
+    c(this, l), this.historyBackClick = s(this, "historyBackClick", 7), this.historyForwardClick = s(this, "historyForwardClick", 7), this.skipLinkClick = s(this, "skipLinkClick", 7), this.browserBackButtonLabel = "Navigate back", this.browserForwardButtonLabel = "Navigate forward", this.collapseNavigationButtonLabel = "Collapse navigation", this.enableSecondaryNavGridLayout = !0, 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 = !0, 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 = (e) => {
+      e.stopPropagation(), this.secondaryNavView === "grid" ? this.secondaryNavView = "list" : this.secondaryNavView = "grid", this.setSecondaryNavItemsTiled(), localStorage.setItem(i, String(this.secondaryNavView));
+    }, this.toggleSecondaryNavCollapse = (e) => {
+      e.stopPropagation(), this.secondaryNavCollapsed = !this.secondaryNavCollapsed, localStorage.setItem(t, String(this.secondaryNavCollapsed));
+    }, this.onNavigationToggleClick = () => {
+      this.navigationCollapsed = !this.navigationCollapsed;
+    }, this.onNavigationClick = () => {
+      this.hideMobileNavigation();
+    };
+  }
+  componentWillLoad() {
+    this.isDesktopViewport = o(), this.collectNavItems();
+    const l = localStorage.getItem(r) === "true";
+    this.navigationCollapsed = l, this.restoreSecondaryNavState();
+  }
+  componentDidLoad() {
+    this.focusTrap = v(this.navElement, {
+      allowOutsideClick: !0,
+      tabbableOptions: {
+        getShadowRoot: (l) => l.shadowRoot
+      }
+    }), this.collectNavItems(), this.navMutationObserver = new MutationObserver(() => {
+      this.collectNavItems();
+    }), this.navMutationObserver.observe(this.navElement, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  componentDidRender() {
+    var l;
+    (l = this.focusTrap) == null || l.updateContainerElements(this.navElement);
+  }
+  disconnectedCallback() {
+    var l, e;
+    (l = this.focusTrap) == null || l.deactivate(), (e = this.navMutationObserver) == null || e.disconnect();
+  }
+  onWindowKeyDown(l) {
+    l.key === "Escape" && this.mobileNavigationActive && this.hideMobileNavigation();
+  }
+  watchEnableSecondaryNavGridLayout() {
+    this.restoreSecondaryNavState();
+  }
+  watchMobileNavigationState() {
+    this.mobileNavigationActive ? setTimeout(() => {
+      this.focusTrap.activate();
+    }, 200) : this.focusTrap.deactivate();
+  }
+  watchNavigationCollapsed() {
+    localStorage.setItem(r, String(this.navigationCollapsed)), this.toggleNavItemLabels(), this.setSecondaryNavItemsTiled();
+  }
+  onWindowResize() {
+    this.isDesktopViewport !== o() && (this.isDesktopViewport = o(), this.collectNavItems());
+  }
+  async showMobileNavigation() {
+    this.mobileNavigationActive = !0, this.collectNavItems();
+  }
+  async hideMobileNavigation() {
+    this.mobileNavigationActive = !1, this.toggleNavItemLabels();
+  }
+  toggleNavItemLabels() {
+    [...this.secondaryNavItems, ...this.mainNavItems].forEach((l) => {
+      l.hideLabel = this.navigationCollapsed && this.isDesktopViewport;
+    });
+  }
+  setSecondaryNavItemsTiled() {
+    this.secondaryNavItems.forEach((l) => {
+      l.variant = this.enableSecondaryNavGridLayout && (this.secondaryNavView === "grid" || this.navigationCollapsed && this.isDesktopViewport) ? this.secondaryNavGridLayoutVariant : "default";
+    });
+  }
+  restoreSecondaryNavState() {
+    if (this.enableSecondaryNavGridLayout) {
+      const l = localStorage.getItem(t) === "true";
+      this.secondaryNavCollapsed = l;
+      const e = localStorage.getItem(i);
+      this.secondaryNavView = e;
+    }
+  }
+  render() {
+    const l = this.navigationCollapsed && this.isDesktopViewport, e = Boolean(this.el.querySelector("[slot='secondary-nav']")), n = u("shell-layout", {
+      "shell-layout--branded-header": this.brandedHeader,
+      "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
+      "shell-layout--has-secondary-nav": e,
+      "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
+      "shell-layout--navigation-collapsed": l
+    });
+    return a(h, { key: "11f27a30db70b481221ba412612a16afd8ef4d72" }, a("div", { key: "7cf7daa26a8e221823bf6ae7c121baf48e52e6ea", class: n }, a("header", { key: "a956639386c3687b89a4b6a016ac9ad910fdc473", class: "shell-layout__header", "data-tauri-drag-region": "true" }, a("button", { key: "3f3da9e17ac4a7a7b0f8a4f9a467ffc15ae364c0", class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), a("div", { key: "59e4a09dac753b16ece8644c7db1523f9f173691", class: "shell-layout__header-left" }, a("swirl-tooltip", { key: "cae944de28eb6aaa5b2de822e6386d629ee323a7", content: this.navigationCollapsed ? this.expandNavigationButtonLabel : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, a("button", { key: "5d8960db7d687b43757ecb7dbb0863489e05081e", class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? a("swirl-icon-dock-left-expand", { size: 20 }) : a("swirl-icon-dock-left-collapse", { size: 20 }), a("swirl-visually-hidden", { key: "b48f8efd3a2cb1e0b60473a0b0167ea8408c2176" }, this.navigationCollapsed ? this.expandNavigationButtonLabel : this.collapseNavigationButtonLabel))), a("a", { key: "3f990c9fa51549a810aa9bc46cd23269fae8c32c", class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, a("swirl-icon-arrow-back", { key: "c659d9cc48087b6a43346eacbd0d128db073676a", size: 20 }), a("swirl-visually-hidden", { key: "eccaec06098f776a24ce2eb577bd2d8a0ce8e0c0" }, this.browserBackButtonLabel)), a("a", { key: "bb4b28473ebbfa6ec8960db030e2e6e6be3faf24", class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, a("swirl-icon-arrow-forward", { key: "7f187a039f74685d27f65599424bae0ee8271484", size: 20 }), a("swirl-visually-hidden", { key: "9519741437ed576e26db2ccdf5d97a3824a589f8" }, this.browserForwardButtonLabel)), a("slot", { key: "59891d167faaefb1381bd8c48dbbc6d2ea25fd0c", name: "left-header-tools" })), a("div", { key: "a68dc128184b3823641aecce80beb2aa3cfdad17", class: "shell-layout__logo" }, a("slot", { key: "2971db5f2ed47a6ce98ba32eac93e98cf5c098df", name: "logo" })), a("div", { key: "38bf7b342407144f4bb8b37629ff0c25313150e3", class: "shell-layout__header-right" }, a("slot", { key: "c95cbfabdd2a59abb23fe91b0f675b86a878b114", name: "right-header-tools" }), a("slot", { key: "aa4153e296bcd85030e5b896552cd3e4d24afab4", name: "avatar" }))), a("div", { key: "78d7e653eda4391257d5c20460d4856fca00edd8", class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), a("nav", { key: "b44c3e844a955970276b6e4d5c19175c99b908f6", "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (d) => this.navElement = d }, a("div", { key: "7056374cb171bc0a0a3b997c30a9f4d4451a32cf", class: "shell-layout__mobile-header" }, a("slot", { key: "99a5b06bb78cce36642beedd4ee0446645afeacb", name: "mobile-logo" }), a("div", { key: "361821d5afc9ba23cee0d2e38e907040fa8bffb9", class: "shell-layout__mobile-header-tools" }, a("slot", { key: "e7b14d93e085c40f243a0e30b3b7cf6bc2303de6", name: "mobile-header-tools" }), a("button", { key: "27c50122fb3f56af21f9ee534f20c77b786c3621", class: "shell-layout__header-tool", type: "button" }, a("swirl-icon-double-arrow-left", { key: "17970823b5344ec0e98b3f08f131c4d74f8063a6", size: 20 }), a("swirl-visually-hidden", { key: "543dabd9f3972ac4dcf6d837f8a4fae84b6d631a" }, this.hideMobileNavigationButtonLabel)))), a("div", { key: "5dfd21448b23b3aea62724b719decf015ccba330", class: "shell-layout__nav-body" }, a("swirl-visually-hidden", { key: "2558078eef90297b0021e7752b0734148a94124d" }, a("span", { key: "8d5d2c8633a34f6578c7d90a7ff95e7f11d91b02", id: "main-navigation-label" }, this.navigationLabel)), a("slot", { key: "c9c10b1e6c7d203cb1dc6888470b8f17b7f95a2a", name: "nav", onSlotchange: this.collectNavItems }), a("div", { key: "286be02ac7ef9035b37d378736733f338dd5b297", class: "shell-layout__secondary-nav" }, a("swirl-separator", { key: "c3cd977a9731afa485b5035fe0e732e482aa5aa3", color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && a("swirl-box", { key: "d6e9d09f11f94ffdb1860d282b1bd1529a1d9a85", paddingBlockEnd: "16" }, a("swirl-stack", { key: "70c2d4f3c09c8175a0914e266e561764b9d10d37", justify: l ? "center" : "space-between", orientation: "horizontal" }, a("swirl-button", { key: "d4d7086d91a2e87d593e266a15d90ba518162669", hideLabel: l, 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" }), !l && !this.secondaryNavCollapsed && a("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" }))), a("div", { key: "41429cee91120b9015cca9b93f6c4c679ab6e57f", class: {
+      [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: !0,
+      "shell-layout__secondary-nav-items": !0,
+      "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid"
+    } }, a("slot", { key: "e5c1b6a114fd13d98632b05f542fa400f4cdf7e9", name: "secondary-nav", onSlotchange: this.collectNavItems }))))), a("main", { key: "3ab8d1162dda16dd8c1d5a04345d76237e13b7c2", class: "shell-layout__main", id: "main-content" }, a("slot", { key: "ac030ad491554f3e7d6b1645361fe3fb387734f8" }))));
+  }
+  get el() {
+    return y(this);
+  }
+  static get watchers() {
+    return {
+      enableSecondaryNavGridLayout: ["watchEnableSecondaryNavGridLayout"],
+      mobileNavigationActive: ["watchMobileNavigationState"],
+      navigationCollapsed: ["watchNavigationCollapsed"]
+    };
+  }
+};
+p.style = b;
+export {
+  p as swirl_shell_layout
+};