@getflip/swirl-components 0.228.0 → 0.230.0

package/dist/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -83,6 +83,7 @@ export class SwirlResourceList {
         this.assistiveTextItemMoved = "Item moved. New position:";
         this.controllingElement = undefined;
         this.label = undefined;
+        this.spacing = "0";
         this.assistiveText = undefined;
         this.listId = uuid();
     }
@@ -232,7 +233,7 @@ export class SwirlResourceList {
         this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
     }
     render() {
-        return (h(Host, { key: 'f3c37985d20f44b2f9deb155368363ba7d05cd59', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '314fdad8583092d3fa5a60ccad16e9fec64c7b16', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'd707c513e411b84366b06bcfc929549464bb73db', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '29cd8d3aebd05446097e71785f30c6e17096def1', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", { key: 'dfd96cd9d8bc64b99e169f8d17ce5a2e7fa2c22d' })))));
+        return (h(Host, { key: '5275305a537d6591f88aca3e719eb625a81af46e', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '2bfd1debd362806e9f66b9f0ced478eceba8b4ee', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'b473aac22f978d47aa2d7734ac1c0228efb11210', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '757cc4a34325eb8298437a43b3f2aeeb895fb74a', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: '833d2dace730d044e9f65f95e874c118a70ae25e' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }
@@ -355,6 +356,30 @@ export class SwirlResourceList {
                 },
                 "attribute": "label",
                 "reflect": false
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlStackSpacing",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
+                    "references": {
+                        "SwirlStackSpacing": {
+                            "location": "import",
+                            "path": "../swirl-stack/swirl-stack",
+                            "id": "src/components/swirl-stack/swirl-stack.tsx::SwirlStackSpacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "spacing",
+                "reflect": false,
+                "defaultValue": "\"0\""
             }
         };
     }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.spec.js

@@ -48,7 +48,7 @@ describe("swirl-resource-list", () => {
       <swirl-resource-list label="Label">
         <swirl-visually-hidden role="alert"></swirl-visually-hidden>
         <swirl-box paddinginlineend="8" paddinginlinestart="8">
-          <swirl-stack aria-label="Label" class="resource-list" id="${id}" role="grid">
+          <swirl-stack aria-label="Label" class="resource-list" id="${id}" role="grid" spacing="0">
             <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
             <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
           </swirl-stack>

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

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import * as focusTrap from "focus-trap";
+import { isDesktopViewport } from "../../utils";
 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";
@@ -23,6 +24,7 @@ export class SwirlShellLayout {
             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();
@@ -67,8 +69,10 @@ export class SwirlShellLayout {
         this.navigationCollapsed = undefined;
         this.secondaryNavCollapsed = undefined;
         this.secondaryNavView = "list";
+        this.isDesktopViewport = true;
     }
     componentWillLoad() {
+        this.isDesktopViewport = isDesktopViewport();
         this.collectNavItems();
         const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
         this.sidebarActive =
@@ -88,8 +92,7 @@ export class SwirlShellLayout {
                 },
             },
         });
-        this.toggleNavItemLabels();
-        this.setSecondaryNavItemsTiled();
+        this.collectNavItems();
         this.navMutationObserver = new MutationObserver(() => {
             this.collectNavItems();
             this.setSecondaryNavItemsTiled();
@@ -132,29 +135,37 @@ export class SwirlShellLayout {
     watchSidebarActive() {
         localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
     }
+    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.enableSecondaryNavGridLayout && this.navigationCollapsed) ||
-                    (!this.enableSecondaryNavGridLayout && this.navigationCollapsed);
+            item.hideLabel = this.navigationCollapsed && this.isDesktopViewport;
         });
     }
     setSecondaryNavItemsTiled() {
         this.secondaryNavItems.forEach((item) => {
             item.tiled =
-                this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid";
+                this.enableSecondaryNavGridLayout &&
+                    (this.secondaryNavView === "grid" ||
+                        (this.navigationCollapsed && this.isDesktopViewport));
         });
     }
     restoreSecondaryNavState() {
@@ -169,31 +180,31 @@ export class SwirlShellLayout {
     }
     render() {
         const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
+        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": this.navigationCollapsed,
+            "shell-layout--navigation-collapsed": mainNavCollapsed,
             "shell-layout--sidebar-active": this.sidebarActive,
         });
-        return (h(Host, { key: '2a08e1ff3c834400f2b1bdbe0ce6f2b4ab6752d4' }, h("div", { key: 'af7cfc344e31d70ea8c80335e7012cdf0ecd0ffb', class: className }, h("header", { key: '4740f8e74978c9765e1c26ce25baabcc9faedf4f', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'ac69feea364da93f5529adee08d52b6bbd0783f1', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'b346cfcef2f12bd64c880b4df1abd2363300d47d', class: "shell-layout__header-left" }, h("button", { key: 'df98eec8ca1b01219c798af47735cef5295fd1e1', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '9e40c0d95b4f57ca7838b5e16507e0cac995c59c', size: 20 }), h("swirl-visually-hidden", { key: '912ff1edf6806b234146c01cc5d8777ddaef0b19' }, this.navigationToggleLabel)), h("a", { key: 'e3e6ccb5b48c531aa9bf449439b196ca7f61f3f2', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'c47f9cd28090c073dcf2508d7630dad6b42468b4', size: 20 }), h("swirl-visually-hidden", { key: 'ca8a1448431bdda7b145682ec192b2e47f929985' }, this.browserBackButtonLabel)), h("a", { key: 'bdceb890d81359edc542770bd04a3d3d2ade8a28', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '867cde99d76414ec66a3994e887de23985fcbe82', size: 20 }), h("swirl-visually-hidden", { key: '36ef417bbbd6027eb8b021671d9abaf471d37087' }, this.browserForwardButtonLabel)), h("slot", { key: 'f360f6ba553a877a453161d0d81f650d536338c7', name: "left-header-tools" })), h("div", { key: '6771b4339bcfb8a3fdd7b011facb27ceb98e1843', class: "shell-layout__logo" }, h("slot", { key: 'a0a6f1ccc356dba5d92369f0d4923f628cf01ca2', name: "logo" })), h("div", { key: 'ad42f72e731aa0d5b12f8f46635432963c608818', class: "shell-layout__header-right" }, h("slot", { key: '2151c95079396c8bf70447e56b572ae8e660453b', name: "right-header-tools" }), h("button", { key: 'd1b07b8363746a2d52d40ff99351b2985ac48e6c', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'aa11582771f2147813a2fa5ca56d0dc56d9600eb', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '673cb8b03399ed8bca293f9b7ae0a5995e52c2d8' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '4b58b910efe4d4f60d88b559ff1f8448d953ba28', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+        return (h(Host, { key: '5c12250de3323c6e489f3e91807fce226378a364' }, h("div", { key: '20efbc31458693f8f880e15bdef8732a979e7723', class: className }, h("header", { key: '93645e7bf08d24544267a9a35de0887ebdcac9e9', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '20361c417ab828b5cf9bef5710012cd48d73540b', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '6c76237a92f7758630f947d174eca682df9813f7', class: "shell-layout__header-left" }, h("button", { key: '1282daa50168b50b57e057f050fdcd43339060ab', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '16891b597aad29f8cf8a3641db6208db46a84b47', size: 20 }), h("swirl-visually-hidden", { key: '1294f46b1faefca7a122c494b861d25272ea2cb4' }, this.navigationToggleLabel)), h("a", { key: 'f7ed1b921d55faf287752be5d4ad9d8c3155653a', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '5b03132e0e5be62efe2f5f217aa064942c5b78fb', size: 20 }), h("swirl-visually-hidden", { key: 'bb26c2d22fe311fc899b022fd5e3fc1bdd2333d6' }, this.browserBackButtonLabel)), h("a", { key: '111fe00b6d8f0aa4a1739ed7f11e27b4de82af4f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '0cbc2913813e5a60a59151ef70f87123c38636d7', size: 20 }), h("swirl-visually-hidden", { key: '3c143db049267b6f7b9040cd8efa4b6767b31c71' }, this.browserForwardButtonLabel)), h("slot", { key: 'd0e00ad4b9424c3713be1cbdc4173cca7e175f60', name: "left-header-tools" })), h("div", { key: '9053b2428a73b52f2657138a2018c3bb8df9b942', class: "shell-layout__logo" }, h("slot", { key: '46fb16906c4940ac2226a23c60ca4e2b700c1f2b', name: "logo" })), h("div", { key: '35825b726163fca399fcccd8f92c511e951a4f6d', class: "shell-layout__header-right" }, h("slot", { key: '7a16ab917f4031730f0915658325ab663b46abdc', name: "right-header-tools" }), h("button", { key: '0828fa4d0969f4ebe05036455de31c1c921b7ae9', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'd39c7c329648a3798b6424558ce7f7de34b765f9', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '51889052fb865b555db470634e69adfcb7e9a433' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '4cc79f7e073afc1f6e609e54480b468f4e5f028e', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '95e6abbce7dee1b9d53cdb0af7d852172c0ecda0', name: "avatar" }))), h("div", { key: '46ab18c480eb5ff275a8af9dbf94f08772508a0c', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '356d67f7fd3e99731cddf139dd54957e1cff4158', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'a23f2504292957b212b99930399a947484b847b2', class: "shell-layout__mobile-header" }, h("slot", { key: '31f1fe99e8a55c4521e4591ac5d368665cb067fe', name: "mobile-logo" }), h("div", { key: 'f1b8bfcbb2532a2ab50394b2e4fc27bfe6b6069e', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'bbde50cb773426ddd9c13ad9ed8255f63a2bcd2f', name: "mobile-header-tools" }), h("button", { key: '8d10f23b745bcb81ff9c7251a7f7fe7c6c3012db', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '9cdd84cefb55d1623dbb716dce7e35f866342018', size: 20 }), h("swirl-visually-hidden", { key: '4621fa1a7acf0a403c2e3e4da7210b770d13b051' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '99bd9a3cfcc7859c26d1995847574df1875ca511', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '908ab720d24a8d1b976f84c9e22e0f1fc8ac6c74' }, h("span", { key: '0f8c25ecd451c3ba2cbdc737466ffaf78cbc373d', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'c3444ebf80551ab97887c34ca0859545e0809c11', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '298f337e2c97bba06e6eeab3cc925ae683f244f3', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '3b73e0be030ce4b22bd13953181897d1b65638b3', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '96ec376bd6c3fa514cabde7b8d42d9d9eda4c3e3', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'ce9778f2a08bb1a0b89d8a99a4625778a0cc308c', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '4d3198c29d0d3a6c650194786cecfef48bf42650', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '8119e763ed4ec0c4934317ac5fa2bb5ae56413a3', name: "avatar" }))), h("div", { key: '618249da25d9a510e3b850d68389e52d4c5b64ed', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'a1689720c5f62cf1572ee80ed1b82ee5676cd406', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'b4500a5a6f0f4a32ce4ee1f8c90c40896aabb5c8', class: "shell-layout__mobile-header" }, h("slot", { key: 'f22761f5011f27f19628d415840c90e8dbffd306', name: "mobile-logo" }), h("div", { key: '9761126f496e42f861a474722ee12b908efc2108', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '3dac3d5358433559971ba3e2aa60428daf72d6fd', name: "mobile-header-tools" }), h("button", { key: '8df62c780226b37da61106c09759c0f83827172e', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'd0ee691f631be0ecfad427dd9640e1d9563083b1', size: 20 }), h("swirl-visually-hidden", { key: '3e028b5919a3967cd725ee7601d2569fe5378b7b' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'a6478a52bfedf7c080244b13aa3ecfaadb8afaec', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '71fb758c944603cbc0eca1a70f57cab4d81d3ea6' }, h("span", { key: '8fcb34cde559b2192caead914d558df4581b23ec', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '4bc9baa3d12381678981e84c3727ee79a127fea2', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'c555bc66bceed44d1ee9f9599cb6a66b3fa484a2', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'cba186e98e42a5f7644c4dfabf773f7e49587f3c', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'b5393c61be683dcbdbfef248763ca5d388aba4d4', paddingBlockEnd: "16" }, h("swirl-stack", { key: '3238deda1ae4b70aaf1fcbf0a0f3091d35b3ebaf', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '10a3251a25367af6d85368f3497eda2eaaf8b154', 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" }), !this.navigationCollapsed &&
-            !this.secondaryNavCollapsed && (h("swirl-button", { key: '9c43584ccb0e91ecc7143c1f4671c664515db04c', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'df1df6b2a06c721a6b4df20dac8f9de908708021', 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: '01ac89f493e0c1105c8335a28dd854429d30bb7b', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '69a481958c06725c99888a4dbb70807ab424c2ac', class: {
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
-                    this.secondaryNavView === "grid",
-            } }, h("slot", { key: '4739e0f330868683ab55f86544d704a6824739fe', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'b6a57c3022e231f7b2c4217150863e7db9d5b6cd', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '2a30c9408e9fdb3f7b6a0e4d14f73c0134970da1' })), h("aside", { key: 'cc5ebd6001cf2f5ea5c0f24ff419591a325860c0', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'cdddc210d0b8e0b9550ff1f3741278252d79fc73', class: "shell-layout__sidebar-body" }, h("div", { key: 'a8ebbdd90a49101ddaceeec6945e2d402f8271d4', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '7918198bf32dd5fd2da628c0583da1519ec6a1df', name: "sidebar-app-bar" })), h("div", { key: '98437c94ee53ad2b948b06212f72b351f1a770a5', class: "shell-layout__sidebar-content" }, h("slot", { key: 'd656f8edfe29979c906e05ab326741c69713e621', name: "sidebar" })))))));
+                    (this.secondaryNavView === "grid" || mainNavCollapsed),
+            } }, h("slot", { key: '7054faefe6f13c25a071498e9b556d9f7990cc5a', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'eee310fc015240bf09e44f52e1273f7d86dec913', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '2564cd4717d18a74cee4ed6da1533e2148b0ded8' })), h("aside", { key: '9e906480ee9b8e4625107e1382a0ab71edbebd07', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '900e544ddbef42702dd3507d3163ba208ed6e5ca', class: "shell-layout__sidebar-body" }, h("div", { key: '0fbcf8cd5a0e158e7923cf851cc474b570ec886a', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '1904105bcb39ba4bf04b93fe6f97fa1feece49d1', name: "sidebar-app-bar" })), h("div", { key: 'f391fde20115bcab8952fc7b66fd74c64e27520f', class: "shell-layout__sidebar-content" }, h("slot", { key: '5f7b34ddda70f186199eeda95b119463e7b82cb0', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }
@@ -518,7 +529,8 @@ export class SwirlShellLayout {
             "mobileNavigationActive": {},
             "navigationCollapsed": {},
             "secondaryNavCollapsed": {},
-            "secondaryNavView": {}
+            "secondaryNavView": {},
+            "isDesktopViewport": {}
         };
     }
     static get events() {
@@ -625,6 +637,12 @@ export class SwirlShellLayout {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/swirl-text/swirl-text.spec.js

@@ -16,7 +16,7 @@ describe("swirl-text", () => {
         });
         expect(page.root).toEqualHtml(`
       <swirl-text align="center" color="critical" font-style="italic" size="lg" weight="medium">
-        <p class="text text--align-center text--color-critical text--font-family-text text--font-style-italic text--size-lg text--truncate-direction-end text--weight-medium" style="white-space: normal;">
+        <p class="text text--align-center text--color-critical text--font-family-text text--font-style-italic text--responsive text--size-lg text--truncate-direction-end text--weight-medium" style="white-space: normal;">
           Est, odio dis scelerisque risus sagittis lorem rhoncus. Vivamus tristique habitant vitae cursus nisl. Sed adipiscing proin suspendisse aliquam maecenas faucibus mauris purus. Tortor ut habitant erat adipiscing nulla pretium, cursus tortor. Amet viverra et platea lacus, nec molestie tincidunt.
         </p>
       </swirl-text>
@@ -37,7 +37,7 @@ describe("swirl-text", () => {
         });
         expect(page.root).toEqualHtml(`
       <swirl-text as="span">
-        <span class="text text--align-start text--color-default text--font-family-text text--font-style-normal text--size-base text--truncate-direction-end text--weight-normal" style="white-space: normal;">
+        <span class="text text--align-start text--color-default text--font-family-text text--font-style-normal text--responsive text--size-base text--truncate-direction-end text--weight-normal" style="white-space: normal;">
           Est, odio dis scelerisque risus sagittis lorem rhoncus. Vivamus tristique habitant vitae cursus nisl. Sed adipiscing proin suspendisse aliquam maecenas faucibus mauris purus. Tortor ut habitant erat adipiscing nulla pretium, cursus tortor. Amet viverra et platea lacus, nec molestie tincidunt.
         </span>
       </swirl-text>

package/dist/collection/utils.js

@@ -136,6 +136,9 @@ export function getVisibleHeight(element, container) {
 export function isMobileViewport() {
     return !window.matchMedia("(min-width: 768px)").matches;
 }
+export function isDesktopViewport() {
+    return window.matchMedia("(min-width: 992px)").matches;
+}
 export function prefersReducedMotion() {
     return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }