@getflip/swirl-components 0.218.0 → 0.220.0

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,6 +93,8 @@ export class SwirlShellLayout {
                 },
             },
         });
+        this.toggleNavItemLabels();
+        this.setSecondaryNavItemsTiled();
     }
     componentDidRender() {
         this.focusTrap?.updateContainerElements(this.navElement);
@@ -81,6 +120,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 +137,47 @@ 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);
+            console.log(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: 'd315ef28d130e1fc10dbbb606916511b19d5f467' }, h("div", { key: '0f0a269b0f8a6b67eb039200fa8f9b98eb3e6ff3', class: className }, h("header", { key: 'b2b9f59f8f2a25882700bcf3451893b635983213', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '859222c097851110652ea89a109362d2ed280e8c', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'b75223a555142320f107769fecd742d511d4a6ae', class: "shell-layout__header-left" }, h("button", { key: '4f0f4e227c7cc52666b35aaaf079259823fbb8a8', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '91be8a326377ea330cacc6709124d2aad2fd814f', size: 20 }), h("swirl-visually-hidden", { key: 'd742eed3900bfd966d2ea543eef723f394097f5f' }, this.navigationToggleLabel)), h("a", { key: 'a0d9176d0c12ac010436d845fb36c97908584c95', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'a6bfcfadbe6d01de1262b14e89da7871b405d985', size: 20 }), h("swirl-visually-hidden", { key: '1ff0d966b54c8e91daa775e37b3c02f6dd44cee4' }, this.browserBackButtonLabel)), h("a", { key: '2469f599e06633f40d50ddacfead004b77cf96c4', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '4364d444a04b0aca533db2a2bef2ac6089922a98', size: 20 }), h("swirl-visually-hidden", { key: 'a48f450f8cc1f1726266d3ada9a36803a1328a0a' }, this.browserForwardButtonLabel)), h("slot", { key: '714ad146e5ad43a86c018536837a4dc23eed628a', name: "left-header-tools" })), h("div", { key: '87ad0ef7c7a0f35a658d9b0daf57118e4df99598', class: "shell-layout__logo" }, h("slot", { key: '3f330d36bc1568e469cc4310481a25448756146d', name: "logo" })), h("div", { key: 'e42f13ae9171d0cd442d855b5df4cf745311fc41', class: "shell-layout__header-right" }, h("slot", { key: '7427bfe33b59833bf7311a9905d4e8286deb6cf1', name: "right-header-tools" }), h("button", { key: '532a25c69f87f7f5c8d6e87190e416b39d52b03f', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '5f93d9089940880c88f4e800e05e304a67e47adf', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '39923c54703bf9e908c7a7e8926a6fb5a98e7f3a' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'fa3ee522e8bab1b665e07c90ead0a747d1dc5dd8', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+        return (h(Host, { key: '7623fb08b60fe150f78537cc7ffeb34ea08c5a8b' }, h("div", { key: '179a5334ff4a02e6761a4c3f061155bfcc886bac', class: className }, h("header", { key: '6029510b35fe789874ca90b95ecd9df72f055e79', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '0ed34ec676012469679ac5310b4b4cef83bd9a1a', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'eb98efcc123b3b1438e3d6df18425085c33fc67a', class: "shell-layout__header-left" }, h("button", { key: 'fe70cdc5600c04b3d1eb8ab17b0ddff2419b5f9a', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '5dbb38292980a18a5e0219977d785224309bbf69', size: 20 }), h("swirl-visually-hidden", { key: 'c5771fdc7066ee88f9ecf31861d696b18c811533' }, this.navigationToggleLabel)), h("a", { key: 'dcce38cd4e283fbe5a9efae02e1dd15927b37b4d', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '8ad40c88adc3f96df42af2db27e96fec8c965deb', size: 20 }), h("swirl-visually-hidden", { key: '8dd482cb80a11db8aa8a73886beb5ad2f3e780f0' }, this.browserBackButtonLabel)), h("a", { key: 'fe9ca3ea97e5c380d1d26f1c4dab70cce01e7992', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '3241be06da7641df9ffe6ca5875f5a90b508e50a', size: 20 }), h("swirl-visually-hidden", { key: 'd024e25f155ae3fbc2102fd70e362e7b1b57cd78' }, this.browserForwardButtonLabel)), h("slot", { key: '2716c16471633c1b29f7a436d8c58a650d8d1f2a', name: "left-header-tools" })), h("div", { key: '883257e625335186493da36c0fdee5fe83adbc0d', class: "shell-layout__logo" }, h("slot", { key: '3ec15894bb6676a965423ddd0d269ee9e8f6b7cc', name: "logo" })), h("div", { key: 'caf685dc0a904fbf021cbbeab27ca39cb21d5e85', class: "shell-layout__header-right" }, h("slot", { key: '8c1323440c8f909ea1ec7b57ba7ed01c1e97837a', name: "right-header-tools" }), h("button", { key: '15435a247715f42cee8d2735befb5236d3fe7a40', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'dd8f71593d240e0b175043da2c15392032080984', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '7fe157d80af2602ef5ab024335fc6ce1738515a2' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '55b851f1e3506aea0b77f9579b2b560a1cb16a43', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '7dedf8360ed4d5bad6228994937523529b4ebc89', name: "avatar" }))), h("div", { key: 'e6cb8aec3c3232b048eca5315973504298225491', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '4c1711ab0f9a2a6554bca5591d06bb4331d52c82', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '3c8b393dbc5072d3498617d81fd899dd068b1b85', class: "shell-layout__mobile-header" }, h("slot", { key: 'f03b98afb12df22f7502477d662eb9a4767a6b08', name: "mobile-logo" }), h("div", { key: 'dc644d1a4d3ce0844414e3d9aed5df5a2383146a', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'af5fd7eb5adfe2fbf7170fb58a6c610b0fdfd3e7', name: "mobile-header-tools" }), h("button", { key: 'e709eb9c0e474d9bf0ed0577b06c83c4d8390d3b', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'f32e67084a8f7842a3a1d7970859ac3b544e4b3c', size: 20 }), h("swirl-visually-hidden", { key: '7e8537486fbc8a18c59d9e5dd4ac9ecfa34e1195' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '5b39736a4651a3f1a4b83c1c268f24f8f1d35cdc', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'fb8ad9ebf0e751b3981bc32c19294c59dc5c4547' }, h("span", { key: '7fea308c53db770627e68f5e135c685c14b2a07d', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b16f2836271b334cd7e8613df6c5f891832eb166', name: "nav" }))), h("main", { key: '2a9acbf31b45d97353fee7cd41d7b769f64c0acf', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '035eab0952e753770127806112197ca4f196478d' })), h("aside", { key: '0c71632f9124d09b737f4d250afa173aa4197cf8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'bf5d4394a89307bd3ef4c2762b3ca029d82acc56', class: "shell-layout__sidebar-body" }, h("div", { key: '67621e75a1574bb45aa371b111ed9ffb811b9f24', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'c25c4bbf3b657a370d7b3c91e2a198983092eefb', name: "sidebar-app-bar" })), h("div", { key: 'f5c37a506eb847cb28982785cc2b5469a701b553', class: "shell-layout__sidebar-content" }, h("slot", { key: '004e271b40ecb19582e7fcdabd092c2007cfeda9', name: "sidebar" })))))));
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '30faf24857b927774b5f99fb81bf969b7e9e79d9', name: "avatar" }))), h("div", { key: '3d306e78d42951897ce5fbeb3e4bbb020a8b705b', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '1241e5d10b77daa77454d8f3157d4905c951bfd9', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'f1f10b0a9b928c9788fa45950b6db93f112f1b00', class: "shell-layout__mobile-header" }, h("slot", { key: 'ea2dd9d1b0721eb1cbee2194ae609f9b8efeb7e8', name: "mobile-logo" }), h("div", { key: '91684c95ab397db06f8fffa3302beeff90b34eef', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'a3b51069cb48e2624c99a3e36271cc9076ebc6b9', name: "mobile-header-tools" }), h("button", { key: '72faa9f199a14964662724e8deb2a96c527364b1', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '3258dbb5f8b839cfc98d73e4620df3c7bc33260d', size: 20 }), h("swirl-visually-hidden", { key: '2e480b97affdfd914c3ab4ede0907b6b82d67ff6' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '1a5350c2b6ef8a787345fc8a9f5824da2d6fd22f', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '359d25014c23a189979e44eb8680f55b5a088e76' }, h("span", { key: 'b4890f60b20ca0c63a153f0fb5f7bfe49f4bf76e', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '449ba439cf0185fd7bafe10e6122512e17471b9e', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '753b0f3c050cfe1147f742bbab983ec9e2238b2e', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'c1cddd993040685ab1b587235bb0d8fc12f1945e', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '9b0906021e329b2b35b62c0a6fa70e178b59df03', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'f4c6ca124dea40f980dab7980e39c26860d399e3', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '500d0d44d9dc457b97b2cc0685178eb56b6a7494', 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: 'ac2ff76954943a20902c6733f87899a8b6186b34', 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: '845b1077674331b52d0226edec5fdca9d0de61d9', class: {
+                "shell-layout__secondary-nav-items": true,
+                "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
+                    this.secondaryNavView === "grid",
+            } }, h("slot", { key: '9729bdcef478c6d17aacd38a15e9f0dc83376bfd', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'b362c844b7cf75636b3f21537b45d2aca90a84d1', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '869588df1374626baf1533895a826ad1b72770c4' })), h("aside", { key: '5fe6572ca71fc826296dceb3c86eaa557f492bcf', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '5a1ec6fa64fa3487c5bbfbac7c0a936f7b8484f5', class: "shell-layout__sidebar-body" }, h("div", { key: 'f76b0b784ae026799817e58a543383dfd03d3b6b', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '9a44404c205282ab06d9dd60bb08fe5b9907c558', name: "sidebar-app-bar" })), h("div", { key: '54b8de1ea6ef504ce7d0c308388393e736f4377e', class: "shell-layout__sidebar-content" }, h("slot", { key: '907b5f09dc7023209f22c3b1f272cd2c98655d27', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }
@@ -176,6 +246,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 +300,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 +354,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 +500,9 @@ export class SwirlShellLayout {
     static get states() {
         return {
             "mobileNavigationActive": {},
-            "navigationCollapsed": {}
+            "navigationCollapsed": {},
+            "secondaryNavCollapsed": {},
+            "secondaryNavView": {}
         };
     }
     static get events() {
@@ -424,6 +586,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

@@ -14,6 +14,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,46 @@ 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-app-icon icon="<swirl-icon-home size=&quot;24&quot;></swirl-icon-home>" 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-app-icon icon="<swirl-icon-news-filled size=&quot;24&quot;></swirl-icon-news-filled>" 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-app-icon icon="<swirl-icon-chat-bubble size=&quot;24&quot;></swirl-icon-chat-bubble>" 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-app-icon icon="<swirl-icon-tasks-filled size=&quot;24&quot;></swirl-icon-tasks-filled>" 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>
-        </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="Employee directory">
+          <swirl-app-icon icon="<swirl-icon-groups-filled size=&quot;24&quot;></swirl-icon-groups-filled>" slot="icon"></swirl-app-icon>
+        </swirl-shell-navigation-item>
+      </li>
+      <li slot="secondary-nav">
+        <swirl-shell-navigation-item badge-label="3" label="Custom Link">
+          <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>
+      <li slot="secondary-nav">
+        <swirl-shell-navigation-item label="Custom Link with an unusually long label">
+          <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>
+
     <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">

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css

@@ -12,6 +12,8 @@
   }
 
 .shell-navigation-item {
+  --swirl-app-icon-size: 1.5rem;
+
   position: relative;
   display: flex;
   width: 100%;
@@ -59,19 +61,68 @@
     box-shadow: 0 0 0 0.125rem var(--s-focus-default);
   }
 
+.shell-navigation-item.shell-navigation-item--boxed {
+    --swirl-app-icon-size: 2rem;
+  }
+
 .shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {
-      background-color: var(--s-background-default);
-      border-color: var(--s-border-default);
-      border-radius: var(--s-border-radius-sm);
+      overflow: hidden;
       border-width: var(--s-border-width-default);
       border-style: solid;
+      border-color: var(--s-border-default);
+      border-radius: var(--s-border-radius-sm);
+      background-color: var(--s-background-default);
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled {
+    --swirl-app-icon-size: 100%;
+
+    height: auto;
+    padding: 0;
+    flex-direction: column;
+    container-type: unset;
+  }
+
+.shell-navigation-item.shell-navigation-item--tiled:hover {
+      background-color: transparent;
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {
+        text-decoration: underline;
+      }
+
+.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {
+      width: 100%;
+      height: 100%;
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {
       overflow: hidden;
+      width: 100%;
+      min-width: 100%;
+      height: auto;
+      min-height: auto;
+      border-radius: var(--s-border-radius-base);
+      background-color: var(--s-surface-sunken-hovered);
+      aspect-ratio: 1;
     }
 
-.shell-navigation-item.shell-navigation-item--boxed {
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
+      position: absolute;
+      top: -0.375rem;
+      right: -0.375rem;
+      padding: var(--s-space-2);
+    }
 
-    --swirl-app-icon-size: 2rem;
-}
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
+      display: -webkit-box;
+      overflow: hidden;
+      text-align: center;
+      white-space: normal;
+      text-overflow: unset;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
 
 .shell-navigation-item.shell-navigation-item--active {
     background-color: var(--s-surface-sunken-hovered);
@@ -106,10 +157,10 @@
 
 .shell-navigation-item__icon {
   display: inline-flex;
+  width: 2rem;
   min-width: 2rem;
-  min-height: 2rem;
   height: 2rem;
-  width: 2rem;
+  min-height: 2rem;
   justify-content: center;
   align-items: center;
 }