@getflip/swirl-components 0.65.0 → 0.65.1

package/dist/components/swirl-banner.js

@@ -39,9 +39,8 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
     this.size = "m";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-button2.js

@@ -33,9 +33,8 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
     this.variant = "ghost";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.forceIconProps(this.desktopMediaQuery.matches);

package/dist/components/swirl-chip.js

@@ -20,9 +20,8 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
     this.variant = "outline";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

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

@@ -6321,10 +6321,9 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
     this.id = `swirl-date-input-${index}`;
   }
   componentDidLoad() {
-    var _a, _b;
     this.setupMask();
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b, _c;

package/dist/components/swirl-inline-error2.js

@@ -18,9 +18,8 @@ const SwirlInlineError = /*@__PURE__*/ proxyCustomElement(class SwirlInlineError
     this.size = "m";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-inline-status.js

@@ -20,9 +20,8 @@ const SwirlInlineStatus$1 = /*@__PURE__*/ proxyCustomElement(class SwirlInlineSt
     this.iconSize = 20;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-menu.js

@@ -111,8 +111,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
     this.observeSlotChanges();
   }
   componentDidLoad() {
-    var _a, _b;
-    (_b = (_a = this.mobileMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.mediaQueryHandler);
+    this.mobileMediaQuery.onchange = this.mediaQueryHandler;
     this.parentMenu = closestPassShadow(this.el.parentElement, "swirl-menu");
     this.popover = closestPassShadow(this.el, "swirl-popover");
     this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();

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

@@ -37,10 +37,9 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
     this.iconSize = 24;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-resource-list-file-item.js

@@ -28,9 +28,8 @@ const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class Swirl
     this.removeButtonLabel = "Remove file";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-search.js

@@ -46,9 +46,8 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSearch extends
     this.variant = "filled";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

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

@@ -70,11 +70,10 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
     this.sidebarHovered = undefined;
   }
   componentWillLoad() {
-    var _a, _b;
     if (!this.desktopMediaQuery.matches) {
       this.collapseLeftSidebar();
     }
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   /**
    * Collapse the left sidebar.

package/dist/components/swirl-tab-bar2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:block}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
+const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
 
 const SwirlTabBar = /*@__PURE__*/ proxyCustomElement(class SwirlTabBar extends HTMLElement {
   constructor() {

package/dist/components/swirl-text-input2.js

@@ -113,9 +113,8 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
     this.showPassword = false;
   }
   componentDidLoad() {
-    var _a, _b;
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.adjustInputSize();

package/dist/components/swirl-toast2.js

@@ -30,10 +30,9 @@ const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTM
     this.startTimer();
   }
   componentDidLoad() {
-    var _a, _b;
     this.startTimer();
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-action-list_3.entry.js

@@ -79,9 +79,8 @@ const SwirlActionListItem = class {
     this.suffix = undefined;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.forceIconProps(this.desktopMediaQuery.matches);

package/dist/esm/swirl-app-layout_7.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement,
 import { c as classnames } from './index-d280dafb.js';
 import { i as isMobileViewport } from './utils-bc84f36e.js';
 
-const swirlAppLayoutCss = ":host{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:4rem 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--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%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 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:25rem 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px) and (max-width: 1439px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}.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__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.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;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(4rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);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__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__app-bar-controls{display:none;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);will-change:transform;grid-area:sidebar;grid-template-rows:4rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 992px){.app-layout__sidebar-header{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}@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}.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}.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 (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}.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}.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 (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 (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 (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}";
+const swirlAppLayoutCss = ":host{position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout--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%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 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:25rem 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px) and (max-width: 1439px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}.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__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.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;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8);--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem}.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__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__app-bar-controls{display:none;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);will-change:transform;grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 992px){.app-layout__sidebar-header{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}@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}.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}.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 (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}.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}.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 (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 (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 (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}";
 
 const SwirlAppLayout = class {
   constructor(hostRef) {

package/dist/esm/swirl-banner.entry.js

@@ -36,9 +36,8 @@ const SwirlBanner = class {
     this.size = "m";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

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

@@ -32,9 +32,8 @@ const SwirlButton = class {
     this.variant = "ghost";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.forceIconProps(this.desktopMediaQuery.matches);

package/dist/esm/swirl-chip.entry.js

@@ -18,9 +18,8 @@ const SwirlChip = class {
     this.variant = "outline";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-date-input.entry.js

@@ -6316,10 +6316,9 @@ const SwirlDateInput = class {
     this.id = `swirl-date-input-${index}`;
   }
   componentDidLoad() {
-    var _a, _b;
     this.setupMask();
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b, _c;

package/dist/esm/swirl-icon-check-small_3.entry.js

@@ -63,10 +63,9 @@ const SwirlOptionListItem = class {
     this.iconSize = 24;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-icon-error_3.entry.js

@@ -30,9 +30,8 @@ const SwirlInlineError = class {
     this.size = "m";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-inline-status.entry.js

@@ -18,9 +18,8 @@ const SwirlInlineStatus = class {
     this.iconSize = 20;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-menu.entry.js

@@ -107,8 +107,7 @@ const SwirlMenu = class {
     this.observeSlotChanges();
   }
   componentDidLoad() {
-    var _a, _b;
-    (_b = (_a = this.mobileMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.mediaQueryHandler);
+    this.mobileMediaQuery.onchange = this.mediaQueryHandler;
     this.parentMenu = closestPassShadow(this.el.parentElement, "swirl-menu");
     this.popover = closestPassShadow(this.el, "swirl-popover");
     this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();

package/dist/esm/swirl-resource-list-file-item.entry.js

@@ -21,9 +21,8 @@ const SwirlResourceListFileItem = class {
     this.removeButtonLabel = "Remove file";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-search.entry.js

@@ -43,9 +43,8 @@ const SwirlSearch = class {
     this.variant = "filled";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-shell-layout.entry.js

@@ -67,11 +67,10 @@ const SwirlShellLayout = class {
     this.sidebarHovered = undefined;
   }
   componentWillLoad() {
-    var _a, _b;
     if (!this.desktopMediaQuery.matches) {
       this.collapseLeftSidebar();
     }
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   /**
    * Collapse the left sidebar.

package/dist/esm/swirl-tab-bar.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-99d0060d.js';
 import { c as classnames } from './index-d280dafb.js';
 
-const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:block}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
+const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
 
 const SwirlTabBar = class {
   constructor(hostRef) {

package/dist/esm/swirl-text-input.entry.js

@@ -107,9 +107,8 @@ const SwirlTextInput = class {
     this.showPassword = false;
   }
   componentDidLoad() {
-    var _a, _b;
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.adjustInputSize();

package/dist/esm/swirl-toast.entry.js

@@ -27,10 +27,9 @@ const SwirlToast = class {
     this.startTimer();
   }
   componentDidLoad() {
-    var _a, _b;
     this.startTimer();
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/swirl-components/p-059f706f.entry.js

@@ -0,0 +1 @@
+import{r as n,c as t,h as i,H as e,g as a}from"./p-3fca9a05.js";import{c as s}from"./p-b7898321.js";import{g as r}from"./p-646e00de.js";const o={default:void 0,critical:"<swirl-icon-error></swirl-icon-error>",success:"<swirl-icon-check-circle></swirl-icon-check-circle>",warning:"<swirl-icon-warning></swirl-icon-warning>",info:"<swirl-icon-info></swirl-icon-info>"},c=class{constructor(i){n(this,i),this.action=t(this,"action",7),this.dismiss=t(this,"dismiss",7),this.desktopMediaQuery=r(),this.desktopMediaQueryHandler=n=>{this.forceIconProps(n.matches)},this.onAction=n=>{this.action.emit(n)},this.onDismiss=n=>{this.dismiss.emit(n)},this.actionLabel=void 0,this.content=void 0,this.dismissable=!1,this.dismissLabel="Dismiss",this.importance="status",this.intent="default",this.showIcon=!1,this.size="m"}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}disconnectedCallback(){var n,t;null===(t=(n=this.desktopMediaQuery).removeEventListener)||void 0===t||t.call(n,"change",this.desktopMediaQueryHandler)}forceIconProps(n){var t,i;const e=null===(t=this.iconEl)||void 0===t?void 0:t.children[0],a=null===(i=this.dismissButtonEl)||void 0===i?void 0:i.children[0];null==e||e.setAttribute("size",n?"20":"24"),null==a||a.setAttribute("size",n?"20":"24")}render(){const n=o[this.intent],t=Boolean(this.actionLabel)||this.dismissable,a=this.showIcon&&Boolean(n),r=s("banner",`banner--intent-${this.intent}`,`banner--size-${this.size}`,{"banner--has-icon":a});return i(e,null,i("div",{"aria-describedby":"content",class:r,role:this.importance,tabIndex:0},a&&i("span",{"aria-hidden":"true",class:"banner__icon",innerHTML:n,ref:n=>this.iconEl=n}),i("span",{class:"banner__content",id:"content",part:"banner__content"},this.content),t&&i("span",{class:"banner__controls"},this.actionLabel&&i("button",{class:"banner__action-button",onClick:this.onAction,part:"banner__action-button",type:"button"},this.actionLabel),this.dismissable&&i("button",{"aria-label":this.dismissLabel,class:"banner__dismiss-button",onClick:this.onDismiss,part:"banner__dismiss-button",ref:n=>this.dismissButtonEl=n,type:"button"},i("swirl-icon-close",null)))))}get element(){return a(this)}};c.style=":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center;margin-right:var(--s-space-8)}.banner--size-s .banner__controls{margin-left:0;margin-right:var(--s-space-4)}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-2);display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";export{c as swirl_banner}

package/dist/swirl-components/p-06012b5a.entry.js

@@ -0,0 +1 @@
+import{r as a,c as t,h as r,H as s}from"./p-3fca9a05.js";import{c as i}from"./p-b7898321.js";const e=class{constructor(r){a(this,r),this.activateNextTab=t(this,"activateNextTab",7),this.activatePreviousTab=t(this,"activatePreviousTab",7),this.activateTab=t(this,"activateTab",7),this.onKeyDown=a=>{"ArrowLeft"===a.code?(a.preventDefault(),this.activatePreviousTab.emit()):"ArrowRight"===a.code&&(a.preventDefault(),this.activateNextTab.emit())},this.disableTabSemantics=void 0,this.label=void 0,this.tabs=[]}render(){return r(s,null,r("div",{"aria-label":this.label,class:"tab-bar",onKeyDown:this.onKeyDown,role:this.disableTabSemantics?void 0:"tablist"},this.tabs.map((a=>{const t=i("tab-bar__tab",{"tab-bar__tab--active":a.active});return r("button",{"aria-controls":this.disableTabSemantics?void 0:a.id,"aria-selected":this.disableTabSemantics?void 0:a.active?"true":"false",class:t,id:`tab-${a.id}`,key:a.id,onClick:()=>this.activateTab.emit(a.id),role:this.disableTabSemantics?void 0:"tab",tabIndex:this.disableTabSemantics?void 0:a.active?0:-1,type:"button"},r("span",{class:"tab-bar__tab-label"},a.label))}))))}};e.style='.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}';export{e as swirl_tab_bar}

package/dist/swirl-components/p-22c58025.entry.js

@@ -0,0 +1 @@
+import{r as i,h as r,H as a,g as e}from"./p-3fca9a05.js";import{c as t}from"./p-b7898321.js";import{g as s}from"./p-646e00de.js";const c=class{constructor(r){i(this,r),this.desktopMediaQuery=s(),this.desktopMediaQueryHandler=i=>{this.forceIconProps(i.matches)},this.icon=void 0,this.intent="default",this.interactive=!1,this.label=void 0,this.variant="outline"}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}disconnectedCallback(){var i,r;null===(r=(i=this.desktopMediaQuery).removeEventListener)||void 0===r||r.call(i,"change",this.desktopMediaQueryHandler)}forceIconProps(i){if(!Boolean(this.iconEl))return;const r=this.iconEl.children[0];null==r||r.setAttribute("size",i?"20":"24")}render(){const i=this.interactive?"button":"span",e=Boolean(this.el.querySelector('[slot="avatar"]')),s=!e&&Boolean(this.icon),c=t("chip",`chip--intent-${this.intent}`,`chip--variant-${this.variant}`,{"chip--interactive":this.interactive});return r(a,null,r(i,{class:c,type:this.interactive?"button":void 0},e&&r("span",{class:"chip__avatar"},r("slot",{name:"avatar"})),s&&r("span",{class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),r("span",{class:"chip__label"},this.label)))}get el(){return e(this)}};c.style=":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.chip{display:inline-flex;max-width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip--variant-plain{height:auto;padding-right:0;padding-left:0;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive:active{background-color:transparent}.chip--variant-plain.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}";export{c as swirl_chip}

package/dist/swirl-components/p-27bdb25e.entry.js

@@ -0,0 +1 @@
+import{r as i,h as t,H as s,g as e}from"./p-3fca9a05.js";import{q as a,a as o,g as r}from"./p-646e00de.js";import{c as n}from"./p-b7898321.js";const l=class{constructor(t){i(this,t),this.onKeyDown=i=>{"ArrowDown"===i.code||"ArrowRight"===i.code?(i.preventDefault(),this.focusNextItem()):"ArrowUp"!==i.code&&"ArrowLeft"!==i.code||(i.preventDefault(),this.focusPreviousItem())}}componentDidLoad(){this.updateItems(),this.observeSlotChanges()}disconnectedCallback(){var i;null===(i=this.observer)||void 0===i||i.disconnect()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems()})),this.observer.observe(this.el,{childList:!0})}updateItems(){this.items=a(this.el,'[role="menuitem"]')}focusNextItem(){const i=this.getActiveItemIndex();this.items[(i+1)%this.items.length].focus()}focusPreviousItem(){var i;const t=this.getActiveItemIndex();null===(i=this.items[0===t?this.items.length-1:t-1])||void 0===i||i.focus()}getActiveItemIndex(){const i=o();return this.items.findIndex((t=>t===i||t===(null==i?void 0:i.querySelector('[role="menuitem"]'))))}render(){return t(s,null,t("div",{"aria-orientation":"vertical",class:"action-list",onKeyDown:this.onKeyDown,role:"menu"},t("slot",null)))}get el(){return e(this)}};l.style=":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";const c=class{constructor(t){i(this,t),this.desktopMediaQuery=r(),this.desktopMediaQueryHandler=i=>{this.forceIconProps(i.matches)},this.badge=void 0,this.disabled=void 0,this.description=void 0,this.icon=void 0,this.intent="default",this.label=void 0,this.size="m",this.swirlAriaExpanded=void 0,this.swirlAriaHaspopup=void 0,this.suffix=void 0}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}componentDidRender(){this.forceIconProps(this.desktopMediaQuery.matches)}disconnectedCallback(){var i,t;null===(t=(i=this.desktopMediaQuery).removeEventListener)||void 0===t||t.call(i,"change",this.desktopMediaQueryHandler)}forceIconProps(i){var t,s;const e=null===(t=this.iconEl)||void 0===t?void 0:t.children[0],a=null===(s=this.suffixEl)||void 0===s?void 0:s.children[0];null==e||e.setAttribute("size",i?"20":"24"),null==a||a.setAttribute("size",i?"20":"24")}render(){const i=Boolean(this.badge),e=Boolean(this.suffix)&&!this.disabled,a=n("action-list-item",`action-list-item--intent-${this.intent}`,`action-list-item--size-${this.size}`);return t(s,null,t("button",{"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,class:a,disabled:this.disabled,part:"action-list-item",role:"menuitem",tabIndex:-1,type:"button"},this.icon&&t("span",{class:"action-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),t("span",{class:"action-list-item__label-container"},t("span",{class:"action-list-item__label"},this.label),this.description&&t("span",{class:"action-list-item__description"},this.description)),i&&t("span",{class:"action-list-item__badge",innerHTML:this.badge}),e&&t("span",{class:"action-list-item__suffix",innerHTML:this.suffix,ref:i=>this.suffixEl=i})))}};c.style=":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;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-highlight)}";const d=class{constructor(t){i(this,t),this.orientation="horizontal",this.spacing="8"}render(){const i="horizontal"===this.orientation?{paddingTop:`var(--s-space-${this.spacing})`,paddingBottom:`var(--s-space-${this.spacing})`}:{paddingRight:`var(--s-space-${this.spacing})`,paddingLeft:`var(--s-space-${this.spacing})`},e=n("separator",`separator--orientation-${this.orientation}`);return t(s,{"aria-orientation":this.orientation,class:e,role:"separator",style:i},t("span",{class:"separator__line"}))}};d.style=":host{display:flex;width:100%;align-items:center}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto}:host(.separator--orientation-vertical) .separator__line{display:block;width:var(--s-border-width-default);height:100%;min-height:1.125rem;background-color:var(--s-border-default)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}";export{l as swirl_action_list,c as swirl_action_list_item,d as swirl_separator}

package/dist/swirl-components/p-29147daa.entry.js

@@ -0,0 +1 @@
+import{r as i,h as t,F as s,c as o,H as e,g as l}from"./p-3fca9a05.js";import{c as r}from"./p-b7898321.js";import{g as n}from"./p-646e00de.js";const c=class{constructor(t){i(this,t),this.size=24}render(){const i=20===this.size?24:this.size,o=r("swirl-icon",`swirl-icon--size-${this.size}`);return t("svg",{class:o,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${i} ${i}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&t(s,null,t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z",fill:"currentColor"})),(20===this.size||24===this.size)&&t(s,null,t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z",fill:"currentColor"})),28===this.size&&t(s,null,t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z",fill:"currentColor"})))}};c.style=":host{display:inline-flex}";const a=class{constructor(t){i(this,t),this.size=24}render(){const i=20===this.size?24:this.size,o=r("swirl-icon",`swirl-icon--size-${this.size}`);return t("svg",{class:o,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${i} ${i}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&t(s,null,t("rect",{x:"9",y:"3",width:"2",height:"2",rx:"1",fill:"currentColor"}),t("rect",{x:"9",y:"7",width:"2",height:"2",rx:"1",fill:"currentColor"}),t("rect",{x:"9",y:"11",width:"2",height:"2",rx:"1",fill:"currentColor"}),t("rect",{x:"5",y:"3",width:"2",height:"2",rx:"1",fill:"currentColor"}),t("rect",{x:"5",y:"7",width:"2",height:"2",rx:"1",fill:"currentColor"}),t("rect",{x:"5",y:"11",width:"2",height:"2",rx:"1",fill:"currentColor"})),(20===this.size||24===this.size)&&t(s,null,t("rect",{x:"13.5",y:"4.5",width:"3",height:"3",rx:"1.5",fill:"currentColor"}),t("rect",{x:"13.5",y:"10.5",width:"3",height:"3",rx:"1.5",fill:"currentColor"}),t("rect",{x:"13.5",y:"16.5",width:"3",height:"3",rx:"1.5",fill:"currentColor"}),t("rect",{x:"7.5",y:"4.5",width:"3",height:"3",rx:"1.5",fill:"currentColor"}),t("rect",{x:"7.5",y:"10.5",width:"3",height:"3",rx:"1.5",fill:"currentColor"}),t("rect",{x:"7.5",y:"16.5",width:"3",height:"3",rx:"1.5",fill:"currentColor"})),28===this.size&&t(s,null,t("rect",{x:"15.75",y:"5.25",width:"3.5",height:"3.5",rx:"1.75",fill:"currentColor"}),t("rect",{x:"15.75",y:"12.25",width:"3.5",height:"3.5",rx:"1.75",fill:"currentColor"}),t("rect",{x:"15.75",y:"19.25",width:"3.5",height:"3.5",rx:"1.75",fill:"currentColor"}),t("rect",{x:"8.75",y:"5.25",width:"3.5",height:"3.5",rx:"1.75",fill:"currentColor"}),t("rect",{x:"8.75",y:"12.25",width:"3.5",height:"3.5",rx:"1.75",fill:"currentColor"}),t("rect",{x:"8.75",y:"19.25",width:"3.5",height:"3.5",rx:"1.75",fill:"currentColor"})))}};a.style=":host{display:inline-flex}";const h=class{constructor(t){i(this,t),this.toggleDrag=o(this,"toggleDrag",7),this.desktopMediaQuery=n(),this.desktopMediaQueryHandler=i=>{this.forceIconProps(i.matches),this.updateIconSize(i.matches)},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.allowDrag=void 0,this.context="single-select",this.disabled=void 0,this.dragging=void 0,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.icon=void 0,this.label=void 0,this.selected=!1,this.swirlAriaRole="option",this.value=void 0,this.iconSize=24}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.updateIconSize(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}disconnectedCallback(){var i,t;null===(t=(i=this.desktopMediaQuery).removeEventListener)||void 0===t||t.call(i,"change",this.desktopMediaQueryHandler)}forceIconProps(i){var t;const s=null===(t=this.iconEl)||void 0===t?void 0:t.children[0];null==s||s.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,s=String(this.selected),o="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,n=this.selected&&"single-select"===this.context,c=r("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected});return t(e,null,t("div",{"aria-checked":"menuitemradio"===this.swirlAriaRole?s:void 0,"aria-disabled":i,"aria-selected":"option"===this.swirlAriaRole?s:void 0,class:c,part:"option-list-item",role:this.swirlAriaRole},l&&t("span",{class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),o&&t("span",{class:"option-list-item__checkbox"},t("span",{class:"option-list-item__checkbox-box"},this.selected&&t("swirl-icon-check-strong",{class:"option-list-item__checkbox-icon",size:16}))),t("span",{class:"option-list-item__label",part:"option-list-item__label"},this.label),n&&t("span",{class:"option-list-item__selection-icon"},t("swirl-icon-check-small",{size:this.iconSize}))),this.allowDrag&&t("button",{"aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},t("swirl-icon-drag-handle",{size:this.iconSize})))}get el(){return l(this)}};h.style=".sc-swirl-option-list-item-h{position:relative;display:inline-flex;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label.sc-swirl-option-list-item{flex-grow:1;color:var(--s-text-default);font-size:var(--s-font-size-base);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){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";export{c as swirl_icon_check_small,a as swirl_icon_drag_handle,h as swirl_option_list_item}

package/dist/swirl-components/p-2d5438ae.entry.js

@@ -0,0 +1 @@
+import{r as s,c as r,h as e,H as a}from"./p-3fca9a05.js";import{c as i}from"./p-b7898321.js";import{g as t}from"./p-646e00de.js";const c=class{constructor(e){s(this,e),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.inputInput=r(this,"inputInput",7),this.valueChange=r(this,"valueChange",7),this.desktopMediaQuery=t(),this.desktopMediaQueryHandler=s=>{this.forceIconProps(s.matches)},this.clear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit("")},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)},this.autoFocus=void 0,this.clearButtonLabel="Clear search term",this.disabled=void 0,this.inputName=void 0,this.inputId=void 0,this.label=void 0,this.placeholder="Search …",this.value=void 0,this.variant="filled"}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}disconnectedCallback(){var s,r;null===(r=(s=this.desktopMediaQuery).removeEventListener)||void 0===r||r.call(s,"change",this.desktopMediaQueryHandler)}forceIconProps(s){if(!Boolean(this.iconEl))return;const r=this.iconEl.children[0];null==r||r.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code||!s.ctrlKey&&!s.metaKey||this.input.focus()}render(){const s=i("search",`search--variant-${this.variant}`,{"search--disabled":this.disabled});return e(a,null,e("span",{class:s,ref:s=>this.iconEl=s},e("swirl-icon-search",{class:"search__icon"}),e("input",{"aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&e("button",{"aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.clear,type:"button"},e("swirl-icon-cancel",null))))}};c.style=".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";export{c as swirl_search}

package/dist/swirl-components/p-34edf304.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as s,H as e,g as o}from"./p-3fca9a05.js";import{c as n,a as h,o as a,f as r}from"./p-ecb8b7f5.js";import{c as l}from"./p-b7898321.js";import{q as u,c as m,p as c,i as d,a as v}from"./p-646e00de.js";const p=class{constructor(s){i(this,s),this.done=t(this,"done",7),this.valueChange=t(this,"valueChange",7),this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((i=>{i.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,u(this.el,"swirl-menu").forEach((i=>{i.active=!1,i.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.popover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const i=this.el.parentElement;Boolean(i)&&Boolean(this.menuContainer)&&(this.position=await n(i,this.menuContainer,{placement:"right-start",strategy:"fixed",middleware:[a({mainAxis:-10,crossAxis:0}),r()]}))},this.onKeyDown=i=>{if("ArrowDown"===i.code)i.preventDefault(),i.stopPropagation(),this.focusNextItem();else if("ArrowUp"===i.code)i.preventDefault(),i.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===i.code)i.preventDefault(),i.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===i.code){i.preventDefault();const t=m(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!Boolean(t))return;this.rootMenu.activateMenuItem(t)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()},this.active=!0,this.label=void 0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.mobileDoneButtonLabel="Done",this.value=void 0,this.variant="action",this.activeLevel=0,this.mobile=void 0,this.position=void 0}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.onchange=this.mediaQueryHandler,this.parentMenu=m(this.el.parentElement,"swirl-menu"),this.popover=m(this.el,"swirl-popover"),this.rootMenu=c(this.el,"swirl-menu").pop(),Boolean(this.parentMenu)&&queueMicrotask((()=>{this.active=!1})),this.popover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){var i,t,s;this.popover.removeEventListener("popoverClose",this.resetMenu),null===(t=(i=this.mobileMediaQuery).removeEventListener)||void 0===t||t.call(i,"change",this.mediaQueryHandler),null===(s=this.observer)||void 0===s||s.disconnect()}watchActive(){this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=h(this.el.parentElement,this.menuContainer,this.reposition)}async activateMenuItem(i){if(Boolean(this.parentMenu))return;const t=await i.getParentMenu(),s=u(this.el,"swirl-menu").filter((i=>i.level>=t.level&&i!==t));s.forEach((i=>{i.active=!1,i.parentElement.expanded=!1}));const e=await i.getSubMenu();Boolean(e)&&(i.expanded=!0,e.active=!0,this.activeLevel=e.level,setTimeout((()=>{e.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(Boolean(this.parentMenu)||0===this.activeLevel)return;const i=(u(this.el,"swirl-menu").find((i=>i.level===this.activeLevel&&i.active))||this.rootMenu).parentElement;i.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),u(this.el,"swirl-menu").filter((i=>i.level>this.activeLevel)).forEach((i=>{i.active=!1})),(u(this.el,"swirl-menu").find((i=>i.level===this.activeLevel&&i.active))||this.rootMenu).focusItemAtIndex(Array.from(i.parentElement.children).indexOf(i))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(i){this.focusItem(this.items[i])}async updateSelection(i){this.valueChange.emit(i.value)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems()})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const i=d();i!==this.mobile&&(this.mobile=i)}updateItems(){this.items=[...u(this.el,'[role="menuitem"]'),...u(this.el,'[role="menuitemradio"]')].filter((i=>m(i,"swirl-menu")===this.el))}updateLevel(){const i=c(this.el.parentNode,"swirl-menu");this.level=i.length}focusItem(i){[...u(this.rootMenu,'[role="menuitem"]'),...u(this.rootMenu,'[role="menuitemradio"]')].forEach((i=>{i.tabIndex=-1})),Boolean(i)&&(i.tabIndex=0,i.focus())}focusNextItem(){const i=this.getActiveItemIndex();this.focusItem(this.items[(i+1)%this.items.length])}focusPreviousItem(){const i=this.getActiveItemIndex();this.focusItem(this.items[0===i?this.items.length-1:i-1])}getActiveItemIndex(){const i=v();return this.items.findIndex((t=>t===i||t===(null==i?void 0:i.querySelector('[role="menuitem"]'))||t===(null==i?void 0:i.querySelector('[role="menuitemradio"]'))))}render(){var i,t;const o=!Boolean(this.parentMenu),n=o&&this.mobile?void 0:this.label,h=o&&this.mobile?"menu-title":void 0,a=o?"menubar":"menu",r=l("menu",`menu--level-${this.level}`,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":o});return s(e,null,s("div",{class:r},this.mobile&&o&&s("div",{class:"menu__mobile-header"},0===this.activeLevel&&s("swirl-button",{hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&s("swirl-button",{hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),s("span",{class:"menu__title",id:"menu-title"},s("swirl-heading",{align:"center",as:"span",level:4,text:this.label,truncate:!0})),s("swirl-button",{class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),s("div",{"aria-label":n,"aria-labelledby":h,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:i=>this.menuContainer=i,role:a,style:!this.mobile&&this.level>0?{top:Boolean(this.position)?`${null===(i=this.position)||void 0===i?void 0:i.y}px`:"",left:Boolean(this.position)?`${null===(t=this.position)||void 0===t?void 0:t.x}px`:""}:this.mobile?{left:o?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},s("slot",null))))}get el(){return o(this)}static get watchers(){return{active:["watchActive"]}}};p.style=":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-1)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-surface-overlay-default)}";export{p as swirl_menu}