@getflip/swirl-components 0.437.0 → 0.438.1

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

@@ -139,24 +139,24 @@
     }
 
 @media (min-width: 768px) {
-        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-opening .app-layout__grid {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid {
           animation: app-layout-no-nav-sidebar-slide-in 0.3s;
         }
 
           @media (prefers-reduced-motion) {
-        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-opening .app-layout__grid {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid {
             animation: none
         }
           }
       }
 
 @media (min-width: 768px) {
-        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid {
           animation: app-layout-no-nav-sidebar-slide-out 0.3s;
         }
 
           @media (prefers-reduced-motion) {
-        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid {
             animation: none
         }
           }
@@ -180,7 +180,18 @@
 
 @media (min-width: 1800px) {
 
-.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
+.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar {
+      position: static;
+      width: 25rem;
+      z-index: auto;
+      box-shadow: none;
+      animation: none
+  }
+    }
+
+@media (min-width: 1800px) {
+
+.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-active .app-layout__grid {
         grid-template-columns: 25rem 1fr 25rem;
         grid-template-areas:
           "header body sidebar"
@@ -189,32 +200,32 @@
       }
 
 @media (min-width: 1800px) {
-      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
+      .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid {
         animation: app-layout-sidebar-slide-in 0.3s;
         animation-fill-mode: forwards;
       }
 
         @media (prefers-reduced-motion) {
-      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
+      .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid {
           animation: none
       }
         }
-        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid {
+        .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid {
           animation: app-layout-sidebar-slide-in-with-collapsed-nav 0.3s;
         }
     }
 
 @media (min-width: 1800px) {
-      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid {
+      .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid {
         animation: app-layout-sidebar-slide-out 0.3s;
       }
 
         @media (prefers-reduced-motion) {
-      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid {
+      .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid {
           animation: none
       }
         }
-        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid {
+        .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid {
           animation: app-layout-sidebar-slide-out-with-collapsed-nav 0.3s;
         }
     }
@@ -252,7 +263,7 @@
         }
     }
 
-@media (min-width: 768px) and (max-width: 1799px) {
+@media (min-width: 768px) {
     .app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
       position: absolute;
       top: 0;
@@ -260,6 +271,9 @@
       bottom: 0;
       width: min(40%, 25rem);
       z-index: 3;
+    }
+
+    .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners) {
       border-left: var(--s-border-width-default) solid var(--s-border-default);
       box-shadow: var(--s-shadow-level-3);
     }
@@ -326,10 +340,10 @@
 
 @media (min-width: 1800px) {
 
-.app-layout--sidebar-closing .app-layout__sidebar {
-      animation: none
-  }
+.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar {
+        animation: none
     }
+      }
 
 .app-layout--has-app-bar-controls .app-layout__app-bar-controls {
     display: block;
@@ -451,13 +465,6 @@
   padding-left: var(--s-space-8);
 }
 
-@media (min-width: 768px) {
-
-.app-layout__app-bar-mobile-menu-button {
-    padding-left: 0
-}
-  }
-
 .app-layout__navigation-back-button {
   margin-left: calc(-1 * var(--s-space-4));
 }
@@ -509,6 +516,7 @@
     "app-bar"
     "banner"
     "content";
+  background-color: var(--s-background-default);
 }
 
 .app-layout__app-bar {
@@ -519,7 +527,6 @@
   min-width: 0;
   align-items: center;
   border-bottom: var(--s-border-width-default) solid transparent;
-  background-color: var(--s-background-default);
   grid-area: app-bar;
   gap: var(--s-space-8);
 }
@@ -528,7 +535,6 @@
   display: none;
   min-width: 0;
   align-items: center;
-  background-color: var(--s-background-default);
   grid-area: bottom-bar;
 }
 
@@ -571,7 +577,6 @@
 
 .app-layout__content {
   overflow: auto;
-  background-color: var(--s-background-default);
   grid-area: content;
 }
 
@@ -585,6 +590,7 @@
   grid-template-areas:
     "sidebar-header"
     "sidebar-content";
+  background-color: var(--s-background-default);
 }
 
 @media (min-width: 768px) {
@@ -601,19 +607,10 @@
     }
   }
 
-@media (min-width: 1800px) {
-
-.app-layout__sidebar {
-    width: 25rem;
-    animation: none
-}
-  }
-
 .app-layout__custom-sidebar-header {
   display: none;
   min-width: 0;
   border-bottom: var(--s-border-width-default) solid transparent;
-  background-color: var(--s-background-default);
   grid-area: sidebar-header;
 }
 
@@ -626,7 +623,6 @@
   padding-left: var(--s-space-8);
   align-items: center;
   border-bottom: var(--s-border-width-default) solid transparent;
-  background-color: var(--s-background-default);
   grid-area: sidebar-header;
   gap: var(--s-space-8);
 }
@@ -656,10 +652,60 @@
 
 .app-layout__sidebar-content {
   overflow-y: auto;
-  background-color: var(--s-background-default);
   grid-area: sidebar-content;
 }
 
+@media (min-width: 768px) {
+    .app-layout--rounded-corners .app-layout__grid {
+      -moz-column-gap: var(--s-space-8);
+           column-gap: var(--s-space-8);
+    }
+
+    .app-layout--rounded-corners .app-layout__header {
+      border-right: none;
+      border-radius: var(--s-border-radius-l) var(--s-border-radius-l) 0 0;
+    }
+
+    .app-layout--rounded-corners .app-layout__navigation {
+      border-right: none;
+      border-radius: 0 0 var(--s-border-radius-l) var(--s-border-radius-l);
+    }
+
+    .app-layout--rounded-corners .app-layout__body,
+    .app-layout--rounded-corners .app-layout__sidebar {
+      border-radius: var(--s-border-radius-l);
+      overflow: hidden;
+    }
+
+    .app-layout--rounded-corners .app-layout__sidebar {
+      border-left: none;
+      /* adaptation of shadow-level-3 to support rounded corners */
+      box-shadow: -12px 0 32px -10px rgba(23, 23, 23, 0.12), -8px 4px 12px -8px rgba(23, 23, 23, 0.08);
+    }
+  }
+
+@media (min-width: 768px) {
+      .app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid, .app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
+        grid-template-columns: 100%;
+        grid-template-areas:
+          "body"
+          "body";
+      }
+    }
+
+@media (min-width: 768px) {
+    .app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar .app-layout__sidebar {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: min(50%, 25rem);
+      z-index: 3;
+      border-left: var(--s-border-width-default) solid var(--s-border-default);
+      box-shadow: var(--s-shadow-level-3);
+    }
+  }
+
 @keyframes app-layout-nav-overlay-slide-in-desktop {
   from {
     width: 0;

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

@@ -24,6 +24,7 @@ export class SwirlAppLayout {
         this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
         this.navigationToggleLabel = "Toggle navigation";
         this.navigationOverlayLabel = "Show navigation";
+        this.sidebarPositioning = "auto";
         this.sidebarCloseButtonLabel = "Close sidebar";
         this.transitionStyle = "slides";
         this.contentScrollState = {
@@ -155,7 +156,8 @@ export class SwirlAppLayout {
             clearTimeout(this.sidebarClosingTimeout);
         }
         this.sidebarClosing = true;
-        const delay = isMobileViewport() || prefersReducedMotion() ? 0 : 300;
+        // 10ms offset to prevent the sidebar from flickering when closing
+        const delay = isMobileViewport() || prefersReducedMotion() ? 0 : 300 - 10;
         this.sidebarClosingTimeout = setTimeout(() => {
             this.sidebarActive = false;
             this.sidebarClosing = false;
@@ -308,7 +310,7 @@ export class SwirlAppLayout {
             (!this.collapsibleNavigation ||
                 this.navExpansionState !== "collapsed" ||
                 !this.isDesktop);
-        const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--nav-${this.isDesktop ? this.navExpansionState : "expanded"}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+        const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--nav-${this.isDesktop ? this.navExpansionState : "expanded"}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, `app-layout--sidebar-positioning-${this.sidebarPositioning}`, {
             "app-layout--content-scrollable": this.contentScrollState.scrollable,
             "app-layout--content-scrolled-to-top": this.contentScrollState.scrolledToTop,
             "app-layout--content-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
@@ -324,20 +326,21 @@ export class SwirlAppLayout {
             "app-layout--nav-collapsible": this.collapsibleNavigation && this.isDesktop,
             "app-layout--nav-scrollable": this.navScrollState.scrollable,
             "app-layout--nav-scrolled-to-top": this.navScrollState.scrolledToTop,
+            "app-layout--rounded-corners": this.roundedCorners,
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
             "app-layout--sidebar-opening": this.sidebarOpening,
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '0970730a8b11319c50969d6d6e7f217dcf56e2f0' }, h("section", { key: '06d420b7d6bfe12422b52e2cdcb8fa8a2ed0fbac', "aria-labelledby": "app-name", class: className }, h("div", { key: 'b50a9beffae3145861ed4b71705fe673f5d10043', class: "app-layout__grid" }, h("header", { key: '04c3f7e4b7cb227cca2e9a15e262ddc9874032e1', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '67ba8ba5394d42ba1f96ccb3258aefb8acce87c9', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '8795a4b7ac5a63bdd1f838c6ba1d0314cfa33dc9', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '0a11ae6739ed9863837da26a60a5f524ca2215ea', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'e0670ebab68aaefd7342a31b0a2c139f181c4cf1', hideLabel: true, icon: this.navExpansionState !== "expanded"
+        return (h(Host, { key: 'df8a5acd24320b865a9c4cf032bf2fb703ed3386' }, h("section", { key: 'e7016cf44a4cfa485b08019f41c01c2005f9dfef', "aria-labelledby": "app-name", class: className }, h("div", { key: '13b615d04a0378b81bc9053dc7b65e80366f1852', class: "app-layout__grid" }, h("header", { key: '24ab8601f721a963a7f731c47a9000cadb496453', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '8370880b409c548483eb737fe135ca1de0cbca62', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'a0dce39b41e162e153142bb40e1fbafd70bdc8d9', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '5da184e76a533f8621d06d8f0e6707de9712ffd3', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'd99c208b7a0904f0829381fbe9711951675e2305', hideLabel: true, icon: this.navExpansionState !== "expanded"
                 ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
-                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: 'df74e59b27c2e15ffc532826ac69794df187ece9', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'ca4e1610d7566b66ebe6958f8ec6f89d4a84554c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '7ca7f6ca8a69fead26966a6b224966f4404351da', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '3d1205492f28588558a5e1d1c1948c4da7870c46', class: "app-layout__navigation-controls" }, h("slot", { key: 'f97090b47f524589e4d86e293e92ce2e001503dd', name: "navigation-controls" })))), h("nav", { key: '9b2f944843bcee7c5322b728ea26fcc7d8ed990f', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: 'f317b07b3c7680772a43c7e882dabdf88110a69f', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'fc7dde4d4b6401f007e2f798b39f4f4fb7144fe0', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '235f3529e5a479a0803985f6ed5ad8b960aeed26', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: 'ae1cca0ddc466f7ffb910d64cdcf1b81cb56ccdb', class: "app-layout__navigation-controls" }, h("slot", { key: 'cdb33bb61253985cef2adb2800dba9c817759a76', name: "navigation-controls" })))), h("nav", { key: '8afc88add61d69ff5015f3e0cef1b9fd923df7c8', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
                 this.collapsibleNavigation &&
-                this.navExpansionState === "collapsed" }, h("slot", { key: 'a3fa785458acf70951cf209062e9f91bfec49db4', name: "navigation" })), h("section", { key: '3649f14cce3bdf275bc7325680b4c193085272f7', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '401b6adeda9ed569d8a6c37f381fed0623a34701', class: "app-layout__app-bar" }, h("span", { key: '7b60e9abca35a3c6ab900e8d882116e8b22ce730', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '44c01881cb2c4799942609ca43f2ead4de855859', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '63a89ec584fa6a21a5cf4be3fdf15e84df01b03a', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '5d05136bb74adcc5a404bdb74533636777f3b598', hideLabel: true, icon: this.transitionStyle === "dialog"
+                this.navExpansionState === "collapsed" }, h("slot", { key: '45c7901638de02975cef711f76144c01ce569d28', name: "navigation" })), h("section", { key: '5a4be5e6f097151ab095d4580e7cd77d3fc0261e', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '56fb7311e24e1d556034c23a7cd69a53a55644cf', class: "app-layout__app-bar" }, h("span", { key: 'dbd7ebbe69ff5c2a951f256d5ea64b3507e346d6', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'e0ae20e33b99ade5e06abe18dfdcf1187bf97d1f', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '908cb69f87ba63753d52edca57b248e1001e84b2', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '740f2d35bbe48bbe5c6f0019089beeda1d90d60e', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
-            this.navExpansionState !== "expanded" && (h("span", { key: '0426043d85f25bd9581b2046215dba5cc50ee24c', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '5b64b49937d180b23de6435351a0b7498562b2f7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'eaa0172b442211086532a15fae6bb99b70dafab6', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '86177f0040e21c020b2d88a2e11cc1f2045d9bcf', name: "custom-app-bar-back-button" })), h("div", { key: 'ff317fc8d6a4f75b81db2f4c6867d1259a9e2cc6', class: "app-layout__app-bar-content" }, h("slot", { key: '59a8e892b40e1b56acc3f33cb956d1a588670a5e', name: "app-bar" })), h("div", { key: '2244b236929f9de30d18f886b2992187b1f9baf8', class: "app-layout__app-bar-controls" }, h("slot", { key: 'c5fae8b152e14275cb09b7db637ea8ca64932648', name: "app-bar-controls" })))), h("div", { key: '85a6875e28ec691f659cbee27e299bca2048ff67', class: "app-layout__banner" }, h("slot", { key: '9790312e956f47faca3c1c4b04a6b1422a889498', name: "banner" })), h("div", { key: 'd33ae32d0644d24027423eb9dc9ba94c54b0070b', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '9e615a708ac9ae2817a680e868c70d4a9ec3d075', name: "content" })), h("div", { key: 'd173a40d98a1d8cd6b93135d9a6984afc6487813', class: "app-layout__bottom-bar" }, h("slot", { key: '10a8422834710d9b15dea188d0f8b24dab14887e', name: "bottom-bar" }))), h("aside", { key: '0da3e8a8bf7be2c6ae12ebf89b6fc91f4d9a27a2', class: "app-layout__sidebar" }, h("header", { key: 'da7303d27a7c9d65a3d3dd7ec9799f7ea8b63dd8', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'fd8fc8403066c85dd26ed414afded579928da657', name: "custom-sidebar-header" })), h("header", { key: 'addfa87cef788f272e586e3a02b0f47be414cc58', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '7daf54726d77b5a9656dd888d32d4c111746e59e', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: 'c743c2b1049f87a5c81b99ddc836f4a2b9b08561', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '9443e3843d55af79d62c949b8df53a6a1f27a4e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '0b5eff0be0d4e98ed2755b412d8783fe25d8d809', name: "sidebar" }))), h("span", { key: 'a1487ea686f593c4b117a9eb74fe61fe8b516336', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '02d61ee5b96263295218ed0b99cb8b93d1e06df0', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7f1e9ae5a5cbf12e28b12d8e7227fee017f6f532', name: "floating-action-button" }))))));
+            this.navExpansionState !== "expanded" && (h("span", { key: 'b0df382fabdb5760d873bc9fa4b7be5f2c46c90d', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '969148a7a8e88f44f566172daaef506a926bd875', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: '56a4370295b8631ae6581315ef112adb91a9380c', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '89ba2faf27b331bc70154ab4fcc5e51249436d91', name: "custom-app-bar-back-button" })), h("div", { key: '32722f7370724e615b5ecf4716b13b554c7777a9', class: "app-layout__app-bar-content" }, h("slot", { key: '78706429b99c7b9102dc325ce4b9f74b56bc0440', name: "app-bar" })), h("div", { key: 'f923d55ed6f8a2972116c8d43c987128384d62db', class: "app-layout__app-bar-controls" }, h("slot", { key: 'b3935748903a08089da4e667a9542431a208920e', name: "app-bar-controls" })))), h("div", { key: '669b851e195c49406c87a281d30b48449b8797ce', class: "app-layout__banner" }, h("slot", { key: 'cea8e68f02a259eece9aa0b6abd04f842078f8b9', name: "banner" })), h("div", { key: '39a8168686aee0134a3e0d8ebf473b5e50d5a5c7', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '854a3787e72fb6f9a45e47b051e707b686d6dbc8', name: "content" })), h("div", { key: '1986d465287b3a74ba85556c948ae2f0840bcef8', class: "app-layout__bottom-bar" }, h("slot", { key: 'b0c50199b0b75aa7b3e60a9ed6cf82465b2d499c', name: "bottom-bar" }))), h("aside", { key: '083484009691c0278cb7d5762bfb00b8557354d6', class: "app-layout__sidebar" }, h("header", { key: 'd7ae4b461dbcd81ecacc7afac2c7a5d11ad9177b', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '01bdd1689ed091bc0673d859b1d400f5b40ec6dd', name: "custom-sidebar-header" })), h("header", { key: '9a8d6ecc2a6bf0f8f80103cf8277861f760fc7e3', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '16138381869b8fb622e75f0644721d0752f111fc', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: 'f500b1f029b89346d262c4cfb12c465a5e19c941', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '5fc3cee15e4dc3d8c39f6a3aca0f72474297f1d6', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '007392df47e74ff25300563853e6cf85a157a566', name: "sidebar" }))), h("span", { key: 'a3f6719b121bc8103938526879b081a49e0630ff', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'afdf4c3e3adcfa4bc5daace58de67a72086939fb', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '3662430e701b8c6e05c1d3f2c16fd15995cd5b94', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -611,6 +614,25 @@ export class SwirlAppLayout {
                 "setter": false,
                 "reflect": false
             },
+            "roundedCorners": {
+                "type": "boolean",
+                "attribute": "rounded-corners",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "showNavigationBackButton": {
                 "type": "boolean",
                 "attribute": "show-navigation-back-button",
@@ -630,6 +652,32 @@ export class SwirlAppLayout {
                 "setter": false,
                 "reflect": false
             },
+            "sidebarPositioning": {
+                "type": "string",
+                "attribute": "sidebar-positioning",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlAppLayoutSidebarPositioning",
+                    "resolved": "\"auto\" | \"overlay\"",
+                    "references": {
+                        "SwirlAppLayoutSidebarPositioning": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx",
+                            "id": "src/components/swirl-app-layout/swirl-app-layout.tsx::SwirlAppLayoutSidebarPositioning"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
             "sidebarCloseButtonLabel": {
                 "type": "string",
                 "attribute": "sidebar-close-button-label",

package/dist/collection/components/swirl-button/swirl-button.js

@@ -20,16 +20,18 @@ export class SwirlButton {
     componentDidLoad() {
         this.updateFormAttribute();
         this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
+            this.isDesktop = isDesktop;
+            this.forceIconProps();
         });
     }
     componentDidRender() {
         this.updateFormAttribute();
+        this.forceIconProps();
     }
     disconnectedCallback() {
         this.mediaQueryUnsubscribe();
     }
-    forceIconProps(smallIcon) {
+    forceIconProps() {
         if (!Boolean(this.iconEl)) {
             return;
         }
@@ -37,7 +39,7 @@ export class SwirlButton {
         if (icon?.tagName.startsWith("SWIRL-ICON") ||
             icon?.tagName.startsWith("SWIRL-EMOJI") ||
             icon?.tagName.startsWith("SWIRL-SYMBOL")) {
-            icon?.setAttribute("size", smallIcon ? "20" : "24");
+            icon?.setAttribute("size", this.isDesktop ? "20" : "24");
         }
     }
     getAriaLabel(hideLabel) {
@@ -77,13 +79,13 @@ export class SwirlButton {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '45ecb09b0608bb62c759dfe09a4f17629a843e66', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '9ca424959955c2f56665b6abc64fce23b133ee5e', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
+        return (h(Host, { key: '08f425e502d0f95c2cefd7468e1dcafa24ee48cc', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '78c9d582bacd29ed0bb5045b701da915621d1988', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
                 cursor: !this.disabled && this.cursor !== "pointer"
                     ? this.cursor
                     : undefined,
                 fontSize: this.inheritFontSize ? "inherit" : undefined,
                 lineHeight: this.inheritFontSize ? "inherit" : undefined,
-            } }, Boolean(this.icon) && (h("span", { key: '85c7e12f44561c7754296fac3b6c74be06b93c22', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '082e271c1ca38212e61f9d62aed60b016ac588f6', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'bf24edbe91d4590049429b27da601ba5cd51e9a5', name: "icon" }))), !hideLabel && h("span", { key: '06cd510bb5617fec59496d64b32fc19bf59ba026', class: "button__label" }, this.label), hasTag && (h("span", { key: '95f4b84ae32def5b1fbf1ba1963382343dac4279', class: "button__tag" }, h("slot", { key: '9d778088353420c933a1e22089568c690909026c', name: "tag" }))), hasTrailingSlot && (h("div", { key: '1f5b393f4da411b312220673611a016e96b0d218', class: "button__trailing-slot" }, h("slot", { key: '635deb01ac5dbad192f64c79155a944f1c8b4716', name: "trailing" }))))));
+            } }, Boolean(this.icon) && (h("span", { key: 'ca742100720788f3b187a2b4eb7d24a0527da881', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '85c755f928c33a2076a28ae44c961ecd48126749', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '84a67a65f34f200261c1a70b0f3d3679f8413351', name: "icon" }))), !hideLabel && h("span", { key: '33d82152407febb56c8b27a956b1a60b9eb9d61e', class: "button__label" }, this.label), hasTag && (h("span", { key: 'dd715d4605571e384e6a28b110191474ca4b0c44', class: "button__tag" }, h("slot", { key: '3a5e3a9b4f54048fb16c0dca3ccdc4ff11c7f699', name: "tag" }))), hasTrailingSlot && (h("div", { key: 'd3d469056217738fce0c0485d18785be43df66a9', class: "button__trailing-slot" }, h("slot", { key: '55b7587f089c3cfbc832e46e18e78421d559fe3b', name: "trailing" }))))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }