@getflip/swirl-components 0.236.0 → 0.237.0

package/dist/components/file-manager.js

@@ -90,7 +90,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: '15c9edaba240ec8c1446aa21dcf62242223ec129' }, h("swirl-app-layout", { key: '2c37b00c71548f489158c5fef9b8cc9697f8f590', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '700f72a80cc0cbb63839cb89191fe0e920167f31', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'e351276db6a5d3139859d7c55a96a3e368b560c4', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '6f7185d39cafa3bf2b6244c4b222b80395e4561f', label: "Sort items" })), h("swirl-stack", { key: '74bf03fb95fdbf1b4ab408b8653b9b426c361502', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '3a86a13bf0e230965da276fbbfc380b674111d98' }, h("swirl-heading", { key: 'b4a33294b87a6fbf05dfaf82a603fc139963cf7f', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'a20a152232d9366d84306931de0c7d32a3e21fcd', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'e6116cc32a4d518b0ed60febe77be9595651743e', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '147b11a4bad57e547ab1250f55afb4246ea26e6f', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'ee8d6cde2f58d7bc9d2d5028f97b0ba5ef5b6b05', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'e32ec412233dea3d6be196f42a30547b8babdc69', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '30bef190864adbadf0d04f0c1e66d6663c24312a', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '71f0ef1344804bf74848d863f6b0e63cae1d83de', value: ["ascending"] }, h("swirl-option-list-item", { key: '51059e7e630a53aa0c4937220e32461ac9ed71c5', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'b60a0c689ac43e49d0c69daf2181a054b2adba14', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'ea4dbd220cf3d4adadf9850b2fc1cc3ce09a2481', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '35ad1d6e1c58037ba69973b53145769528066cd2' }, h("swirl-app-layout", { key: '548345fe971b14cea9a6f4900fd7a127b5062595', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '93f18166b1e52c73281ef1bdc823ca2fb827588a', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'ea29b69eaf169962ddb80b7c1918941f0774a41a', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '2817a127f382893b6ff62128f10dc7f618059666', label: "Sort items" })), h("swirl-stack", { key: '5480d12860ab466615dbd39cd75864f3e457e8a5', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '90a105fb157fe71028a872814908a47e2ae7de9b' }, h("swirl-heading", { key: '17f8d0fee5f2e6d02e974f1563ca422480e4fcdc', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '2133582c692c2b0ff300dc29f6be311cb48354f8', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '70896a5764bed1540ba45f4a8f3891250d3853e1', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '3d77972a823fe3dc1c6959fdf5e65e38e4b7c7fb', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'd497da58a92d4f6cb70c2701bb1bb2651e6e2985', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'cf36f7cd624f2cdfbbd20057fb211af401e207e9', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'dcce9669956bc8f5a3c12e6eff1b22b624ea73ca', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '625dfa8bad62a9a18b3ed8bbb82110eb04599067', value: ["ascending"] }, h("swirl-option-list-item", { key: '718daf24a4226d19e736297cac4f08fa6e772957', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '400eba6c6397b2f0a97171da82d5eb62ab03e44e', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '7630636824560bb6bd32cf792e73e214179d61dd', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

package/dist/components/swirl-accordion-item.js

@@ -68,7 +68,7 @@ const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordi
         const className = classNames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '11c14d9dfed09379d80099bf6f65ad7fd4e2abd1' }, h("div", { key: '528a89c896b091f2037cf9d84b81f3930eadce91', class: className }, h(HeadingTag, { key: '23536a431d58019eca2c40e0fce121dc00cc611f', class: "accordion-item__heading" }, h("button", { key: '4b5f8bba01228c8640a5ec19433299362de3777a', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '322983a1bb1eedd46543dd563a15c5f4317268e9', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'b4aba41917ab4274caf0b4f897017dd43113fde5', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '64e2fcd9102f2992077199f0fcfab14e77111fdf', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '8b9f2b492f6db1164cc4bde2ace9fa3a62440eb3', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'd19c09e37a42536ad74fc8144ee835a13db5f9fb', glyph: "expand-more", size: 20 }))))), h("div", { key: 'b2752a5e87fb19b21ca993487a75c3f0fa19e594', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '30c6f733029289d95bd4f8ea1acd432cc92956dc' })))));
+        return (h(Host, { key: 'c9f7880e2558bf5be244e5ef240889abc877a79f' }, h("div", { key: '77615540f6ff04a07229bcbe91acf2a9b90d79e3', class: className }, h(HeadingTag, { key: '0b71f248897f68e0ebee9ce0dceee4cb9d034e6a', class: "accordion-item__heading" }, h("button", { key: 'a81242957d36d9411ee912ab895c054f5bf5630a', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '57cae7c4358369453929baa55bb3180eb1a813bf', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '7f6d0b33ccdbd3e4c5d36cba0c121d419922ff6b', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '6bf087737bf33d1ec67fe5093dabd51dc4fe5f4f', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '982d8a9183440ac33c3725bd0de4929f956e45fc', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '19dd5942a8ed05307fe1f63b06b8da15a818f78c', glyph: "expand-more", size: 20 }))))), h("div", { key: '8690e2bda8974f767cdaf5b8196767c77fec822a', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'bb1ccb6f278931b3fba7ef7b98401d0e89a94d3e' })))));
     }
     get el() { return this; }
     static get style() { return SwirlAccordionItemStyle0; }

package/dist/components/swirl-accordion.js

@@ -46,7 +46,7 @@ const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion e
         });
     }
     render() {
-        return (h(Host, { key: 'cb3eee31d034b88907599cf4165fe718ff5f2566' }, h("slot", { key: '68f864d1c4e14d22b448fe5d311c3c118f085969' })));
+        return (h(Host, { key: '4ffbbe723e9a0878fd7bfafbb2a842053d2e2691' }, h("slot", { key: 'bd6ebba41058302406f997b96919f881fc7d3204' })));
     }
     get el() { return this; }
     static get style() { return SwirlAccordionStyle0; }

package/dist/components/swirl-action-list-section.js

@@ -11,7 +11,7 @@ const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAct
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '57bc383e7c03f4a39aea45773191c6c89454dfd7' }, h("div", { key: '446d24441c9372811c1a0906ff0d65d70485be60', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '0647f77843aafc83376a026f25180afc45b2e5fd', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '8047d3c7567b8cd584ccaaa616af4e232ecb6a84', class: "action-list-section__items" }, h("slot", { key: '80682346c7a71da4bec74d6a880f73ef43cd35b3' })))));
+        return (h(Host, { key: 'fb2e2ada9783101b411418233a6a9a67b48bbeb5' }, h("div", { key: '11c81dc8150bd02a6321d94ac3a4e14918bf476a', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'c75f4362cb64da7a9b31b26e6eb4cd31a6d291d2', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '1c7c891886e2aa2f0a66b89b1fbb936dbb490ed3', class: "action-list-section__items" }, h("slot", { key: '5a3adb719a287c65bd0cb0a7a9972f601502905b' })))));
     }
     static get style() { return SwirlActionListSectionStyle0; }
 }, [1, "swirl-action-list-section", {

package/dist/components/swirl-action-list2.js

@@ -80,7 +80,7 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: '4d7644990d1e429d0677515bd72d68d70e4fafb8' }, h("div", { key: 'fd0e1cab4f5be6b6acd4bbf6610119a5939939e6', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '56f38e2b41efbfdce13dba0ab683865a814f6616' }))));
+        return (h(Host, { key: 'a844dda8b296495edcfc8a088837e7b42727db12' }, h("div", { key: '780baffea6d243824d5b31cc03027c2e0b723cf8', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '18409332e59b5aa130738d6fa4c0187d1a3acf65' }))));
     }
     get el() { return this; }
     static get style() { return SwirlActionListStyle0; }

package/dist/components/swirl-app-icon.js

@@ -27,7 +27,7 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
         const className = classNames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '937316f91558e4de6d0c4f6b7184f705d88fe6e7' }, h("span", { key: '03109a483290d210b5b2962bd1e06ef228551159', class: className }, showImage && (h("img", { key: 'e425539db0f95cf89ff0db1e7944b2d267fa6097', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '8c550c7bdf1588c81f212708b304858690db1ba8', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: '99b6a929fe3046aa957eb09bb36d8bf9d47d14bf' }, h("span", { key: '4019af2ae49b02e1b50da36bd771172515798004', class: className }, showImage && (h("img", { key: 'a9d15e7e463cf123ae48da613aa9e7b6e74e8927', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'dd6dcf83160ad1b47db7eb3e73ffefd9b3c6f9af', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get style() { return SwirlAppIconStyle0; }
 }, [1, "swirl-app-icon", {

package/dist/components/swirl-app-layout2.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { i as isMobileViewport, f as prefersReducedMotion } from './utils.js';
+import { g as getDesktopMediaQuery, d as debounce, i as isMobileViewport, f as prefersReducedMotion } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 import { d as defineCustomElement$1 } from './swirl-heading2.js';
 
-const swirlAppLayoutCss = ":host{--swirl-app-layout-border-visibility:hidden;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .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-active .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{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{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.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{animation:none}}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(3.5625rem, auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"}.app-layout__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{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))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5625rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@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 var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}.app-layout__bordered-container-when-scrolled{animation:app-layout-detect-scroll;animation-fill-mode:none;scroll-timeline:--scroll-timeline y;animation-timeline:--scroll-timeline}.app-layout__bordered-container-when-scrolled:before,.app-layout__bordered-container-when-scrolled:after{position:sticky;z-index:1;top:0;display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default);content:\"\"}@supports (\n      (scroll-timeline: --scroll-timeline y) and\n        (animation-timeline: --scroll-timeline)\n    ){.app-layout__bordered-container-when-scrolled:before,.app-layout__bordered-container-when-scrolled:after{visibility:var(--swirl-app-layout-border-visibility);animation-name:app-layout-border-reveal;animation-fill-mode:both;animation-range:1px 1px;animation-timeline:--scroll-timeline}}.app-layout__bordered-container-when-scrolled:after{display:none;top:auto;bottom:0}.app-layout__bordered-container-when-scrolled--with-bottom:after{display:block;animation-direction:reverse;animation-range:calc(100% - 1px) calc(100% - 1px)}@keyframes app-layout-border-reveal{0%{background-color:transparent}100%{background-color:var(--s-border-default)}}@keyframes app-layout-detect-scroll{from,to{--swirl-app-layout-border-visibility:visible}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}";
+const swirlAppLayoutCss = ":host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(\n              to right,\n              rgba(0, 0, 0, 0.05) 0,\n              rgba(0, 0, 0, 0) 80%,\n              rgba(0, 0, 0, 0) 100%\n            );content:\"\"}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .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-active .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{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{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.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{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{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{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{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{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);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:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{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))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;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)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@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}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);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)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}";
 const SwirlAppLayoutStyle0 = swirlAppLayoutCss;
 
+const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
 const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout extends HTMLElement {
     constructor() {
         super();
@@ -15,7 +16,12 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         this.ctaClick = createEvent(this, "ctaClick", 7);
         this.mobileViewChange = createEvent(this, "mobileViewChange", 7);
         this.navigationBackButtonClick = createEvent(this, "navigationBackButtonClick", 7);
+        this.navigationExpansionStateChange = createEvent(this, "navigationExpansionStateChange", 7);
         this.sidebarToggle = createEvent(this, "sidebarToggle", 7);
+        this.desktopMediaQuery = getDesktopMediaQuery();
+        this.desktopMediaQueryHandler = (event) => {
+            this.isDesktop = event.matches;
+        };
         this.onBackToNavigationViewButtonClick = () => {
             this.changeMobileView("navigation");
         };
@@ -28,23 +34,63 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         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;
     }
@@ -62,9 +108,35 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
             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();
     }
@@ -75,9 +147,17 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         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
@@ -112,6 +192,23 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
             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
@@ -174,6 +271,44 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
     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 &&
@@ -184,7 +319,14 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         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,
@@ -194,15 +336,23 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
             "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" }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -212,28 +362,40 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
 }, [1, "swirl-app-layout", {
         "appName": [1, "app-name"],
         "backToNavigationViewButtonLabel": [1, "back-to-navigation-view-button-label"],
+        "collapsibleNavigation": [4, "collapsible-navigation"],
         "ctaIcon": [1, "cta-icon"],
         "ctaLabel": [1, "cta-label"],
         "hasNavigation": [1028, "has-navigation"],
         "hideAppBar": [4, "hide-app-bar"],
         "navigationBackButtonLabel": [1, "navigation-back-button-label"],
+        "navigationExpansionStateStorageKey": [1, "navigation-expansion-state-storage-key"],
+        "navigationToggleLabel": [1, "navigation-toggle-label"],
+        "navigationOverlayLabel": [1, "navigation-overlay-label"],
         "navigationLabel": [1, "navigation-label"],
         "showNavigationBackButton": [4, "show-navigation-back-button"],
         "sidebarCloseButtonLabel": [1, "sidebar-close-button-label"],
         "sidebarHeading": [1, "sidebar-heading"],
         "transitionStyle": [1, "transition-style"],
+        "contentScrollState": [32],
         "hasCustomAppBarBackButton": [32],
         "hasSidebar": [32],
+        "isDesktop": [32],
         "mobileView": [32],
+        "navScrollState": [32],
+        "navExpansionState": [32],
         "sidebarActive": [32],
         "sidebarClosing": [32],
+        "sidebarOpening": [32],
+        "sidebarScrollState": [32],
         "transitioningFrom": [32],
         "transitioningTo": [32],
         "showSidebar": [64],
         "hideSidebar": [64],
         "toggleSidebar": [64],
+        "getCollapsibleNavigationState": [64],
+        "setCollapsibleNavigationState": [64],
         "changeMobileView": [64]
-    }, undefined, {
+    }, [[4, "click", "onDocumentClick"], [0, "keydown", "onKeyDown"]], {
         "mobileView": ["watchMobileView"]
     }]);
 function defineCustomElement() {

package/dist/components/swirl-autocomplete.js

@@ -223,17 +223,17 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
         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/components/swirl-avatar-group.js

@@ -29,7 +29,7 @@ const SwirlAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatarGro
             "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 style() { return SwirlAvatarGroupStyle0; }
 }, [1, "swirl-avatar-group", {

package/dist/components/swirl-avatar.js

@@ -109,7 +109,7 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
         });
         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))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/swirl-badge2.js

@@ -20,7 +20,7 @@ const SwirlBadge = /*@__PURE__*/ proxyCustomElement(class SwirlBadge extends HTM
         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 style() { return SwirlBadgeStyle0; }
 }, [1, "swirl-badge", {