@getflip/swirl-components 0.236.0 → 0.237.0

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

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { isMobileViewport, prefersReducedMotion } from "../../utils";
+import { debounce, getDesktopMediaQuery, isMobileViewport, prefersReducedMotion, } from "../../utils";
+const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
 /**
  * @slot content - Main content area
  * @slot navigation - The navigation area content
@@ -17,6 +18,10 @@ import { isMobileViewport, prefersReducedMotion } from "../../utils";
  */
 export class SwirlAppLayout {
     constructor() {
+        this.desktopMediaQuery = getDesktopMediaQuery();
+        this.desktopMediaQueryHandler = (event) => {
+            this.isDesktop = event.matches;
+        };
         this.onBackToNavigationViewButtonClick = () => {
             this.changeMobileView("navigation");
         };
@@ -29,23 +34,63 @@ export class SwirlAppLayout {
         this.onSidebarCloseButtonClick = () => {
             this.hideSidebar();
         };
+        this.onContentScroll = debounce(() => {
+            this.updateContentScrollState();
+        }, 16);
+        this.onNavScroll = debounce(() => {
+            this.updateNavScrollState();
+        }, 16);
+        this.onSidebarScroll = debounce(() => {
+            this.updateSidebarScrollState();
+        }, 16);
+        this.toggleNavigation = () => {
+            if (!this.collapsibleNavigation) {
+                return;
+            }
+            const newNavExpansionState = this.navExpansionState === "expanded" ? "collapsed" : "expanded";
+            this.setCollapsibleNavigationState(newNavExpansionState);
+        };
+        this.overlayNavigation = (event) => {
+            event.stopPropagation();
+            this.setCollapsibleNavigationState("overlayed");
+        };
         this.appName = undefined;
         this.backToNavigationViewButtonLabel = "Back to navigation";
+        this.collapsibleNavigation = undefined;
         this.ctaIcon = undefined;
         this.ctaLabel = undefined;
         this.hasNavigation = undefined;
         this.hideAppBar = undefined;
         this.navigationBackButtonLabel = "Go back";
+        this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
+        this.navigationToggleLabel = "Toggle navigation";
+        this.navigationOverlayLabel = "Show navigation";
         this.navigationLabel = undefined;
         this.showNavigationBackButton = undefined;
         this.sidebarCloseButtonLabel = "Close sidebar";
         this.sidebarHeading = undefined;
         this.transitionStyle = "slides";
+        this.contentScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+            scrolledToBottom: false,
+        };
         this.hasCustomAppBarBackButton = undefined;
         this.hasSidebar = undefined;
+        this.isDesktop = undefined;
         this.mobileView = "navigation";
+        this.navScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
+        this.navExpansionState = "expanded";
         this.sidebarActive = undefined;
         this.sidebarClosing = undefined;
+        this.sidebarOpening = undefined;
+        this.sidebarScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
         this.transitioningFrom = undefined;
         this.transitioningTo = undefined;
     }
@@ -63,9 +108,35 @@ export class SwirlAppLayout {
             this.checkMobileView();
         });
     }
+    componentDidLoad() {
+        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        queueMicrotask(() => {
+            this.isDesktop = this.desktopMediaQuery.matches;
+            this.restoreNavExpansionState();
+            this.updateContentScrollState();
+            this.updateSidebarScrollState();
+            this.updateNavScrollState();
+        });
+    }
     disconnectedCallback() {
+        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
         this.mutationObserver?.disconnect();
     }
+    onDocumentClick(event) {
+        if (!this.collapsibleNavigation || this.navExpansionState !== "overlayed") {
+            return;
+        }
+        const clickedInsideOfOverlayedNav = event.composedPath().includes(this.navEl) ||
+            event.composedPath().includes(this.headerEl);
+        if (!clickedInsideOfOverlayedNav) {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === "Escape" && this.navExpansionState === "overlayed") {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
     watchMobileView() {
         this.checkMobileView();
     }
@@ -76,9 +147,17 @@ export class SwirlAppLayout {
         if (this.sidebarActive || !this.hasSidebar) {
             return;
         }
-        this.sidebarActive = true;
-        this.changeMobileView("sidebar");
-        this.sidebarToggle.emit(true);
+        if (Boolean(this.sidebarOpeningTimeout)) {
+            clearTimeout(this.sidebarOpeningTimeout);
+        }
+        this.sidebarOpening = true;
+        const delay = isMobileViewport() || prefersReducedMotion() ? 0 : 300;
+        this.sidebarOpeningTimeout = setTimeout(() => {
+            this.sidebarActive = true;
+            this.sidebarOpening = false;
+            this.changeMobileView("sidebar");
+            this.sidebarToggle.emit(true);
+        }, delay);
     }
     /**
      * Hide the sidebar
@@ -113,6 +192,23 @@ export class SwirlAppLayout {
             this.showSidebar();
         }
     }
+    /**
+     * Get state of the collapsible navigation
+     */
+    async getCollapsibleNavigationState() {
+        return this.navExpansionState;
+    }
+    /**
+     * Set state of the collapsible navigation
+     */
+    async setCollapsibleNavigationState(state) {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        this.navExpansionState = state;
+        this.navigationExpansionStateChange.emit(this.navExpansionState);
+        localStorage.setItem(this.navigationExpansionStateStorageKey, this.navExpansionState);
+    }
     /**
      * Change the currently displayed view on mobile viewports
      * @param mobileView
@@ -175,6 +271,44 @@ export class SwirlAppLayout {
     updateSidebarStatus() {
         this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
     }
+    updateContentScrollState() {
+        const newContentScrollState = {
+            scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
+            scrolledToTop: this.contentEl.scrollTop === 0,
+            scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >=
+                this.contentEl.scrollHeight,
+        };
+        if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
+            this.contentScrollState = newContentScrollState;
+        }
+    }
+    updateNavScrollState() {
+        const newNavScrollState = {
+            scrollable: this.navEl.scrollHeight > this.navEl.clientHeight,
+            scrolledToTop: this.navEl.scrollTop === 0,
+        };
+        if (Object.keys(newNavScrollState).some((key) => newNavScrollState[key] !== this.navScrollState[key])) {
+            this.navScrollState = newNavScrollState;
+        }
+    }
+    updateSidebarScrollState() {
+        const newSidebarScrollState = {
+            scrollable: this.sidebarEl.scrollHeight > this.sidebarEl.clientHeight,
+            scrolledToTop: this.sidebarEl.scrollTop === 0,
+        };
+        if (Object.keys(newSidebarScrollState).some((key) => newSidebarScrollState[key] !== this.sidebarScrollState[key])) {
+            this.sidebarScrollState = newSidebarScrollState;
+        }
+    }
+    restoreNavExpansionState() {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        const restoredNavExpansionState = localStorage.getItem(this.navigationExpansionStateStorageKey);
+        if (Boolean(restoredNavExpansionState)) {
+            this.setCollapsibleNavigationState(restoredNavExpansionState);
+        }
+    }
     render() {
         const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
             this.hasNavigation &&
@@ -185,7 +319,14 @@ export class SwirlAppLayout {
         const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
         const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
             Boolean(this.ctaLabel);
-        const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+        const navigationActive = this.hasNavigation &&
+            (!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}`, {
+            "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,
             "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
             "app-layout--has-app-bar-controls": hasAppBarControls,
             "app-layout--has-bottom-bar": hasBottomBar,
@@ -195,15 +336,23 @@ export class SwirlAppLayout {
             "app-layout--has-navigation": this.hasNavigation,
             "app-layout--has-sidebar": this.hasSidebar,
             "app-layout--hide-app-bar": this.hideAppBar,
+            "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--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,
         });
-        const contentClassName = classnames("app-layout__content", "app-layout__bordered-container-when-scrolled", {
-            "app-layout__bordered-container-when-scrolled--with-bottom": hasBottomBar,
-        });
-        return (h(Host, { key: '668d6353288ed339c914dfd5853975fb14e7eb50' }, h("section", { key: 'eb60a8b74569daaa31a3b561beceb9cb6de96649', "aria-labelledby": "app-name", class: className }, h("div", { key: '278cb332b22b52e8d477abd6e12b3e3d6e66d88c', class: "app-layout__grid" }, h("header", { key: 'c201859201a575607dd64850772b2f3fde85cd6c', class: "app-layout__header" }, h("span", { key: 'a4f07edc51b55a5b8de8d0fe5e7cae00c50971b1', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'c7132539b8899aa78321215debf3f8f958eabfe1', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: '0085e3f23bfc356330e7914f22d28f5121554b8f', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '8f4746e36051e3e07bb61e9dcb5cc74c15ef9615', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'ba764530fc0119e01a58439d7e89350dc8a7ea6c', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '562fea0575de96f9037e57d2ac6c3ba2dc4849c7', class: "app-layout__navigation-controls" }, h("slot", { key: '54a9280f257960f2a3311bb88f053788a7fac321', name: "navigation-controls" })))), h("nav", { key: 'cd5caefbcbb95dbd8e847c928bed97e96536b1ec', "aria-label": this.navigationLabel, class: "app-layout__navigation app-layout__bordered-container-when-scrolled" }, h("slot", { key: 'b73e0c0b38797fea7afb32996801cd85fae959ad', name: "navigation" })), h("section", { key: '23d2fed9e1daaf350e6b2151ee2e82cb7deef866', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: 'c41fd7da8d79d2e898bd5e685108d160eb0d1d1f', class: "app-layout__app-bar" }, h("span", { key: '1b7b24c2ce491bf9f232680963e3692215d51ccb', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '7574d98216d1d82ab2ad44f6f2a22f82ff0aceba', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'aec64303b2e4537ba9205f0b781e6356cae5dbe1', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'c4c270bd35e21070b72f989d2ce475b7253b4223', hideLabel: true, icon: this.transitionStyle === "dialog"
+        return (h(Host, { key: '3b1c6dfbd70f1e73595152063eb0f19214061a0b' }, h("section", { key: '66b24882d23244130b99d018d154819924a238a8', "aria-labelledby": "app-name", class: className }, h("div", { key: '4ba4430a6ff528e1f5c7739a49bb1718acfff76c', class: "app-layout__grid" }, h("header", { key: '2557b4f52f4d63b8e3bd0d79b97d12dff3e35ebf', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: 'db4942252a5b23067a186188a2de09e231b33fc2', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'd34fefe46a8116f28df00c3d2b00611d2e5c977f', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'f199cb947888c1ae726108c398f1b0a0ccd459e1', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: '801cb2ec74f780fd9f5a2114e4ef9c5fa11bc844', 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: '09cc96fc608719f6f03c124765362c9203ae624a', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'c48e18559fef928f25f0fee06b3d1e3202ef624a', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '5b0c2f2b4183636415d2c605f2921f4513f87d9e', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '1c17004783909c533522e645bcde641efe20af38', class: "app-layout__navigation-controls" }, h("slot", { key: '6194344af515533f48c12719578d355d538fe132', name: "navigation-controls" })))), h("nav", { key: '49f8bed05da5f7ea4d8ca731e8ac6640f6efba1d', "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: '7bb84dd7374be5df9caaea8bd04545512ee68ec0', name: "navigation" })), h("section", { key: 'a19ab7ca766bf445427ccbd80ca20c8493435e83', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '8325293845b85f72b7f3df2662559e2ab4074bb9', class: "app-layout__app-bar" }, h("span", { key: '5237b62f03cd7c1373549a2a30ccf446ba0372f9', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'f18bde70731b9351e63b21ad7f1a9c647abf416f', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '215d23179fc51dd075864c265ea9b7f364319a95', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'ea3be8edd9002a61f20c0a12da9aa1b578947c6a', 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 }))), h("span", { key: '356d7c4284eeae942a6811d6fea0241191175337', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '79788dd68f4ae2a028da6cf7ff3ac7e262715967', name: "custom-app-bar-back-button" })), h("div", { key: '36a5fa2cf6332ace68e16dc6f07e9747026dff16', class: "app-layout__app-bar-content" }, h("slot", { key: '87a4b45a9f1bbd0f1bac950de9c474dde0e1eeea', name: "app-bar" })), h("div", { key: 'e1e88faee364e6ed1d037430cea66f9b8b525767', class: "app-layout__app-bar-controls" }, h("slot", { key: 'a4a34540141eb9bd80d814d3c9f997cfa577d719', name: "app-bar-controls" })))), h("div", { key: '03e1f2308e69240f139dadf083a35e38ed4e89c0', class: "app-layout__banner" }, h("slot", { key: '49328b1bd2d1b1d95b00c6d04834c4b531d828c9', name: "banner" })), h("div", { key: 'd3d2930acde0f4a6e3e99543204a6f9ebb675378', class: contentClassName }, h("slot", { key: '61beae6ed3c23dafd7bce03aacd3b866aec961c2', name: "content" })), h("div", { key: 'e8ddc4a5e1f425ad098f2e686c95967dadc75827', class: "app-layout__bottom-bar" }, h("slot", { key: '832b0defae07c9431c37db76ee644bb420ff2ea9', name: "bottom-bar" }))), h("aside", { key: '7a67e63158072a38346683620c3e7768aa50a4fe', class: "app-layout__sidebar" }, h("header", { key: '0584333a694175763334d5cd0e3fb31353174bda', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '8aefe18443c725e677961d93d6fb5f4e22c9da6a', name: "custom-sidebar-header" })), h("header", { key: '4a3eb74052be148fc37c8ed190dca193118c2365', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '47003639b2b5112f430c600e10802ed33f729c99', 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: '06a6a8e036efbe47d4aa25e1699136179c245df6', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '122d16d2f387670e4cfc3f88312e1c528c9c7a0a', class: "app-layout__sidebar-content app-layout__bordered-container-when-scrolled" }, h("slot", { key: '077305e0b1896dfa427697e10d23993387c73dbf', name: "sidebar" }))), h("span", { key: '538942cd069dc1c29b0725d0cdf913bee78a7ce3', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'd4b4bff102d90e073b9f3822ff155ae7c52bec44', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: 'b2b549076c93497a07c69bc25456522b5a3cfcfe', name: "floating-action-button" }))))));
+                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
+            this.navExpansionState !== "expanded" && (h("span", { key: '60fa359b9bd61b0e1f6be352436999b2cf17f4fc', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '05e09fb3a58dc2ab2e88ee49c585eecc60c7954d', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'f47a36036537b26f772e3bda24b2aa6469e2cf3c', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '136b0f6cb5f49fd2748ff359ee12320adc70e564', name: "custom-app-bar-back-button" })), h("div", { key: 'b8a00b16415b1ec1e860c1d5d57e0490d48e4401', class: "app-layout__app-bar-content" }, h("slot", { key: '62cc509a362d5f194182499071b1756c146d26dc', name: "app-bar" })), h("div", { key: 'effb581b5c5e33f5ff2438b4b41376d88d232fe9', class: "app-layout__app-bar-controls" }, h("slot", { key: 'f87b7467b069faaa2efa0cbc68e7ec22c041ff8b', name: "app-bar-controls" })))), h("div", { key: '818823f7c90a8f1fb905a225b5d10b4828805769', class: "app-layout__banner" }, h("slot", { key: 'fd1f5c35df19fffe35abdd5096f85c32fc1bba22', name: "banner" })), h("div", { key: '572494fb3c5f3b59bdb55d87feb44b59842eb1a6', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: 'b83fb9b173afa0b60976565aded1449afd680955', name: "content" })), h("div", { key: '3150822e788bf1af515f1e55c42b25851feaef27', class: "app-layout__bottom-bar" }, h("slot", { key: '35a21d973b8f54a8aac80f3744c500f501fa5aa1', name: "bottom-bar" }))), h("aside", { key: 'd32a56c28adc6a57c15b750a02575093b80a58f6', class: "app-layout__sidebar" }, h("header", { key: '7b60c1d2b4dc8ddd384dde58d4e822e34732f37d', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'a10e07f95f94b4fd3863c60e0689997fcc7af569', name: "custom-sidebar-header" })), h("header", { key: '18bfcf429fcbfb1ef138a7723a8b9e0752ced246', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'ea311add99e5adb33b8bbed78f7d88fc7d6bf28f', 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: '54a13c7f1f0b362cb196a59c5622d2e246cadec0', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '6920f3562d625be0f9e16c090eeed8d17eea49b7', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '9807fec2801d84a5ae517765ff7b0f08e4c3f3c5', name: "sidebar" }))), h("span", { key: '9a5b7f6098d8f24f6df6ba7d84bf0276c043effa', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '77e960a30d95129160f0ebec29d419a8572f67ab', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '8f8942d7df62a364c2e9216d08aa0cbe765a9093', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -254,6 +403,23 @@ export class SwirlAppLayout {
                 "reflect": false,
                 "defaultValue": "\"Back to navigation\""
             },
+            "collapsibleNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "collapsible-navigation",
+                "reflect": false
+            },
             "ctaIcon": {
                 "type": "string",
                 "mutable": false,
@@ -340,6 +506,60 @@ export class SwirlAppLayout {
                 "reflect": false,
                 "defaultValue": "\"Go back\""
             },
+            "navigationExpansionStateStorageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "navigation-expansion-state-storage-key",
+                "reflect": false,
+                "defaultValue": "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY"
+            },
+            "navigationToggleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "navigation-toggle-label",
+                "reflect": false,
+                "defaultValue": "\"Toggle navigation\""
+            },
+            "navigationOverlayLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "navigation-overlay-label",
+                "reflect": false,
+                "defaultValue": "\"Show navigation\""
+            },
             "navigationLabel": {
                 "type": "string",
                 "mutable": false,
@@ -431,11 +651,17 @@ export class SwirlAppLayout {
     }
     static get states() {
         return {
+            "contentScrollState": {},
             "hasCustomAppBarBackButton": {},
             "hasSidebar": {},
+            "isDesktop": {},
             "mobileView": {},
+            "navScrollState": {},
+            "navExpansionState": {},
             "sidebarActive": {},
             "sidebarClosing": {},
+            "sidebarOpening": {},
+            "sidebarScrollState": {},
             "transitioningFrom": {},
             "transitioningTo": {}
         };
@@ -502,6 +728,27 @@ export class SwirlAppLayout {
                         }
                     }
                 }
+            }, {
+                "method": "navigationExpansionStateChange",
+                "name": "navigationExpansionStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SwirlAppLayoutNavigationExpansionState",
+                    "resolved": "\"collapsed\" | \"expanded\" | \"overlayed\"",
+                    "references": {
+                        "SwirlAppLayoutNavigationExpansionState": {
+                            "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::SwirlAppLayoutNavigationExpansionState"
+                        }
+                    }
+                }
             }, {
                 "method": "sidebarToggle",
                 "name": "sidebarToggle",
@@ -572,6 +819,54 @@ export class SwirlAppLayout {
                     "tags": []
                 }
             },
+            "getCollapsibleNavigationState": {
+                "complexType": {
+                    "signature": "() => Promise<SwirlAppLayoutNavigationExpansionState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SwirlAppLayoutNavigationExpansionState": {
+                            "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::SwirlAppLayoutNavigationExpansionState"
+                        }
+                    },
+                    "return": "Promise<SwirlAppLayoutNavigationExpansionState>"
+                },
+                "docs": {
+                    "text": "Get state of the collapsible navigation",
+                    "tags": []
+                }
+            },
+            "setCollapsibleNavigationState": {
+                "complexType": {
+                    "signature": "(state: SwirlAppLayoutNavigationExpansionState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "\"expanded\" | \"collapsed\" | \"overlayed\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SwirlAppLayoutNavigationExpansionState": {
+                            "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::SwirlAppLayoutNavigationExpansionState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set state of the collapsible navigation",
+                    "tags": []
+                }
+            },
             "changeMobileView": {
                 "complexType": {
                     "signature": "(mobileView: SwirlAppLayoutMobileView, transition?: boolean) => Promise<void>",
@@ -614,4 +909,19 @@ export class SwirlAppLayout {
                 "methodName": "watchMobileView"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -114,28 +114,4 @@ describe("swirl-app-layout", () => {
         expect(spy.mock.calls[0][0].detail).toBe("body");
         expect(spy.mock.calls[1][0].detail).toBe("sidebar");
     });
-    it("toggles the sidebar", async () => {
-        const page = await newSpecPage({
-            components: [SwirlAppLayout],
-            html: `
-        <swirl-app-layout app-name="App" sidebar-heading="Sidebar">
-          <div slot="sidebar">Sidebar</div>
-        </swirl-app-layout>
-      `,
-        });
-        const container = page.root.shadowRoot.children[0];
-        const spy = jest.fn();
-        page.root.addEventListener("sidebarToggle", spy);
-        expect(container.classList.contains("app-layout--sidebar-active")).toBeFalsy();
-        await page.root.toggleSidebar();
-        await page.waitForChanges();
-        expect(container.classList.contains("app-layout--sidebar-active")).toBeTruthy();
-        await page.root.toggleSidebar();
-        // wait for animation
-        await new Promise((resolve) => setTimeout(resolve, 300));
-        await page.waitForChanges();
-        expect(container.classList.contains("app-layout--sidebar-active")).toBeFalsy();
-        expect(spy.mock.calls[0][0].detail).toBe(true);
-        expect(spy.mock.calls[1][0].detail).toBe(false);
-    });
 });

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

@@ -200,17 +200,17 @@ export class SwirlAutocomplete {
         const className = classnames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
-        return (h(Host, { key: 'e523e43c9a3f188b280212d75eb7cda439efa16a' }, h("div", { key: 'bc223dea7f5ee6dcfcb7ff1fec7548f3e70ba02f', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+        return (h(Host, { key: '35803245ee554c6f4d3ead9f87a1cdf73343007f' }, h("div", { key: '0237472750287689c060557515ffcf6d208c2a6e', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
             Array.isArray(this.value) &&
-            this.value.length > 0 && (h("div", { key: '3cf9889c1c2398778346eb598232095472ac03ce', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '710997aa77b59d1d997de03b32a91e699a7403a4', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+            this.value.length > 0 && (h("div", { key: 'e06650357d144482792cb5a78ced14a49f77df6c', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: '2b93f17cae1e7d2683d41eb4da28beb9fd9c378e', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
             return (h("swirl-tag", { key: item.id, label: item.label,
                 // eslint-disable-next-line react/jsx-no-bind
                 onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
-        })))), h("swirl-text-input", { key: '67c627131a343cd5eab355baa0ce3d6113672a72', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: '1fa4b4c6e1c2116779b3e019f138ceae18143397', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        })))), h("swirl-text-input", { key: 'fe61f1a45792f11098c08c9a519c7286288c3ff2', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: '13c30246e60759e39e6f86b95286673d096e7724', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
                 width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
-            } }, this.loading && (h("div", { key: '25bf6f40fc87b6273e8a627aab03c9de2d1a3130', class: "autocomplete__spinner" }, h("swirl-spinner", { key: 'e4e2d6ad0fca0adeea6770d339fcc310fd522083' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '7c155395c8eca3d516610ee58c76b4da3465c7a8', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+            } }, this.loading && (h("div", { key: 'eb4fef11c6eedb9b5aa04ea9275f80d1249bad28', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '8dd45fb707d886f01bcb8b7036a30fa6af4c0918' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '95db25769911dcc9876eb94730adeb092844d97d', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
                 ? this.value.some((item) => item.id === suggestion.id)
                 : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
     }

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

@@ -102,7 +102,7 @@ export class SwirlAvatar {
         });
         const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
         const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (h(Host, { key: 'a846927adb4c374f3663f856b05d50603915502d', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'db1b5a6ae753350cb74562ebbcaffdcd1fe9b73a', class: className, part: "avatar" }, showImage && (h("span", { key: '92421d372f10ca75f3a4d40b5318ab88073f05ef', class: "avatar__image" }, h("img", { key: '7003338128d40de0ed8a97ed92c84d17d2b886f1', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '1b9fbbcee47c46c1264dbdefe20b71fe6edc91d7', class: "avatar__initials" }, h("span", { key: 'a41ef5f739b738726027bb0ba6cf9f6aca9808c8' }, this.initials))), showIcon && h("span", { key: '8b1933c8be2d2072824aeda245a771f84d7a9707', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'afc1c2e68873784d757587881cc05cfbb98f848a', class: "avatar__icon" }, h("swirl-icon-person", { key: '40a6e6fdc13ae07cb18ab9d0ac1fecfb092217f4' }))), showBadge && (h("span", { key: '69dc8a86df183237882c7241b0b73d7babfcf9fe', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '822c6123a6984406e709cfc6083070eaf35044e5', class: toolClassName }, h("slot", { key: 'd5e8246097832bf808fcb91dc5a822d1923db2a4', name: "tool" }))), this.showLabel && (h("span", { key: '10e6e09526bf6f3818ff5e54b270695adaf29e15', "aria-hidden": true, class: "avatar__label" }, this.label))));
+        return (h(Host, { key: '58a018fec9dcb72f391e50040a6b4e6b4559751e', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'f44174ddb46d74bdeea62dd6f81846913c46b8ad', class: className, part: "avatar" }, showImage && (h("span", { key: '1ed67acba8ab9f7c154c7e6647c15dd991db55e1', class: "avatar__image" }, h("img", { key: '4efe8dcf0fa3c5a0aab5c0ec53ea09be8c49bccf', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: 'b8e05f3d8cefe38da0c24fb9fef0f215cff01f1d', class: "avatar__initials" }, h("span", { key: 'e57114e2cacf55923020e6fda9ad16bb6eecc887' }, this.initials))), showIcon && h("span", { key: 'd1d9ee462bf6574cf98f991b6b963d51963dfa3b', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'a7dfe378cb3f824094bfd59ce3c49bcbd3c3ded6', class: "avatar__icon" }, h("swirl-icon-person", { key: '162e29ddddd261833c31d679d4169fd056461ad1' }))), showBadge && (h("span", { key: '82a4f2a24fe237de8722e39a2a43030d24c7bf0f', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'aebe16ddb21e9ab756168a15d0e0478bc9c7fdd6', class: toolClassName }, h("slot", { key: '207a5c9b2b59e9e6dd4c424a5e8c968a5973b904', name: "tool" }))), this.showLabel && (h("span", { key: '5c76d712a42ef23ac0603e4c9268b57b621e4c1b', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     static get is() { return "swirl-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js

@@ -25,7 +25,7 @@ export class SwirlAvatarGroup {
             "avatar-group--has-badge": Boolean(this.badge),
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: 'f16344ade441c4be4d7691d23d97fc5fc14dee0e' }, h("div", { key: 'b9436677d5c1bfe783500aa7db2d4e9dd4550cb7', class: className, role: "group" }, h("slot", { key: '9cfcfa7578ff29268f47547c6812a5ea0d492adc' }), this.badge && (h("span", { key: '534ee5051d37fefb0b7e097f2cbbb9017127cc25', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '10d42609d39c903d246ef3f3854351ad69cd944f' }, h("div", { key: '019ae7ee3dc2f780724573ad9dc5aeafde9429b5', class: className, role: "group" }, h("slot", { key: 'a345898276d5fcfb41e01896c4b20809e8c8d1e7' }), this.badge && (h("span", { key: '58bcb0d10eb046f09c4009b6600a7f10b7b2c1e2', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class SwirlBadge {
         const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
             "badge--has-icon": this.icon,
         });
-        return (h(Host, { key: '33f35cb8399a9a9af91d771dff6b640b577c3b69', role: "status" }, h("span", { key: '95465982eb5690342abae2235b57644afd8cdd4d', class: className, part: "badge" }, this.icon && h("span", { key: '8a775d6ceb801d34380e82450879108dab4fcb37', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
+        return (h(Host, { key: '06a07667ccb9474de7010dfc31c2119d651bb476', role: "status" }, h("span", { key: 'e677f471ca17db30f0fb63c53b4b175f1bb23082', class: className, part: "badge" }, this.icon && h("span", { key: '8773650b811868a363f29b63d35b890bbc97baf7', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
     }
     static get is() { return "swirl-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class SwirlBanner {
         const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (h(Host, { key: '7d1d0fe808a0d56888901519a1d2c7d7a5953703' }, h("div", { key: '6f0482657ddd0b91ba5ca740db378e3fa5cad176', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '82bc8952ea7cc638a13eb8997492515280793e70', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'd2d6aa7d78d04fdb16a5d9d632fef49977400690', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '637f8d6f03aa8b9ed71798b60a2a8b6f68c96e6b', class: "banner__text" }, this.content)), showControls && (h("div", { key: '8c6ed8081c22c3f9121223ea2dc6bd3918f1babf', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'afd0254e27d026a1f828ec203eed23a6934c8dbe', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '7842e8dc33cfc78226ade9d5b8d141809efbb9e7', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: '44118f5b5f92f476440b3adb6d33b3c88ef3b5a8' }))))))));
+        return (h(Host, { key: '59ad8b46103af68b01514dffb4a8ffc3f7366135' }, h("div", { key: 'e7a44b513cc0e362187b7972bbe30370b9789b1d', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '4465f6f6ab0afe3231e25a52192a9f56d5756efe', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '4aa59545611d08217a0edb767ee34f5d7fc2e18b', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '91ee916917e08fd7d19277740a63c6efa2493910', class: "banner__text" }, this.content)), showControls && (h("div", { key: '49b0b4c1f8b83e60e033fd3729c1591f3ba961bc', class: "banner__controls" }, this.actionLabel && (h("button", { key: '3642186b3c70e2a2a2fef4ec21ab3cda77d345c6', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'a09f723ea799b686f0e06baeeb87590a1b60f1fa', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'caaba0ff27439dd72e1efd50178a253e496abd4d' }))))))));
     }
     static get is() { return "swirl-banner"; }
     static get encapsulation() { return "shadow"; }