@getflip/swirl-components 0.219.0 → 0.220.1

package/dist/collection/components/swirl-app-icon/swirl-app-icon.css

@@ -17,6 +17,8 @@
 .app-icon > img {
     width: 100%;
     height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
   }
 
 .app-icon__icon {

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css

@@ -5,7 +5,7 @@
   --swirl-shell-header-height: 3.25rem;
 
   --swirl-shell-collapsed-nav-width: 4rem;
-  --swirl-shell-extended-nav-width: 14rem;
+  --swirl-shell-extended-nav-width: 18rem;
   --swirl-shell-sidebar-width: 21rem;
 
   display: flex;
@@ -23,7 +23,7 @@
   width: 100%;
   min-height: 100%;
   background-color: var(--swirl-shell-background);
-  transition: grid-template-columns 0.2s;
+  transition: grid-template-columns 0.1s;
   grid-template-columns: 0 1fr 0;
   grid-template-rows: 1fr;
   grid-template-areas: "nav main";
@@ -75,22 +75,21 @@
 
 @media (min-width: 992px) {
 
-.shell-layout--navigation-collapsed .shell-layout__nav:hover {
-        width: var(--swirl-shell-extended-nav-width);
-        padding-right: var(--s-space-12)
-    }
-      }
+.shell-layout--navigation-collapsed .shell-layout__nav {
+      scrollbar-width: none
+  }
 
-@media (min-width: 992px) {
-      .shell-layout--navigation-collapsed .shell-layout__nav:not(:hover) {
-        scrollbar-width: none;
+      .shell-layout--navigation-collapsed .shell-layout__nav::-webkit-scrollbar {
+        width: 0;
+        background: transparent;
+        -webkit-appearance: none;
       }
+    }
 
-        .shell-layout--navigation-collapsed .shell-layout__nav:not(:hover)::-webkit-scrollbar {
-          width: 0;
-          background: transparent;
-          -webkit-appearance: none;
-        }
+.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view ::slotted(*) {
+      max-width: 100%;
+      flex-basis: 100%;
+      max-height: 3rem;
     }
 
 @media (min-width: 992px) {
@@ -138,7 +137,7 @@
   }
 
 :not(.shell-layout--sidebar-active) .shell-layout__sidebar {
-    animation: shell-layout-no-overflow-after-transition 0.2s;
+    animation: shell-layout-no-overflow-after-transition 0.1s;
     animation-fill-mode: forwards;
   }
 
@@ -166,6 +165,14 @@
   }
     }
 
+.shell-layout--has-secondary-nav .shell-layout__secondary-nav {
+    display: block;
+  }
+
+.shell-layout--secondary-nav-collapsed .shell-layout__secondary-nav-items {
+    display: none;
+  }
+
 .shell-layout__header {
   position: relative;
   display: none;
@@ -306,12 +313,13 @@
   top: 0;
   bottom: 0;
   left: 0;
-  overflow: auto;
+  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.2s, box-shadow 0.2s, width 0.2s;
+  transition: transform 0.1s, box-shadow 0.1s, width 0.1s;
   transform: translate3d(-100%, 0, 0);
   grid-area: nav;
 }
@@ -326,7 +334,7 @@
 @media (min-width: 992px) {
 
 .shell-layout__nav {
-    position: static;
+    position: relative;
     max-width: none;
     padding-top: 0;
     padding-right: var(--s-space-4);
@@ -408,10 +416,30 @@
   z-index: 8;
   display: none;
   background-color: rgba(0, 0, 0, 0.25);
-  animation: shell-layout-backdrop-fade-in 0.2s;
+  animation: shell-layout-backdrop-fade-in 0.1s;
   inset: 0;
 }
 
+.shell-layout__secondary-nav {
+  display: none;
+}
+
+.shell-layout__secondary-nav-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-space-2);
+}
+
+.shell-layout__secondary-nav-items--grid-view {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--s-space-16);
+}
+
+.shell-layout__secondary-nav-items--grid-view ::slotted(*) {
+    flex-basis: calc(50% - var(--s-space-8));
+  }
+
 .shell-layout__main {
   overflow: hidden;
   background-color: var(--s-background-default);
@@ -458,7 +486,7 @@
     top: 0;
     right: 0;
     bottom: 0;
-    transition: transform 0.2s;
+    transition: transform 0.1s;
     transform: translate3d(calc(100% + var(--s-space-24)), 0, 0);
     box-shadow: var(--s-shadow-level-3)
 }

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

@@ -1,6 +1,8 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import * as focusTrap from "focus-trap";
+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 SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
 /**
@@ -17,6 +19,25 @@ const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
  */
 export class SwirlShellLayout {
     constructor() {
+        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.toggleSecondaryNavView = () => {
+            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 = () => {
+            this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
+            localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
+        };
         this.onNavigationToggleClick = () => {
             this.navigationCollapsed = !this.navigationCollapsed;
         };
@@ -26,9 +47,14 @@ export class SwirlShellLayout {
         this.brandedHeader = undefined;
         this.browserBackButtonLabel = "Navigate back";
         this.browserForwardButtonLabel = "Navigate forward";
+        this.enableSecondaryNavGridLayout = true;
+        this.gridNavLayoutToggleLabel = "Grid";
         this.hideMobileNavigationButtonLabel = "Close navigation";
+        this.listNavLayoutToggleLabel = "List";
         this.navigationLabel = "Main";
         this.navigationToggleLabel = "Toggle navigation";
+        this.secondaryNavCollapseLabel = "Show less";
+        this.secondaryNavExpandLabel = "Show more";
         this.sidebarActive = undefined;
         this.sidebarToggleBadge = undefined;
         this.sidebarToggleBadgeAriaLabel = undefined;
@@ -37,8 +63,11 @@ export class SwirlShellLayout {
         this.skipLinkLabel = "Skip to main content";
         this.mobileNavigationActive = undefined;
         this.navigationCollapsed = undefined;
+        this.secondaryNavCollapsed = undefined;
+        this.secondaryNavView = "list";
     }
     componentWillLoad() {
+        this.collectNavItems();
         const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
         this.sidebarActive =
             this.sidebarActive === undefined
@@ -46,6 +75,14 @@ export class SwirlShellLayout {
                 : this.sidebarActive;
         const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
         this.navigationCollapsed = restoredNavigationCollapseState;
+        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;
+        }
     }
     componentDidLoad() {
         this.focusTrap = focusTrap.createFocusTrap(this.navElement, {
@@ -56,12 +93,23 @@ export class SwirlShellLayout {
                 },
             },
         });
+        this.toggleNavItemLabels();
+        this.setSecondaryNavItemsTiled();
+        this.navMutationObserver = new MutationObserver(() => {
+            this.collectNavItems();
+            this.setSecondaryNavItemsTiled();
+        });
+        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) {
@@ -81,6 +129,7 @@ export class SwirlShellLayout {
     }
     watchNavigationCollapsed() {
         localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
+        this.toggleNavItemLabels();
     }
     watchSidebarActive() {
         localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
@@ -97,17 +146,46 @@ export class SwirlShellLayout {
     async hideMobileNavigation() {
         this.mobileNavigationActive = false;
     }
+    toggleNavItemLabels() {
+        [...this.secondaryNavItems, ...this.mainNavItems].forEach((item) => {
+            item.hideLabel =
+                !!(this.enableSecondaryNavGridLayout && this.navigationCollapsed) ||
+                    (!this.enableSecondaryNavGridLayout && this.navigationCollapsed);
+        });
+    }
+    setSecondaryNavItemsTiled() {
+        this.secondaryNavItems.forEach((item) => {
+            item.tiled =
+                this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid";
+        });
+    }
     render() {
         const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
+        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": this.navigationCollapsed,
             "shell-layout--sidebar-active": this.sidebarActive,
         });
-        return (h(Host, { key: '8ac0a3465331a44666498b9a7dcd7aa35c9dc9e2' }, h("div", { key: '4990de7803e46f2a814b05f20f5a7e88d636d3dd', class: className }, h("header", { key: '06e3f3b6b362909584c7d34cf5d0479eb100479b', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'a56882f44359fdcfa8d6252af97c7c8d69f2f5ce', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '73cdc9deef606505fe5688df02416f5801491443', class: "shell-layout__header-left" }, h("button", { key: '69c526bef11fff511472b143400a8da2972503f2', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: 'adef92a3da2d1b132f62036acb83787f1a68b4e2', size: 20 }), h("swirl-visually-hidden", { key: '9080a2cbba25c27a5a284132adb95b7951d34bec' }, this.navigationToggleLabel)), h("a", { key: 'ef4e3e985069d0e8b110366e9cfdc6f3a49d178f', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '87ebb8eece4655739db57d69e1562fae38d221ad', size: 20 }), h("swirl-visually-hidden", { key: '3f9d98cb9195ee053cd8fbc343b06479f469a594' }, this.browserBackButtonLabel)), h("a", { key: '7eb4924c19e8ecf5ae45f69852ae561e4d7dafbd', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '91e946148ea45549e0d35bbdeb47e6c22cefd6d4', size: 20 }), h("swirl-visually-hidden", { key: 'ecec5526b9b6e74ceeb6d83e3738ab96eff8ea68' }, this.browserForwardButtonLabel)), h("slot", { key: 'ca532ef7ab1f8c352ad59bc16186e32e382db4b1', name: "left-header-tools" })), h("div", { key: 'ad2abae49d4f64eabae7a320d67c093d82c8c349', class: "shell-layout__logo" }, h("slot", { key: '75c99c3413488ad7fc160841a11cf825eecbefef', name: "logo" })), h("div", { key: 'e2b4c098b54990bc06e9f397e2f850a0c9b9cf1b', class: "shell-layout__header-right" }, h("slot", { key: '6ef73c889c02603496700e1080bad71adeee31ce', name: "right-header-tools" }), h("button", { key: '0e7be546e2d34c112ad31a71035f75e895d5bbea', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '08592492884a6a64db04a416591bb74dc367726d', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'b3c23f63e10d842eba7780f79fd46372b4c81cd1' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'c7a783b312f60615cfa001d2b1db6b6fb4b4bc8e', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+        return (h(Host, { key: 'adc9e2fc265a9433423eee24356217b4f092e8b6' }, h("div", { key: 'b3730a8f4f0d38758b26064105889e9ac601792a', class: className }, h("header", { key: '53b44a20ee908f56478c22ad480c10af8e39207c', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '3e1af2d0750924f10c9249cae89669a23b81f7de', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'facbc861dab6ca4ac345d712cc95f0e1e80cf332', class: "shell-layout__header-left" }, h("button", { key: 'af58135756e998be3dda22ce984a4a6665e53152', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: 'bd9e8c166ff79094593a36746b7d76658768f70b', size: 20 }), h("swirl-visually-hidden", { key: '7b17513abe295dd3e898f3c972dbbd04e8d8e432' }, this.navigationToggleLabel)), h("a", { key: 'b11db23915c0c6e08d5ae73b4e3121b718b1ba60', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'e55bf3c9f653257bc6813cba251e94a56f6809ed', size: 20 }), h("swirl-visually-hidden", { key: '1d9ed2b3315d620b53ba186d5c6e4910cb817469' }, this.browserBackButtonLabel)), h("a", { key: '0309c1d01ed19133465ce57d38e6566212cd4d2d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '8b36cbfbbd95d43c371ec2ae679b2c6cfc9cf9b6', size: 20 }), h("swirl-visually-hidden", { key: '0636c9e162db5687f2201f3ecefbd73ab138492e' }, this.browserForwardButtonLabel)), h("slot", { key: 'ff204208cfc3d964de19cf34282151231feffca2', name: "left-header-tools" })), h("div", { key: '3b67421fadb8ae927b41e8a880673d4231a702d8', class: "shell-layout__logo" }, h("slot", { key: '30e035a1e2019df1c8e0c4753986b838d80b2d43', name: "logo" })), h("div", { key: '3a820a285768c3a01df5ce3c27c7a6327f99fbfd', class: "shell-layout__header-right" }, h("slot", { key: '92eec4f65e57bfa62de2f946488e3dbcc5a55ac5', name: "right-header-tools" }), h("button", { key: 'bcb9abe9b026fa5a0bdd8e6a756c87bca571015b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'a5c2cfd085fa5e2e562444bd0dafe7e752c437b8', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'bbead2f6466b45151e9b4564bbb8add03b877bb9' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'fb11e5178a9ff012f644cece32ad6ce517cba230', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '99852428a24bbbadbd285a0b2ed3e7fd90a38970', name: "avatar" }))), h("div", { key: 'd69831fb8f238cbae18eb5f9c505e7902b628d98', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '6eef2506fc69ea0cb7d7565a63eca8adf891ab99', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '8bb9bc97e7be1668013b53ead35c7a01182e8e94', class: "shell-layout__mobile-header" }, h("slot", { key: 'dc8f336880c5116183fb1573df941ebbf639bc2a', name: "mobile-logo" }), h("div", { key: '3c397987d9f90786184c9444089e921bb7379dfb', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '89046b89f2b4cc2a7f5de187c8e54063d9dcbfd5', name: "mobile-header-tools" }), h("button", { key: '8c7f0363424b0cd5bc44cb9ad88a83b76fbf8cf2', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'c8b0456df01d59bacf20b2d25039fb4498a0edcd', size: 20 }), h("swirl-visually-hidden", { key: '8ef9963a157261abd9e04d7bc7aa53a2d0cc6165' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '3bae7ef27857a2ff9294bd6cd07dfe0c5c897e1e', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'f0c2439e9e75520472bd45cb00ea953a07e3983b' }, h("span", { key: '9f7b141d6463aa5d29e82ec57203f4a7379ccfa0', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'dd3365f92be9db1a298b1ff835a8926147cc1d47', name: "nav" }))), h("main", { key: '1bb60af55eed8e0c2598f5cac6ba0fc151438d74', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'b9cd60540271214cd862852ba7c53a9ab6c376f8' })), h("aside", { key: 'e334a5c70d6bdbac1bff054dfb0ae4781f7423b5', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '440f261ccae7b5c78d084e4c22eb67d0d8d1e1df', class: "shell-layout__sidebar-body" }, h("div", { key: '683d4f88994e7b25a929481ea6e8bff83d0772bf', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '93156047bcd62b1bb1de6021a4c230c3c63f5c70', name: "sidebar-app-bar" })), h("div", { key: 'd686b6fd3961fbaf07c9e8a6531e6a2cbba3aa0a', class: "shell-layout__sidebar-content" }, h("slot", { key: 'a2c90fda9603557c075e99e76a1b2c3c7c54269a', name: "sidebar" })))))));
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '99ee33d8b3dff40ce4b534266fbdafc4dabf40d3', name: "avatar" }))), h("div", { key: '1e07aec21223b6b1277a1f736305204a9d051c69', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '593f2d068ec0dcf1161b7f95474611cd0e68a6ef', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'a5c91123dd243bace517da12663747fc3ad71e10', class: "shell-layout__mobile-header" }, h("slot", { key: '1294c6603ac3d687cad4d009f28b651d4f57f451', name: "mobile-logo" }), h("div", { key: '17e63882a7961b5b4284565d548955ba2d6c56d0', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'c032f2ed1c52472666d62dea4fb2e4d3d31b6be1', name: "mobile-header-tools" }), h("button", { key: 'c3dfbf08c35f2725160a2288b25c306efd0fcf1e', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'b05634fac98129147a4509c4461b48c28ed698f7', size: 20 }), h("swirl-visually-hidden", { key: 'b49b592652e0c4377e99934a18d0a81dcbcea55f' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '537391a48cc90659e367cb933c0625ef1b32146e', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'ba3f245289fada7bb8fc0b5c38d1f1c0a43f667d' }, h("span", { key: '7d1808931d93a88dd35746a5df8057f6e5aa46fd', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '3a082bac6933f9de6972ec0b69190c5ba6352405', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'c70a7ccf4d2408b05a8e74b378f9f32bb28fb6fa', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '2e961f628c249b66a10121ee936924ff26f272a3', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'a554a1070e79b14aac46bc0c73272071c3cc8866', paddingBlockEnd: "16" }, h("swirl-stack", { key: '333b1102a5900d06d5b27c9755e1e65132b248f6', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'b3c51308bfb1067e6fc34b26e09efac5e8d251ac', hideLabel: this.navigationCollapsed, 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" }), !this.navigationCollapsed &&
+            !this.secondaryNavCollapsed && (h("swirl-button", { key: '907779e749bf62369d80c8c9ede8b29c1f8875ee', 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("ul", { key: '329aa0e2fc43a301b935580e136dff2ded4f3278', class: {
+                "shell-layout__secondary-nav-items": true,
+                "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
+                    this.secondaryNavView === "grid",
+            } }, h("slot", { key: '422269185dc3b2b3c6cea0a09e7857128e50af71', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'ea6015af362cfff1535995a4bc9b0188378ef755', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '71863925b9b8e4430e236920edec978e3852dd2e' })), h("aside", { key: 'ece8a7300a11336a48769ccbcb11e769ce0f82d6', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '3eceb6b713a38976380315d20b98ece681fc43cd', class: "shell-layout__sidebar-body" }, h("div", { key: '4848e6a1069a475ddc43b0a29f789be5aae0314a', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '3889563150445f7fb0d1825441488946f14c3a71', name: "sidebar-app-bar" })), h("div", { key: '4247f7afb9c55615d039ef9758a3407163f00c99', class: "shell-layout__sidebar-content" }, h("slot", { key: '74e5c9a3d91ff76381431a1319d323f285003a24', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }
@@ -176,6 +254,42 @@ export class SwirlShellLayout {
                 "reflect": false,
                 "defaultValue": "\"Navigate forward\""
             },
+            "enableSecondaryNavGridLayout": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "enable-secondary-nav-grid-layout",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "gridNavLayoutToggleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "grid-nav-layout-toggle-label",
+                "reflect": false,
+                "defaultValue": "\"Grid\""
+            },
             "hideMobileNavigationButtonLabel": {
                 "type": "string",
                 "mutable": false,
@@ -194,6 +308,24 @@ export class SwirlShellLayout {
                 "reflect": false,
                 "defaultValue": "\"Close navigation\""
             },
+            "listNavLayoutToggleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "list-nav-layout-toggle-label",
+                "reflect": false,
+                "defaultValue": "\"List\""
+            },
             "navigationLabel": {
                 "type": "string",
                 "mutable": false,
@@ -230,6 +362,42 @@ export class SwirlShellLayout {
                 "reflect": false,
                 "defaultValue": "\"Toggle navigation\""
             },
+            "secondaryNavCollapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-nav-collapse-label",
+                "reflect": false,
+                "defaultValue": "\"Show less\""
+            },
+            "secondaryNavExpandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-nav-expand-label",
+                "reflect": false,
+                "defaultValue": "\"Show more\""
+            },
             "sidebarActive": {
                 "type": "boolean",
                 "mutable": true,
@@ -340,7 +508,9 @@ export class SwirlShellLayout {
     static get states() {
         return {
             "mobileNavigationActive": {},
-            "navigationCollapsed": {}
+            "navigationCollapsed": {},
+            "secondaryNavCollapsed": {},
+            "secondaryNavView": {}
         };
     }
     static get events() {
@@ -424,6 +594,7 @@ export class SwirlShellLayout {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "mobileNavigationActive",

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

@@ -1,5 +1,10 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlShellLayout } from "./swirl-shell-layout";
+global.MutationObserver = class {
+    constructor() { }
+    disconnect() { }
+    observe() { }
+};
 describe("swirl-shell-layout", () => {
     it("renders its content", async () => {
         const page = await newSpecPage({
@@ -14,6 +19,6 @@ describe("swirl-shell-layout", () => {
         <div slot="sidebar">Sidebar</div>
       </swirl-shell-layout>`,
         });
-        expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->      <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div>      <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left size=\\"20\\"></swirl-icon-dock-left><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.back()\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></a><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.forward()\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></a> </div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
+        expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->      <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div>      <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left size=\\"20\\"></swirl-icon-dock-left><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.back()\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></a><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.forward()\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></a> </div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div><div class=\\"shell-layout__secondary-nav\\"><swirl-separator bordercolor=\\"strong\\" spacing=\\"16\\"></swirl-separator><swirl-box paddingblockend=\\"16\\"><swirl-stack justify=\\"space-between\\" orientation=\\"horizontal\\"><swirl-button icon=\\"<swirl-icon-expand-less></swirl-icon-expand-less>\\" label=\\"Show less\\" variant=\\"plain\\"></swirl-button><swirl-button icon=\\"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>\\" iconposition=\\"end\\" label=\\"List\\" variant=\\"plain\\"></swirl-button></swirl-stack></swirl-box><ul class=\\"shell-layout__secondary-nav-items\\"></ul></div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
     });
 });

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

@@ -37,40 +37,56 @@ const Template = (args) => {
     <swirl-button label="Header tool" slot="right-header-tools" variant="outline"></swirl-button>
 
     <div slot="nav">
-      <ul>
+      <swirl-stack align="stretch" as="ul" spacing="2">
         <li>
-          <swirl-shell-navigation-item label="Home">
-            <swirl-app-icon icon="<swirl-icon-home size=&quot;20&quot;></swirl-icon-home>" slot="icon"></swirl-app-icon>
+          <swirl-shell-navigation-item label="News">
+            <swirl-app-icon icon="<swirl-icon-news size=&quot;24&quot;></swirl-icon-news>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item active label="News" badge-label="">
-            <swirl-app-icon icon="<swirl-icon-news-filled size=&quot;20&quot;></swirl-icon-news-filled>" slot="icon"></swirl-app-icon>
+          <swirl-shell-navigation-item active label="Chats">
+            <swirl-app-icon icon="<swirl-icon-chats size=&quot;24&quot;></swirl-icon-chats>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item label="Chat" badge-label="3">
-            <swirl-app-icon icon="<swirl-icon-chat-bubble size=&quot;20&quot;></swirl-icon-chat-bubble>" slot="icon"></swirl-app-icon>
+          <swirl-shell-navigation-item label="Tasks" badge-label="3">
+            <swirl-app-icon icon="<swirl-icon-tasks size=&quot;24&quot;></swirl-icon-tasks>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item label="Tasks">
-            <swirl-app-icon icon="<swirl-icon-tasks-filled size=&quot;20&quot;></swirl-icon-tasks-filled>" slot="icon"></swirl-app-icon>
+          <swirl-shell-navigation-item label="Calendar">
+            <swirl-app-icon icon="<swirl-icon-today size=&quot;24&quot;></swirl-icon-today>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item label="Employee directory" boxed="true">
-            <swirl-app-icon icon="<swirl-icon-groups-filled size=&quot;20&quot;></swirl-icon-groups-filled>" slot="icon"></swirl-app-icon>
+          <swirl-shell-navigation-item label="Employee directory">
+            <swirl-app-icon icon="<swirl-icon-directory size=&quot;24&quot;></swirl-icon-directory>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>
-        <li>
-          <swirl-shell-navigation-item label="Custom Link" boxed="true">
-          <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/433/144/144" slot="icon"></swirl-app-icon>
-          </swirl-shell-navigation-item>
-        </li>
-      </ul>
+      </swirl-stack>
     </div>
 
+    <li slot="secondary-nav">
+      <swirl-shell-navigation-item label="Reporting hub">
+        <swirl-app-icon src="/menu-item-1.png" slot="icon"></swirl-app-icon>
+      </swirl-shell-navigation-item>
+    </li>
+    <li slot="secondary-nav">
+      <swirl-shell-navigation-item label="My absences">
+        <swirl-app-icon src="/menu-item-2.png" slot="icon"></swirl-app-icon>
+      </swirl-shell-navigation-item>
+    </li>
+    <li slot="secondary-nav">
+      <swirl-shell-navigation-item label="IT self-service">
+        <swirl-app-icon src="/menu-item-3.png" slot="icon"></swirl-app-icon>
+      </swirl-shell-navigation-item>
+    </li>
+    <li slot="secondary-nav">
+      <swirl-shell-navigation-item label="Office door key">
+        <swirl-app-icon src="/menu-item-4.png" slot="icon"></swirl-app-icon>
+      </swirl-shell-navigation-item>
+    </li>
+
     <swirl-app-layout app-name="App name">
       <swirl-button hide-label="true" icon="<swirl-icon-menu></swirl-icon-menu>" label="Menu" slot="navigation-mobile-menu-button"></swirl-button>
       <swirl-resource-list label="Items" slot="navigation">