@getflip/swirl-components-react 0.12.0 → 0.13.1

package/dist/stencil-generated/index.d.ts

@@ -148,6 +148,8 @@ export declare const SwirlResourceListItem: import("react").ForwardRefExoticComp
 export declare const SwirlSearch: import("react").ForwardRefExoticComponent<JSX.SwirlSearch & Omit<import("react").HTMLAttributes<HTMLSwirlSearchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSearchElement>>;
 export declare const SwirlSelect: import("react").ForwardRefExoticComponent<JSX.SwirlSelect & Omit<import("react").HTMLAttributes<HTMLSwirlSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSelectElement>>;
 export declare const SwirlSeparator: import("react").ForwardRefExoticComponent<JSX.SwirlSeparator & Omit<import("react").HTMLAttributes<HTMLSwirlSeparatorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSeparatorElement>>;
+export declare const SwirlSkeletonBox: import("react").ForwardRefExoticComponent<JSX.SwirlSkeletonBox & Omit<import("react").HTMLAttributes<HTMLSwirlSkeletonBoxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSkeletonBoxElement>>;
+export declare const SwirlSkeletonText: import("react").ForwardRefExoticComponent<JSX.SwirlSkeletonText & Omit<import("react").HTMLAttributes<HTMLSwirlSkeletonTextElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSkeletonTextElement>>;
 export declare const SwirlSpinner: import("react").ForwardRefExoticComponent<JSX.SwirlSpinner & Omit<import("react").HTMLAttributes<HTMLSwirlSpinnerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSpinnerElement>>;
 export declare const SwirlStack: import("react").ForwardRefExoticComponent<JSX.SwirlStack & Omit<import("react").HTMLAttributes<HTMLSwirlStackElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlStackElement>>;
 export declare const SwirlSwitch: import("react").ForwardRefExoticComponent<JSX.SwirlSwitch & Omit<import("react").HTMLAttributes<HTMLSwirlSwitchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlSwitchElement>>;

package/dist/{swirl-action-list-item.entry.6548a6f0.js → swirl-action-list-item.entry.02ce0405.js}

@@ -1,14 +1,14 @@
-import { r as n, h as s, H as l } from "./index.149af511.js";
+import { r as n, h as s, H as l } from "./index.efe53c34.js";
 import { c as r } from "./index-47862d62.75c2fcf1.js";
 import { g as c } from "./utils-33d31b58.1488fcfe.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-10467d11.b7d83301.js";
-const d = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;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;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)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.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;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow: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__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}", m = class {
+const d = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;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;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)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.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;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow: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__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}", h = class {
   constructor(t) {
-    n(this, t), this.intent = "default", this.size = "m", this.desktopMediaQuery = c(), this.desktopMediaQueryHandler = (i) => {
+    n(this, t), this.desktopMediaQuery = c(), this.desktopMediaQueryHandler = (i) => {
       this.forceIconProps(i.matches);
-    };
+    }, this.disabled = void 0, this.description = void 0, this.icon = void 0, this.intent = "default", this.label = void 0, this.size = "m", this.suffix = void 0;
   }
   componentDidLoad() {
     var t, i;
@@ -28,7 +28,7 @@ const d = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{d
     return s(l, null, s("button", { class: i, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && s("span", { class: "action-list-item__icon", innerHTML: this.icon, ref: (e) => this.iconEl = e }), s("span", { class: "action-list-item__label-container" }, s("span", { class: "action-list-item__label" }, this.label), this.description && s("span", { class: "action-list-item__description" }, this.description)), t && s("span", { class: "action-list-item__suffix", innerHTML: this.suffix, ref: (e) => this.suffixEl = e })));
   }
 };
-m.style = d;
+h.style = d;
 export {
-  m as swirl_action_list_item
+  h as swirl_action_list_item
 };

package/dist/{swirl-action-list-section.entry.e12fe159.js → swirl-action-list-section.entry.f224afc1.js}

@@ -1,15 +1,15 @@
-import { r as i, h as t, H as e } from "./index.149af511.js";
+import { r as s, h as t, H as e } from "./index.efe53c34.js";
 import "react";
 import "react-dom";
-const a = ":host{display:block}: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);border-bottom:var(--s-border-width-default) solid var(--s-border-default);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)}}", o = class {
-  constructor(s) {
-    i(this, s);
+const a = ":host{display:block}: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);border-bottom:var(--s-border-width-default) solid var(--s-border-default);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)}}", l = class {
+  constructor(i) {
+    s(this, i), this.label = void 0;
   }
   render() {
     return t(e, null, t("div", { "aria-labelledby": "label", class: "action-list-section", role: "group" }, t("span", { class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), t("div", { class: "action-list-section__items" }, t("slot", null))));
   }
 };
-o.style = a;
+l.style = a;
 export {
-  o as swirl_action_list_section
+  l as swirl_action_list_section
 };

package/dist/{swirl-action-list.entry.21644ba6.js → swirl-action-list.entry.62ec9277.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as n, g as r } from "./index.149af511.js";
+import { r as s, h as i, H as n, g as r } from "./index.efe53c34.js";
 import { q as c } from "./utils-33d31b58.1488fcfe.js";
 import "react";
 import "react-dom";

package/dist/{swirl-app-layout_5.entry.9703e919.js → swirl-app-layout_5.entry.bc3879ae.js}

@@ -1,10 +1,10 @@
-import { r as n, c as s, h as a, H as r, g as l } from "./index.149af511.js";
+import { r as n, c as s, h as a, H as r, g as l } from "./index.efe53c34.js";
 import { c as p } from "./index-47862d62.75c2fcf1.js";
 import { i as d } from "./utils-33d31b58.1488fcfe.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-10467d11.b7d83301.js";
-const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;max-width:100rem;height:100%;margin-right:auto;margin-left:auto;border:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-border-default)}@media (min-width: 1440px){.app-layout{border-radius:var(--s-border-radius-base)}}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-template-columns:100%;grid-template-rows:4rem 1fr;grid-template-areas:"body"
+const h = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;max-width:100rem;height:100%;margin-right:auto;margin-left:auto;border:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-border-default)}@media (min-width: 1440px){.app-layout{border-radius:var(--s-border-radius-base)}}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-template-columns:100%;grid-template-rows:4rem 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--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%, 25rem) 1fr;grid-template-areas:"header body"
         "navigation body"}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"
@@ -19,17 +19,17 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
     "content";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{margin-left:calc(-1 * var(--s-space-4))}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__app-bar-media{display:inline-flex;flex-shrink:0}.app-layout__app-bar-heading{min-width:0;flex-grow:1}.app-layout__app-bar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-subheading{display:block;overflow:hidden;max-width:100%;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.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%;will-change:transform;gap:var(--s-border-width-default);grid-area:sidebar;grid-template-rows:4rem 1fr;grid-template-areas:"sidebar-header"
     "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.3s;animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;-webkit-animation:none;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}.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}@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{-webkit-animation:app-layout-slide-out 0.4s;animation:app-layout-slide-out 0.4s}.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{-webkit-animation:app-layout-slide-in 0.4s;animation:app-layout-slide-in 0.4s}.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:"";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{-webkit-animation:app-layout-slide-out 0.4s;animation:app-layout-slide-out 0.4s}.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{-webkit-animation:app-layout-slide-in 0.4s;animation:app-layout-slide-in 0.4s}.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:"";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{-webkit-animation:app-layout-scale-in 0.3s;animation:app-layout-scale-in 0.3s}}@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{-webkit-animation:app-layout-scale-in 0.3s;animation:app-layout-scale-in 0.3s}}@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}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-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-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)}}@-webkit-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{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-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{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}`, h = class {
-  constructor(t) {
-    n(this, t), this.ctaClick = s(this, "ctaClick", 7), this.mobileViewChange = s(this, "mobileViewChange", 7), this.navigationBackButtonClick = s(this, "navigationBackButtonClick", 7), this.sidebarToggle = s(this, "sidebarToggle", 7), this.backToNavigationViewButtonLabel = "Back to navigation", this.navigationBackButtonLabel = "Go back", this.sidebarCloseButtonLabel = "Close sidebar", this.transitionStyle = "slides", this.mobileView = "navigation", this.onBackToNavigationViewButtonClick = () => {
+          "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{-webkit-animation:app-layout-slide-out 0.4s;animation:app-layout-slide-out 0.4s}.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{-webkit-animation:app-layout-slide-in 0.4s;animation:app-layout-slide-in 0.4s}.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:"";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{-webkit-animation:app-layout-slide-out 0.4s;animation:app-layout-slide-out 0.4s}.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{-webkit-animation:app-layout-slide-in 0.4s;animation:app-layout-slide-in 0.4s}.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:"";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{-webkit-animation:app-layout-scale-in 0.3s;animation:app-layout-scale-in 0.3s}}@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{-webkit-animation:app-layout-scale-in 0.3s;animation:app-layout-scale-in 0.3s}}@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}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-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-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)}}@-webkit-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{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-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{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}`, m = class {
+  constructor(i) {
+    n(this, i), this.ctaClick = s(this, "ctaClick", 7), this.mobileViewChange = s(this, "mobileViewChange", 7), this.navigationBackButtonClick = s(this, "navigationBackButtonClick", 7), this.sidebarToggle = s(this, "sidebarToggle", 7), this.onBackToNavigationViewButtonClick = () => {
       this.changeMobileView("navigation");
-    }, this.onCtaClick = (i) => {
-      this.ctaClick.emit(i);
-    }, this.onNavigationBackButtonClick = (i) => {
-      this.navigationBackButtonClick.emit(i);
+    }, this.onCtaClick = (t) => {
+      this.ctaClick.emit(t);
+    }, this.onNavigationBackButtonClick = (t) => {
+      this.navigationBackButtonClick.emit(t);
     }, this.onSidebarCloseButtonClick = () => {
       this.hideSidebar();
-    };
+    }, this.appBarMedia = void 0, this.appName = void 0, this.backToNavigationViewButtonLabel = "Back to navigation", this.ctaIcon = void 0, this.ctaLabel = void 0, this.heading = void 0, this.navigationBackButtonLabel = "Go back", this.navigationLabel = void 0, this.showNavigationBackButton = void 0, this.sidebarCloseButtonLabel = "Close sidebar", this.sidebarHeading = void 0, this.subheading = void 0, this.transitionStyle = "slides", this.hasNavigation = void 0, this.hasSidebar = void 0, this.mobileView = "navigation", this.sidebarActive = void 0, this.sidebarClosing = void 0, this.transitioningFrom = void 0, this.transitioningTo = void 0;
   }
   componentWillLoad() {
     this.mutationObserver = new MutationObserver(() => {
@@ -39,8 +39,8 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
     });
   }
   disconnectedCallback() {
-    var t;
-    (t = this.mutationObserver) === null || t === void 0 || t.disconnect();
+    var i;
+    (i = this.mutationObserver) === null || i === void 0 || i.disconnect();
   }
   watchMobileView() {
     this.checkMobileView();
@@ -52,25 +52,25 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
     if (!this.sidebarActive || !this.hasSidebar)
       return;
     Boolean(this.sidebarClosingTimeout) && clearTimeout(this.sidebarClosingTimeout), this.sidebarClosing = !0;
-    const t = d() ? 0 : 300;
+    const i = d() ? 0 : 300;
     this.sidebarClosingTimeout = setTimeout(() => {
       this.sidebarActive = !1, this.sidebarClosing = !1, this.changeMobileView("body"), this.sidebarToggle.emit(!1);
-    }, t);
+    }, i);
   }
   async toggleSidebar() {
     !this.hasSidebar || (this.sidebarActive ? this.hideSidebar() : this.showSidebar());
   }
-  async changeMobileView(t, i = !0) {
-    if (this.mobileView === t || t === "navigation" && !this.hasNavigation || t === "sidebar" && !this.hasSidebar)
+  async changeMobileView(i, t = !0) {
+    if (this.mobileView === i || i === "navigation" && !this.hasNavigation || i === "sidebar" && !this.hasSidebar)
       return;
-    if (!d() || !i) {
-      this.mobileView = t, this.mobileViewChange.emit(this.mobileView);
+    if (!d() || !t) {
+      this.mobileView = i, this.mobileViewChange.emit(this.mobileView);
       return;
     }
-    Boolean(this.transitionTimeout) && clearTimeout(this.transitionTimeout), this.transitioningFrom = this.mobileView, this.transitioningTo = t;
+    Boolean(this.transitionTimeout) && clearTimeout(this.transitionTimeout), this.transitioningFrom = this.mobileView, this.transitioningTo = i;
     let o = 0;
     this.transitionStyle === "slides" ? o = 400 : this.transitionStyle === "dialog" && (o = 300), this.transitionTimeout = setTimeout(() => {
-      this.mobileView = t, this.transitioningFrom = void 0, this.transitioningTo = void 0, this.mobileViewChange.emit(this.mobileView);
+      this.mobileView = i, this.transitioningFrom = void 0, this.transitioningTo = void 0, this.mobileViewChange.emit(this.mobileView);
     }, o);
   }
   checkMobileView() {
@@ -78,8 +78,8 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
       this.mobileView = "body";
       return;
     }
-    const t = this.mobileView === "sidebar" || this.sidebarActive;
-    t !== this.sidebarActive && (t ? this.showSidebar() : this.hideSidebar());
+    const i = this.mobileView === "sidebar" || this.sidebarActive;
+    i !== this.sidebarActive && (i ? this.showSidebar() : this.hideSidebar());
   }
   updateNavigationStatus() {
     this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
@@ -88,13 +88,13 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
     this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
   }
   render() {
-    const t = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation, i = p("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+    const i = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation, t = p("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
       "app-layout--has-navigation": this.hasNavigation,
       "app-layout--has-sidebar": this.hasSidebar,
       "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
       "app-layout--sidebar-closing": this.sidebarClosing
     });
-    return a(r, null, a("section", { "aria-labelledby": "app-name", class: i, role: "document", tabIndex: 0 }, a("div", { class: "app-layout__grid" }, a("header", { class: "app-layout__header" }, this.showNavigationBackButton && a("span", { class: "app-layout__navigation-back-button" }, a("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, a("slot", { name: "navigation" })), a("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? a("header", { class: "app-layout__app-bar" }, t && a("span", { class: "app-layout__back-to-navigation-button" }, a("swirl-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.appBarMedia && a("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia }), a("div", { class: "app-layout__app-bar-heading" }, this.heading && a("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading }), this.subheading && a("span", { class: "app-layout__app-bar-subheading" }, this.subheading)), a("div", { class: "app-layout__app-bar-controls" }, a("slot", { name: "app-bar-controls" }))) : a("header", { class: "app-layout__app-bar" }, a("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("div", { class: "app-layout__content" }, a("slot", { name: "content" }))), a("aside", { class: "app-layout__sidebar" }, a("header", { class: "app-layout__sidebar-header" }, a("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", intent: "primary", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), a("div", { class: "app-layout__sidebar-content" }, a("slot", { name: "sidebar" }))), this.ctaLabel && a("span", { class: "app-layout__floating-cta" }, a("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
+    return a(r, null, a("section", { "aria-labelledby": "app-name", class: t, role: "document", tabIndex: 0 }, a("div", { class: "app-layout__grid" }, a("header", { class: "app-layout__header" }, this.showNavigationBackButton && a("span", { class: "app-layout__navigation-back-button" }, a("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, a("slot", { name: "navigation" })), a("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? a("header", { class: "app-layout__app-bar" }, i && a("span", { class: "app-layout__back-to-navigation-button" }, a("swirl-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.appBarMedia && a("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia }), a("div", { class: "app-layout__app-bar-heading" }, this.heading && a("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading }), this.subheading && a("span", { class: "app-layout__app-bar-subheading" }, this.subheading)), a("div", { class: "app-layout__app-bar-controls" }, a("slot", { name: "app-bar-controls" }))) : a("header", { class: "app-layout__app-bar" }, a("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("div", { class: "app-layout__content" }, a("slot", { name: "content" }))), a("aside", { class: "app-layout__sidebar" }, a("header", { class: "app-layout__sidebar-header" }, a("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", intent: "primary", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), a("div", { class: "app-layout__sidebar-content" }, a("slot", { name: "sidebar" }))), this.ctaLabel && a("span", { class: "app-layout__floating-cta" }, a("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
   }
   get el() {
     return l(this);
@@ -105,13 +105,13 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
     };
   }
 };
-h.style = m;
+m.style = h;
 const g = ":host{display:block;width:100%}:host *{box-sizing:border-box}.box--bordered{border:var(--s-border-width-default) solid var(--s-border-default)}.box--center-block{display:flex;align-items:center}.box--center-inline{display:flex;justify-content:center}.box--cover{width:100%;height:100%}", v = class {
-  constructor(t) {
-    n(this, t), this.as = "div", this.overflow = "visible", this.padding = "0";
+  constructor(i) {
+    n(this, i), this.as = "div", this.bordered = void 0, this.centerBlock = void 0, this.centerInline = void 0, this.cover = void 0, this.overflow = "visible", this.padding = "0";
   }
   render() {
-    const t = this.as, i = {
+    const i = this.as, t = {
       overflow: this.overflow,
       padding: `var(--s-space-${this.padding})`,
       position: Boolean(this.overflow) ? "relative" : ""
@@ -121,33 +121,33 @@ const g = ":host{display:block;width:100%}:host *{box-sizing:border-box}.box--bo
       "box--center-inline": this.centerInline,
       "box--cover": this.cover
     });
-    return a(r, { style: this.cover ? { width: "100%", height: "100%" } : void 0 }, a(t, { class: e, style: i }, a("slot", null)));
+    return a(r, { style: this.cover ? { width: "100%", height: "100%" } : void 0 }, a(i, { class: e, style: t }, a("slot", null)));
   }
 };
 v.style = g;
-const _ = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}", w = class {
-  constructor(t) {
-    n(this, t);
+const _ = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}", f = class {
+  constructor(i) {
+    n(this, i), this.heading = void 0, this.illustration = void 0;
   }
   render() {
     return a(r, null, a("div", { class: "empty-state" }, this.illustration && a("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), a("div", { class: "empty-state__body" }, this.heading && a("swirl-heading", { align: "center", as: "p", text: this.heading }), a("div", { class: "empty-state__content" }, a("swirl-text", { align: "center", color: "subdued" }, a("slot", null))))));
   }
 };
-w.style = _;
-const f = ":host{display:block;width:100%}:host *{box-sizing:border-box}", x = class {
-  constructor(t) {
-    n(this, t), this.focusedIndex = 0, this.onFocus = () => {
+f.style = _;
+const w = ":host{display:block;width:100%}:host *{box-sizing:border-box}", k = class {
+  constructor(i) {
+    n(this, i), this.focusedIndex = 0, this.onFocus = () => {
       this.focusItemAtIndex(this.focusedIndex);
-    }, this.onKeyDown = (i) => {
-      if (i.key === "ArrowDown")
-        i.preventDefault(), this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
-      else if (i.key === "ArrowUp") {
-        i.preventDefault();
+    }, this.onKeyDown = (t) => {
+      if (t.key === "ArrowDown")
+        t.preventDefault(), this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      else if (t.key === "ArrowUp") {
+        t.preventDefault();
         const e = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
         this.focusItemAtIndex(e);
       } else
-        i.key === "Home" ? (i.preventDefault(), this.focusItemAtIndex(0)) : i.key === "End" && (i.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
-    };
+        t.key === "Home" ? (t.preventDefault(), this.focusItemAtIndex(0)) : t.key === "End" && (t.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
+    }, this.label = void 0;
   }
   componentDidLoad() {
     this.collectItems(), this.removeItemsFromTabOrder();
@@ -156,18 +156,18 @@ const f = ":host{display:block;width:100%}:host *{box-sizing:border-box}", x = c
     this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item"));
   }
   removeItemsFromTabOrder() {
-    this.items.forEach((t) => {
-      var i, e;
-      return (e = (i = t.shadowRoot) === null || i === void 0 ? void 0 : i.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || e === void 0 ? void 0 : e.setAttribute("tabIndex", "-1");
+    this.items.forEach((i) => {
+      var t, e;
+      return (e = (t = i.shadowRoot) === null || t === void 0 ? void 0 : t.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || e === void 0 ? void 0 : e.setAttribute("tabIndex", "-1");
     });
   }
-  focusItemAtIndex(t) {
+  focusItemAtIndex(i) {
     this.removeItemsFromTabOrder();
-    const i = this.items[t];
-    if (!Boolean(i))
+    const t = this.items[i];
+    if (!Boolean(t))
       return;
-    const e = i.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
-    e.setAttribute("tabIndex", "0"), e.focus(), this.focusedIndex = t;
+    const e = t.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    e.setAttribute("tabIndex", "0"), e.focus(), this.focusedIndex = i;
   }
   render() {
     return a(r, { onKeyDown: this.onKeyDown }, a("swirl-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, a("slot", null)));
@@ -176,44 +176,44 @@ const f = ":host{display:block;width:100%}:host *{box-sizing:border-box}", x = c
     return l(this);
   }
 };
-x.style = f;
-const k = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', C = class {
-  constructor(t) {
-    n(this, t), this.valueChange = s(this, "valueChange", 7), this.checked = !1, this.menuTriggerLabel = "Options", this.onClick = () => {
+k.style = w;
+const x = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', B = class {
+  constructor(i) {
+    n(this, i), this.valueChange = s(this, "valueChange", 7), this.onClick = () => {
       !this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
-    }, this.onMenuTriggerClick = (i) => {
-      this.disabled && !Boolean(this.href) && i.stopPropagation();
-    };
+    }, this.onMenuTriggerClick = (t) => {
+      this.disabled && !Boolean(this.href) && t.stopPropagation();
+    }, this.checked = !1, this.description = void 0, this.disabled = void 0, this.hideDivider = void 0, this.href = void 0, this.label = void 0, this.media = void 0, this.menuTriggerId = void 0, this.menuTriggerLabel = "Options", this.meta = void 0, this.selectable = void 0, this.value = void 0;
   }
   componentDidLoad() {
     this.forceAvatarProps(), this.forceThumbnailProps();
   }
   forceAvatarProps() {
-    const t = this.el.querySelector("swirl-avatar");
-    !Boolean(t) || (t.removeAttribute("interactive"), t.removeAttribute("show-label"), t.removeAttribute("variant"), t.setAttribute("size", "l"));
+    const i = this.el.querySelector("swirl-avatar");
+    !Boolean(i) || (i.removeAttribute("interactive"), i.removeAttribute("show-label"), i.removeAttribute("variant"), i.setAttribute("size", "l"));
   }
   forceThumbnailProps() {
-    const t = this.el.querySelector("swirl-thumbnail");
-    !Boolean(t) || (t.setAttribute("format", "landscape"), ["s", "m"].includes(t.getAttribute("size")) || t.setAttribute("size", "m"));
+    const i = this.el.querySelector("swirl-thumbnail");
+    !Boolean(i) || (i.setAttribute("format", "landscape"), ["s", "m"].includes(i.getAttribute("size")) || i.setAttribute("size", "m"));
   }
   render() {
-    const t = Boolean(this.href) && !this.selectable ? "a" : "button", i = this.disabled && !Boolean(this.href), e = Boolean(this.menuTriggerId), o = e && !Boolean(this.meta) && !this.selectable, u = Boolean(this.meta) && !this.selectable, b = this.selectable ? String(this.checked) : void 0, c = this.selectable ? "checkbox" : void 0, y = p("resource-list-item", {
+    const i = Boolean(this.href) && !this.selectable ? "a" : "button", t = this.disabled && !Boolean(this.href), e = Boolean(this.menuTriggerId), o = e && !Boolean(this.meta) && !this.selectable, u = Boolean(this.meta) && !this.selectable, b = this.selectable ? String(this.checked) : void 0, c = this.selectable ? "checkbox" : void 0, y = p("resource-list-item", {
       "resource-list-item--checked": this.checked,
       "resource-list-item--has-menu": e,
       "resource-list-item--hide-divider": this.hideDivider,
       "resource-list-item--selectable": this.selectable
     });
-    return a(r, { role: "row" }, a("div", { class: y, role: "gridcell" }, a(t, { "aria-checked": b, "aria-disabled": i ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: i, onClick: this.onClick, part: "resource-list-item__content", role: c, tabIndex: 0 }, Boolean(this.media) && a("span", { class: "resource-list-item__media", innerHTML: this.media }), a("span", { class: "resource-list-item__label-container" }, a("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && a("span", { class: "resource-list-item__description" }, this.description))), this.selectable && a("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, a("span", { class: "resource-list-item__checkbox-icon" }, this.checked && a("swirl-icon-check-strong", null))), u && a("span", { class: "resource-list-item__meta" }, this.meta), o && a("swirl-button", { "aria-disabled": i ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: i, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
+    return a(r, { role: "row" }, a("div", { class: y, role: "gridcell" }, a(i, { "aria-checked": b, "aria-disabled": t ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: t, onClick: this.onClick, part: "resource-list-item__content", role: c, tabIndex: 0 }, Boolean(this.media) && a("span", { class: "resource-list-item__media", innerHTML: this.media }), a("span", { class: "resource-list-item__label-container" }, a("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && a("span", { class: "resource-list-item__description" }, this.description))), this.selectable && a("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, a("span", { class: "resource-list-item__checkbox-icon" }, this.checked && a("swirl-icon-check-strong", null))), u && a("span", { class: "resource-list-item__meta" }, this.meta), o && a("swirl-button", { "aria-disabled": t ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: t, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
   }
   get el() {
     return l(this);
   }
 };
-C.style = k;
+B.style = x;
 export {
-  h as swirl_app_layout,
+  m as swirl_app_layout,
   v as swirl_box,
-  w as swirl_empty_state,
-  x as swirl_resource_list,
-  C as swirl_resource_list_item
+  f as swirl_empty_state,
+  k as swirl_resource_list,
+  B as swirl_resource_list_item
 };

package/dist/{swirl-autocomplete.entry.4bad6cbf.js → swirl-autocomplete.entry.5de078b7.js}

@@ -1,4 +1,4 @@
-import { r as n, c as r, h as o, H as c, g as u } from "./index.149af511.js";
+import { r as n, c as r, h as o, H as u, g as c } from "./index.efe53c34.js";
 import { a as h, c as d, o as p } from "./floating-ui.dom.esm-b9f28f6d.15013ef7.js";
 import { c as m } from "./index-47862d62.75c2fcf1.js";
 import { d as b } from "./utils-33d31b58.1488fcfe.js";
@@ -7,7 +7,7 @@ import "react-dom";
 import "./_commonjsHelpers-10467d11.b7d83301.js";
 const g = ".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:hidden;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);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}", v = class {
   constructor(s) {
-    n(this, s), this.valueChange = r(this, "valueChange", 7), this.clearable = !0, this.clearButtonLabel = "Clear input", this.generateSuggestions = async () => [], this.menuLabel = "Suggestions", this.active = !1, this.loading = !1, this.suggestions = [], this.onChange = b(async (t) => {
+    n(this, s), this.valueChange = r(this, "valueChange", 7), this.onChange = b(async (t) => {
       this.value = t.detail, this.valueChange.emit(this.value), this.updateSuggestions(), this.open();
     }, 250, !1), this.onSelect = (t) => {
       var i;
@@ -21,7 +21,7 @@ const g = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-
       t.code === "Escape" && (t.preventDefault(), this.inputEl.querySelector("input").focus(), this.close());
     }, this.onInputKeyDown = (t) => {
       t.code === "ArrowDown" && (t.preventDefault(), this.listboxEl.querySelector('[role="listbox"]').focus());
-    };
+    }, this.autoSelect = void 0, this.clearable = !0, this.clearButtonLabel = "Clear input", this.disabled = void 0, this.generateSuggestions = async () => [], this.inline = void 0, this.invalid = void 0, this.maxLength = void 0, this.menuLabel = "Suggestions", this.mode = void 0, this.required = void 0, this.spellCheck = void 0, this.swirlAriaDescribedby = void 0, this.value = void 0, this.active = !1, this.loading = !1, this.position = void 0, this.suggestions = [];
   }
   componentWillLoad() {
     const s = document.querySelectorAll("swirl-datepicker").length;
@@ -54,14 +54,14 @@ const g = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-
     const l = `${this.id}-suggestions`, a = m("autocomplete", {
       "autocomplete--inactive": !this.active
     });
-    return o(c, null, o("div", { class: a, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: l, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }), o("div", { class: "autocomplete__listbox-container", ref: (e) => this.listboxContainerEl = e, style: {
+    return o(u, null, o("div", { class: a, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: l, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }), o("div", { class: "autocomplete__listbox-container", ref: (e) => this.listboxContainerEl = e, style: {
       top: Boolean(this.position) ? `${(s = this.position) === null || s === void 0 ? void 0 : s.y}px` : "",
       left: Boolean(this.position) ? `${(t = this.position) === null || t === void 0 ? void 0 : t.x}px` : "",
       width: `${((i = this.inputEl) === null || i === void 0 ? void 0 : i.getBoundingClientRect().width) + 32}px`
     } }, this.loading && o("div", { class: "autocomplete__spinner" }, o("swirl-spinner", null)), this.suggestions.length > 0 && o("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: l, ref: (e) => this.listboxEl = e, value: [this.value] }, this.suggestions.map((e) => o("swirl-option-list-item", { selected: this.value === e.label, key: e.id, disabled: e.disabled, label: e.label, value: e.label }))))));
   }
   get el() {
-    return u(this);
+    return c(this);
   }
 };
 v.style = g;

package/dist/{swirl-avatar-group.entry.d41bfa97.js → swirl-avatar-group.entry.729ba3f3.js}

@@ -1,11 +1,11 @@
-import { r as s, h as a, H as i } from "./index.149af511.js";
+import { r as i, h as a, H as s } from "./index.efe53c34.js";
 import { c as e } from "./index-47862d62.75c2fcf1.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-10467d11.b7d83301.js";
 const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}", l = class {
   constructor(r) {
-    s(this, r);
+    i(this, r), this.badge = void 0;
   }
   componentDidLoad() {
     this.forceBadgeProps();
@@ -20,7 +20,7 @@ const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group
     const r = e("avatar-group", {
       "avatar-group--has-badge": Boolean(this.badge)
     }), o = e("avatar-group__badge");
-    return a(i, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
+    return a(s, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
   }
 };
 l.style = d;

package/dist/{swirl-avatar.entry.c81909ad.js → swirl-avatar.entry.13e1baed.js}

@@ -1,4 +1,4 @@
-import { r as h, h as i, H as g, g as u } from "./index.149af511.js";
+import { r as h, h as i, H as u, g } from "./index.efe53c34.js";
 import { c as s } from "./index-47862d62.75c2fcf1.js";
 import "react";
 import "react-dom";
@@ -10,9 +10,9 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
   l: 48,
   xl: 64,
   "2xl": 144
-}, p = class {
+}, f = class {
   constructor(t) {
-    h(this, t), this.badgePosition = "bottom", this.color = "kiwi", this.interactive = !1, this.showLabel = !1, this.size = "m", this.variant = "round", this.setImageAvailable = () => {
+    h(this, t), this.setImageAvailable = () => {
       this.imageAvailable = !0;
     }, this.setImageUnavailable = () => {
       this.imageAvailable = !1;
@@ -20,7 +20,7 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
       a.code === "Space" ? a.preventDefault() : a.code === "Enter" && (a.preventDefault(), this.element.click());
     }, this.onKeyup = (a) => {
       a.code === "Space" && (a.preventDefault(), this.element.click());
-    };
+    }, this.badge = void 0, this.badgePosition = "bottom", this.color = "kiwi", this.icon = void 0, this.initials = void 0, this.interactive = !1, this.label = void 0, this.showLabel = !1, this.size = "m", this.src = void 0, this.variant = "round", this.imageAvailable = void 0;
   }
   componentDidLoad() {
     this.forceBadgeProps();
@@ -35,15 +35,15 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
     t == null || t.setAttribute("size", "m");
   }
   render() {
-    const t = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), a = !t && Boolean(this.initials), r = !t && !a && Boolean(this.icon), e = !t && !a && !r, o = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : "img", l = s("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
-      "avatar--has-icon": r || e,
+    const t = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), a = !t && Boolean(this.initials), e = !t && !a && Boolean(this.icon), r = !t && !a && !e, o = Boolean(this.badge) && this.size === "m", l = this.interactive ? "button" : "img", v = s("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": e || r,
       "avatar--has-initials": a,
       "avatar--interactive": this.interactive
-    }), c = s("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
-    return i(g, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, i("span", { class: l, part: "avatar" }, t && i("span", { class: "avatar__image" }, i("img", { alt: "", height: n[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: n[this.size] })), a && i("span", { class: "avatar__initials" }, i("span", null, this.initials)), r && i("span", { class: "avatar__icon", innerHTML: this.icon }), e && i("span", { class: "avatar__icon" }, i("swirl-icon-person", null)), o && i("span", { class: c, innerHTML: this.badge, ref: (d) => this.badgeEl = d })), this.showLabel && i("span", { "aria-hidden": !0, class: "avatar__label" }, this.label));
+    }), d = s("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
+    return i(u, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: l, tabIndex: this.interactive ? 0 : void 0 }, i("span", { class: v, part: "avatar" }, t && i("span", { class: "avatar__image" }, i("img", { alt: "", height: n[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: n[this.size] })), a && i("span", { class: "avatar__initials" }, i("span", null, this.initials)), e && i("span", { class: "avatar__icon", innerHTML: this.icon }), r && i("span", { class: "avatar__icon" }, i("swirl-icon-person", null)), o && i("span", { class: d, innerHTML: this.badge, ref: (c) => this.badgeEl = c })), this.showLabel && i("span", { "aria-hidden": !0, class: "avatar__label" }, this.label));
   }
   get element() {
-    return u(this);
+    return g(this);
   }
   static get watchers() {
     return {
@@ -51,7 +51,7 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
     };
   }
 };
-p.style = m;
+f.style = m;
 export {
-  p as swirl_avatar
+  f as swirl_avatar
 };

package/dist/{swirl-badge.entry.7bd8bbda.js → swirl-badge.entry.62460ead.js}

@@ -1,11 +1,11 @@
-import { r as t, h as e, H as i } from "./index.149af511.js";
+import { r as t, h as e, H as i } from "./index.efe53c34.js";
 import { c as r } from "./index-47862d62.75c2fcf1.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-10467d11.b7d83301.js";
 const s = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", n = class {
   constructor(a) {
-    t(this, a), this.intent = "critical", this.size = "m", this.variant = "default";
+    t(this, a), this.icon = void 0, this.intent = "critical", this.label = void 0, this.size = "m", this.variant = "default";
   }
   render() {
     const a = r("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {