@getflip/swirl-components 0.339.0 → 0.340.1

package/dist/components/sortable.esm.js

@@ -319,10 +319,8 @@ function isScrolledPast(el, elSide, parentSide) {
   while (parent) {
     var parentSideVal = getRect(parent)[parentSide],
       visible = void 0;
-    if (parentSide === 'top' || parentSide === 'left') {
+    {
       visible = elSideVal >= parentSideVal;
-    } else {
-      visible = elSideVal <= parentSideVal;
     }
     if (!visible) return parent;
     if (parent === getWindowScrollingElement()) break;

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

@@ -5,7 +5,6 @@ import { d as defineCustomElement$2 } from './swirl-text2.js';
 import { v as v4 } from './v4.js';
 
 const swirlAccordionItemCss = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}";
-const SwirlAccordionItemStyle0 = swirlAccordionItemCss;
 
 const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordionItem extends HTMLElement {
     constructor() {
@@ -13,17 +12,13 @@ const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordi
         this.__registerHost();
         this.__attachShadow();
         this.expansionChange = createEvent(this, "expansionChange", 7);
+        this.headingLevel = 2;
+        this.itemId = v4();
+        this.expanded = false;
         this.headingId = `${v4()}-heading`;
         this.onHeadingClick = () => {
             this.toggle();
         };
-        this.description = undefined;
-        this.disabled = undefined;
-        this.heading = undefined;
-        this.headingLevel = 2;
-        this.initiallyOpen = undefined;
-        this.itemId = v4();
-        this.expanded = false;
     }
     componentWillLoad() {
         this.accordion = this.el.closest("swirl-accordion");
@@ -71,7 +66,7 @@ const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordi
         return (h(Host, { key: 'ff99365f885d7f45aa5929618f20be8eaab88699' }, h("div", { key: 'eaa608a73691ff808b38466e9385f4dc2db45f17', class: className }, h(HeadingTag, { key: '0859f44b1a644b65de4f05b0e8a003c549c6c87c', class: "accordion-item__heading" }, h("button", { key: '4b37ddb0a99d7c7891e49febec534bf651df185b', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '44cdbe5d8144e96c6c03bfd08affc05b313f68ab', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '14a5142b0af187721cee995b0d80bc6c59a00cf9', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'd6662c18f5e78cb4acaf079aab3d98d2472c0cbd', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '5115019890131bf59d8a1d7e0013b747565ad675', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '9433218077aa690f5e5256144c75c5cd46afbdb5', glyph: "expand-more", size: 20 }))))), h("div", { key: '12cd261b506a0f80821f4f5e0be1ebc4735206a8', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '2896b72a4b1ffcd2dc1267a20dbca1121660d8f4' })))));
     }
     get el() { return this; }
-    static get style() { return SwirlAccordionItemStyle0; }
+    static get style() { return swirlAccordionItemCss; }
 }, [1, "swirl-accordion-item", {
         "description": [1],
         "disabled": [4],

package/dist/components/swirl-accordion.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 const swirlAccordionCss = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}";
-const SwirlAccordionStyle0 = swirlAccordionCss;
 
 const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion extends HTMLElement {
     constructor() {
@@ -49,7 +48,7 @@ const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion e
         return (h(Host, { key: '1e3402cefdf500694756336f2175a64531352c0b' }, h("slot", { key: '276c1bfed4af0c0002e746b8075433fefd627f60' })));
     }
     get el() { return this; }
-    static get style() { return SwirlAccordionStyle0; }
+    static get style() { return swirlAccordionCss; }
 }, [1, "swirl-accordion", {
         "collapseItem": [64],
         "expandItem": [64]

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

@@ -3,25 +3,15 @@ import { c as classNames } from './index2.js';
 import { D as DesktopMediaQuery } from './media-query.service.js';
 
 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:var(--s-surface-overlay-default);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-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-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-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);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 SwirlActionListItemStyle0 = swirlActionListItemCss;
 
 const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionListItem extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.mediaQueryUnsubscribe = () => { };
-        this.badge = undefined;
-        this.disabled = undefined;
-        this.description = undefined;
-        this.icon = undefined;
-        this.iconBadge = undefined;
         this.intent = "default";
-        this.label = undefined;
         this.size = "m";
-        this.swirlAriaExpanded = undefined;
-        this.swirlAriaHaspopup = undefined;
-        this.suffix = undefined;
+        this.mediaQueryUnsubscribe = () => { };
     }
     componentDidLoad() {
         this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
@@ -51,7 +41,7 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         return (h(Host, { key: '6e0ba3475bbabc4b456d23070aada4ad73a7bef7' }, h("button", { key: '568753980452f56f6305573cfacc1540728f8a64', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '90c23d6a829bdb2903ff76eda7852101b174b198', name: "avatar" }), this.icon && (h("span", { key: '1855b294b64760c5399cfb9b371715399ed2e985', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'a55df1b640cb5c5109dc632c39dca728fce290da', class: "action-list-item__label-container" }, h("span", { key: 'ae479a05bbfd854b8472d3977d7489df73e611cb', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: '959761897cc5c8d4d2474795460b66bb5d22475b', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: 'cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '88754ec73e17680ebdc939f42df996dace73fdce', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: '37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac', name: "suffix" }))))));
     }
     get el() { return this; }
-    static get style() { return SwirlActionListItemStyle0; }
+    static get style() { return swirlActionListItemCss; }
 }, [1, "swirl-action-list-item", {
         "badge": [1],
         "disabled": [4],

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

@@ -3,14 +3,12 @@ import { d as defineCustomElement$3 } from './swirl-separator2.js';
 import { d as defineCustomElement$2 } from './swirl-stack2.js';
 
 const swirlActionListSectionCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}";
-const SwirlActionListSectionStyle0 = swirlActionListSectionCss;
 
 const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlActionListSection extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.label = undefined;
         this.separatorSpacing = "4";
         this.spacing = "0";
         this.hasSeparator = false;
@@ -18,7 +16,7 @@ const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAct
     render() {
         return (h(Host, { key: 'd2cbcea47ca9b21308813a6a2285b22f6aa4f9c1' }, this.hasSeparator && (h("swirl-separator", { key: 'ebe1cc99d7728c3cb0ccf9dcc9bc3afad0f40c1e', spacing: this.separatorSpacing })), h("div", { key: 'd310828c525252b441681764007b7c2296e22fc7', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '137d9527749b6f47a23fc48d01582f52784878c6', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '136ad427fafed3bdad8234d16875ed138ecd668c', spacing: this.spacing, align: "stretch" }, h("slot", { key: '6ff03eb4db0eae90bedc79fe1f887b3416733125' })))));
     }
-    static get style() { return SwirlActionListSectionStyle0; }
+    static get style() { return swirlActionListSectionCss; }
 }, [1, "swirl-action-list-section", {
         "label": [1],
         "separatorSpacing": [1, "separator-spacing"],

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

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { q as querySelectorAllDeep, j as getActiveElement } from './utils.js';
+import { q as querySelectorAllDeep, k as getActiveElement } from './utils.js';
 
 const swirlActionListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
-const SwirlActionListStyle0 = swirlActionListCss;
 
 const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList extends HTMLElement {
     constructor() {
@@ -48,7 +47,6 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
                 items[0]?.focus();
             }
         };
-        this.isInsidePopover = undefined;
     }
     componentDidLoad() {
         queueMicrotask(() => {
@@ -97,7 +95,7 @@ const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList e
         return (h(Host, { key: '2795dbab510dbc1500d60485aa861452db9e5228' }, h("div", { key: 'a97272dcb51640f5b3577c0fae90cb76db6fc5ee', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'e93480d034cc5db6f0e6915b5b6e9af655ef65be', onSlotchange: this.setSectionSeparator }))));
     }
     get el() { return this; }
-    static get style() { return SwirlActionListStyle0; }
+    static get style() { return swirlActionListCss; }
 }, [1, "swirl-action-list", {
         "isInsidePopover": [32]
     }]);

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

@@ -3,7 +3,6 @@ import { c as classNames } from './index2.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
 const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
-const SwirlAppBarStyle0 = swirlAppBarCss;
 
 const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends HTMLElement {
     constructor() {
@@ -14,6 +13,13 @@ const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends
         this.closeButtonClick = createEvent(this, "closeButtonClick", 7);
         this.stepUpButtonClick = createEvent(this, "stepUpButtonClick", 7);
         this.stepDownButtonClick = createEvent(this, "stepDownButtonClick", 7);
+        this.backButtonLabel = "Go back";
+        this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
+        this.closeButtonLabel = "Close";
+        this.paddingInlineEnd = "16";
+        this.paddingInlineStart = "16";
+        this.stepUpButtonLabel = "Previous item";
+        this.stepDownButtonLabel = "Next item";
         this.onBackButtonClick = (event) => {
             this.backButtonClick.emit(event);
         };
@@ -26,17 +32,6 @@ const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends
         this.onStepDownButtonClick = (event) => {
             this.stepDownButtonClick.emit(event);
         };
-        this.backButtonLabel = "Go back";
-        this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
-        this.closeButtonLabel = "Close";
-        this.paddingInlineEnd = "16";
-        this.paddingInlineStart = "16";
-        this.stepUpButtonLabel = "Previous item";
-        this.stepDownButtonLabel = "Next item";
-        this.showBackButton = undefined;
-        this.showCloseButton = undefined;
-        this.showStepperControls = undefined;
-        this.hasCta = undefined;
     }
     componentWillLoad() {
         this.mutationObserver = new MutationObserver(() => {
@@ -67,7 +62,7 @@ const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends
         return (h(Host, { key: 'd600deeb8a687bb4845149bcf2bad842f5ecf1f3' }, h("div", { key: '1c662e5e543ccec7fa1aa92721e7e3c43fbf6e4f', class: className, style: styles }, showLeftControls && (h("div", { key: '1360ad530e65281d1756d3857020dc745d103695', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'd1abed9606942b05ca70dc6a334b81050c4c1fe6', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: 'fe72d1498779c96c01893eb7befdbccaa537b947', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '8dcb78f5b58bf6bc641c456cc8a58f9fb001bf09', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '70d556ed3057812ba3bae94a3137f50475971b5d', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'ff0f84da0dc691e84d549c269efab64ad4052c58', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ba47ee06389bd22569408c48b6bdcfc6fdd1d039', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '48ec84b6d54b8a2bc480467ae6b7556f8d2f6756', class: "app-bar__cta" }, h("slot", { key: '2303f169c07f38410740fd75ef788944ee23cdd1', name: "cta" })), h("div", { key: 'a03346495a15b78da499f5e5dc584e140ddb3a85', class: "app-bar__heading" }, h("slot", { key: 'dedbfa247ba4d1c31f04aa670f11499218fe9b4e', name: "heading" })), h("div", { key: 'cae7eea7759c04cffc983d4dd525b6bf87b8ee8e', class: "app-bar__center-controls" }, h("slot", { key: 'fd94d148cbedad08013203e9aba179165c7afedb', name: "center-controls" })), h("div", { key: '16e9c5e550774658b7b6ea93ff695564f6d7e65e', class: "app-bar__right-controls" }, h("slot", { key: '218d119f1d046ceff9a243c155a00dd730b76508', name: "right-controls" })))));
     }
     get el() { return this; }
-    static get style() { return SwirlAppBarStyle0; }
+    static get style() { return swirlAppBarCss; }
 }, [1, "swirl-app-bar", {
         "backButtonLabel": [1, "back-button-label"],
         "closeButtonIcon": [1, "close-button-icon"],

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classNames } from './index2.js';
 
 const swirlAppIconCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}";
-const SwirlAppIconStyle0 = swirlAppIconCss;
 
 const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon extends HTMLElement {
     constructor() {
@@ -24,9 +23,6 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
                 this.imgEl.addEventListener("error", this.setImageUnavailable);
             }
         };
-        this.icon = undefined;
-        this.src = undefined;
-        this.imageAvailable = undefined;
     }
     disconnectedCallback() {
         this.imgEl?.removeEventListener("load", this.setImageAvailable);
@@ -42,7 +38,7 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
         });
         return (h(Host, { key: '848453ae9e48cab379fc70a9e1bb0d9566fee795' }, h("span", { key: 'd2a526c13e4a86ec2edbcc5bb763052792627b55', class: className }, showImage && (h("img", { key: 'f321b68b25a3ab039f666099269383908a62d08c', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '2dc6f4d5afd471b8dfb39f414dc1416036480005', class: "app-icon__icon", innerHTML: this.icon })))));
     }
-    static get style() { return SwirlAppIconStyle0; }
+    static get style() { return swirlAppIconCss; }
 }, [1, "swirl-app-icon", {
         "icon": [1],
         "src": [1],

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

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 import { D as DesktopMediaQuery } from './media-query.service.js';
-import { d as debounce, i as isMobileViewport, n as prefersReducedMotion } from './utils.js';
+import { d as debounce, i as isMobileViewport, p as prefersReducedMotion } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 import { d as defineCustomElement$1 } from './swirl-heading2.js';
 
 const swirlAppLayoutCss = ":host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(\n              to right,\n              rgba(0, 0, 0, 0.05) 0,\n              rgba(0, 0, 0, 0) 80%,\n              rgba(0, 0, 0, 0) 100%\n            );content:\"\"}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):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 .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n      \"banner\"\n      \"content\"\n      \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"\n      \"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) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}";
-const SwirlAppLayoutStyle0 = swirlAppLayoutCss;
 
 const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
 const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout extends HTMLElement {
@@ -19,6 +18,28 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         this.navigationBackButtonClick = createEvent(this, "navigationBackButtonClick", 7);
         this.navigationExpansionStateChange = createEvent(this, "navigationExpansionStateChange", 7);
         this.sidebarToggle = createEvent(this, "sidebarToggle", 7);
+        this.backToNavigationViewButtonLabel = "Back to navigation";
+        this.navigationBackButtonLabel = "Go back";
+        this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
+        this.navigationToggleLabel = "Toggle navigation";
+        this.navigationOverlayLabel = "Show navigation";
+        this.sidebarCloseButtonLabel = "Close sidebar";
+        this.transitionStyle = "slides";
+        this.contentScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+            scrolledToBottom: false,
+        };
+        this.mobileView = "navigation";
+        this.navScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
+        this.navExpansionState = "expanded";
+        this.sidebarScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
         this.mediaQueryUnsubscribe = () => { };
         this.onBackToNavigationViewButtonClick = () => {
             this.changeMobileView("navigation");
@@ -52,46 +73,6 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
             event.stopPropagation();
             this.setCollapsibleNavigationState("overlayed");
         };
-        this.appName = undefined;
-        this.backToNavigationViewButtonLabel = "Back to navigation";
-        this.collapsibleNavigation = undefined;
-        this.ctaIcon = undefined;
-        this.ctaLabel = undefined;
-        this.hasNavigation = undefined;
-        this.hideAppBar = undefined;
-        this.initialMobileView = undefined;
-        this.navigationBackButtonLabel = "Go back";
-        this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
-        this.navigationToggleLabel = "Toggle navigation";
-        this.navigationOverlayLabel = "Show navigation";
-        this.navigationLabel = undefined;
-        this.showNavigationBackButton = undefined;
-        this.sidebarCloseButtonLabel = "Close sidebar";
-        this.sidebarHeading = undefined;
-        this.transitionStyle = "slides";
-        this.contentScrollState = {
-            scrollable: false,
-            scrolledToTop: false,
-            scrolledToBottom: false,
-        };
-        this.hasCustomAppBarBackButton = undefined;
-        this.hasSidebar = undefined;
-        this.isDesktop = undefined;
-        this.mobileView = "navigation";
-        this.navScrollState = {
-            scrollable: false,
-            scrolledToTop: false,
-        };
-        this.navExpansionState = "expanded";
-        this.sidebarActive = undefined;
-        this.sidebarClosing = undefined;
-        this.sidebarOpening = undefined;
-        this.sidebarScrollState = {
-            scrollable: false,
-            scrolledToTop: false,
-        };
-        this.transitioningFrom = undefined;
-        this.transitioningTo = undefined;
     }
     componentWillLoad() {
         if (this.initialMobileView) {
@@ -361,7 +342,7 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
     static get watchers() { return {
         "mobileView": ["watchMobileView"]
     }; }
-    static get style() { return SwirlAppLayoutStyle0; }
+    static get style() { return swirlAppLayoutCss; }
 }, [1, "swirl-app-layout", {
         "appName": [1, "app-name"],
         "backToNavigationViewButtonLabel": [1, "back-to-navigation-view-button-label"],

package/dist/components/swirl-autocomplete.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm.js';
+import { N, P, D } from './floating-ui.dom.browser.min.js';
 import { c as classNames } from './index2.js';
 import { d as debounce } from './utils.js';
 import { d as defineCustomElement$h } from './swirl-icon-cancel2.js';
@@ -20,13 +20,19 @@ import { d as defineCustomElement$3 } from './swirl-text-input2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
 const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
-const SwirlAutocompleteStyle0 = swirlAutocompleteCss;
 
 const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomplete extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.valueChange = createEvent(this, "valueChange", 7);
+        this.clearable = true;
+        this.clearButtonLabel = "Clear input";
+        this.generateSuggestions = async () => [];
+        this.menuLabel = "Suggestions";
+        this.active = false;
+        this.loading = false;
+        this.suggestions = [];
         this.onChange = (event) => {
             event.stopPropagation();
             this.updateTerm(event);
@@ -116,26 +122,6 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
                     ?.focus();
             }
         };
-        this.autoSelect = undefined;
-        this.clearable = true;
-        this.clearButtonLabel = "Clear input";
-        this.disabled = undefined;
-        this.generateSuggestions = async () => [];
-        this.inline = undefined;
-        this.invalid = undefined;
-        this.maxLength = undefined;
-        this.menuLabel = "Suggestions";
-        this.mode = undefined;
-        this.multiSelect = undefined;
-        this.placeholder = undefined;
-        this.required = undefined;
-        this.spellCheck = undefined;
-        this.swirlAriaDescribedby = undefined;
-        this.value = undefined;
-        this.active = false;
-        this.loading = false;
-        this.position = undefined;
-        this.suggestions = [];
     }
     componentWillLoad() {
         const index = document.querySelectorAll("swirl-datepicker").length;
@@ -180,7 +166,7 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
             if (this.disableAutoUpdate) {
                 this.disableAutoUpdate();
             }
-            this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
+            this.disableAutoUpdate = N(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
             this.listboxContainerEl.scrollTop = 0;
             this.updateSuggestions(this.inputEl.querySelector("input").value);
         });
@@ -189,8 +175,8 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
         if (!Boolean(this.listboxContainerEl)) {
             return;
         }
-        this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
-            middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
+        this.position = await P(this.inputEl, this.listboxContainerEl, {
+            middleware: [D({ crossAxis: -16, mainAxis: 16 })],
             placement: "bottom-start",
             strategy: "fixed",
         });
@@ -241,13 +227,13 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
     static get watchers() { return {
         "multiSelect": ["watchMultiSelect"]
     }; }
-    static get style() { return SwirlAutocompleteStyle0; }
+    static get style() { return swirlAutocompleteCss; }
 }, [2, "swirl-autocomplete", {
         "autoSelect": [4, "auto-select"],
         "clearable": [4],
         "clearButtonLabel": [1, "clear-button-label"],
         "disabled": [4],
-        "generateSuggestions": [1040],
+        "generateSuggestions": [1040, "generate-suggestions"],
         "inline": [4],
         "invalid": [4],
         "maxLength": [2, "max-length"],

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

@@ -2,14 +2,12 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classNames } from './index2.js';
 
 const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4));display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
-const SwirlAvatarGroupStyle0 = swirlAvatarGroupCss;
 
 const SwirlAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatarGroup extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.badge = undefined;
     }
     componentDidLoad() {
         this.forceBadgeProps();
@@ -31,7 +29,7 @@ const SwirlAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatarGro
         const badgeClassName = classNames("avatar-group__badge");
         return (h(Host, { key: '842dca2d37cde4df5d94989de83b34e162e4729d' }, h("div", { key: 'c8960b16873430bcb9fc6d122866f1fba879640a', class: className, role: "group" }, h("slot", { key: 'b880de80e28701cc12ff07891726df3be0b8312d' }), this.badge && (h("span", { key: 'c4f13d3a94fbbad4e281d15c9a2bfe6879fc192b', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
-    static get style() { return SwirlAvatarGroupStyle0; }
+    static get style() { return swirlAvatarGroupCss; }
 }, [1, "swirl-avatar-group", {
         "badge": [1]
     }]);

package/dist/components/swirl-avatar.js

@@ -3,7 +3,6 @@ import { c as classNames } from './index2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-person2.js';
 
 const swirlAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";
-const SwirlAvatarStyle0 = swirlAvatarCss;
 
 const swirlAvatarSizeMappings = {
     "3xs": 20,
@@ -22,6 +21,16 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
         this.__attachShadow();
         this.imageError = createEvent(this, "imageError", 7);
         this.imageLoad = createEvent(this, "imageLoad", 7);
+        this.badgePosition = "bottom";
+        this.color = "kiwi";
+        this.interactive = false;
+        this.showLabel = false;
+        this.size = "m";
+        this.toolPosition = "bottom";
+        this.variant = "round";
+        this.loadingError = false;
+        this.loaded = false;
+        this.inViewport = false;
         this.componentLoaded = false;
         this.onImageElementUpdate = (el) => {
             this.imgEl?.removeEventListener("load", this.setImageAvailable);
@@ -63,23 +72,6 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
                 this.element.click();
             }
         };
-        this.badge = undefined;
-        this.badgePosition = "bottom";
-        this.color = "kiwi";
-        this.icon = undefined;
-        this.initials = undefined;
-        this.interactive = false;
-        this.label = undefined;
-        this.loading = undefined;
-        this.showLabel = false;
-        this.size = "m";
-        this.src = undefined;
-        this.toolPosition = "bottom";
-        this.variant = "round";
-        this.loadingError = false;
-        this.loaded = false;
-        this.imageAvailable = undefined;
-        this.inViewport = false;
     }
     componentDidLoad() {
         this.setupIntersectionObserver();
@@ -133,7 +125,7 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
     static get watchers() { return {
         "src": ["watchSrcProp"]
     }; }
-    static get style() { return SwirlAvatarStyle0; }
+    static get style() { return swirlAvatarCss; }
 }, [1, "swirl-avatar", {
         "badge": [1],
         "badgePosition": [1, "badge-position"],