@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/components/swirl-shell-layout.js

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

package/dist/components/swirl-shell-navigation-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlShellNavigationItem extends Components.SwirlShellNavigationItem, HTMLElement {}
+export const SwirlShellNavigationItem: {
+    prototype: SwirlShellNavigationItem;
+    new (): SwirlShellNavigationItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-shell-navigation-item.js

@@ -0,0 +1,139 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+import { d as defineCustomElement$6 } from './swirl-badge2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-close2.js';
+import { d as defineCustomElement$4 } from './swirl-tag2.js';
+import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.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  --swirl-app-icon-size: 2rem;\n  --swirl-shell-navigation-item-gradient: linear-gradient(\n    rgba(0, 0, 0, 0),\n    rgba(0, 0, 0, 0.8)\n  );\n\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 .shell-navigation-item__badge {\n    --swirl-badge-border-color: var(--s-surface-overlay-default);\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    .shell-navigation-item:hover .shell-navigation-item__is-new-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    .shell-navigation-item:active .shell-navigation-item__is-new-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 {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n        border-radius: var(--s-border-radius-sm);\n        width: 2rem;\n        min-width: 2rem;\n        height: 2rem;\n        min-height: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--filled {\n    padding: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n        color: var(--s-icon-on-action-primary);\n        background-color: var(--s-action-primary-default);\n      }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    border-radius: var(--s-border-radius-base);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n      position: absolute;\n      top: var(--s-space-12);\n      left: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n          position: absolute;\n          display: inline-block;\n          width: 100%;\n          border-radius: var(--s-border-radius-base);\n          background-image: var(--swirl-shell-navigation-item-gradient);\n          content: \"\";\n          aspect-ratio: 1;\n        }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      color: var(--s-text-default);\n      font-weight: var(--s-font-weight-semibold);\n      text-align: start;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n      position: absolute;\n      bottom: var(--s-space-12);\n      left: var(--s-space-12);\n      margin-right: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n        color: rgba(242, 242, 242, 1);\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n        color: rgb(25, 25, 25);\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n    --swirl-app-icon-size: 100%;\n    font-size: var(--s-font-size-xs);\n    padding: var(--s-space-8) var(--s-space-4);\n    align-items: center;\n    height: auto;\n    border-radius: var(--s-border-radius-sm);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n      align-items: start;\n      padding: var(--s-space-8);\n      --swirl-app-icon-size: 2rem;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n        border-radius: var(--s-border-radius-sm);\n        max-width: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n        max-width: 2rem;\n        max-height: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      max-width: 3.5rem;\n      height: auto;\n      border-radius: var(--s-border-radius-base);\n\n      color: var(--s-icon-on-action-primary);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n      max-width: 3.5rem;\n      max-height: 3.5rem;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n      line-height: var(--s-line-height-xs);\n      text-align: center;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\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__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\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    .shell-navigation-item .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-default);\n    }\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\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__description {\n  margin-left: var(--s-space-8);\n  font-weight: var(--s-font-weight-normal);\n  color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n  flex-shrink: 0;\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n  flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n  position: absolute;\n  top: 0.625rem;\n  right: 0.625rem;\n  flex-shrink: 0;\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\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--gradient .shell-navigation-item__icon {\n    --swirl-shell-navigation-item-gradient: none;\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 SwirlShellNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellNavigationItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hideLabel = false;
+        this.inlineLabelColor = "default";
+        this.markAsNewLabel = "New";
+        this.useCustomIconSize = false;
+        this.variant = "default";
+    }
+    componentWillLoad() {
+        this.forceIconProps();
+    }
+    componentDidRender() {
+        this.forceIconProps();
+    }
+    forceIconProps() {
+        if (this.useCustomIconSize) {
+            return;
+        }
+        const iconEl = this.el.querySelector("[slot='icon']");
+        const smallIcon = (this.hideLabel && this.variant === "app-icon") ||
+            this.variant === "default";
+        if (iconEl &&
+            (iconEl.tagName.startsWith("SWIRL-ICON") ||
+                iconEl.tagName.startsWith("SWIRL-EMOJI") ||
+                iconEl.tagName.startsWith("SWIRL-SYMBOL"))) {
+            iconEl.setAttribute("size", smallIcon ? "20" : "32");
+        }
+    }
+    render() {
+        const hasSwirlAppIcon = Boolean(this.el.querySelector("swirl-app-icon"));
+        const tagClassNames = classNames("shell-navigation-item", `shell-navigation-item--${this.variant}`, {
+            "shell-navigation-item--active": this.active,
+            "shell-navigation-item--boxed": this.boxed,
+            "shell-navigation-item--filled": this.filled,
+            "shell-navigation-item--inline-label": this.inlineLabel,
+            "shell-navigation-item--gradient": this.withGradient,
+            "shell-navigation-item--hide-label": this.hideLabel,
+            "shell-navigation-item--has-app-icon": hasSwirlAppIcon,
+        });
+        const labelClassNames = classNames("shell-navigation-item__label", {
+            "shell-navigation-item__label--light": this.inlineLabelColor === "light",
+            "shell-navigation-item__label--dark": this.inlineLabelColor === "dark",
+            "shell-navigation-item__label--inline": this.inlineLabel,
+        });
+        const hasBadge = this.badgeLabel !== undefined && this.badgeLabel !== null;
+        const showIsNewTag = !hasBadge &&
+            this.markAsNew &&
+            !this.hideLabel &&
+            this.variant === "default";
+        const showIsNewBadge = !hasBadge &&
+            this.markAsNew &&
+            this.hideLabel &&
+            this.variant === "default";
+        const isLink = Boolean(this.href);
+        const Tag = isLink ? "a" : "button";
+        const tooltipContent = this.description
+            ? `${this.label} ${this.description}`
+            : this.label;
+        return (h(Host, { key: 'd505754d266ddc520ca2799a37a16854888a612d' }, h("swirl-tooltip", { key: 'e0002b379cce5ab7a52611a2df3422c179389062', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'ab6ed515b943e59d86268ed4774af65cc704fb3f', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'baefe0e2aa6112acf161c01f82677b0c894252b4', class: "shell-navigation-item__icon" }, h("slot", { key: 'e4d519727b08262fdbfa6c765e519085a6c08440', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: 'db70cc0455aa760f8473202e22d6fb959d1bfa61', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'c445e347a6f25a8a8c6d1fa1f9b9c65ffb8ca7cc', "aria-label": this.badgeLabel, class: classNames("shell-navigation-item__badge", {
+                "shell-navigation-item__badge--dot": this.badgeLabel === "",
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '71707e518c201de65e968a64b2b03faa99412b81', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '452a7976c577cc1dd0957be269a44c3659da7082', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
+    }
+    get el() { return this; }
+    static get style() { return swirlShellNavigationItemCss; }
+}, [1, "swirl-shell-navigation-item", {
+        "active": [4],
+        "badgeLabel": [1, "badge-label"],
+        "boxed": [4],
+        "description": [1],
+        "filled": [4],
+        "hideLabel": [4, "hide-label"],
+        "href": [1],
+        "inlineLabel": [4, "inline-label"],
+        "inlineLabelColor": [1, "inline-label-color"],
+        "label": [1],
+        "markAsNew": [4, "mark-as-new"],
+        "markAsNewLabel": [1, "mark-as-new-label"],
+        "swirlAriaCurrent": [1, "swirl-aria-current"],
+        "target": [1],
+        "useCustomIconSize": [4, "use-custom-icon-size"],
+        "variant": [1],
+        "withGradient": [4, "with-gradient"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-shell-navigation-item", "swirl-badge", "swirl-icon-close", "swirl-tag", "swirl-tooltip", "swirl-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-shell-navigation-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlShellNavigationItem$1);
+            }
+            break;
+        case "swirl-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "swirl-icon-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "swirl-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "swirl-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "swirl-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SwirlShellNavigationItem = SwirlShellNavigationItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlShellNavigationItem, defineCustomElement };

package/dist/components/swirl-skeleton-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSkeletonBox extends Components.SwirlSkeletonBox, HTMLElement {}
+export const SwirlSkeletonBox: {
+    prototype: SwirlSkeletonBox;
+    new (): SwirlSkeletonBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-skeleton-box.js

@@ -0,0 +1,6 @@
+import { S as SwirlSkeletonBox$1, d as defineCustomElement$1 } from './swirl-skeleton-box2.js';
+
+const SwirlSkeletonBox = SwirlSkeletonBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSkeletonBox, defineCustomElement };

package/dist/components/swirl-skeleton-box2.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+
+const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
+
+const SwirlSkeletonBox = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonBox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.animated = true;
+        this.borderRadius = "base";
+    }
+    render() {
+        const className = classNames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
+        return (h(Host, { key: '0766d24e9c6dd8b47f0cde12acc961798539a663', style: {
+                width: !Boolean(this.width) && !Boolean(this.aspectRatio)
+                    ? "100%"
+                    : undefined,
+            } }, h("div", { key: '78ef731b5c403dfe74d3034ac8bcef63e0bac16c', class: className, style: {
+                aspectRatio: this.aspectRatio,
+                borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
+                    ? `var(--s-border-radius-${this.borderRadius})`
+                    : undefined,
+                height: this.height,
+                width: this.width,
+            } })));
+    }
+    static get style() { return swirlSkeletonBoxCss; }
+}, [1, "swirl-skeleton-box", {
+        "animated": [4],
+        "aspectRatio": [1, "aspect-ratio"],
+        "borderRadius": [1, "border-radius"],
+        "height": [1],
+        "width": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-skeleton-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-skeleton-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlSkeletonBox);
+            }
+            break;
+    } });
+}
+
+export { SwirlSkeletonBox as S, defineCustomElement as d };

package/dist/components/swirl-skeleton-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSkeletonText extends Components.SwirlSkeletonText, HTMLElement {}
+export const SwirlSkeletonText: {
+    prototype: SwirlSkeletonText;
+    new (): SwirlSkeletonText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-skeleton-text.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+
+const swirlSkeletonTextCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n  )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n  )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2\n  )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n    )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2\n  )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2\n  )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:\"\"}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      var(--s-surface-raised-default) 33%,\n      rgba(255, 255, 255, 0) 66%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}";
+
+const SwirlSkeletonText$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonText extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.animated = true;
+        this.lines = 1;
+        this.size = "base";
+    }
+    render() {
+        const className = classNames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
+        const lineClassName = classNames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
+        return (h(Host, { key: '77301b4779d053d7485e3fc056093c8aca75d56c' }, h("div", { key: 'd48fb445adb540f5fcc2a3c0fcfe64c263ef2be9', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+    }
+    static get style() { return swirlSkeletonTextCss; }
+}, [1, "swirl-skeleton-text", {
+        "animated": [4],
+        "lines": [2],
+        "size": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-skeleton-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-skeleton-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlSkeletonText$1);
+            }
+            break;
+    } });
+}
+
+const SwirlSkeletonText = SwirlSkeletonText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSkeletonText, defineCustomElement };