@getflip/swirl-components 0.483.0 → 0.485.0

package/dist/cjs/swirl-action-list_2.cjs.entry.js

@@ -0,0 +1,147 @@
+'use strict';
+
+var index = require('./index-DlHdtZvn.js');
+var utils = require('./utils-UfZG-xPD.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
+
+const swirlActionListCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}`;
+
+const SwirlActionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onKeyDown = (event) => {
+            if (event.code === "ArrowDown" || event.code === "ArrowRight") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextItem();
+            }
+            else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusPreviousItem();
+            }
+        };
+        this.onFocusOut = (event) => {
+            if (this.isInsidePopover) {
+                return;
+            }
+            const elementReceivingFocus = event.relatedTarget;
+            const elementLosingFocus = event.target;
+            const losingElementIsListItem = elementLosingFocus?.tagName === "SWIRL-ACTION-LIST-ITEM";
+            const receivingElementIsOutsideActionList = elementReceivingFocus === null ||
+                !this.el.contains(elementReceivingFocus);
+            if (!this.isInsidePopover &&
+                receivingElementIsOutsideActionList &&
+                losingElementIsListItem) {
+                this.container.setAttribute("tabindex", "0");
+            }
+        };
+        this.onFocus = () => {
+            if (this.isInsidePopover) {
+                return;
+            }
+            this.container.removeAttribute("tabindex");
+            const items = this.getItems();
+            const activeItemIndex = this.getActiveItemIndex();
+            if (activeItemIndex > -1) {
+                items[activeItemIndex]?.focus();
+            }
+            else {
+                items[0]?.focus();
+            }
+        };
+    }
+    componentDidLoad() {
+        queueMicrotask(() => {
+            this.isInsidePopover = this.el.closest("swirl-popover") !== null;
+            if (!this.isInsidePopover) {
+                this.container.setAttribute("tabindex", "0");
+            }
+        });
+        this.setSectionSeparator();
+    }
+    getItems() {
+        return utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
+    }
+    focusNextItem() {
+        const items = this.getItems();
+        const activeItemIndex = this.getActiveItemIndex();
+        const newIndex = (activeItemIndex + 1) % items.length;
+        items[newIndex].focus();
+    }
+    focusPreviousItem() {
+        const items = this.getItems();
+        const activeItemIndex = this.getActiveItemIndex();
+        const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
+        items[newIndex]?.focus();
+    }
+    getActiveItemIndex() {
+        const items = this.getItems();
+        const activeElement = utils.getActiveElement();
+        return items.findIndex((item) => item === activeElement ||
+            item === activeElement?.querySelector('[role="menuitem"]'));
+    }
+    setSectionSeparator() {
+        if (!this.el) {
+            return;
+        }
+        const sections = Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((el) => el.isConnected);
+        sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-ACTION-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c6ce9b1fce62151da12fe07c07d338122ceaafa8' }, index.h("div", { key: 'c040c40c62c3037208cd5790dbc83adf3170f18a', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, index.h("slot", { key: '35e4e5306fa2f333554893b292302a18dccd0736', onSlotchange: this.setSectionSeparator }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlActionList.style = swirlActionListCss();
+
+const swirlActionListItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-state-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}`;
+
+const SwirlActionListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.intent = "default";
+        this.size = "m";
+        this.truncateLabel = true;
+        this.mediaQueryUnsubscribe = () => { };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        const suffix = this.suffixEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+        const iconBadge = this.iconBadgeEl?.children[0];
+        iconBadge?.setAttribute("size", "xs");
+        iconBadge?.setAttribute("variant", "dot");
+        if (suffix?.tagName === "SWIRL-TAG")
+            return;
+        suffix?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    render() {
+        const showBadge = Boolean(this.badge);
+        const showIconBadge = Boolean(this.iconBadge);
+        const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
+        const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
+        const className = index$1.classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+        return (index.h(index.Host, { key: 'a8ec31c9d8234291c8379e9b3521f91c176e811e' }, index.h("button", { key: '3018e2f041a84b321b9cef388c85c59afa518b79', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, index.h("slot", { key: '34bebbac07562f76eb29e1b93900019a75143add', name: "avatar" }), this.icon && (index.h("span", { key: '15b82e7eb50d334254f1f6da7d55cecad4706475', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '0c4c8fc78fd13d707cb33dab2309c85f97a4e201', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), index.h("span", { key: 'c3c1a34a74a8dfbec8a82cb3fc797ce03e6ddd55', class: "action-list-item__label-container" }, index.h("span", { key: '9626f3a01f7c95da947b7665e7c97a9542f48cfb', class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && (index.h("span", { key: 'e002430aa42252b68c1550af4d2c75dd744f78ee', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: '1aca4916c0f3fca1601c49db73ae72516520572f', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: 'c355f7123d3d5deba0a72ca3ee1142ef3210d96e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: 'd3d6cac336709a2592f637971f0479587cbf0dee', name: "suffix" }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlActionListItem.style = swirlActionListItemCss();
+
+exports.swirl_action_list = SwirlActionList;
+exports.swirl_action_list_item = SwirlActionListItem;

package/dist/cjs/swirl-app-icon.cjs.entry.js

@@ -36,7 +36,7 @@ const SwirlAppIcon = class {
         const className = index$1.classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (index.h(index.Host, { key: '5b0fa71fbf6761ec97c3418a09ecfbc9ba977bc2' }, index.h("span", { key: '3203bbe5126117c48bab273d044f42dfb331d081', class: className }, showImage && (index.h("img", { key: '9ea7f0f9082697d61685cf808eef9bd03090102e', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (index.h("span", { key: '2f814f5d380125db47105f10da342783ddd6038a', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (index.h(index.Host, { key: 'c58475dbf646a9d006890916e87d83cd9906ee83' }, index.h("span", { key: 'b0d64cfd31d6e716eb2eae9f08140f476b4ad8be', class: className }, showImage && (index.h("img", { key: '0c2ae8bd6f3462a4549c55cd7e3b0ebe70d1e1bc', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (index.h("span", { key: 'f352ef23a3396184e88e41894357e6ddb15301d0', class: "app-icon__icon", innerHTML: this.icon })))));
     }
 };
 SwirlAppIcon.style = swirlAppIconCss();

package/dist/cjs/swirl-app-layout.cjs.entry.js

@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlAppLayoutCss = () => `:host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"body"     "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"       "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(               to right,               rgba(0, 0, 0, 0.05) 0,               rgba(0, 0, 0, 0) 80%,               rgba(0, 0, 0, 0) 100%             );content:""}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"           "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"       "body"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{position:static;z-index:auto;width:25rem;animation:none;box-shadow:none;background-color:var(--s-background-default)}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:"header body sidebar"           "navigation body sidebar"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(40%, 25rem)}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners){border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"         "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"         "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"         "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(.app-layout--sidebar-opening) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:"app-bar"       "banner"       "content"       "bottom-bar"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block;padding-bottom:env(safe-area-inset-bottom, 0)}.app-layout--has-bottom-banner .app-layout__bottom-banner{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"       "content"       "bottom-bar"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom):not(.app-layout--has-bottom-banner) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout--prevent-content-overflow .app-layout__content{overflow:hidden}.app-layout--prevent-content-overflow .app-layout__content-inner{max-height:100%}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;background-color:var(--s-background-default);grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:"app-bar"     "banner"     "content"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;grid-area:content;display:flex;flex-direction:column}.app-layout__content-inner{flex-grow:1}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar-header"     "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;grid-area:sidebar-content}.app-layout__bottom-banner{display:none;position:sticky;right:0;bottom:0;left:0;z-index:5}@media (min-width: 768px){.app-layout--rounded-corners .app-layout__grid{-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8)}.app-layout--rounded-corners .app-layout__header{border-right:none;border-radius:var(--s-border-radius-l) var(--s-border-radius-l) 0 0}.app-layout--rounded-corners .app-layout__navigation{border-right:none;border-radius:0 0 var(--s-border-radius-l) var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__body,.app-layout--rounded-corners .app-layout__sidebar{overflow:hidden;border-radius:var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__sidebar{border-left:none;box-shadow:-12px 0 32px -10px rgba(23, 23, 23, 0.12),         -8px 4px 12px -8px rgba(23, 23, 23, 0.08);background-color:var(--s-surface-overlay-default)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(50%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media print{.app-layout__content{overflow:visible}:host,.app-layout,.app-layout__grid,.app-layout__body{height:auto;overflow:visible}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"           "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}`;
+const swirlAppLayoutCss = () => `:host{--header-height:3.5625rem;--swirl-app-layout-sidebar-width:25rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"body"     "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"       "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(               to right,               rgba(0, 0, 0, 0.05) 0,               rgba(0, 0, 0, 0) 80%,               rgba(0, 0, 0, 0) 100%             );content:""}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(             50%,             var(--swirl-app-layout-sidebar-width)           );grid-template-areas:"body sidebar"           "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"       "body"}@media (min-width: 768px){.app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{position:static;z-index:auto;width:var(--swirl-app-layout-sidebar-width);animation:none;box-shadow:none;background-color:var(--s-background-default)}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr var(--swirl-app-layout-sidebar-width);grid-template-areas:"header body sidebar"           "navigation body sidebar"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(40%, var(--swirl-app-layout-sidebar-width))}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners){border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar{width:var(--swirl-app-layout-sidebar-width)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"         "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"         "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"         "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(.app-layout--sidebar-opening) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:"app-bar"       "banner"       "content"       "bottom-bar"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block;padding-bottom:env(safe-area-inset-bottom, 0)}.app-layout--has-bottom-banner .app-layout__bottom-banner{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"       "content"       "bottom-bar"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom):not(.app-layout--has-bottom-banner) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout--prevent-content-overflow .app-layout__content{overflow:hidden}.app-layout--prevent-content-overflow .app-layout__content-inner{max-height:100%}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;background-color:var(--s-background-default);grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:"app-bar"     "banner"     "content"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;grid-area:content;display:flex;flex-direction:column}.app-layout__content-inner{flex-grow:1}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar-header"     "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;grid-area:sidebar-content}.app-layout__bottom-banner{display:none;position:sticky;right:0;bottom:0;left:0;z-index:5}@media (min-width: 768px){.app-layout--rounded-corners .app-layout__grid{-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8)}.app-layout--rounded-corners .app-layout__header{border-right:none;border-radius:var(--s-border-radius-l) var(--s-border-radius-l) 0 0}.app-layout--rounded-corners .app-layout__navigation{border-right:none;border-radius:0 0 var(--s-border-radius-l) var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__body,.app-layout--rounded-corners .app-layout__sidebar{overflow:hidden;border-radius:var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__sidebar{border-left:none;box-shadow:-12px 0 32px -10px rgba(23, 23, 23, 0.12),         -8px 4px 12px -8px rgba(23, 23, 23, 0.08);background-color:var(--s-surface-overlay-default)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(50%, var(--swirl-app-layout-sidebar-width));border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar{width:var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media print{.app-layout__content{overflow:visible}:host,.app-layout,.app-layout__grid,.app-layout__body{height:auto;overflow:visible}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"           "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr var(--swirl-app-layout-sidebar-width)}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr var(--swirl-app-layout-sidebar-width)}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}to{overflow:hidden;grid-template-columns:1fr 0}}`;
 
 const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
 const SwirlAppLayout = class {
@@ -343,18 +343,24 @@ const SwirlAppLayout = class {
             "app-layout--rounded-corners": this.roundedCorners,
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
+            "app-layout--sidebar-custom-width": Boolean(this.sidebarWidth),
+            "app-layout--sidebar-inline": this.hasSidebar &&
+                !this.hasNavigation &&
+                this.sidebarPositioning !== "overlay",
             "app-layout--sidebar-opening": this.sidebarOpening,
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (index.h(index.Host, { key: 'e8fa3517c20be50f23651a6618d0a654360dd8bb' }, index.h("section", { key: '29bae81c9047360e9a41d1e1b5b4478f18e65900', "aria-labelledby": "app-name", class: className }, index.h("div", { key: '8399a6c2d5885a8abaa3da3183282d6838026bc9', class: "app-layout__grid" }, index.h("header", { key: '7139743470378cd46bc6b01b3d3628d9e4e2fd4d', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, index.h("span", { key: '79057b7fc1b7f969a72e3a5bf2f6f19abd5c1d58', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: '48113ac7f2a57bee6cf7ea639d8f62a9192582cd', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (index.h("span", { key: '7414f2ec88b8369728d76d419b169cb3d936b6f5', class: "app-layout__nav-overlay-toggle" }, index.h("swirl-button", { key: 'cce77f4a0de5288ab8496e2d27aa40952e9997ed', hideLabel: true, icon: this.navExpansionState !== "expanded"
+        return (index.h(index.Host, { key: 'ea5e9984dfa86c576366d2ec73e8649152c14928', style: {
+                "--swirl-app-layout-sidebar-width": this.sidebarWidth,
+            } }, index.h("section", { key: '8480c594adca8240e1f54b80e38b1fbb7e987276', "aria-labelledby": "app-name", class: className }, index.h("div", { key: '85ad1344215084054ffa8703d68bb1de1a4cabef', class: "app-layout__grid" }, index.h("header", { key: 'd47c99f2762bcd6be5a327dbeb10a43fb4568557', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, index.h("span", { key: '3561308f08c40d1450fba3d76d8a4ca9801b42ef', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: '7161e03c5a97a5610b71c1a84396a582c5372d3e', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (index.h("span", { key: '815e76032a56f68a3a29c7209c2f00b84c4266f0', class: "app-layout__nav-overlay-toggle" }, index.h("swirl-button", { key: 'c84849add9c4f76a2f226a5c050bb0540f7df07b', hideLabel: true, icon: this.navExpansionState !== "expanded"
                 ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
-                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: 'e1a586370b0b04dc4d100fcb895e2ba371dae64e', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: '0b77ac2c49a9db06cc3f7792d06dd269945c58da', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: 'd2e7989615352c42dce6005da07dbaed0c6d99ee', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (index.h("span", { key: 'd6655e944086aa11f95c4cab4da3ea9ef827cc76', class: "app-layout__navigation-controls" }, index.h("slot", { key: '6c7d9dbf8b2707cdcb01bffaff8ce9f6059389b4', name: "navigation-controls" })))), index.h("nav", { key: '111e910171f0d799ac8e3eb5fd6fd5e7c7f832a6', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: '4f1931413fb83b0667d07e75f700abf06335230e', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: '8188874ac49378f4de9c49ee84f70a9b6e111e37', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: '889b1fcacbf88a72710cd36af7c54a7728df089f', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (index.h("span", { key: 'd0d371a1e080e10dcda1d29204a117798730eee8', class: "app-layout__navigation-controls" }, index.h("slot", { key: '3bca7780bb2bfe59471467de001f849b9b232662', name: "navigation-controls" })))), index.h("nav", { key: 'e612f7874dc250d88f4c554c1200eb07c7f97f41', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
                 this.collapsibleNavigation &&
-                this.navExpansionState === "collapsed" }, index.h("slot", { key: '580dd1a0a999a77195279c7cc887585857080276', name: "navigation" })), index.h("section", { key: 'f77cb25f6be2b64d7213ff7f917b5f6869880b9f', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '06467a7005a8bccfa66bd662a28e9aea4771d27a', class: "app-layout__app-bar" }, index.h("span", { key: 'a2f2d531d1b7f304d9f3fa5159dbea8f78b45553', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: '4e83761fc85b17c739abc1d8c7158d5cd362706f', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '1c257404a9cfd84debbd0486f8f17b2d7916839c', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: 'f67661832bb9ed96006e13f4cf998cb395adcce5', hideLabel: true, icon: this.transitionStyle === "dialog"
+                this.navExpansionState === "collapsed" }, index.h("slot", { key: '913cb8b7bc4cbc05d7fe30e5651937a5d8ac7258', name: "navigation" })), index.h("section", { key: 'ae73f4764e10c73b404601a765f735fb0c2b3c51', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '0179719859439f3d433486d36ad5eb87cff76e93', class: "app-layout__app-bar" }, index.h("span", { key: 'c3f902620abf9db0369184ee9dba7e61bbde8ecb', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: '520cbff25beeacac88c63ef52f1169fc1cd82bac', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '2c237ec3f04ce5da7d571ed4aa3e69c42eeb19b2', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: 'ab1cc889450248c3a2555a46558d8a8d1d3e6e69', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
-            this.navExpansionState !== "expanded" && (index.h("span", { key: '39d626d775997e9bab9e9ae3946084d73d715583', class: "app-layout__nav-expansion-toggle" }, index.h("swirl-button", { key: '7e967c7d6314707a913b461271e4908ca80d70a7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), index.h("span", { key: '76e4be74a94b18c027c33140736c36c98e7024e3', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '81df9b04bc26d1fb85f8160c55cc2df72aafedfa', name: "custom-app-bar-back-button" })), index.h("div", { key: '955ccd31ee748b0f9bf03e573f920884a402b7f4', class: "app-layout__app-bar-content" }, index.h("slot", { key: '16deec03db91173bf75664f2fbc1ceac7a30004f', name: "app-bar" })), index.h("div", { key: 'bce238fc1df86c571e663419d8f3faeeffa36982', class: "app-layout__app-bar-controls" }, index.h("slot", { key: '540b1410a2cf45d6b04b1ae7ebd8c1f92b9edeaa', name: "app-bar-controls" })))), index.h("div", { key: '110496d5b1001a4cfd1510c5b01e6ba108d5de17', class: "app-layout__banner" }, index.h("slot", { key: 'd899e047a077a3ea4638311913623cc6ef8d3112', name: "banner" })), index.h("div", { key: '137484f06a5e4fea74ab0f5febc30b327c500710', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("div", { key: '3854ac4b1108ec4083c05b6d989b899e5b4bd999', class: "app-layout__content-inner" }, index.h("slot", { key: '68d9a207834dcf01164545df8d813d817b1fcad0', name: "content" })), index.h("div", { key: 'e7c2fd5cc7802e3d4cfa83fc54e1b58587fc05b7', class: "app-layout__bottom-banner" }, index.h("slot", { key: '655ad74d80da4bde2d8e1c5f76e5276f8debbf67', name: "bottom-banner" }))), index.h("div", { key: '6fa13e005398621057950af22593851bc5bb40bb', class: "app-layout__bottom-bar" }, index.h("slot", { key: '7f3c36cb64f027d9db9ed6f6343242fdccffc313', name: "bottom-bar" }))), index.h("aside", { key: '7269ec313d3bcc3cd1dec5abe8cf81b440987e8f', class: "app-layout__sidebar" }, index.h("header", { key: '63ba307a1ee8755ed86cfdf73eda6cfe38b4b8ac', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: '4027a4f20d4b2703422547bbbdd81221b8816c85', name: "custom-sidebar-header" })), index.h("header", { key: 'f853e2f2fc57e27a9d14265bb4abb948c198e8ea', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: 'a5afb72e7cf946c9078732708d02ab26eae5c955', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), index.h("swirl-heading", { key: '797791edbae180dd39835a407479f56b824f2733', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: '1d1a0a76937293430f572b6c5930e010d70102fd', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: 'dc8ff45e81cbd1be539e851d2da00042b6d3ce26', name: "sidebar" }))), index.h("span", { key: 'e11c29160fcf21b6212d28e55a8092cc8bb36931', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: '15eb5b55036b38780182689b7d11f084c9425038', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '50383a0c6b5cb438fd606f2bba6ad0184eb2a953', name: "floating-action-button" }))))));
+            this.navExpansionState !== "expanded" && (index.h("span", { key: '39640ad1337b38b65cb04e209298964217dc5b97', class: "app-layout__nav-expansion-toggle" }, index.h("swirl-button", { key: '63be47f8bdefdc5335e975b8288f4252e388676a', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), index.h("span", { key: 'a73ca0324d442a9fd2f76f28fe422070ebfd3392', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '6b168560d179661b6ccbbaf84fde150f9445c33a', name: "custom-app-bar-back-button" })), index.h("div", { key: 'ff9df5292be7e45fa73a6aa3fad3d160946c16e8', class: "app-layout__app-bar-content" }, index.h("slot", { key: 'f0d622141406b628d83722090b0b2a30e1210ac5', name: "app-bar" })), index.h("div", { key: 'ae0d9fa3eeb8acad36e2fa2890a39debaf7858c1', class: "app-layout__app-bar-controls" }, index.h("slot", { key: '7a645cda89b0e3224bed75a33b4a11949e2ccdf7', name: "app-bar-controls" })))), index.h("div", { key: '2ec277c97e569e907f95c5719fed9103fa2f69f2', class: "app-layout__banner" }, index.h("slot", { key: '7c3fa21988e8c6aa5a5ce19461a9c493e22520a0', name: "banner" })), index.h("div", { key: '2d818bf92b9f02f6339bf04e9305b543a724fc6a', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("div", { key: '42fa90a807337bdffeaea454f1d1abc0e8f26c01', class: "app-layout__content-inner" }, index.h("slot", { key: 'a4561df256b12e7893e3ee3832b75dfa15b06d5b', name: "content" })), index.h("div", { key: 'd20801097b89fa70739fed10c35b8960fc93ff95', class: "app-layout__bottom-banner" }, index.h("slot", { key: '99b0849ace8d3d1c128b744f96bbd4587d77fd52', name: "bottom-banner" }))), index.h("div", { key: 'dfca52dba0807f59010d6820a18b45ad4ed43359', class: "app-layout__bottom-bar" }, index.h("slot", { key: '1cbf5067eba3dd9cedd53debbf0c9613f2d95af1', name: "bottom-bar" }))), index.h("aside", { key: 'b9a3cb541c078c17f55935ac703f2bd5a63d26f1', class: "app-layout__sidebar" }, index.h("header", { key: '658023fbfd242bcfb41ca7fb1b1702f91eecc273', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: 'd1b4f31b3a65f6906737c4e5cb8d623967ff3756', name: "custom-sidebar-header" })), index.h("header", { key: 'a0613856d435c7ab946838da48bea242f54b9076', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: 'f097dddd068842235cf9d59f6f367419b5d1fb90', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), index.h("swirl-heading", { key: '582ddba3782037f96a6b76b661348e5357a5579f', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: 'fd66588b9c671f934e7a49e16c60e5c707fd38eb', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: '9b6f8493ce6d38cf25ff0446b90c4feba5de166c', name: "sidebar" }))), index.h("span", { key: '19c8eb89279ef4932cc44c60228301f20d0e1457', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: '44ff78e3f1de73f50e64565e78edec285c75aab7', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '03c26b21b33b29619055763717d6c7fb3d4ac288', name: "floating-action-button" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-button.cjs.entry.js

@@ -81,13 +81,13 @@ const SwirlButton = class {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (index.h(index.Host, { key: 'ba6372237afb1a000b5cb0805e12e1d998ba608e', style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { key: 'c22f997d83b7bcb16e176addf039c6e583f88343', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
+        return (index.h(index.Host, { key: '23af0e8e19b77a5029052dc40dccf50ebb65333f', style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { key: 'd0b2fb060f9bfc94405c2975cacbcea51ca36a3d', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
                 cursor: !this.disabled && this.cursor !== "pointer"
                     ? this.cursor
                     : undefined,
                 fontSize: this.inheritFontSize ? "inherit" : undefined,
                 lineHeight: this.inheritFontSize ? "inherit" : undefined,
-            } }, Boolean(this.icon) && (index.h("span", { key: 'eacadeb82d465ef4ed35ed57cbb332e6d36e21cb', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: 'affe93319cadf0fbc9438f1dd6f4df19a592d9e4', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: '2251909072a2c524cb15016a0c63848c4e0640cf', name: "icon" }))), !hideLabel && index.h("span", { key: 'fbfd536b6a466286e138385e6374e4553543f5a2', class: "button__label" }, this.label), hasTag && (index.h("span", { key: '707dc78718fdc32cb802992f1705d25e72ba4162', class: "button__tag" }, index.h("slot", { key: 'bd3d1c54238decfcdb54c28859759efae62df996', name: "tag" }))), hasTrailingSlot && (index.h("div", { key: 'aea035d7b953e7e5e471859cf0a7e73e26f0a2ad', class: "button__trailing-slot" }, index.h("slot", { key: '9c4278315c6f0d0ac166da345ccadd56d4b77ecc', name: "trailing" }))))));
+            } }, Boolean(this.icon) && (index.h("span", { key: 'a4196f5355f8e0f69c13cae46968ef4a1bb163e3', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: '2aed20db5403a6443399b4d9fea887f6f5871b05', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: '899c93e098532d74c7c8a9a3137cdc6a949d20e9', name: "icon" }))), !hideLabel && index.h("span", { key: '9d65045a5cdee4a2e68bfde5c22b6baab468bd89', class: "button__label" }, this.label), hasTag && (index.h("span", { key: 'cf77726d3c75a76380db368070d5f77f05327cf3', class: "button__tag" }, index.h("slot", { key: '5d86b0fecca7e9215fd59a13e37f636d6d030ba6', name: "tag" }))), hasTrailingSlot && (index.h("div", { key: '6cc13ae1748655189f7e9d968171e65f59df5a0a', class: "button__trailing-slot" }, index.h("slot", { key: '705986f1edb1fd0b7aeb8ec0e83b2d2c77c33bf0', name: "trailing" }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-carousel-slide.cjs.entry.js

@@ -14,11 +14,11 @@ const SwirlCarouselSlide = class {
         const className = index$1.classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (index.h(index.Host, { key: '75b679b553d593388edbc6329be661d567992297', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (index.h(index.Host, { key: '3dee76aae503080b212ab304b1b2d4bc11c3fc0c', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
                 aspectRatio: this.aspectRatio,
                 flexBasis: this.width,
                 minHeight: this.minHeight,
-            }, tabIndex: 0 }, index.h("slot", { key: 'aabaaae69d01ceb3a7a9e929f77c3a7de2d63d0e' })));
+            }, tabIndex: 0 }, index.h("slot", { key: '18395f1c057a4b8adfea8f96599fccdaeade58ab' })));
     }
 };
 SwirlCarouselSlide.style = swirlCarouselSlideCss();

package/dist/cjs/swirl-color-input.cjs.entry.js

@@ -446,11 +446,11 @@ const SwirlColorInput = class {
         const className = index$1.classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '7fb72a7d241b4371a727c8028a3e55325f133732' }, index.h("div", { key: '77b6807ed3d48dc017aea25e6fd33b88f8d58e20', class: className }, index.h("input", { key: 'e0f4baaaaf1399b7b8d9a02f7f7fa6f37d9b0427', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), index.h("swirl-popover-trigger", { key: '51b7b183c7d2e5dbd07ef0810b3d94b474e51fa9', swirlPopover: this.pickerId }, index.h("button", { key: '3a15ab5f469b4498e56596195849a7101eaaa4d1', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (index.h(index.Host, { key: '8faa0ba1fdf6d55cd5e9ff8d1cb42738d586a0eb' }, index.h("div", { key: 'fbc9200a7318669ace362f25510124ced61b418b', class: className }, index.h("input", { key: '7837f8b509251caf79d46a6341cb0e43772a246b', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), index.h("swirl-popover-trigger", { key: '256e94f88ee8b0ce91d3c22bd5236ab7aa2be07e', swirlPopover: this.pickerId }, index.h("button", { key: '1b0b3b76331731d3c1af0d73ccb6dde06326184b', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), index.h("swirl-popover", { key: 'fed520dfbe8789e62136bee0914c99c697201239', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, index.h("swirl-box", { key: 'a77e5a8205fdfd16b1f5e7792e35d49fd5a6987d', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, index.h("hex-color-picker", { key: '23b7426ee1d4a9bccf311ca46621c09d779eeee4', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), index.h("swirl-popover", { key: 'd93b43a8b6d680d7d52743dde653a8333d67d514', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, index.h("swirl-box", { key: '3189ed30ad815e64b265e1f3c3b4464e5799b7ca', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, index.h("hex-color-picker", { key: 'e2cd1e63d998d906b824c5d0c8e4a6eaedfe23f3', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": [{