@getflip/swirl-components 0.368.1 → 0.370.0

package/dist/components/file-manager.js

@@ -87,7 +87,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: '72ead75fc8d2812f3539bd0ccda5cc97387e17be' }, h("swirl-app-layout", { key: '5c3c21f7653d2b291002e2e35529f1f4018f2b8e', 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: '7d75ae757e4ac7d5d54e145de88e389e47e3e04d', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c33adbe8d55e6218a470bbca81b35b632929213c', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'd554d190684cb705f2df6719a106a6fdf2fa7350', label: "Sort items" })), h("swirl-stack", { key: '33dacc799411a670b96f9f29c815e9786dad4457', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'c5a959e1b911fc2bdf58466e06faed0574877f83' }, h("swirl-heading", { key: 'fda8c8be92909bfde64dd97f27e6506b005f088b', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '41cc03f2b6adfc9fe8f0b70a747b879117602a31', 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: '77230827b8c15d56e93f04de9c4c6ded4bf25545', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9537927eb7d1dc0a730f9e81f8ffdd6cdebafe18', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'b4f4147f73a57ae272f750ebd9f519ca69792b7a', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'e73c64ff8103d9eb6f48bd729059a350a87c8465', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'ea29ec22c344dae8f0677d922201625b0c7465a3', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'd038d4ef07c27c84d45a51f48a6e2295b0309773', value: ["ascending"] }, h("swirl-option-list-item", { key: 'd5a0696628c41ab5534e860f0560bd5f051a9ef2', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '5d74159cdb802623efdea7fea7a619eaf7d272d7', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '28f79a861276b59ee7583a6435311a4528890ddf', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: 'ab4714e7adcd1a3741d1dcbc7c4de6004ecfc996' }, h("swirl-app-layout", { key: 'e3637d43b4707efdd35e73e60890c8cd2bd5b646', 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: '5388eacaa046de043945038ac2a8b3b816b5fb4d', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'e1297dd14cc51d71ed09ba207cc8df6e7bedae12', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '907fed6b26950cbd86e3991863ec3436e6be7b62', label: "Sort items" })), h("swirl-stack", { key: '29a611316c2d000c8a09e80a9e0f588f51c56b39', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'bddbf7535e6f77469ac27cc0c6ecbd34953148af' }, h("swirl-heading", { key: 'bc18e1ba33ca53bb5f456ce1bc08cdda15de5b93', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'cf4deeeb1b5943511a9b01928f93a679bba0d98b', 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: 'd2821633d911d455bd38e009e528274562d8170e', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9d8441a51bf38ab03b32919858322693c2a1c9e6', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '444680fd39a768ef18e72b4e8b9c915b1bd80804', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '74025b4637c984103d390183b1f890d8593c7454', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '411fc06cec32bf3558cf0ee8f93fe492ca135eac', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '557323af43223ebf468a8eb76151c8e7ea528b73', value: ["ascending"] }, h("swirl-option-list-item", { key: '95f1a4ea683ea4ac31a25c75a6fece74ebf1cd3a', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'c4624ca713d8f4cefc727093a0fa9cc5358e2a19', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'cd3d0e016af8753032139ade20a6d2b8ac41142f', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classNames } from './index2.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
-const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
+const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
 
 const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends HTMLElement {
     constructor() {
@@ -51,15 +51,17 @@ const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends
     render() {
         const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
         const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
+        const hasHeading = Boolean(this.el.querySelector('[slot="heading"]'));
         const className = classNames("app-bar", {
             "app-bar--has-cta": this.hasCta,
             "app-bar--has-right-controls": hasRightControls,
+            "app-bar--has-heading": hasHeading,
         });
         const styles = {
             paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
             paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
         };
-        return (h(Host, { key: 'd600deeb8a687bb4845149bcf2bad842f5ecf1f3' }, h("div", { key: '1c662e5e543ccec7fa1aa92721e7e3c43fbf6e4f', class: className, style: styles }, showLeftControls && (h("div", { key: '1360ad530e65281d1756d3857020dc745d103695', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'd1abed9606942b05ca70dc6a334b81050c4c1fe6', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: 'fe72d1498779c96c01893eb7befdbccaa537b947', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '8dcb78f5b58bf6bc641c456cc8a58f9fb001bf09', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '70d556ed3057812ba3bae94a3137f50475971b5d', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'ff0f84da0dc691e84d549c269efab64ad4052c58', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ba47ee06389bd22569408c48b6bdcfc6fdd1d039', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '48ec84b6d54b8a2bc480467ae6b7556f8d2f6756', class: "app-bar__cta" }, h("slot", { key: '2303f169c07f38410740fd75ef788944ee23cdd1', name: "cta" })), h("div", { key: 'a03346495a15b78da499f5e5dc584e140ddb3a85', class: "app-bar__heading" }, h("slot", { key: 'dedbfa247ba4d1c31f04aa670f11499218fe9b4e', name: "heading" })), h("div", { key: 'cae7eea7759c04cffc983d4dd525b6bf87b8ee8e', class: "app-bar__center-controls" }, h("slot", { key: 'fd94d148cbedad08013203e9aba179165c7afedb', name: "center-controls" })), h("div", { key: '16e9c5e550774658b7b6ea93ff695564f6d7e65e', class: "app-bar__right-controls" }, h("slot", { key: '218d119f1d046ceff9a243c155a00dd730b76508', name: "right-controls" })))));
+        return (h(Host, { key: 'ebdb11284a5d7b0e495f3ef6ca5383e42f3a1217' }, h("div", { key: '3f835e7f255c1a5a64fdd77df04dd5125fa53af2', class: className, style: styles }, showLeftControls && (h("div", { key: 'c55d2dacce587f2443f2cb187adbb20335f1ebf7', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'bae9cf4d21723a64fe640128dfe8acc6ea50dd08', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '823386ce17200d8e9eb59e53bc13fc272f618de4', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '70e54a538f8d434b86d73e5e26d43ad76ad8ec97', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '5225bec74f239041e4e193a9800ebfda52fc190a', class: "app-bar__stepper-controls" }, h("swirl-button", { key: '00b3163a95f10a4dbf2fd9a0fc3046c7e27b1eb4', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ca8d8f3e06408664b56352366f218ad014c36cb6', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '0ec2af8a4ea6f9c17dd8d0c116a95c599f586fc5', class: "app-bar__cta" }, h("slot", { key: '82efa65c7381b155768baee4d5acaea72b4061c1', name: "cta" })), h("div", { key: '8561d4fee864f70e871d3fb2e2a17eaf4b45817e', class: "app-bar__heading" }, h("slot", { key: 'a536db6681aec3cf1a8eb8855b2838e7b923619e', name: "heading" })), h("div", { key: '5f7e7c18685d94e9147e2fc704e23a5d8ab05b02', class: "app-bar__center-controls" }, h("slot", { key: '414e3e0aa9109a6b29a96b383440581715d30084', name: "center-controls" })), h("div", { key: '2a3c606c9d22194237a958e121f46c98ab6bd887', class: "app-bar__right-controls" }, h("slot", { key: '1a1f867e1311fef262d2ff8dc884f9bfcea90c9d', name: "right-controls" })))));
     }
     get el() { return this; }
     static get style() { return swirlAppBarCss; }

package/dist/components/swirl-console-layout.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './swirl-button2.js';
 import { d as defineCustomElement$3 } from './swirl-heading2.js';
 import { d as defineCustomElement$2 } from './swirl-text2.js';
 
-const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:\"content\"\n        \"footer\";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:\"app-bar\"\n    \"content\"\n    \"footer\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout--has-custom-app-bar .console-layout__content{padding-top:var(--s-space-16)}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}";
+const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:\"content\"\n        \"footer\";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:\"app-bar\"\n    \"content\"\n    \"footer\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout--has-custom-app-bar .console-layout__content{padding-top:var(--s-space-16)}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}";
 
 const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsoleLayout extends HTMLElement {
     constructor() {
@@ -20,7 +20,7 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
         this.logoText = "Admin";
         this.navigationLabel = "Main";
         this.showNavigationButtonLabel = "Show main navigation";
-        this.mainScrollState = {
+        this.contentScrollState = {
             scrollable: false,
             scrolledToTop: false,
             scrolledToBottom: false,
@@ -32,7 +32,7 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
             this.hasFooter = Boolean(this.el.querySelector('[slot="footer"]'));
         };
         this.onMainScroll = debounce(() => {
-            this.updateMainScrollState();
+            this.updateContentScrollState();
         }, 16);
         this.onBackButtonClick = (event) => {
             this.backButtonClick.emit(event);
@@ -70,21 +70,24 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
                 this.deactivateSidebar();
             }
             // Update initial scroll state
-            this.updateMainScrollState();
+            this.updateContentScrollState();
             // Update initial slot states
             this.updateCustomAppBarStatus();
             this.updateFooterStatus();
         });
     }
-    updateMainScrollState() {
-        const newMainScrollState = {
-            scrollable: this.mainEl.scrollHeight > this.mainEl.clientHeight,
-            scrolledToTop: this.mainEl.scrollTop === 0,
-            scrolledToBottom: Math.round(this.mainEl.scrollTop + this.mainEl.clientHeight) >=
-                this.mainEl.scrollHeight,
+    updateContentScrollState() {
+        if (!this.contentEl) {
+            return;
+        }
+        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(newMainScrollState).some((key) => newMainScrollState[key] !== this.mainScrollState[key])) {
-            this.mainScrollState = newMainScrollState;
+        if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
+            this.contentScrollState = newContentScrollState;
         }
     }
     onWindowResize() {
@@ -151,15 +154,15 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !this.hasCustomAppBar,
             "console-layout--has-footer": this.hasFooter,
             "console-layout--has-custom-app-bar": this.hasCustomAppBar,
-            "console-layout--main-scrollable": this.mainScrollState.scrollable,
-            "console-layout--main-scrolled-to-top": this.mainScrollState.scrolledToTop,
-            "console-layout--main-scrolled-to-bottom": this.mainScrollState.scrolledToBottom,
+            "console-layout--main-scrollable": this.contentScrollState.scrollable,
+            "console-layout--main-scrolled-to-top": this.contentScrollState.scrolledToTop,
+            "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
         });
-        return (h(Host, { key: '496726613eda9b1c13e33c085e915d775933ed0d' }, h("div", { key: '3579c1193e739746a8638efabfdce3117bf0f7ce', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '675b17d7ae85f8625e322debcb000d5bf2e90353', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '8aff40aaea61bb8d05f3a055251f44b1e3127369', class: "console-layout__header" }, h("div", { key: '28c91b86ee3c54491354b2201529b93e616ed5a2', class: "console-layout__logo" }, h("svg", { key: '94c383254b365d55087f79016f64de5c2a9090f3', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '95d61c6613839aaadf51693466036c9fc80ae379', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: 'cbb0bcffdaebc54633f2e07d658e3c9c9a529ddc', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '203d33fe023f8f24dfc3dbb5a484151ec2067179', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '78fa8fc8471d593dd6b82e9a0e6dd55804cbb5cb', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '1a1c38e126ceb14ed84d20ea35eb9881a6e96a29', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '10c48be46ba7cb3b57ab7941b565ec6262d5441e', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '40c8755440f5fa081cf75e80f2658082f5f372f2', name: "navigation" })), h("div", { key: 'dd865340cbff798b518dfd1619a71ac7aa746b28', class: "console-layout__user" }, h("slot", { key: '8526bf246e4df5ad1a8f156de420094b0bf07a42', name: "user" }))), h("main", { key: '1d748d5d7f368dfc04cc798b67c84ac70bfa27bc', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main", onScroll: this.onMainScroll, ref: (el) => (this.mainEl = el) }, h("header", { key: '4f4a0ec2fce6b3332a383d2eb490cef9f9914c82', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '22ef51d2afffe32c7802938b0501a980317fd422', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '4e7f642ec1b0db200a06014895a304410d4e4bf6', class: "console-layout__app-bar" }, h("span", { key: '5b62b2d1c1d778b663a436d3f3cdb1fb3ceda0bd', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'dc14fca02f84c6e6deb1ad326940abfe6c46bb2e', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (h(Host, { key: 'f602249c3a2f823304f2a5bf67ddc5e6a39a6085' }, h("div", { key: '295edc899d752d5d185f1bfcdc933b6c67dc5cab', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '3d5f51aa48ab671b90e3ab795c8e2336f2a0bf00', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'ef7730d2ebcf7ac06dfb79573bf3799cbb4fff32', class: "console-layout__header" }, h("div", { key: 'd30f5fea7b7315254e965c668f4c2d7481c92f6b', class: "console-layout__logo" }, h("svg", { key: '6d7760615c7429ff4c9f75a426e9f9dd45c3383d', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '06644682742c5102d1957434e16712f4ffc05078', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: '204c7f8eb3f9cdcb4f373fab64837b0dab65863b', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '6d84e0d4c32f66edae27369c1b1e2fb5653b080f', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '958f28ed610cb01b7978ed1746683f592a62f55e', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: 'caa2148fb54f21e3cda5463f3cc3897cab2ae483', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '1e510d6fb7e3ac9253de3028ab47c5959f070866', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: 'e52cc6938675f37e197632a18664aad70a53612b', name: "navigation" })), h("div", { key: 'f692ec53041b36b44d8bf79ea16c79fb5d93d3fe', class: "console-layout__user" }, h("slot", { key: '05811ff54291ca6b58c687f68f2a99198b23bedc', name: "user" }))), h("main", { key: 'a8f039990b09c03d359501b481bfb24b5b31322e', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: 'd5b5ffcdc55cce910a16a8f7fa676a3c30927e88', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: 'e412eeebd7df7a58e86a89e74622d741b1f163ac', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '0e2da65e6647e850b76ca977c9a6e6777626c3b6', class: "console-layout__app-bar" }, h("span", { key: '08da9d4298d53485e2dc40a171a267ba2cb84b60', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'c943ac71ee28ca081f58d5fea6df1dc80a9c6aca', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
                 ? this.hideNavigationButtonLabel
-                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '01d45eb50d075757955b80853198f1b0f39299c8', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '02175712524e8351c77fb19e694b578fb7286cf4', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'd32c76e8ece2eeb22f011f32c413a4830cc30981', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'd1988d4c22eb7bdc7f0a6e7b2214f279d16f0f58', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'a0432af5b8fa2c86cdb38107bf9862434b71c3a8', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '247e57f3ad9aa23d632676da5f9412bf49178046', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '45edcca489cfd352b051296b603014b4a3680f0d', class: "console-layout__heading-container" }, h("swirl-heading", { key: '7b4e9fd2b38eb7c577d9c24a777081091e67edd0', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '1c2465d0e95338b0951eb4acca5c600b59e28ed0', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '4ba8d0d2952cbd856740bdc9cc437bf3cc760a30', class: "console-layout__heading-container" }, h("slot", { key: 'e4f52ed468b699b7c7243857337342ee5c11ab42', name: "heading" }))), h("div", { key: '5aeb6ea58a0d5773684c63faab63efd58356472a', class: "console-layout__content-header-tools" }, h("slot", { key: '736fa0e793324d24da67ed4a005a520e55e9a047', name: "content-header-tools" }))), h("div", { key: 'ccfd6c9269d2eb46761dc5b1746928cc9f032e36', class: "console-layout__integration" }, h("slot", { key: '61c7b54e8ade13b05a8c3fca648c01fb45704913', name: "content" }))), h("footer", { key: '74be6cb8601f004b48e76070172d11a61a9567f9', class: "console-layout__footer" }, h("slot", { key: '346a507d59d8969c3d53289cdd777cd278c35608', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '9d27e700c9d1863a0801661ca45f7e7bdf01e4f6', class: "console-layout__overlays" }, h("slot", { key: '3d2bc10779ef6cfdb56aed0a145a5d8ccfe2a764', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'f9415886d01ef95ab39077ea999f42406e86f314', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '43cb2fa3a5f83641f355b70d65824349a4d81c0e', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'c33cba1e95d045c844a54abd07c7137b0e78bc50', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: '6ab6d727f2277140e11db645868827c847dabdba', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: 'b052ea71d81c31e87cd2fb3737bbb71d1bc031fa', class: "console-layout__content-container" }, h("header", { key: '088cdd2fbbd44ab1d28b522d5fea49d8deefeb2d', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: '4460404203e17d8fb4e40d648e12d04aa56d6d5c', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '2140642cc721068ada371be1815b67031fbd0aa2', class: "console-layout__heading-container" }, h("swirl-heading", { key: '22cf167cae948b9fc2bc599e633d853e8f12969c', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '06e4ef0297ce3ebe4104ccf8b69c83c065bc79ca', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '46a66886e33e95bd953e4f7302ea349e9a6f51e0', class: "console-layout__heading-container" }, h("slot", { key: 'fb00d09092088ee6276bd40cbc4c7da5c85b21b3', name: "heading" }))), h("div", { key: 'a9b2ffbe3dde312da4652de366b912098a7a3a14', class: "console-layout__content-header-tools" }, h("slot", { key: '5f720c87d56af83fcba11b5a867fa9b16ffb8ff8', name: "content-header-tools" }))), h("div", { key: '3849b04645ac7bd52456b5bb133d656cae4ade3f', class: "console-layout__integration", style: contentStyles }, h("slot", { key: '8bea0cef1e5b108d0431472cd2a4a773c04e6099', name: "content" })))), h("footer", { key: 'cacef9477a9ded8ae8ed0c1f33c5dfc4fcccaf13', class: "console-layout__footer" }, h("slot", { key: '29c75ed06f31e2fa404af0f0df9e3c4b9f2a72c6', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '6fa46e755ea4ab076400514f059468583baf1158', class: "console-layout__overlays" }, h("slot", { key: '7ba8df29673c595dcd5607611b2e27652cc2040b', name: "overlays" }))))));
     }
     get el() { return this; }
     static get style() { return swirlConsoleLayoutCss; }
@@ -177,7 +180,7 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
         "showNavigationButtonLabel": [1, "show-navigation-button-label"],
         "subheading": [1],
         "sidebarActive": [32],
-        "mainScrollState": [32],
+        "contentScrollState": [32],
         "hasCustomAppBar": [32],
         "hasFooter": [32],
         "toggleSidebar": [64],

package/dist/components/swirl-date-input.js

@@ -204,7 +204,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         const className = classNames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'dfdcee29c1198a91f487f95303a25a351af9360f' }, h("div", { key: '421758bdfb0227068bebfeffbbcec9e633af01aa', class: className }, h("input", { key: 'd952d450aaa1e8c7fcda535b8574c985cf924a0a', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("swirl-popover-trigger", { key: '9b8a3918fffd902a55f6e05d80dd074050ae8aa7', swirlPopover: `popover-${this.id}` }, h("button", { key: 'f2c0b68ff346b189ec1c87cfa512da7f60705258', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '22036bb077e80763db35526f9b5a2e5ba7749959', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'c3d73d88335c7b1736249bb816df3c98a2c96f00', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'be4b56f558745d0ab85387cc41db391a86e8828b', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '97905434c765395244603fcaeb8b99cb7ca65215' }, h("div", { key: '08e9af686684961329173c15583f56871c737291', class: className }, h("input", { key: '799cbdbc674b660917535823f328c0d3989e0b8d', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("swirl-popover-trigger", { key: 'fc9d427e1fe7c99f2172f8dd6d42fc1af5339f25', swirlPopover: `popover-${this.id}` }, h("button", { key: 'c218bddaa19d9d07bba93998b22eacbc419c9bf1', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'dcc5582668398233b0e9233cca1bea7d2b5ccda5', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '8a7a720ad6d8b6a2a103b90a872429ad546527ba', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'e01597c0dc2a830aef8862fb05532678d3630603', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-date-picker2.js

@@ -39,7 +39,7 @@ const SwirlDatePicker = /*@__PURE__*/ proxyCustomElement(class SwirlDatePicker e
         const startDate = this.startDate instanceof Date
             ? getISODateString(this.startDate)
             : undefined;
-        return (h(Host, { key: 'b65ecce22e01a0457adf4a34769c1913f3aeffa4', onClick: this.onClick }, h("wc-datepicker", { key: 'e47c178eeb45168c4578a659101c10dfceac1e9f', elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+        return (h(Host, { key: '7ec3ae9991690904727eba667b74a54f21ec11a1', onClick: this.onClick }, h("wc-datepicker", { key: 'd562dfed3aa6b4876348fe4f9ec2cd372cf93287', elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     get el() { return this; }
     static get style() { return swirlDatePickerCss; }

package/dist/components/swirl-description-list-item.js

@@ -20,7 +20,7 @@ const SwirlDescriptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlD
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,
         });
-        return (h(Host, { key: '8014ee8d849b95bab7ae1cc682a3d0bbe3e074e0', role: "listitem" }, h("div", { key: '6b202c77e7012ec0aca3a9b980e75480c1109065', class: className, part: "description-list-item", role: "group" }, h("div", { key: '242cfe61b946a5322b4c1ab23beb02d6dd5c3bad', class: "description-list-item__inner" }, h("div", { key: '9b76595e162cdb97f3308490af5ab0644078fd1c', class: "description-list-item__text-container" }, h("div", { key: '02db73c687ef62d819842254e2dbe8bbf8fdd69b', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '0b4837ec0bf37b8fe75cbe3242ed3a83fd8ff1bd', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'f1e6c484c32f3df6d8e6dfab19ab4ad313273ff1', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '2f3cbe85180a75972dbab80daec81c708425fd7d', size: 16, tabIndex: 0 }))))), h("div", { key: 'bdcb6c648ff3370248c4b345e8939182c8b2f6e4', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '656381c9109ae0436572945c1c48d80c483c1ea9' }))), h("div", { key: '7100d26dc8930335b1c425fc7591dcfd4ead42d4', class: "description-list-item__tools" }, h("slot", { key: '24b18f9b9543677fd051f58c8a755ec914d30495', name: "tools" }))), h("div", { key: '36ee7c5b466de605604c17ee189797f67c12451f', class: "description-list-item__additional-content" }, h("slot", { key: 'aa50290a8b8e1870308df632c88003b32d144f89', name: "additional-content" })))));
+        return (h(Host, { key: '90dbdf2ed25781b297bde67fc0900421ebb830ff', role: "listitem" }, h("div", { key: '53f163fc7500a78bef54ead6964bd72f477e0b83', class: className, part: "description-list-item", role: "group" }, h("div", { key: '81313649bcb191b15503713665f77d40e4375bee', class: "description-list-item__inner" }, h("div", { key: '1baabe026578dc1baa0df120e42e0ead42e9f1da', class: "description-list-item__text-container" }, h("div", { key: 'c313991c7674e14a5ab3a38265942338ac5231c5', class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { key: '7e1ba8dfbb8a92b61dd4d920ebdc10c3f4167e1d', class: "description-list-item__tooltip" }, h("swirl-tooltip", { key: 'd81f3d95d0471c83f347efab966756665161fad0', content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'f86d1830237f8919a38864158cfc35715b81225c', size: 16, tabIndex: 0 }))))), h("div", { key: 'b40b4e149ddfec7e4b068477af6671e30c19043c', style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", { key: '15462d6c1d14aba95f3451c7a5be36e325bc7300' }))), h("div", { key: '074a5ac6fdbcd158b2967c9df72860f982a78403', class: "description-list-item__tools" }, h("slot", { key: 'c51ab4cadb99ec5c1a695fae2bfa55445d6b30e5', name: "tools" }))), h("div", { key: '60336ea3f267639607aad06c4aaec92dfa4a33cc', class: "description-list-item__additional-content" }, h("slot", { key: '9cd5c2a9f26a3f293749588fb6b6b734bc1ab3cf', name: "additional-content" })))));
     }
     get el() { return this; }
     static get style() { return swirlDescriptionListItemCss; }

package/dist/components/swirl-description-list.js

@@ -9,7 +9,7 @@ const SwirlDescriptionList$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDescr
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'e694dac352c50a28b0f35dda8d4e067c9399eb17' }, h("div", { key: '9d64ffc820e098f492297af7745c9b36af5da0dd', class: "description-list", role: "list" }, h("slot", { key: 'd5573abce8e07e5240bf060c1058fed54059e5ff' }))));
+        return (h(Host, { key: '186621c7a5995bb3a1e13ca26d7d010b494ea56d' }, h("div", { key: '2c13f86bdc4920b412e6faba663b852d4c2c2cf7', class: "description-list", role: "list" }, h("slot", { key: 'e5968335d30156bcacd58839addd74d092bffdff' }))));
     }
     static get style() { return swirlDescriptionListCss; }
 }, [1, "swirl-description-list"]);

package/dist/components/swirl-emoji-clap.js

@@ -13,7 +13,7 @@ const SwirlEmojiClap$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiClap e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'd8145152a1d500d30ec0a1061f34b05f233285d2' }, this.size === 16 && (h("img", { key: 'ce9fe6be764d0edb7e99b774f9c988509b90a6db', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '3a95758faa7eb55ce62516d4b948d6394812a746', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '2c9b32c6b109b244b27845dc79c15af55df9c3a0', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '2c47f977da2466747c1115761f8931c747fa3e95', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+        return (h(Fragment, { key: '2290bc6161eb63ee23ecf06fa93714b0cc708196' }, this.size === 16 && (h("img", { key: '480624f433bd871973e385db4de95c5ce80b290a', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: '636c0729258ae4fe56a45227673c870a13bba8c2', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: 'bd2d915f0d7d26135402b4c7b130e531cc12ed69', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '92ab6253b231d315829861675053a2d10617f7bf', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-clap", {

package/dist/components/swirl-emoji-happy.js

@@ -13,7 +13,7 @@ const SwirlEmojiHappy$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiHappy
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '619129c7e28e73a3723d09bb20f5db4104664e52' }, this.size === 16 && (h("img", { key: '5798a5cf99caf50942b860c7999175abdff20e9d', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '1ca5db3a8e5d1d32b216f3522320179637f910da', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: 'd96185a2e87c597f75693636dd58572e6682d4bb', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: 'e695555af8ab00a6bcc9fdaf0528b885fc08eba4', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+        return (h(Fragment, { key: '785ef51d1bfe14d937e3be24d81095a513894745' }, this.size === 16 && (h("img", { key: '87475da3c8cf4f98b41ffca26ba76bf349444980', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '81953c3e2917f9733653b333ce13b4f63533e2b0', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '58c8988adec7c1beaed83d98e97651b096d23c7f', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '2205b12c5576e627f2d461161fa363d35f88d540', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-happy", {

package/dist/components/swirl-emoji-idea.js

@@ -13,7 +13,7 @@ const SwirlEmojiIdea$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiIdea e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '1ddb0dbaa2dece9843885be0eb96297f7262d042' }, this.size === 16 && (h("img", { key: 'baa3127e120fd75fbf3f29dd33ae7d90f427d129', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '3d388543de153e653acb4f0f247817495b7bb310', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '7d2fbcc9c48cb85d3edeb3c230b6c3aaf74b82db', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: '7574c6a2d552407413f9794ca8c8bbb1a2f1cb75', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+        return (h(Fragment, { key: '1d0863ea22c3d66bb231797ad2ff68c7a9500f49' }, this.size === 16 && (h("img", { key: '32fd806fdb0206c37ea6b95c960942b597d61c77', alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { key: '0df21795e3fc6a86350afabc747511de612c01b8', alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { key: '5b9ef8fcc048437978ca6698af848496678b10cf', alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { key: 'bc87fe134003bee65a2ea2f6d22a7bf7b3504405', alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-idea", {

package/dist/components/swirl-emoji-love.js

@@ -13,7 +13,7 @@ const SwirlEmojiLove$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiLove e
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'f228265076d1ae32694322c19ba8efdf6d499dc7' }, this.size === 16 && (h("img", { key: 'd01a77f870e92fbf86d1ea37483852d8c6ef1178', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: 'df5424c60471aef05b51e6dc416488acb83b8ea9', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: 'ca9df68a4a190d8f5c2b045e5ab7b49ca4e32708', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: '021801691dde3891761b12cbc16684e9655bb67d', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+        return (h(Fragment, { key: '71914ec3c2f44caebb5eee5384cf00f42ff47150' }, this.size === 16 && (h("img", { key: '6592a1a6cee3f306ea8e3ccb05507c4d2ddf71b9', alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { key: '38afe95020550e282ad6289d74ad3bd62111a665', alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { key: '5475d51f17a5abe120d809ba88f77addda344f37', alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { key: 'c1cf4e32564e54aa1319573dd421a1a1f6334c6c', alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-love", {

package/dist/components/swirl-emoji-sad.js

@@ -13,7 +13,7 @@ const SwirlEmojiSad$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiSad ext
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: 'cacb17f5231e8e65a9ba788e97c88ac4d7a045d3' }, this.size === 16 && (h("img", { key: '8c420591c9e1312e3bc7e10a263b708dff884d43', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: '09372c3936cbf5828ef26b092f8c126d5697967d', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: '519fc1a7bd8fd1d3c9d90ebe032c2dc10dc685fa', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: '5443be3ab168eac250687611d2ec7e585f7393ca', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+        return (h(Fragment, { key: '12004c4c99d9952ddcb0b3291b2e8373f7397a13' }, this.size === 16 && (h("img", { key: '37563f43bd4269c48d4445932d0f0470d3cd6157', alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { key: 'b84bf5d217da8aaf87ff970ed02117f21e3917c5', alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { key: 'b549ab7ac90739c46bc26352d96ec61e2a4745b5', alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { key: 'af47a19fc9bc89a23b14ca26653360a5ee5d947f', alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-sad", {

package/dist/components/swirl-emoji-thumbs-up.js

@@ -13,7 +13,7 @@ const SwirlEmojiThumbsUp$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiTh
     }
     render() {
         const className = classNames("emoji", `emoji--size-${this.size}`);
-        return (h(Fragment, { key: '7510a6d0c2a9a9d1cbf64b544c447925084b743d' }, this.size === 16 && (h("img", { key: 'de70ac25084a64fe1bfd85a8c3c0a6aa302f7733', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: '5fb26959f969f039c39f44449cdb6de7fe6fa1d2', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'a91dae1f9643768541afc140e8978c86dcc3a6fb', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '9c2b744d0a4c96c3b9984734de5a4cc178cae7d5', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
+        return (h(Fragment, { key: 'e4d260bd644fd9677422dd90f7a66df5de5a68ee' }, this.size === 16 && (h("img", { key: '76c2958dbf6055acd7fc3a9a703c75e17e55635f', alt: this.label, class: className, height: "16", src: "emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { key: 'e852d1e26f222c008896283cedb3b868434c1e38', alt: this.label, class: className, height: "20", src: "emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { key: 'bb6ecd185cb696b87589adc0a138e5de1b9fb231', alt: this.label, class: className, height: "24", src: "emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { key: '4a70e11277dde7de59877a3d1d79bb7d4ed81fbb', alt: this.label, class: className, height: "32", src: "emojis/ThumbsUp32.png", width: "32" }))));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji-thumbs-up", {

package/dist/components/swirl-emoji.js

@@ -12,7 +12,7 @@ const SwirlEmoji$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmoji extends H
     }
     render() {
         const Tag = `swirl-emoji-${this.name}`;
-        return (h(Host, { key: 'f7b245d8cc103991cf4a2727776100f78f0d0c5a' }, h(Tag, { key: '6c6a83f481a491d04b3e204f942cadc45c06490e', label: this.label, size: this.size })));
+        return (h(Host, { key: 'f42b652c032c9a6b0acaf8f963575d33251831ee' }, h(Tag, { key: 'd0f9d52a6b449c2070e2efa02ae24205af2a2564', label: this.label, size: this.size })));
     }
     static get style() { return swirlEmojiCss; }
 }, [1, "swirl-emoji", {

package/dist/components/swirl-empty-state2.js

@@ -20,7 +20,7 @@ const SwirlEmptyState = /*@__PURE__*/ proxyCustomElement(class SwirlEmptyState e
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: 'c2e8ccde693817838b60f34a6d740a5c7b66699b' }, h("div", { key: '0003deb97729d9f910357954ca460b0175f1767e', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'e7c6a2f2ac8b517bc988affa907971b315be51f0', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '3ff8688a488ee7f8f98e16171184bae84993640f', class: "empty-state__slotted-illustration" }, h("slot", { key: 'dd5200b78701624ef24ebc9a356bacbd187280ce', name: "illustration" })), h("div", { key: 'ccf3be4270aff8f5b0e58df3d26d981aeae3bec1', class: "empty-state__body" }, h("swirl-stack", { key: '302f100325f5431c005263afaea48cdb114e193b', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: 'ff8683109c205de82b3bf0dd5e24756c18d8be16', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '081f9d49b19fd65e69383ad982838d1792a0a87a', class: "empty-state__content" }, h("swirl-text", { key: '6357990f0fa688a4016361b037092431651e6ea3', align: "center", color: "subdued" }, h("slot", { key: '3f648e01deb2242e132bcacfadab4fd08d7f116d' })))), h("div", { key: '372fd4f55274a6c32a2443a456530845473747a5', class: "empty-state__controls" }, h("slot", { key: 'a0fe0a4e1705e5e55286bc455d0e0b911093f407', name: "controls" }))))));
+        return (h(Host, { key: '166076ac4cfe04b4764c72b42245450f11a8e794' }, h("div", { key: '62deccef0cb90b476c5a2158fc6d392410fac996', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '63c79c7e413c7b9c715ff07f6d2bf7fc35ed3ddf', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: 'a477f4eb79a7cef298c73303e71b242f2dbe855a', class: "empty-state__slotted-illustration" }, h("slot", { key: 'd9bb1832e7119c8caa4743901be8dad76772c7ac', name: "illustration" })), h("div", { key: '6c8b5903cd2a310035b6f19ea2c578deae6ff6fd', class: "empty-state__body" }, h("swirl-stack", { key: 'd5ba6a8034b7784d413c9da99f64e0f1e2090f9a', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '55ac5b35d92a434f02f02edd5de54e574793b82b', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: 'b5cd99d2fc3933797c868682d30c28117d0510d4', class: "empty-state__content" }, h("swirl-text", { key: '52388f0b76e3e1971016eab8582d8f180f02e9e2', align: "center", color: "subdued" }, h("slot", { key: '88e782a04e75234c96ba3a2f339a324657172a37' })))), h("div", { key: '6a934056e62842dda32c55970f4b412cb1dd7ba5', class: "empty-state__controls" }, h("slot", { key: 'ca1161d9f41bb32a1b3d994285f91db758825fca', name: "controls" }))))));
     }
     get el() { return this; }
     static get style() { return swirlEmptyStateCss; }

package/dist/components/swirl-file-chip.js

@@ -96,7 +96,7 @@ const SwirlFileChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFileChip ext
             "file-chip--one-action": actionCount === 1,
             "file-chip--two-actions": actionCount === 2,
         });
-        return (h(Host, { key: '6037f2f042f1cf6134849c125b333e3952337618' }, h("span", { key: 'db9a73e9071b1fbaf319d5cbf99e3495e70ce8bd', role: "group", class: className }, h("span", { key: '08d2cef2a41f4cb0f027f40768b4113a56edeac1', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'd42b6655f625c2fac97ef7b150d25c7528ed0842', class: "file-chip__info" }, h("span", { key: '1ab14be5f4dba742602381fa4a5dd6ad5ac8f0d1', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: '91e85f2654fb69478e62043c7af0b00e2470d0f1', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '21cc627fb6d28fab11661c34cf6dfad7bfd365a7', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'd1becf6e5ccce991c73c600a254922641145ce89', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '7047997c6bcafb5ef0649788850699249959ccb4', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
+        return (h(Host, { key: 'fa1ecf418460262c70a56f51a423604a97e8a1af' }, h("span", { key: 'c847d053734b05e13a55848941f1ff975d54c022', role: "group", class: className }, h("span", { key: 'cd1112cb3f9ca9cfd1bfe7836491c51da2e7ac4e', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '825e322f119d2e514cb1aed6b972810e1164826f', class: "file-chip__info" }, h("span", { key: '5802f85a82cabf174098ecc9992d770ae65794b4', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: 'd292ced14d7335ffbb39d522d6f770f2f465d1c9', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '205d45f06313496aa89f2fa0eb1a86c6346a3009', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'c67813fba6df624b66b2114ac8f65d617a580a5b', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '14d348a5f14bdb5f8448ddb8d11e1c259b0de689', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
     }
     static get watchers() { return {
         "type": ["watchType"]

package/dist/components/swirl-file-uploader.js

@@ -41,10 +41,10 @@ const SwirlFileUploader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFileUplo
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: '735604888bf0188109cfdf8e038400aecb060ddd' }, h("div", { key: '9aab6f2e0e559b1c4edb2c40b81e48707da3ef31', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '26934972352c10d5320733fd75d582c64ae2e8e2', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: 'bfba3d7da9b3a93ea18940c78b8428f2f009b5bb', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: '142fe7a2d391928f453d74fcb0aaac4a4d08ae3d' }, h("div", { key: '97bbecb655eeb499c1036a40bbc1593d00a7ed46', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '0733be83e31bf8f501e3dc9eb83685586fd4fe51', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '43c71e823001d12bd7996591e6e7f6ff213dacca', class: "file-uploader__dropzone" }, this.showDropzone ? ([
             h("swirl-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
             h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
-        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: '6f9d334acde73367d4e83fcccaf7fc393635bea6', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: '5e88f42179879b53c1fc1f58cab9f30f7c866876', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
     }
     static get style() { return swirlFileUploaderCss; }
 }, [2, "swirl-file-uploader", {

package/dist/components/swirl-file-viewer-audio2.js

@@ -13,7 +13,7 @@ const SwirlFileViewerAudio = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '6d8926d23f40942e14e298aa5e29ced5061f3a68', class: "file-viewer-audio" }, h("audio", { key: '3b8b3d48baf86aeac70edea47dd7396b35c6783c', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
+        return (h(Host, { key: '2900b07191c797a19e8cf8225c8c6573bfe161ee', class: "file-viewer-audio" }, h("audio", { key: '6ca576dc4b02f6e84f13311e4ba700167ee09aed', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
     }
     get el() { return this; }
     static get style() { return swirlFileViewerAudioCss; }

package/dist/components/swirl-file-viewer-csv2.js

@@ -67,7 +67,7 @@ const SwirlFileViewerCsv = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
         }
     }
     render() {
-        return (h(Host, { key: '4cd688f21caed158e9c8583f77d586027eab643a', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '3498e1d8770ef8f34a2965a18fa839d0caa09063', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'a0a77074dab7e8dfde1b1b1bfe679a0475f4877c', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'f94ac17832b09feefa57bb5d459882e0b71ef07d', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: 'a0e238437099227e7bd40ecb6c08debfb9e64c24' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: 'd0afb493fbf337a08eb3b8bb7384f4b081b94d77', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'c02a95a090bc46dffb823cb08d1a6cbf85fe4b6d' })))));
+        return (h(Host, { key: 'fb27d2be2dd3dc912ef407a51694c80ba65d3227', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '4736a116b6ffd2866b0133605600c7ad0774fa93', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'f39bcff9c921a0501085ab34daa0d847ef6d5c71', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'e7b3ec0721d96d32d483ee10df83b57ae7a1fb99', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '0265132d7cfe5580b21c7191791371fcf24c8ff3' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: '97603f955d0a0fb882b097b73c200f623c5ab5e5', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'ffda025c11e51e615a1b02ac7e39a5304dc0cbab' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-file-viewer-fallback2.js

@@ -23,7 +23,7 @@ const SwirlFileViewerFallback = /*@__PURE__*/ proxyCustomElement(class SwirlFile
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: '701a53b9b636773bb852b67ea0efb9fe8c6729d2', class: "file-viewer-fallback" }, h("swirl-stack", { key: 'ca58d970c935061efb8d71224d1b11e502fb443d', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'c69e13fe64286bbb4b780ae489779f280c6f23c9', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '3e51a2e49759edcbd2527eb6c5821906d2bd557f', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: 'aa1d2f3dea806a8fa4485fef1268df56a2fc50a9', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
+        return (h(Host, { key: 'f4e82cd376cd171e1fa0b4bfce34f3e0deb08c1b', class: "file-viewer-fallback" }, h("swirl-stack", { key: '692a28eb030d667c66e047d8c834d8e4809392f7', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '5f34316d466be0d19943788e8407b74ab5d5766c', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: 'cebf9ccf829344d5148df45ecac9051475bbebd2', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '35acb0f8bb2b3bfd9066487777b3fe57604ed4ff', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
     }
     get el() { return this; }
     static get style() { return swirlFileViewerFallbackCss; }

package/dist/components/swirl-file-viewer-image2.js

@@ -199,7 +199,7 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         return this.updateZoomAndPan(1);
     }
     render() {
-        return (h(Host, { key: '7736a509c5ed8de5607d520a6287a595830015c6', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: '595c8f592f7428c793713feb4e76a839d98cfac8', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: 'd2991b3923463bce82a7456d6e767f2db38ca931', class: "file-viewer-image" }, h("img", { key: '7852a60b1bd9411205d7f5c4854c0041ac20a3b5', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '42abc98610fb608eb36b33cc93ff0a0a40a4ad4e', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '455c69292237bbeefce5e24ba31ed0b82ecb6f98' }))))));
+        return (h(Host, { key: 'a8e61ce954abb2de1d6f445a46219259f2a919a2', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'cdb22d3feda76498870a92a6bc419e4e9602670a', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: 'b1dc79557c223df5936c294e25277c112c99472a', class: "file-viewer-image" }, h("img", { key: 'f3de188a201afca765ca44a157b1c921bb393c2a', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: '856804b636026ee60b3a4ea7b25946da5495f877', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'f397c7f1a7120e9548e07707c3d7d264e80f9891' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-file-viewer-text2.js

@@ -34,7 +34,7 @@ const SwirlFileViewerText = /*@__PURE__*/ proxyCustomElement(class SwirlFileView
         }
     }
     render() {
-        return (h(Host, { key: '459eedd3b49a4227650cd82ba0575bb6fa85e561', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '835c940c2d60b4f283d8f7ded8ff62dbb8ece669', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: 'a9c16f454f1bf2dcf72533bca1f27c2018b7c74d', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '03e2ffd76c3080e7a9f391166eda35b5dfd5f6e0', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '87073f3480e456c178d554a1bb6c315093142410' })))));
+        return (h(Host, { key: '502671c5b2a0187ecfb4d1d3f10dc685343a83a8', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: 'd223d764c28c87bc08f12ed859a94340dbe2b61d', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: '0fa96de20270c3bcaeceaadb60a731729eec5c35', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '225bef811457027af189698ce61afc3b16b15bef', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '1df61e955211d7fb2b148b4ed73619845e35b231' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-file-viewer-video2.js

@@ -24,7 +24,7 @@ const SwirlFileViewerVideo = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
         }
     }
     render() {
-        return (h(Host, { key: 'd1e45e4c1004557921015880fff5c4f994ac5f5f', class: "file-viewer-video" }, h("video", { key: '079996574a83b534924b0330c227d09b2cb9cdd8', autoplay: this.autoplay, class: "file-viewer-video__video", src: this.file, controls: true, ref: (el) => (this.videoEl = el) })));
+        return (h(Host, { key: 'f47546ab52e261a2f928d15fec747150b3d76890', class: "file-viewer-video" }, h("video", { key: 'f6d93067c18543e0f949423c820d4d43f1f5edb6', autoplay: this.autoplay, class: "file-viewer-video__video", src: this.file, controls: true, ref: (el) => (this.videoEl = el) })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-file-viewer2.js

@@ -70,7 +70,7 @@ const SwirlFileViewer = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewer e
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: 'a3e463f3ba54bc00845cdfec9347c54cf348eb84' }, h("div", { key: '383e8d5cb0ee05f6909d34be85b00d126bf929b1', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'fc9f387a74e144048ed61bb955f633fef55f5073', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '941527a09c5f49026d4c5a2464ebe8ebe427868f', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '3860256892bbae5aa56a609c8666ab9a162660ec', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '697e20abcea270502aa05ef2ab0397f66635eb64', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '5e9b09445443a24c46b61e3f9961640ec6c62780', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '3c1ab16de0ca1f952eb139caf8371fb09f28f92c', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '73ea43a0bbe3e785c7c21208cd57fcee184d8054', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '22e51a1bb71752cbc4208beb29b428c599f6face', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: 'ca428acd99e8b5d700e3935e94c1e7f3638b9869' }, h("div", { key: '6c0d4faf40af3cd9d59b38e4f07d541a69ea4c16', class: "file-viewer" }, this.type && this.active && (h("div", { key: '13d33ebdfb5d616910a7889a7578356f3029910e', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '25440c53fcfab131c6cb236239ec37fa77d4a398', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '6dc34153015503df47fa957f88caba861108d503', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: 'f221753a8aa300d9c770bf6989f222c4c490cac4', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '7eca59534735529982cbbad98b573224dcd5593e', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '0500bf8f85ff694835157ca077440cb8dfcff915', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '56b77cc2f2b56f0b0b1642c1331c62b7e81d353b', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: '945b7046764193a1b070e988e493705756a7e720', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
     }
     static get style() { return swirlFileViewerCss; }
 }, [1, "swirl-file-viewer", {

package/dist/components/swirl-icon-add-moderator.js

@@ -16,7 +16,7 @@ const SwirlIconAddModerator$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIcon
             color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
         };
         const className = classNames("swirl-icon", `swirl-icon--size-${this.size}`);
-        return (h("svg", { key: 'a13f53ed6ce7f5d857ff28e60966ffd58ee354ef', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '19b5135e71431147201ef9cbc0eb6bce263cc591' }, h("path", { key: '67d1dca332adac62f5cc3a3676d7db97a1488793', d: "M8.00002 14.6664C6.45558 14.2776 5.18058 13.3914 4.17502 12.0081C3.16946 10.6248 2.66669 9.08866 2.66669 7.39977V4.24977C2.66669 3.97199 2.74724 3.72199 2.90835 3.49977C3.06946 3.27755 3.2778 3.11644 3.53335 3.01644L7.53335 1.51644C7.68891 1.46088 7.84447 1.43311 8.00002 1.43311C8.15558 1.43311 8.31113 1.46088 8.46669 1.51644L12.4667 3.01644C12.7222 3.11644 12.9306 3.27755 13.0917 3.49977C13.2528 3.72199 13.3334 3.97199 13.3334 4.24977V7.11644C13.1222 7.02755 12.9056 6.94699 12.6834 6.87477C12.4611 6.80255 12.2334 6.74977 12 6.71644V4.26644L8.00002 2.76644L4.00002 4.26644V7.39977C4.00002 7.92199 4.06946 8.44422 4.20835 8.96644C4.34724 9.48866 4.54169 9.98588 4.79169 10.4581C5.04169 10.9303 5.34446 11.3664 5.70002 11.7664C6.05558 12.1664 6.45002 12.4998 6.88335 12.7664C7.00558 13.122 7.16669 13.4609 7.36669 13.7831C7.56669 14.1053 7.79447 14.3942 8.05002 14.6498C8.03891 14.6498 8.03058 14.6526 8.02502 14.6581C8.01947 14.6637 8.01113 14.6664 8.00002 14.6664ZM11.3334 14.6664C10.4111 14.6664 9.62502 14.3414 8.97502 13.6914C8.32502 13.0414 8.00002 12.2553 8.00002 11.3331C8.00002 10.4109 8.32502 9.62477 8.97502 8.97477C9.62502 8.32477 10.4111 7.99977 11.3334 7.99977C12.2556 7.99977 13.0417 8.32477 13.6917 8.97477C14.3417 9.62477 14.6667 10.4109 14.6667 11.3331C14.6667 12.2553 14.3417 13.0414 13.6917 13.6914C13.0417 14.3414 12.2556 14.6664 11.3334 14.6664ZM11 11.6664V12.9998C11 13.0887 11.0334 13.1664 11.1 13.2331C11.1667 13.2998 11.2445 13.3331 11.3334 13.3331C11.4222 13.3331 11.5 13.2998 11.5667 13.2331C11.6334 13.1664 11.6667 13.0887 11.6667 12.9998V11.6664H13C13.0889 11.6664 13.1667 11.6331 13.2334 11.5664C13.3 11.4998 13.3334 11.422 13.3334 11.3331C13.3334 11.2442 13.3 11.1664 13.2334 11.0998C13.1667 11.0331 13.0889 10.9998 13 10.9998H11.6667V9.66644C11.6667 9.57755 11.6334 9.49977 11.5667 9.43311C11.5 9.36644 11.4222 9.33311 11.3334 9.33311C11.2445 9.33311 11.1667 9.36644 11.1 9.43311C11.0334 9.49977 11 9.57755 11 9.66644V10.9998H9.66669C9.5778 10.9998 9.50002 11.0331 9.43335 11.0998C9.36669 11.1664 9.33335 11.2442 9.33335 11.3331C9.33335 11.422 9.36669 11.4998 9.43335 11.5664C9.50002 11.6331 9.5778 11.6664 9.66669 11.6664H11Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'f85bd1bb574c0e5932fd2a499609b3873875d022' }, h("path", { key: '03e96947cbc96658e3674d8952764566bc62e147', d: "M12 21.9999C9.68333 21.4166 7.77083 20.0874 6.2625 18.0124C4.75417 15.9374 4 13.6332 4 11.0999V6.3749C4 5.95824 4.12083 5.58324 4.3625 5.2499C4.60417 4.91657 4.91667 4.6749 5.3 4.5249L11.3 2.2749C11.5333 2.19157 11.7667 2.1499 12 2.1499C12.2333 2.1499 12.4667 2.19157 12.7 2.2749L18.7 4.5249C19.0833 4.6749 19.3958 4.91657 19.6375 5.2499C19.8792 5.58324 20 5.95824 20 6.3749V10.6749C19.6833 10.5416 19.3583 10.4207 19.025 10.3124C18.6917 10.2041 18.35 10.1249 18 10.0749V6.3999L12 4.1499L6 6.3999V11.0999C6 11.8832 6.10417 12.6666 6.3125 13.4499C6.52083 14.2332 6.8125 14.9791 7.1875 15.6874C7.5625 16.3957 8.01667 17.0499 8.55 17.6499C9.08333 18.2499 9.675 18.7499 10.325 19.1499C10.5083 19.6832 10.75 20.1916 11.05 20.6749C11.35 21.1582 11.6917 21.5916 12.075 21.9749C12.0583 21.9749 12.0458 21.9791 12.0375 21.9874C12.0292 21.9957 12.0167 21.9999 12 21.9999ZM17 21.9999C15.6167 21.9999 14.4375 21.5124 13.4625 20.5374C12.4875 19.5624 12 18.3832 12 16.9999C12 15.6166 12.4875 14.4374 13.4625 13.4624C14.4375 12.4874 15.6167 11.9999 17 11.9999C18.3833 11.9999 19.5625 12.4874 20.5375 13.4624C21.5125 14.4374 22 15.6166 22 16.9999C22 18.3832 21.5125 19.5624 20.5375 20.5374C19.5625 21.5124 18.3833 21.9999 17 21.9999ZM16.5 17.4999V19.4999C16.5 19.6332 16.55 19.7499 16.65 19.8499C16.75 19.9499 16.8667 19.9999 17 19.9999C17.1333 19.9999 17.25 19.9499 17.35 19.8499C17.45 19.7499 17.5 19.6332 17.5 19.4999V17.4999H19.5C19.6333 17.4999 19.75 17.4499 19.85 17.3499C19.95 17.2499 20 17.1332 20 16.9999C20 16.8666 19.95 16.7499 19.85 16.6499C19.75 16.5499 19.6333 16.4999 19.5 16.4999H17.5V14.4999C17.5 14.3666 17.45 14.2499 17.35 14.1499C17.25 14.0499 17.1333 13.9999 17 13.9999C16.8667 13.9999 16.75 14.0499 16.65 14.1499C16.55 14.2499 16.5 14.3666 16.5 14.4999V16.4999H14.5C14.3667 16.4999 14.25 16.5499 14.15 16.6499C14.05 16.7499 14 16.8666 14 16.9999C14 17.1332 14.05 17.2499 14.15 17.3499C14.25 17.4499 14.3667 17.4999 14.5 17.4999H16.5Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '1f2236c2991d1caf5633db4327cd8098db70d8b2' }, h("path", { key: 'c8d1f3497005e6e1a707f455cf02ced1f650ad54', d: "M14 25.6666C11.2972 24.9861 9.06599 23.4354 7.30627 21.0146C5.54655 18.5937 4.66669 15.9055 4.66669 12.95V7.43747C4.66669 6.95136 4.80766 6.51386 5.0896 6.12497C5.37155 5.73608 5.73613 5.45413 6.18335 5.27913L13.1834 2.65413C13.4556 2.55691 13.7278 2.5083 14 2.5083C14.2722 2.5083 14.5445 2.55691 14.8167 2.65413L21.8167 5.27913C22.2639 5.45413 22.6285 5.73608 22.9104 6.12497C23.1924 6.51386 23.3334 6.95136 23.3334 7.43747V12.4541C22.9639 12.2986 22.5847 12.1576 22.1959 12.0312C21.807 11.9048 21.4084 11.8125 21 11.7541V7.46663L14 4.84163L7.00002 7.46663V12.95C7.00002 13.8639 7.12155 14.7777 7.3646 15.6916C7.60766 16.6055 7.94794 17.4757 8.38544 18.3021C8.82294 19.1284 9.3528 19.8916 9.97502 20.5916C10.5972 21.2916 11.2875 21.875 12.0459 22.3416C12.2597 22.9639 12.5417 23.5569 12.8917 24.1208C13.2417 24.6847 13.6403 25.1902 14.0875 25.6375C14.0681 25.6375 14.0535 25.6423 14.0438 25.6521C14.034 25.6618 14.0195 25.6666 14 25.6666ZM19.8334 25.6666C18.2195 25.6666 16.8438 25.0979 15.7063 23.9604C14.5688 22.8229 14 21.4472 14 19.8333C14 18.2194 14.5688 16.8437 15.7063 15.7062C16.8438 14.5687 18.2195 14 19.8334 14C21.4472 14 22.8229 14.5687 23.9604 15.7062C25.0979 16.8437 25.6667 18.2194 25.6667 19.8333C25.6667 21.4472 25.0979 22.8229 23.9604 23.9604C22.8229 25.0979 21.4472 25.6666 19.8334 25.6666ZM19.25 20.4166V22.75C19.25 22.9055 19.3084 23.0416 19.425 23.1583C19.5417 23.275 19.6778 23.3333 19.8334 23.3333C19.9889 23.3333 20.125 23.275 20.2417 23.1583C20.3584 23.0416 20.4167 22.9055 20.4167 22.75V20.4166H22.75C22.9056 20.4166 23.0417 20.3583 23.1584 20.2416C23.275 20.125 23.3334 19.9889 23.3334 19.8333C23.3334 19.6777 23.275 19.5416 23.1584 19.425C23.0417 19.3083 22.9056 19.25 22.75 19.25H20.4167V16.9166C20.4167 16.7611 20.3584 16.625 20.2417 16.5083C20.125 16.3916 19.9889 16.3333 19.8334 16.3333C19.6778 16.3333 19.5417 16.3916 19.425 16.5083C19.3084 16.625 19.25 16.7611 19.25 16.9166V19.25H16.9167C16.7611 19.25 16.625 19.3083 16.5084 19.425C16.3917 19.5416 16.3334 19.6777 16.3334 19.8333C16.3334 19.9889 16.3917 20.125 16.5084 20.2416C16.625 20.3583 16.7611 20.4166 16.9167 20.4166H19.25Z", fill: "currentColor" })))));
+        return (h("svg", { key: 'a241519ca1fe5a7e82537e630db1c1d4e5967aba', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '996a43fd021bfdb42bac5ac082d918b92d7a2b7e' }, h("path", { key: 'c14b542050993fd1cf089ff45eb833fa29c2a2ec', d: "M8.00002 14.6664C6.45558 14.2776 5.18058 13.3914 4.17502 12.0081C3.16946 10.6248 2.66669 9.08866 2.66669 7.39977V4.24977C2.66669 3.97199 2.74724 3.72199 2.90835 3.49977C3.06946 3.27755 3.2778 3.11644 3.53335 3.01644L7.53335 1.51644C7.68891 1.46088 7.84447 1.43311 8.00002 1.43311C8.15558 1.43311 8.31113 1.46088 8.46669 1.51644L12.4667 3.01644C12.7222 3.11644 12.9306 3.27755 13.0917 3.49977C13.2528 3.72199 13.3334 3.97199 13.3334 4.24977V7.11644C13.1222 7.02755 12.9056 6.94699 12.6834 6.87477C12.4611 6.80255 12.2334 6.74977 12 6.71644V4.26644L8.00002 2.76644L4.00002 4.26644V7.39977C4.00002 7.92199 4.06946 8.44422 4.20835 8.96644C4.34724 9.48866 4.54169 9.98588 4.79169 10.4581C5.04169 10.9303 5.34446 11.3664 5.70002 11.7664C6.05558 12.1664 6.45002 12.4998 6.88335 12.7664C7.00558 13.122 7.16669 13.4609 7.36669 13.7831C7.56669 14.1053 7.79447 14.3942 8.05002 14.6498C8.03891 14.6498 8.03058 14.6526 8.02502 14.6581C8.01947 14.6637 8.01113 14.6664 8.00002 14.6664ZM11.3334 14.6664C10.4111 14.6664 9.62502 14.3414 8.97502 13.6914C8.32502 13.0414 8.00002 12.2553 8.00002 11.3331C8.00002 10.4109 8.32502 9.62477 8.97502 8.97477C9.62502 8.32477 10.4111 7.99977 11.3334 7.99977C12.2556 7.99977 13.0417 8.32477 13.6917 8.97477C14.3417 9.62477 14.6667 10.4109 14.6667 11.3331C14.6667 12.2553 14.3417 13.0414 13.6917 13.6914C13.0417 14.3414 12.2556 14.6664 11.3334 14.6664ZM11 11.6664V12.9998C11 13.0887 11.0334 13.1664 11.1 13.2331C11.1667 13.2998 11.2445 13.3331 11.3334 13.3331C11.4222 13.3331 11.5 13.2998 11.5667 13.2331C11.6334 13.1664 11.6667 13.0887 11.6667 12.9998V11.6664H13C13.0889 11.6664 13.1667 11.6331 13.2334 11.5664C13.3 11.4998 13.3334 11.422 13.3334 11.3331C13.3334 11.2442 13.3 11.1664 13.2334 11.0998C13.1667 11.0331 13.0889 10.9998 13 10.9998H11.6667V9.66644C11.6667 9.57755 11.6334 9.49977 11.5667 9.43311C11.5 9.36644 11.4222 9.33311 11.3334 9.33311C11.2445 9.33311 11.1667 9.36644 11.1 9.43311C11.0334 9.49977 11 9.57755 11 9.66644V10.9998H9.66669C9.5778 10.9998 9.50002 11.0331 9.43335 11.0998C9.36669 11.1664 9.33335 11.2442 9.33335 11.3331C9.33335 11.422 9.36669 11.4998 9.43335 11.5664C9.50002 11.6331 9.5778 11.6664 9.66669 11.6664H11Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'f6d43e3241e18f738e6e27508336dbcdf01ee490' }, h("path", { key: '338219e464bb3e81be6d24273a60a9878a4351dc', d: "M12 21.9999C9.68333 21.4166 7.77083 20.0874 6.2625 18.0124C4.75417 15.9374 4 13.6332 4 11.0999V6.3749C4 5.95824 4.12083 5.58324 4.3625 5.2499C4.60417 4.91657 4.91667 4.6749 5.3 4.5249L11.3 2.2749C11.5333 2.19157 11.7667 2.1499 12 2.1499C12.2333 2.1499 12.4667 2.19157 12.7 2.2749L18.7 4.5249C19.0833 4.6749 19.3958 4.91657 19.6375 5.2499C19.8792 5.58324 20 5.95824 20 6.3749V10.6749C19.6833 10.5416 19.3583 10.4207 19.025 10.3124C18.6917 10.2041 18.35 10.1249 18 10.0749V6.3999L12 4.1499L6 6.3999V11.0999C6 11.8832 6.10417 12.6666 6.3125 13.4499C6.52083 14.2332 6.8125 14.9791 7.1875 15.6874C7.5625 16.3957 8.01667 17.0499 8.55 17.6499C9.08333 18.2499 9.675 18.7499 10.325 19.1499C10.5083 19.6832 10.75 20.1916 11.05 20.6749C11.35 21.1582 11.6917 21.5916 12.075 21.9749C12.0583 21.9749 12.0458 21.9791 12.0375 21.9874C12.0292 21.9957 12.0167 21.9999 12 21.9999ZM17 21.9999C15.6167 21.9999 14.4375 21.5124 13.4625 20.5374C12.4875 19.5624 12 18.3832 12 16.9999C12 15.6166 12.4875 14.4374 13.4625 13.4624C14.4375 12.4874 15.6167 11.9999 17 11.9999C18.3833 11.9999 19.5625 12.4874 20.5375 13.4624C21.5125 14.4374 22 15.6166 22 16.9999C22 18.3832 21.5125 19.5624 20.5375 20.5374C19.5625 21.5124 18.3833 21.9999 17 21.9999ZM16.5 17.4999V19.4999C16.5 19.6332 16.55 19.7499 16.65 19.8499C16.75 19.9499 16.8667 19.9999 17 19.9999C17.1333 19.9999 17.25 19.9499 17.35 19.8499C17.45 19.7499 17.5 19.6332 17.5 19.4999V17.4999H19.5C19.6333 17.4999 19.75 17.4499 19.85 17.3499C19.95 17.2499 20 17.1332 20 16.9999C20 16.8666 19.95 16.7499 19.85 16.6499C19.75 16.5499 19.6333 16.4999 19.5 16.4999H17.5V14.4999C17.5 14.3666 17.45 14.2499 17.35 14.1499C17.25 14.0499 17.1333 13.9999 17 13.9999C16.8667 13.9999 16.75 14.0499 16.65 14.1499C16.55 14.2499 16.5 14.3666 16.5 14.4999V16.4999H14.5C14.3667 16.4999 14.25 16.5499 14.15 16.6499C14.05 16.7499 14 16.8666 14 16.9999C14 17.1332 14.05 17.2499 14.15 17.3499C14.25 17.4499 14.3667 17.4999 14.5 17.4999H16.5Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'a41ff94c4644ca89fab46202a789a4cf51eb2ef6' }, h("path", { key: '6b8cb6151767299d9a011ab42d41057cbdaee3af', d: "M14 25.6666C11.2972 24.9861 9.06599 23.4354 7.30627 21.0146C5.54655 18.5937 4.66669 15.9055 4.66669 12.95V7.43747C4.66669 6.95136 4.80766 6.51386 5.0896 6.12497C5.37155 5.73608 5.73613 5.45413 6.18335 5.27913L13.1834 2.65413C13.4556 2.55691 13.7278 2.5083 14 2.5083C14.2722 2.5083 14.5445 2.55691 14.8167 2.65413L21.8167 5.27913C22.2639 5.45413 22.6285 5.73608 22.9104 6.12497C23.1924 6.51386 23.3334 6.95136 23.3334 7.43747V12.4541C22.9639 12.2986 22.5847 12.1576 22.1959 12.0312C21.807 11.9048 21.4084 11.8125 21 11.7541V7.46663L14 4.84163L7.00002 7.46663V12.95C7.00002 13.8639 7.12155 14.7777 7.3646 15.6916C7.60766 16.6055 7.94794 17.4757 8.38544 18.3021C8.82294 19.1284 9.3528 19.8916 9.97502 20.5916C10.5972 21.2916 11.2875 21.875 12.0459 22.3416C12.2597 22.9639 12.5417 23.5569 12.8917 24.1208C13.2417 24.6847 13.6403 25.1902 14.0875 25.6375C14.0681 25.6375 14.0535 25.6423 14.0438 25.6521C14.034 25.6618 14.0195 25.6666 14 25.6666ZM19.8334 25.6666C18.2195 25.6666 16.8438 25.0979 15.7063 23.9604C14.5688 22.8229 14 21.4472 14 19.8333C14 18.2194 14.5688 16.8437 15.7063 15.7062C16.8438 14.5687 18.2195 14 19.8334 14C21.4472 14 22.8229 14.5687 23.9604 15.7062C25.0979 16.8437 25.6667 18.2194 25.6667 19.8333C25.6667 21.4472 25.0979 22.8229 23.9604 23.9604C22.8229 25.0979 21.4472 25.6666 19.8334 25.6666ZM19.25 20.4166V22.75C19.25 22.9055 19.3084 23.0416 19.425 23.1583C19.5417 23.275 19.6778 23.3333 19.8334 23.3333C19.9889 23.3333 20.125 23.275 20.2417 23.1583C20.3584 23.0416 20.4167 22.9055 20.4167 22.75V20.4166H22.75C22.9056 20.4166 23.0417 20.3583 23.1584 20.2416C23.275 20.125 23.3334 19.9889 23.3334 19.8333C23.3334 19.6777 23.275 19.5416 23.1584 19.425C23.0417 19.3083 22.9056 19.25 22.75 19.25H20.4167V16.9166C20.4167 16.7611 20.3584 16.625 20.2417 16.5083C20.125 16.3916 19.9889 16.3333 19.8334 16.3333C19.6778 16.3333 19.5417 16.3916 19.425 16.5083C19.3084 16.625 19.25 16.7611 19.25 16.9166V19.25H16.9167C16.7611 19.25 16.625 19.3083 16.5084 19.425C16.3917 19.5416 16.3334 19.6777 16.3334 19.8333C16.3334 19.9889 16.3917 20.125 16.5084 20.2416C16.625 20.3583 16.7611 20.4166 16.9167 20.4166H19.25Z", fill: "currentColor" })))));
     }
     static get style() { return swirlIconCss; }
 }, [1, "swirl-icon-add-moderator", {