@getflip/swirl-components-react 0.236.0 → 0.236.1

package/dist/swirl-box.entry.49bb21d5.js

@@ -1,69 +0,0 @@
-import { r as o, h as d, H as t } from "./index.fff64e3e.js";
-import { c as i } from "./index-267776a4.6beb4f4b.js";
-import "react";
-import "react-dom";
-const n = `:host{--swirl-box-scroll-border-top-width:var(--s-border-width-default);--swirl-box-scroll-border-bottom-width:var(--s-border-width-default);display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--bordered-block-end){border-block-end:var(--s-border-width-default) solid
-      var(--s-border-default)}:host(.box--bordered-block-start){border-block-start:var(--s-border-width-default) solid
-      var(--s-border-default)}:host(.box--bordered-inline-end){border-inline-end:var(--s-border-width-default) solid
-      var(--s-border-default)}:host(.box--bordered-inline-start){border-inline-start:var(--s-border-width-default) solid
-      var(--s-border-default)}@supports (
-      (scroll-timeline: --scroll-timeline y) and
-        (animation-timeline: --scroll-timeline)
-    ){:host(.box--bordered-block-start-when-scrolled),:host(.box--bordered-block-end-when-scrolled){animation:box-border-reveal both, box-detect-scroll none;scroll-timeline:--scroll-timeline y;animation-timeline:--scroll-timeline}}@supports (
-      (scroll-timeline: --scroll-timeline y) and
-        (animation-timeline: --scroll-timeline)
-    ){:host(.box--bordered-block-start-when-scrolled){border-top:var(--swirl-box-scroll-border-top-width) solid
-        var(--s-border-default);animation-range:1px 1px}}@supports (
-      (scroll-timeline: --scroll-timeline y) and
-        (animation-timeline: --scroll-timeline)
-    ){:host(.box--bordered-block-end-when-scrolled){border-bottom:var(--swirl-box-scroll-border-bottom-width) solid
-        var(--s-border-default);animation-range:calc(100% - 1px) calc(100% - 1px);animation-direction:reverse}}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}@keyframes box-border-reveal{0%{border-color:transparent}100%{border-color:var(--s-border-default)}}@keyframes box-detect-scroll{from,to{--swirl-box-scroll-border-top-width:var(--s-border-width-default);--swirl-box-scroll-border-bottom-width:var(--s-border-width-default)}}`, s = n, l = class {
-  constructor(e) {
-    o(this, e), this.borderColor = "default", this.bordered = void 0, this.borderedBlockEnd = void 0, this.borderedBlockEndWhenScrolled = void 0, this.borderedBlockStart = void 0, this.borderedBlockStartWhenScrolled = void 0, this.borderedInlineEnd = void 0, this.borderedInlineStart = void 0, this.bottom = void 0, this.centerBlock = void 0, this.centerInline = void 0, this.cover = void 0, this.height = void 0, this.left = void 0, this.maxHeight = void 0, this.minHeight = void 0, this.maxWidth = void 0, this.minWidth = void 0, this.overflow = "visible", this.padding = "0", this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0, this.position = void 0, this.right = void 0, this.basis = void 0, this.shrink = void 0, this.grow = void 0, this.top = void 0, this.width = void 0, this.zIndex = void 0;
-  }
-  render() {
-    const e = {
-      alignItems: this.centerBlock ? "center" : void 0,
-      borderColor: this.borderColor === "default" ? "var(--s-border-default)" : "var(--s-border-strong)",
-      bottom: this.bottom,
-      display: this.centerBlock || this.centerInline ? "flex" : void 0,
-      flexBasis: this.basis,
-      flexShrink: this.shrink,
-      flexGrow: this.grow,
-      height: this.cover ? "100%" : this.height,
-      justifyContent: this.centerInline ? "center" : void 0,
-      left: this.left,
-      maxHeight: this.maxHeight,
-      minHeight: this.minHeight,
-      maxWidth: this.maxWidth,
-      minWidth: this.minWidth,
-      overflow: this.overflow,
-      padding: `var(--s-space-${this.padding})`,
-      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
-      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
-      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
-      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
-      position: Boolean(this.overflow) ? this.position || "relative" : this.position,
-      right: this.right,
-      top: this.top,
-      width: this.cover ? "100%" : this.width,
-      zIndex: this.zIndex
-    };
-    this.borderedBlockEndWhenScrolled && this.borderedBlockStartWhenScrolled && console.warn("[Swirl] swirl-box does not support both borderedBlockEndWhenScrolled and borderedBlockStartWhenScrolled properties to be active at the same time. Please use only one of them.");
-    const r = i("box", {
-      "box--bordered": this.bordered,
-      "box--bordered-block-end": this.borderedBlockEnd,
-      "box--bordered-block-end-when-scrolled": this.borderedBlockEndWhenScrolled,
-      "box--bordered-block-start": this.borderedBlockStart,
-      "box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled && !this.borderedBlockEndWhenScrolled,
-      "box--bordered-inline-end": this.borderedInlineEnd,
-      "box--bordered-inline-start": this.borderedInlineStart,
-      "box--cover": this.cover
-    });
-    return d(t, { key: "28418675b679475c4f4260b4d8d59d0cf0ee71a6", class: r, style: e }, d("slot", { key: "fe4e622d5163b941d2932e7090d946e0f6234d75" }));
-  }
-};
-l.style = s;
-export {
-  l as swirl_box
-};

package/dist/swirl-shell-layout.entry.884f9720.js

@@ -1,127 +0,0 @@
-import { r as y, c as i, h as e, H as u, g as b } from "./index.fff64e3e.js";
-import { c as v } from "./index-267776a4.6beb4f4b.js";
-import { c as g } from "./focus-trap.esm-49c9613c.db20abcc.js";
-import { e as s } from "./utils-c16952ba.529dd544.js";
-import "react";
-import "react-dom";
-const w = `.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;--swirl-shell-sidebar-width:21rem;--swirl-shell-border-visibility:hidden;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,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.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}}@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(
-          --swirl-shell-sidebar-width
-        )}}@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(
-        --swirl-shell-sidebar-width
-      )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.1s;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--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-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-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__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.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__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none;flex-basis:calc(50% - var(--s-space-8))}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}.shell-layout__revealing-scroll-border-container.sc-swirl-shell-layout{animation:shell-layout-detect-scroll;animation-fill-mode:none;scroll-timeline:--scroll-timeline y;animation-timeline:--scroll-timeline}.shell-layout__revealing-scroll-border-container.sc-swirl-shell-layout:before{position:sticky;z-index:1;top:0;display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default);content:""}@supports ( (scroll-timeline: --scroll-timeline y) and (animation-timeline: --scroll-timeline) ){.shell-layout__revealing-scroll-border-container.sc-swirl-shell-layout:before{visibility:var(--swirl-shell-layout-border-visibility);animation-name:shell-layout-border-reveal;animation-fill-mode:both;animation-range:1px 1px;animation-timeline:--scroll-timeline}}@keyframes shell-layout-border-reveal{0%{background-color:transparent}100%{background-color:var(--s-border-default)}}@keyframes shell-layout-detect-scroll{from,to{--swirl-shell-layout-border-visibility:visible}}@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}}`, p = w, o = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE", t = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE", r = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE", d = "SWIRL_SHELL_SIDEBAR_STATE", f = class {
-  constructor(l) {
-    y(this, l), this.sidebarToggleClick = i(this, "sidebarToggleClick", 7), this.skipLinkClick = i(this, "skipLinkClick", 7), 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 = (a) => {
-      a.stopPropagation(), this.secondaryNavView === "grid" ? this.secondaryNavView = "list" : this.secondaryNavView = "grid", this.setSecondaryNavItemsTiled(), localStorage.setItem(t, String(this.secondaryNavView));
-    }, this.toggleSecondaryNavCollapse = (a) => {
-      a.stopPropagation(), this.secondaryNavCollapsed = !this.secondaryNavCollapsed, localStorage.setItem(o, String(this.secondaryNavCollapsed));
-    }, this.onNavigationToggleClick = () => {
-      this.navigationCollapsed = !this.navigationCollapsed;
-    }, this.onNavigationClick = () => {
-      this.hideMobileNavigation();
-    }, this.brandedHeader = void 0, this.browserBackButtonLabel = "Navigate back", this.browserForwardButtonLabel = "Navigate forward", this.collapseNavigationButtonLabel = "Collapse navigation", this.enableSecondaryNavGridLayout = !0, 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.sidebarActive = void 0, this.sidebarToggleBadge = void 0, this.sidebarToggleBadgeAriaLabel = void 0, this.sidebarToggleIcon = "notifications", this.sidebarToggleLabel = "Toggle sidebar", this.skipLinkLabel = "Skip to main content", this.mobileNavigationActive = void 0, this.navigationCollapsed = void 0, this.secondaryNavCollapsed = void 0, this.secondaryNavView = "list", this.isDesktopViewport = !0;
-  }
-  componentWillLoad() {
-    this.isDesktopViewport = s(), this.collectNavItems();
-    const l = localStorage.getItem(d) === "true";
-    this.sidebarActive = this.sidebarActive === void 0 ? l : this.sidebarActive;
-    const a = localStorage.getItem(r) === "true";
-    this.navigationCollapsed = a, this.restoreSecondaryNavState();
-  }
-  componentDidLoad() {
-    this.focusTrap = g(this.navElement, {
-      allowOutsideClick: !0,
-      tabbableOptions: {
-        getShadowRoot: (l) => l.shadowRoot
-      }
-    }), this.collectNavItems(), this.navMutationObserver = new MutationObserver(() => {
-      this.collectNavItems(), this.setSecondaryNavItemsTiled();
-    }), this.navMutationObserver.observe(this.navElement, {
-      childList: !0,
-      subtree: !0
-    });
-  }
-  componentDidRender() {
-    var l;
-    (l = this.focusTrap) == null || l.updateContainerElements(this.navElement);
-  }
-  disconnectedCallback() {
-    var l, a;
-    (l = this.focusTrap) == null || l.deactivate(), (a = this.navMutationObserver) == null || a.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();
-  }
-  watchSidebarActive() {
-    localStorage.setItem(d, String(this.sidebarActive));
-  }
-  onWindowResize() {
-    this.isDesktopViewport !== s() && (this.isDesktopViewport = s(), 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.tiled = this.enableSecondaryNavGridLayout && (this.secondaryNavView === "grid" || this.navigationCollapsed && this.isDesktopViewport);
-    });
-  }
-  restoreSecondaryNavState() {
-    if (this.enableSecondaryNavGridLayout) {
-      const l = localStorage.getItem(o) === "true";
-      this.secondaryNavCollapsed = l;
-      const a = localStorage.getItem(t);
-      this.secondaryNavView = a;
-    }
-  }
-  render() {
-    const l = this.sidebarToggleBadge !== !0 && this.sidebarToggleBadge !== "true", a = this.navigationCollapsed && this.isDesktopViewport, n = Boolean(this.el.querySelector("[slot='secondary-nav']")), c = v("shell-layout", {
-      "shell-layout--branded-header": this.brandedHeader,
-      "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
-      "shell-layout--has-secondary-nav": n,
-      "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
-      "shell-layout--navigation-collapsed": a,
-      "shell-layout--sidebar-active": this.sidebarActive
-    });
-    return e(u, { key: "470926efc83f33fd44e0463aadf86dfb353b6b48" }, e("div", { key: "b477206b475f9a8619d3578b4645b35eeaacddc4", class: c }, e("header", { key: "bc7f057a7e032bbf117c42483da28a94394378e0", class: "shell-layout__header", "data-tauri-drag-region": "true" }, e("button", { key: "c0be324ed4f30986b59dc8fe1281247d99c8dd23", class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), e("div", { key: "3064e40b16e0f0eb461eaf582ad2cfb2172718d3", class: "shell-layout__header-left" }, e("swirl-tooltip", { key: "ec881c4286e23fa27b142113bd57db245ba7d986", content: this.navigationCollapsed ? this.expandNavigationButtonLabel : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, e("button", { key: "5cc473fbb4b2965a26974fcb9c68e86049a52496", class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? e("swirl-icon-dock-left-expand", { size: 20 }) : e("swirl-icon-dock-left-collapse", { size: 20 }), e("swirl-visually-hidden", { key: "acf2a133efaa111ba396d16103ceaaada1ba6874" }, this.navigationCollapsed ? this.expandNavigationButtonLabel : this.collapseNavigationButtonLabel))), e("a", { key: "5f8e2bb3199415743b331cd5237d766bc0c520e2", class: "shell-layout__header-tool", href: "javascript:history.back()" }, e("swirl-icon-arrow-back", { key: "5a9f9fca922819289d22b68529a5cc3c20400343", size: 20 }), e("swirl-visually-hidden", { key: "169509f08b310362bff0725c083d3fe617d5c395" }, this.browserBackButtonLabel)), e("a", { key: "1f5565dbe6da1d4e4b02e4cb849f54883c0ad54c", class: "shell-layout__header-tool", href: "javascript:history.forward()" }, e("swirl-icon-arrow-forward", { key: "17d96c251ad18a7d115eca11d4835a7408c1e1c8", size: 20 }), e("swirl-visually-hidden", { key: "ec40f4917cde537ed7a3bbe7d2484c593cfc2ad7" }, this.browserForwardButtonLabel)), e("slot", { key: "287d343cdae3722415a2967fcb10a31ae110c1a1", name: "left-header-tools" })), e("div", { key: "4b98d9ddc12bb9f27ae835008f42fbdb0b91b583", class: "shell-layout__logo" }, e("slot", { key: "e0fecb7cd4c5e55295ac9bca21105b9b1da9b6d5", name: "logo" })), e("div", { key: "526a9321af23b8383db02dc0c84b2394fb3c30a5", class: "shell-layout__header-right" }, e("slot", { key: "9354eb2e1f87eb90cfce72c1f438e56af2802736", name: "right-header-tools" }), e("button", { key: "f0794a7ff2add57f06f275f7622b381390a80d50", class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, e("swirl-icon", { key: "fbb4d1d580152a17a2f0a1b25ea5979449ec8d5f", glyph: this.sidebarToggleIcon, size: 20 }), e("swirl-visually-hidden", { key: "1d7725b2377b8061c945db08c95ca11b83b4cf97" }, this.sidebarToggleLabel), this.sidebarToggleBadge && e("swirl-badge", { key: "2bab2fa9db01ad8b224f09328bf3ca89ff405fd9", "aria-label": this.sidebarToggleBadgeAriaLabel, label: l ? String(this.sidebarToggleBadge) : this.sidebarToggleBadgeAriaLabel, size: "xs", variant: l ? "default" : "dot" })), e("slot", { key: "94aaa8a288fb2411d8b968c8505dde4f8f328a19", name: "avatar" }))), e("div", { key: "6c7b01fd5b14c3294076f17728f6ee2e25f59106", class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), e("nav", { key: "2cbe3218c946c6b3d9207966cb9cb9d57cc42fe8", "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (h) => this.navElement = h }, e("div", { key: "d5dd5e44bd8dc5c800c2ced3c55b9ad781cbc5a9", class: "shell-layout__mobile-header" }, e("slot", { key: "6fb4e4b53fc0cd8a728fb2a74e1dad642e7ec902", name: "mobile-logo" }), e("div", { key: "e13383fa4391e37f348eb0d9722a0b5053cd497b", class: "shell-layout__mobile-header-tools" }, e("slot", { key: "0b1b1a67ddaf2027e1ff137d2194115aaac63596", name: "mobile-header-tools" }), e("button", { key: "c05954c96200df9afba8937feae000659ad94f35", class: "shell-layout__header-tool", type: "button" }, e("swirl-icon-double-arrow-left", { key: "889b2f163cc6eda065914007aa2400ebc29edd72", size: 20 }), e("swirl-visually-hidden", { key: "9c1f7e9246d7d7730349aa3fa1a6751577494396" }, this.hideMobileNavigationButtonLabel)))), e("div", { key: "cdd1889802a0ac43de2f4a4f35246a2b1b70caa0", class: "shell-layout__nav-body" }, e("swirl-visually-hidden", { key: "bfad7a7398193c8c7825ecbe30ea607aa89d4081" }, e("span", { key: "fd327ed10002594539fb14a669f37c9b3a571cdc", id: "main-navigation-label" }, this.navigationLabel)), e("slot", { key: "8ab7f1c80c8072f79e7bb23024afe67a95af48a6", name: "nav", onSlotchange: this.collectNavItems }), e("div", { key: "37afc52ce1f28c1e95d5de2d32ccc073d0e9bfc7", class: "shell-layout__secondary-nav" }, e("swirl-separator", { key: "06d7b6451bf6468db619da5a6ca88b02c1e3831b", borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && e("swirl-box", { key: "4d59ad51bccd2ad778828107ac99fd8330bf2e60", paddingBlockEnd: "16" }, e("swirl-stack", { key: "af4dabe94558ed45dbc1b11b257e1ef6af0dc737", justify: a ? "center" : "space-between", orientation: "horizontal" }, e("swirl-button", { key: "d0925ca737c7fdade962201f084cb0b0d34ea388", hideLabel: a, 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" }), !a && !this.secondaryNavCollapsed && e("swirl-button", { key: "e9228c5cfb58ca872d322e49a3b21fbc2a1fad4e", 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" }))), e("div", { key: "c672cfb61deef3f7dbf3e775c4995a4fc5da7fc8", class: {
-      "shell-layout__secondary-nav-items": !0,
-      "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout && (this.secondaryNavView === "grid" || a)
-    } }, e("slot", { key: "c1deb47f80f5ab77ca0fbd24e573dc99e4b313c4", name: "secondary-nav", onSlotchange: this.collectNavItems }))))), e("main", { key: "38a6c79fce8194e41d5f3a531f604fba827e1a0e", class: "shell-layout__main", id: "main-content" }, e("slot", { key: "dc9f2d690577567cb26c055dcd38afaba5baa475" })), e("aside", { key: "00a506c414e0619b650c98a34ef4b9b5414c1bca", class: "shell-layout__sidebar", inert: this.sidebarActive ? void 0 : !0 }, e("div", { key: "d1fe4834172e9cd14bbd219e1e1ccc0f7d2b2a22", class: "shell-layout__sidebar-body" }, e("div", { key: "31226eb856acff927ce90a21e05f823e89e24544", class: "shell-layout__sidebar-app-bar" }, e("slot", { key: "d647424ce97695294c4f62dfd1ba06083878d308", name: "sidebar-app-bar" })), e("div", { key: "9ab266880d69d758680d11d4c060c0513c23310f", class: "shell-layout__sidebar-content shell-layout__revealing-scroll-border-container" }, e("slot", { key: "371ad27927493005808548695c73dd979d57d9e8", name: "sidebar" }))))));
-  }
-  get el() {
-    return b(this);
-  }
-  static get watchers() {
-    return {
-      enableSecondaryNavGridLayout: ["watchEnableSecondaryNavGridLayout"],
-      mobileNavigationActive: ["watchMobileNavigationState"],
-      navigationCollapsed: ["watchNavigationCollapsed"],
-      sidebarActive: ["watchSidebarActive"]
-    };
-  }
-};
-f.style = p;
-export {
-  f as swirl_shell_layout
-};