@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-shell-navigation-item.js

@@ -1,139 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$6 } from './swirl-badge2.js';
-import { d as defineCustomElement$5 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$4 } from './swirl-tag2.js';
-import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  --swirl-app-icon-size: 2rem;\n  --swirl-shell-navigation-item-gradient: linear-gradient(\n    rgba(0, 0, 0, 0),\n    rgba(0, 0, 0, 0.8)\n  );\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item .shell-navigation-item__badge {\n    --swirl-badge-border-color: var(--s-surface-overlay-default);\n  }\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n    .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n    .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n        border-radius: var(--s-border-radius-sm);\n        width: 2rem;\n        min-width: 2rem;\n        height: 2rem;\n        min-height: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--filled {\n    padding: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n        color: var(--s-icon-on-action-primary);\n        background-color: var(--s-action-primary-default);\n      }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    border-radius: var(--s-border-radius-base);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n      position: absolute;\n      top: var(--s-space-12);\n      left: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n          position: absolute;\n          display: inline-block;\n          width: 100%;\n          border-radius: var(--s-border-radius-base);\n          background-image: var(--swirl-shell-navigation-item-gradient);\n          content: \"\";\n          aspect-ratio: 1;\n        }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      color: var(--s-text-default);\n      font-weight: var(--s-font-weight-semibold);\n      text-align: start;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n      position: absolute;\n      bottom: var(--s-space-12);\n      left: var(--s-space-12);\n      margin-right: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n        color: rgba(242, 242, 242, 1);\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n        color: rgb(25, 25, 25);\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n    --swirl-app-icon-size: 100%;\n    font-size: var(--s-font-size-xs);\n    padding: var(--s-space-8) var(--s-space-4);\n    align-items: center;\n    height: auto;\n    border-radius: var(--s-border-radius-sm);\n    flex-direction: column;\n    container-type: inline-size;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n      align-items: start;\n      padding: var(--s-space-8);\n      --swirl-app-icon-size: 2rem;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n        border-radius: var(--s-border-radius-sm);\n        max-width: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n        max-width: 2rem;\n        max-height: 2rem;\n      }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      max-width: 3.5rem;\n      height: auto;\n      border-radius: var(--s-border-radius-base);\n\n      color: var(--s-icon-on-action-primary);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n      max-width: 3.5rem;\n      max-height: 3.5rem;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n      line-height: var(--s-line-height-xs);\n      text-align: center;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\n    }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n\n    .shell-navigation-item .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-default);\n    }\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n  margin-left: var(--s-space-8);\n  font-weight: var(--s-font-weight-normal);\n  color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n  flex-shrink: 0;\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n  flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n  position: absolute;\n  top: 0.625rem;\n  right: 0.625rem;\n  flex-shrink: 0;\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item--gradient .shell-navigation-item__icon {\n    --swirl-shell-navigation-item-gradient: none;\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
-
-const SwirlShellNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellNavigationItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.hideLabel = false;
-        this.inlineLabelColor = "default";
-        this.markAsNewLabel = "New";
-        this.useCustomIconSize = false;
-        this.variant = "default";
-    }
-    componentWillLoad() {
-        this.forceIconProps();
-    }
-    componentDidRender() {
-        this.forceIconProps();
-    }
-    forceIconProps() {
-        if (this.useCustomIconSize) {
-            return;
-        }
-        const iconEl = this.el.querySelector("[slot='icon']");
-        const smallIcon = (this.hideLabel && this.variant === "app-icon") ||
-            this.variant === "default";
-        if (iconEl &&
-            (iconEl.tagName.startsWith("SWIRL-ICON") ||
-                iconEl.tagName.startsWith("SWIRL-EMOJI") ||
-                iconEl.tagName.startsWith("SWIRL-SYMBOL"))) {
-            iconEl.setAttribute("size", smallIcon ? "20" : "32");
-        }
-    }
-    render() {
-        const hasSwirlAppIcon = Boolean(this.el.querySelector("swirl-app-icon"));
-        const tagClassNames = classNames("shell-navigation-item", `shell-navigation-item--${this.variant}`, {
-            "shell-navigation-item--active": this.active,
-            "shell-navigation-item--boxed": this.boxed,
-            "shell-navigation-item--filled": this.filled,
-            "shell-navigation-item--inline-label": this.inlineLabel,
-            "shell-navigation-item--gradient": this.withGradient,
-            "shell-navigation-item--hide-label": this.hideLabel,
-            "shell-navigation-item--has-app-icon": hasSwirlAppIcon,
-        });
-        const labelClassNames = classNames("shell-navigation-item__label", {
-            "shell-navigation-item__label--light": this.inlineLabelColor === "light",
-            "shell-navigation-item__label--dark": this.inlineLabelColor === "dark",
-            "shell-navigation-item__label--inline": this.inlineLabel,
-        });
-        const hasBadge = this.badgeLabel !== undefined && this.badgeLabel !== null;
-        const showIsNewTag = !hasBadge &&
-            this.markAsNew &&
-            !this.hideLabel &&
-            this.variant === "default";
-        const showIsNewBadge = !hasBadge &&
-            this.markAsNew &&
-            this.hideLabel &&
-            this.variant === "default";
-        const isLink = Boolean(this.href);
-        const Tag = isLink ? "a" : "button";
-        const tooltipContent = this.description
-            ? `${this.label} ${this.description}`
-            : this.label;
-        return (h(Host, { key: '8cf7066134363e77fcbbab5df945b73c1411c949' }, h("swirl-tooltip", { key: '23d052a99418da39a98b7c0d120635789c9005c7', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, h(Tag, { key: '939bfb6dcec6acadb72670c77f95d8ca4e097227', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'ceb12cff79d2e20ce832ce779abb0213c3626efb', class: "shell-navigation-item__icon" }, h("slot", { key: '67cfb7f2a46ce450fc2bbf09d890f98100570061', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: 'dbcd721c8a1a42294de9637da6abae055e001b0e', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: '661d900cbba6cce581fd4bd51b11a651114f360d', "aria-label": this.badgeLabel, class: classNames("shell-navigation-item__badge", {
-                "shell-navigation-item__badge--dot": this.badgeLabel === "",
-            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '739da73cb362fb798adc8c46d2e3591f45c5d8d0', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '9b822ab6f2439c8f68a3a09d4566e317d447229b', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlShellNavigationItemCss; }
-}, [1, "swirl-shell-navigation-item", {
-        "active": [4],
-        "badgeLabel": [1, "badge-label"],
-        "boxed": [4],
-        "description": [1],
-        "filled": [4],
-        "hideLabel": [4, "hide-label"],
-        "href": [1],
-        "inlineLabel": [4, "inline-label"],
-        "inlineLabelColor": [1, "inline-label-color"],
-        "label": [1],
-        "markAsNew": [4, "mark-as-new"],
-        "markAsNewLabel": [1, "mark-as-new-label"],
-        "swirlAriaCurrent": [1, "swirl-aria-current"],
-        "target": [1],
-        "useCustomIconSize": [4, "use-custom-icon-size"],
-        "variant": [1],
-        "withGradient": [4, "with-gradient"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-shell-navigation-item", "swirl-badge", "swirl-icon-close", "swirl-tag", "swirl-tooltip", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-shell-navigation-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlShellNavigationItem$1);
-            }
-            break;
-        case "swirl-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-tag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlShellNavigationItem = SwirlShellNavigationItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlShellNavigationItem, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as e,h as a,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as s}from"./swirl-badge2.js";import{d as o}from"./swirl-icon-close2.js";import{d as r}from"./swirl-tag2.js";import{d as h}from"./swirl-tooltip2.js";import{d}from"./swirl-visually-hidden2.js";const g=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.useCustomIconSize=!1,this.variant="default"}componentWillLoad(){this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){if(this.useCustomIconSize)return;const i=this.el.querySelector("[slot='icon']"),e=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;i&&(i.tagName.startsWith("SWIRL-ICON")||i.tagName.startsWith("SWIRL-EMOJI")||i.tagName.startsWith("SWIRL-SYMBOL"))&&i.setAttribute("size",e?"20":"32")}render(){const i=!!this.el.querySelector("swirl-app-icon"),e=n("shell-navigation-item","shell-navigation-item--"+this.variant,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":i}),l=n("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=!!this.href;return a(t,{key:"1b3125b2777a6b5337453ae04af5f4c65c0f83dd"},a("swirl-tooltip",{key:"09044dfd5537ed2534bce99405d1efecc9ca028a",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right"},a(h?"a":"button",{key:"78dc14713ea8ded8c4b5c2359e4be7bccb0f597d","aria-current":this.swirlAriaCurrent,class:e,href:this.href,target:this.target,type:h?void 0:"button",title:this.hideLabel?void 0:this.label},a("span",{key:"9e4d6eba7c91d4b3ff01c614df633870b57a3058",class:"shell-navigation-item__icon"},a("slot",{key:"f05f28d75cf41c32f472b81d7d947588d52dd3e9",name:"icon"})),this.hideLabel?a("swirl-visually-hidden",null,a("span",{class:l},this.label)):"default"!==this.variant?a("span",{class:l},this.label):a("div",{class:"shell-navigation-item__text-wrapper"},a("span",{class:l},this.label),this.description&&a("span",{class:"shell-navigation-item__description"},this.description)),s&&a("span",{key:"59a30be5f71bee16a0158ad4979ec4c2c8ea2558",class:"shell-navigation-item__badge-wrapper"},a("swirl-badge",{key:"5b2f41d82590b0ca0e577b2feb31049c003e031d","aria-label":this.badgeLabel,class:n("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&a("swirl-tag",{key:"8764eb21cb4bea2b58687ef3e26dc03917613425",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&a("swirl-badge",{key:"78947994353558e15b6a96d2e5ebf2fdfbbf4fc9",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return this}static get style(){return':host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.shell-navigation-item{--swirl-app-icon-size:2rem;--swirl-shell-navigation-item-gradient:linear-gradient(     rgba(0, 0, 0, 0),     rgba(0, 0, 0, 0.8)   );position:relative;display:flex;width:100%;height:3rem;padding:var(--s-space-8);flex-shrink:0;justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-decoration:none;cursor:pointer;container-type:size;gap:var(--s-space-12)}.shell-navigation-item .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-overlay-default)}.shell-navigation-item:hover{background-color:var(--s-surface-sunken-hovered)}.shell-navigation-item:hover .shell-navigation-item__badge,.shell-navigation-item:hover .shell-navigation-item__is-new-badge{--swirl-badge-border-color:var(--s-surface-sunken-hovered)}.shell-navigation-item:active{background-color:var(--s-surface-sunken-pressed)}.shell-navigation-item:active .shell-navigation-item__badge,.shell-navigation-item:active .shell-navigation-item__is-new-badge{--swirl-badge-border-color:var(--s-surface-sunken-pressed)}.shell-navigation-item:focus{outline:none}.shell-navigation-item:focus-visible{z-index:1;box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-navigation-item.shell-navigation-item--boxed{--swirl-app-icon-size:2rem}.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon{overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-default)}.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon{border-radius:var(--s-border-radius-sm);width:2rem;min-width:2rem;height:2rem;min-height:2rem}.shell-navigation-item.shell-navigation-item--filled{padding:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon{color:var(--s-icon-on-action-primary);background-color:var(--s-action-primary-default)}.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon){position:inherit;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--tiled{--swirl-app-icon-size:100%;height:auto;padding:0;align-items:start;border-radius:var(--s-border-radius-base);flex-direction:column;container-type:inline-size;gap:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--tiled:hover{background-color:transparent}.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label{text-decoration:underline}.shell-navigation-item.shell-navigation-item--tiled ::slotted(*){position:absolute;top:var(--s-space-12);left:var(--s-space-12)}.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon){position:inherit;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon{overflow:hidden;width:100%;min-width:100%;height:auto;min-height:auto;border-radius:var(--s-border-radius-base);background-color:var(--s-surface-sunken-hovered);aspect-ratio:1}.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after{position:absolute;display:inline-block;width:100%;border-radius:var(--s-border-radius-base);background-image:var(--swirl-shell-navigation-item-gradient);content:"";aspect-ratio:1}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);text-align:start}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline{position:absolute;bottom:var(--s-space-12);left:var(--s-space-12);margin-right:var(--s-space-12)}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light{color:rgba(242, 242, 242, 1)}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark{color:rgb(25, 25, 25)}.shell-navigation-item.shell-navigation-item--app-icon{--swirl-app-icon-size:100%;font-size:var(--s-font-size-xs);padding:var(--s-space-8) var(--s-space-4);align-items:center;height:auto;border-radius:var(--s-border-radius-sm);flex-direction:column;container-type:inline-size;gap:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label{align-items:start;padding:var(--s-space-8);--swirl-app-icon-size:2rem}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon{border-radius:var(--s-border-radius-sm);max-width:2rem}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper{max-width:2rem;max-height:2rem}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon{overflow:hidden;width:100%;max-width:3.5rem;height:auto;border-radius:var(--s-border-radius-base);color:var(--s-icon-on-action-primary);aspect-ratio:1}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper{max-width:3.5rem;max-height:3.5rem}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label{line-height:var(--s-line-height-xs);text-align:center}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper{position:absolute;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label{display:-webkit-box;overflow:hidden;white-space:normal;text-overflow:unset;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge{position:absolute;top:-0.375rem;right:-0.375rem;padding:var(--s-space-2)}.shell-navigation-item.shell-navigation-item--active{background-color:var(--s-surface-sunken-hovered)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon{color:var(--s-icon-highlight)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label{color:var(--s-text-highlight)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-sunken-hovered)}.shell-navigation-item.shell-navigation-item--active:hover{background-color:var(--s-surface-sunken-hovered)}.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-sunken-hovered)}.shell-navigation-item.shell-navigation-item--active:active{background-color:var(--s-surface-sunken-pressed)}.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-sunken-pressed)}@media (min-width: 992px){.shell-navigation-item{background-color:var(--s-surface-sunken-default)}.shell-navigation-item .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-sunken-default)}}.shell-navigation-item__icon{display:inline-flex;width:2rem;min-width:2rem;height:2rem;min-height:2rem;justify-content:center;align-items:center;overflow:hidden;border-radius:var(--s-border-radius-base)}.shell-navigation-item__text-wrapper{overflow:hidden;min-width:0;flex-grow:1;text-align:start;white-space:nowrap;text-overflow:ellipsis}.shell-navigation-item__description{margin-left:var(--s-space-8);font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued)}.shell-navigation-item__badge{flex-shrink:0;--swirl-badge-border-color:var(--swirl-shell-background)}.shell-navigation-item__is-new-tag{flex-shrink:0}.shell-navigation-item__is-new-badge{position:absolute;top:0.625rem;right:0.625rem;flex-shrink:0;--swirl-badge-border-color:var(--swirl-shell-background)}@container (max-width: 4rem){.shell-navigation-item__badge{position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding:var(--s-space-2)}.shell-navigation-item--gradient .shell-navigation-item__icon{--swirl-shell-navigation-item-gradient:none}.shell-navigation-item__badge--dot{top:var(--s-space-8);right:var(--s-space-8)}}@container (min-width: 10rem){.shell-navigation-item__badge--dot{padding-right:var(--s-space-4)}}'}},[257,"swirl-shell-navigation-item",{active:[4],badgeLabel:[1,"badge-label"],boxed:[4],description:[1],filled:[4],hideLabel:[4,"hide-label"],href:[1],inlineLabel:[4,"inline-label"],inlineLabelColor:[1,"inline-label-color"],label:[1],markAsNew:[4,"mark-as-new"],markAsNewLabel:[1,"mark-as-new-label"],swirlAriaCurrent:[1,"swirl-aria-current"],target:[1],useCustomIconSize:[4,"use-custom-icon-size"],variant:[1],withGradient:[4,"with-gradient"]}]),v=g,m=function(){"undefined"!=typeof customElements&&["swirl-shell-navigation-item","swirl-badge","swirl-icon-close","swirl-tag","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-shell-navigation-item":customElements.get(l(i))||customElements.define(l(i),g);break;case"swirl-badge":customElements.get(l(i))||s();break;case"swirl-icon-close":customElements.get(l(i))||o();break;case"swirl-tag":customElements.get(l(i))||r();break;case"swirl-tooltip":customElements.get(l(i))||h();break;case"swirl-visually-hidden":customElements.get(l(i))||d()}}))};export{v as SwirlShellNavigationItem,m as defineCustomElement}

package/dist/components/swirl-skeleton-box.js

@@ -1,6 +1 @@
-import { S as SwirlSkeletonBox$1, d as defineCustomElement$1 } from './swirl-skeleton-box2.js';
-
-const SwirlSkeletonBox = SwirlSkeletonBox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlSkeletonBox, defineCustomElement };
+import{S as o,d as s}from"./swirl-skeleton-box2.js";const r=o,t=s;export{r as SwirlSkeletonBox,t as defineCustomElement}

package/dist/components/swirl-skeleton-box2.js

@@ -1,51 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
-
-const SwirlSkeletonBox = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonBox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.animated = true;
-        this.borderRadius = "base";
-    }
-    render() {
-        const className = classNames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (h(Host, { key: 'a3332175d5c3bb3f35ce901caed4656f84c841d1', style: {
-                width: !Boolean(this.width) && !Boolean(this.aspectRatio)
-                    ? "100%"
-                    : undefined,
-            } }, h("div", { key: '83b0c75f7e9d2bffe3a6b925dbc8ea5181960c47', class: className, style: {
-                aspectRatio: this.aspectRatio,
-                borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
-                    ? `var(--s-border-radius-${this.borderRadius})`
-                    : undefined,
-                height: this.height,
-                width: this.width,
-            } })));
-    }
-    static get style() { return swirlSkeletonBoxCss; }
-}, [1, "swirl-skeleton-box", {
-        "animated": [4],
-        "aspectRatio": [1, "aspect-ratio"],
-        "borderRadius": [1, "border-radius"],
-        "height": [1],
-        "width": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-skeleton-box"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-skeleton-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlSkeletonBox);
-            }
-            break;
-    } });
-}
-
-export { SwirlSkeletonBox as S, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as o,transformTag as i}from"@stencil/core/internal/client";import{c as r}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.animated=!0,this.borderRadius="base"}render(){const e=r("skeleton-box",`skeleton-box--border-radius-${this.borderRadius}`,{"skeleton-box--static":!this.animated});return t(o,{key:"a3332175d5c3bb3f35ce901caed4656f84c841d1",style:{width:Boolean(this.width)||Boolean(this.aspectRatio)?void 0:"100%"}},t("div",{key:"83b0c75f7e9d2bffe3a6b925dbc8ea5181960c47",class:e,style:{aspectRatio:this.aspectRatio,borderRadius:"pill"!==this.borderRadius&&"none"!==this.borderRadius?`var(--s-border-radius-${this.borderRadius})`:void 0,height:this.height,width:this.width}}))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(       90deg,       rgba(255, 255, 255, 0) 0,       rgba(255, 255, 255, 0) 12%,       var(--s-surface-raised-default) 50%,       rgba(255, 255, 255, 0) 88%,       rgba(255, 255, 255, 0) 100%     );content:"";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}'}},[1,"swirl-skeleton-box",{animated:[4],aspectRatio:[1,"aspect-ratio"],borderRadius:[1,"border-radius"],height:[1],width:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-skeleton-box"].forEach((e=>{"swirl-skeleton-box"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))}export{a as S,n as d}

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

@@ -1,43 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlSkeletonTextCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n  )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n  )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2\n  )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n    )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2\n  )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2\n  )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:\"\"}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      var(--s-surface-raised-default) 33%,\n      rgba(255, 255, 255, 0) 66%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}";
-
-const SwirlSkeletonText$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonText extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.animated = true;
-        this.lines = 1;
-        this.size = "base";
-    }
-    render() {
-        const className = classNames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
-        const lineClassName = classNames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (h(Host, { key: '203e7f8076966c09d5855c18750020faab5017d7' }, h("div", { key: '7324f5343b9901e4f2136cd63d450ea78d5d24db', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
-    }
-    static get style() { return swirlSkeletonTextCss; }
-}, [1, "swirl-skeleton-text", {
-        "animated": [4],
-        "lines": [2],
-        "size": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-skeleton-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-skeleton-text":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlSkeletonText$1);
-            }
-            break;
-    } });
-}
-
-const SwirlSkeletonText = SwirlSkeletonText$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlSkeletonText, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as n}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.animated=!0,this.lines=1,this.size="base"}render(){const e=l("skeleton-text","skeleton-text--size-"+this.size,{"skeleton-text--static":!this.animated}),t=l("skeleton-text__line","skeleton-text__line--size-"+this.size);return i(s,{key:"203e7f8076966c09d5855c18750020faab5017d7"},i("div",{key:"7324f5343b9901e4f2136cd63d450ea78d5d24db",class:e,part:e},Array(this.lines).fill(void 0).map(((e,s)=>i("div",{class:t,key:s,part:t})))))}static get style(){return':host{display:block;width:100%}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(     (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2   )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(       (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2     )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(     (var(--s-line-height-base) - var(--s-font-size-base)) / 2   )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(       (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2     )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(     (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2   )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(       (var(--s-line-height-base) - var(--s-font-size-base)) / 2     )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(     (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2   )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(     (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2   )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:""}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(       90deg,       rgba(255, 255, 255, 0) 0,       var(--s-surface-raised-default) 33%,       rgba(255, 255, 255, 0) 66%     );content:"";transform:translateX(-100%);animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}'}},[1,"swirl-skeleton-text",{animated:[4],lines:[2],size:[1]}]),o=a,r=function(){"undefined"!=typeof customElements&&["swirl-skeleton-text"].forEach((e=>{"swirl-skeleton-text"===e&&(customElements.get(n(e))||customElements.define(n(e),a))}))};export{o as SwirlSkeletonText,r as defineCustomElement}

package/dist/components/swirl-spinner.js

@@ -1,6 +1 @@
-import { S as SwirlSpinner$1, d as defineCustomElement$1 } from './swirl-spinner2.js';
-
-const SwirlSpinner = SwirlSpinner$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlSpinner, defineCustomElement };
+import{S as s,d as r}from"./swirl-spinner2.js";const o=s,i=r;export{o as SwirlSpinner,i as defineCustomElement}

package/dist/components/swirl-spinner2.js

@@ -1,42 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-
-const swirlSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-xs,.spinner--size-20{width:1.25rem;height:1.25rem}.spinner--size-xs .spinner__circle,.spinner--size-20 .spinner__circle{stroke-width:0.1875rem}.spinner--size-s,.spinner--size-24{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle,.spinner--size-24 .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
-
-const SwirlSpinner = /*@__PURE__*/ proxyCustomElement(class SwirlSpinner extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.size = "m";
-    }
-    render() {
-        const className = classNames("spinner", `spinner--size-${this.size}`);
-        return (h(Host, { key: '694bca980d09def1418749711a585358dc7bb178' }, h("span", { key: 'ca139f5c7e6a8bae878148742179a06dbf9c9599', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: 'ab0aab0c2fb8b1f8a341fccf9f5b0716be3078a1', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'fbbb3114d127b5a88639ca0d646ca24e968769a4', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: 'd21644deb594688e148baa2222dcf600b4d35c84', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: '601e79219fb2ca08d0f8a824ad9f24d9f4493515' }, h("span", { key: 'ce599120d12c374c21e464ab82444b7be021f6f5', class: "spinner__label" }, this.label))))));
-    }
-    static get style() { return swirlSpinnerCss; }
-}, [1, "swirl-spinner", {
-        "label": [1],
-        "size": [8]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-spinner", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-spinner":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlSpinner);
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlSpinner as S, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as s,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{d as a}from"./swirl-visually-hidden2.js";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="m"}render(){const e=t("spinner",`spinner--size-${this.size}`);return i(r,{key:"694bca980d09def1418749711a585358dc7bb178"},i("span",{key:"ca139f5c7e6a8bae878148742179a06dbf9c9599",class:e,role:Boolean(this.label)?"status":void 0},i("svg",{key:"ab0aab0c2fb8b1f8a341fccf9f5b0716be3078a1","aria-hidden":"true",class:"spinner__indicator",focusable:"false",viewBox:"0 0 50 50"},i("circle",{key:"fbbb3114d127b5a88639ca0d646ca24e968769a4",class:"spinner__background",cx:"25",cy:"25",r:"20",fill:"none","stroke-width":"4"}),i("circle",{key:"d21644deb594688e148baa2222dcf600b4d35c84",class:"spinner__circle",cx:"25",cy:"25",r:"20",fill:"none","stroke-width":"4"})),this.label&&i("swirl-visually-hidden",{key:"601e79219fb2ca08d0f8a824ad9f24d9f4493515"},i("span",{key:"ce599120d12c374c21e464ab82444b7be021f6f5",class:"spinner__label"},this.label))))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-xs,.spinner--size-20{width:1.25rem;height:1.25rem}.spinner--size-xs .spinner__circle,.spinner--size-20 .spinner__circle{stroke-width:0.1875rem}.spinner--size-s,.spinner--size-24{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle,.spinner--size-24 .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}"}},[1,"swirl-spinner",{label:[1],size:[8]}]);function c(){"undefined"!=typeof customElements&&["swirl-spinner","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-spinner":customElements.get(n(e))||customElements.define(n(e),o);break;case"swirl-visually-hidden":customElements.get(n(e))||a()}}))}export{o as S,c as d}

package/dist/components/swirl-stack.js

@@ -1,6 +1 @@
-import { S as SwirlStack$1, d as defineCustomElement$1 } from './swirl-stack2.js';
-
-const SwirlStack = SwirlStack$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlStack, defineCustomElement };
+import{S as s,d as o}from"./swirl-stack2.js";const r=s,t=o;export{r as SwirlStack,t as defineCustomElement}

package/dist/components/swirl-stack2.js

@@ -1,55 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%;margin:0}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}ol.stack,ul.stack{margin:0;padding:0;list-style:none}.stack--align-start{align-items:flex-start;text-align:initial;}.stack--align-center{align-items:center;text-align:initial;}.stack--align-end{align-items:flex-end;text-align:initial;}.stack--align-stretch{align-items:stretch;text-align:initial;}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-vertical-reverse{flex-direction:column-reverse}.stack--orientation-horizontal{flex-direction:row}.stack--orientation-horizontal-reverse{flex-direction:row-reverse}.stack--wrap{flex-wrap:wrap}";
-
-const SwirlStack = /*@__PURE__*/ proxyCustomElement(class SwirlStack extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.align = "start";
-        this.as = "div";
-        this.justify = "start";
-        this.orientation = "vertical";
-        this.spacing = "0";
-        this.wrap = false;
-    }
-    render() {
-        const Tag = this.as;
-        const styles = {
-            columnGap: `var(--s-space-${this.columnSpacing || this.spacing})`,
-            rowGap: `var(--s-space-${this.rowSpacing || this.spacing})`,
-            height: this.height,
-        };
-        const className = classNames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
-        return (h(Host, { key: '9361133b37cb5c677dbf6dd49a39eec30c762e7a', style: { height: this.height } }, h(Tag, { key: '0fa5eaca5ac99e482f50793f170e6349e1854846', class: className, role: this.swirlAriaRole, style: styles }, h("slot", { key: '66e0cc4865421fbad50be48718d045a742fecedf' }))));
-    }
-    static get style() { return swirlStackCss; }
-}, [1, "swirl-stack", {
-        "align": [1],
-        "as": [1],
-        "height": [1],
-        "justify": [1],
-        "orientation": [1],
-        "columnSpacing": [1, "column-spacing"],
-        "rowSpacing": [1, "row-spacing"],
-        "spacing": [1],
-        "swirlAriaRole": [1, "swirl-aria-role"],
-        "wrap": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlStack);
-            }
-            break;
-    } });
-}
-
-export { SwirlStack as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as s,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{c as n}from"./index2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.align="start",this.as="div",this.justify="start",this.orientation="vertical",this.spacing="0",this.wrap=!1}render(){const t=this.as,s={columnGap:`var(--s-space-${this.columnSpacing||this.spacing})`,rowGap:`var(--s-space-${this.rowSpacing||this.spacing})`,height:this.height},a=n("stack",`stack--align-${this.align}`,`stack--justify-${this.justify}`,`stack--orientation-${this.orientation}`,{"stack--wrap":this.wrap});return e(i,{key:"9a0f09a97de33f201662145290ddb219a5348c85",style:{height:this.height}},e(t,{key:"d1369d2d980591f8bc2f85b6c765f2a86a4c8c5c",class:a,role:this.swirlAriaRole,style:s},e("slot",{key:"f182ae98194e70bf4b2e82a855f85ce54938dd3e"})))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%;margin:0}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}ol.stack,ul.stack{margin:0;padding:0;list-style:none}.stack--align-start{align-items:flex-start;text-align:initial;}.stack--align-center{align-items:center;text-align:initial;}.stack--align-end{align-items:flex-end;text-align:initial;}.stack--align-stretch{align-items:stretch;text-align:initial;}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-vertical-reverse{flex-direction:column-reverse}.stack--orientation-horizontal{flex-direction:row}.stack--orientation-horizontal-reverse{flex-direction:row-reverse}.stack--wrap{flex-wrap:wrap}"}},[257,"swirl-stack",{align:[1],as:[1],height:[1],justify:[1],orientation:[1],columnSpacing:[1,"column-spacing"],rowSpacing:[1,"row-spacing"],spacing:[1],swirlAriaRole:[1,"swirl-aria-role"],wrap:[4]}]);function r(){"undefined"!=typeof customElements&&["swirl-stack"].forEach((t=>{"swirl-stack"===t&&(customElements.get(a(t))||customElements.define(a(t),c))}))}export{c as S,r as d}

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

@@ -1,38 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlStatusIndicatorCss = ":host{display:block}:host *{box-sizing:border-box}.status-indicator{display:flex;align-items:center;gap:var(--s-space-4)}.status-indicator--intent-critical .status-indicator__dot:before{background-color:var(--s-icon-critical)}.status-indicator--intent-info .status-indicator__dot:before{background-color:var(--s-icon-info)}.status-indicator--intent-success .status-indicator__dot:before{background-color:var(--s-icon-success)}.status-indicator--intent-warning .status-indicator__dot:before{background-color:var(--s-icon-warning)}.status-indicator__dot{display:inline-flex;width:1.25rem;height:1.25rem;flex-shrink:0;justify-content:center;align-items:center}.status-indicator__dot:before{display:inline-flex;width:0.5rem;height:0.5rem;border-radius:50%;content:\"\"}.status-indicator__label{overflow:hidden;min-width:0;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis}";
-
-const SwirlStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class SwirlStatusIndicator extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        const className = classNames("status-indicator", `status-indicator--intent-${this.intent}`);
-        return (h(Host, { key: '2aaebe9ee16026f67582a0381143b6fd24f4b8db' }, h("div", { key: '70a7b3c5654b6a6f83a6b873f0828baa5c123e01', class: className }, h("span", { key: '2ab6e582449b946180926784257f5553980851bb', class: "status-indicator__dot" }), h("span", { key: 'da6c86923ca3b8349b00f3551bf176d7f60031ae', class: "status-indicator__label" }, this.label))));
-    }
-    static get style() { return swirlStatusIndicatorCss; }
-}, [1, "swirl-status-indicator", {
-        "intent": [1],
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-status-indicator"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-status-indicator":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlStatusIndicator$1);
-            }
-            break;
-    } });
-}
-
-const SwirlStatusIndicator = SwirlStatusIndicator$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlStatusIndicator, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as i,h as s,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as n}from"./index2.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){const t=n("status-indicator","status-indicator--intent-"+this.intent);return s(e,{key:"2aaebe9ee16026f67582a0381143b6fd24f4b8db"},s("div",{key:"70a7b3c5654b6a6f83a6b873f0828baa5c123e01",class:t},s("span",{key:"2ab6e582449b946180926784257f5553980851bb",class:"status-indicator__dot"}),s("span",{key:"da6c86923ca3b8349b00f3551bf176d7f60031ae",class:"status-indicator__label"},this.label)))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.status-indicator{display:flex;align-items:center;gap:var(--s-space-4)}.status-indicator--intent-critical .status-indicator__dot:before{background-color:var(--s-icon-critical)}.status-indicator--intent-info .status-indicator__dot:before{background-color:var(--s-icon-info)}.status-indicator--intent-success .status-indicator__dot:before{background-color:var(--s-icon-success)}.status-indicator--intent-warning .status-indicator__dot:before{background-color:var(--s-icon-warning)}.status-indicator__dot{display:inline-flex;width:1.25rem;height:1.25rem;flex-shrink:0;justify-content:center;align-items:center}.status-indicator__dot:before{display:inline-flex;width:0.5rem;height:0.5rem;border-radius:50%;content:""}.status-indicator__label{overflow:hidden;min-width:0;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis}'}},[1,"swirl-status-indicator",{intent:[1],label:[1]}]),r=o,c=function(){"undefined"!=typeof customElements&&["swirl-status-indicator"].forEach((t=>{"swirl-status-indicator"===t&&(customElements.get(a(t))||customElements.define(a(t),o))}))};export{r as SwirlStatusIndicator,c as defineCustomElement}

package/dist/components/swirl-switch.js

@@ -1,84 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$3 } from './swirl-stack2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlSwitchCss = ".sc-swirl-switch-h{display:inline-flex;max-width:100%}.sc-swirl-switch-h *.sc-swirl-switch{box-sizing:border-box}.switch.sc-swirl-switch{display:inline-flex;width:100%;align-items:center;touch-action:none}.switch.sc-swirl-switch:focus-within .switch__control.sc-swirl-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.switch--label-position-start.sc-swirl-switch{flex-direction:row-reverse}.switch--label-position-start.sc-swirl-switch .switch__content.sc-swirl-switch{margin-right:var(--s-space-12);margin-left:0}.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 1.25rem - var(--s-space-2))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 0.875rem - var(--s-space-2))}}.switch--on.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-default)}.switch--disabled.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-swirl-switch .switch__thumb.sc-swirl-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-swirl-switch .switch__label.sc-swirl-switch{color:var(--s-text-disabled)}.switch--hide-content.sc-swirl-switch .switch__content.sc-swirl-switch{margin-left:0}.switch__control.sc-swirl-switch{position:relative;width:2.75rem;height:1.5rem;flex-shrink:0;border-radius:calc(1.5rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__control.sc-swirl-switch{width:1.875rem;height:1.125rem;border-radius:calc(1.125rem / 2)}}.switch__thumb.sc-swirl-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:1.25rem;height:1.25rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__thumb.sc-swirl-switch{width:0.875rem;height:0.875rem}}.switch__content.sc-swirl-switch{position:relative;z-index:1;margin-left:var(--s-space-12)}.switch__label.sc-swirl-switch{overflow:hidden;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}.switch__description.sc-swirl-switch{color:var(--s-text-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-normal);line-height:var(--s-line-height-sm)}";
-
-const SwirlSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSwitch extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.checked = false;
-        this.disabled = false;
-        this.labelPosition = "end";
-        this.onChange = () => {
-            this.checked = !this.checked;
-            this.valueChange.emit(this.checked);
-        };
-    }
-    /**
-     * Toggle the switch state programmatically.
-     */
-    async toggle() {
-        this.inputEl.dispatchEvent(new Event("change"));
-    }
-    render() {
-        const off = !this.checked;
-        const on = this.checked;
-        const ariaCheckedLabel = on ? "true" : "false";
-        const className = classNames("switch", `switch--label-position-${this.labelPosition}`, {
-            "switch--off": off,
-            "switch--on": on,
-            "switch--disabled": this.disabled,
-            "switch--hide-content": this.hideLabel && (!this.description || this.hideDescription),
-        });
-        return (h(Host, { key: 'ffc5b983075477ec4724f731b2bc2d08bb9295b6' }, h("label", { key: '336c599a746cf7f4b55c9e00202d362da378453c', class: className, htmlFor: this.inputId }, h("span", { key: '2ab566a03f7dba10a3586a872fbfeb4018725d6b', class: "switch__control" }, h("swirl-visually-hidden", { key: 'a63f107cbf424a9803e9a29649c3d3f4e3c98a6b' }, h("input", { key: 'b8c6dab4bd9cf5b2e27af70319160ec4b46d2e80', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
-                ? this.swirlAriaLabel
-                : undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), h("span", { key: '85167d91244fff14988ff4335e8e1f9552eaf89b', "aria-hidden": "true", class: "switch__thumb" })), h("swirl-stack", { key: '8684c48ce6ee1cd45f0908904c31a0d774ce4ada', class: "switch__content" }, this.label && !this.hideLabel && (h("span", { key: 'd9decf3570c7ea1fde3c90d8a068dfdb60fd8569', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: 'ba8a12187e7c003bcfb40941ca610e2f8f2e8f95' }, this.swirlAriaLabel || this.label)), this.description && !this.hideDescription && (h("span", { key: 'f19f53f207fea295691fab44aa0e24f765e57224', class: "switch__description" }, this.description)), this.description && this.hideDescription && (h("swirl-visually-hidden", { key: '913e4f0d565ae5688eae74d9f8c77a3c7b332df7' }, this.description))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlSwitchCss; }
-}, [2, "swirl-switch", {
-        "checked": [1028],
-        "description": [1],
-        "disabled": [4],
-        "hideDescription": [4, "hide-description"],
-        "hideLabel": [4, "hide-label"],
-        "inputId": [1, "input-id"],
-        "inputName": [1, "input-name"],
-        "label": [1],
-        "labelPosition": [1, "label-position"],
-        "value": [1],
-        "swirlAriaLabel": [1, "swirl-aria-label"],
-        "toggle": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-switch", "swirl-stack", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-switch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlSwitch$1);
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlSwitch = SwirlSwitch$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlSwitch, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as s,createEvent as t,h as e,Host as c,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{d as h}from"./swirl-stack2.js";import{d as l}from"./swirl-visually-hidden2.js";const n=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=t(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.labelPosition="end",this.onChange=()=>{this.checked=!this.checked,this.valueChange.emit(this.checked)}}async toggle(){this.inputEl.dispatchEvent(new Event("change"))}render(){const i=this.checked,s=i?"true":"false",t=a("switch","switch--label-position-"+this.labelPosition,{"switch--off":!this.checked,"switch--on":i,"switch--disabled":this.disabled,"switch--hide-content":this.hideLabel&&(!this.description||this.hideDescription)});return e(c,{key:"ffc5b983075477ec4724f731b2bc2d08bb9295b6"},e("label",{key:"336c599a746cf7f4b55c9e00202d362da378453c",class:t,htmlFor:this.inputId},e("span",{key:"2ab566a03f7dba10a3586a872fbfeb4018725d6b",class:"switch__control"},e("swirl-visually-hidden",{key:"a63f107cbf424a9803e9a29649c3d3f4e3c98a6b"},e("input",{key:"b8c6dab4bd9cf5b2e27af70319160ec4b46d2e80","aria-checked":s,"aria-label":!this.hideLabel&&this.swirlAriaLabel?this.swirlAriaLabel:void 0,checked:i,class:"switch__input",disabled:this.disabled,id:this.inputId,name:this.inputName,onChange:this.onChange,ref:i=>this.inputEl=i,role:"switch",type:"checkbox",value:this.value})),e("span",{key:"85167d91244fff14988ff4335e8e1f9552eaf89b","aria-hidden":"true",class:"switch__thumb"})),e("swirl-stack",{key:"8684c48ce6ee1cd45f0908904c31a0d774ce4ada",class:"switch__content"},this.label&&!this.hideLabel&&e("span",{key:"d9decf3570c7ea1fde3c90d8a068dfdb60fd8569",class:"switch__label"},this.label),this.hideLabel&&e("swirl-visually-hidden",{key:"ba8a12187e7c003bcfb40941ca610e2f8f2e8f95"},this.swirlAriaLabel||this.label),this.description&&!this.hideDescription&&e("span",{key:"f19f53f207fea295691fab44aa0e24f765e57224",class:"switch__description"},this.description),this.description&&this.hideDescription&&e("swirl-visually-hidden",{key:"913e4f0d565ae5688eae74d9f8c77a3c7b332df7"},this.description))))}get el(){return this}static get style(){return".sc-swirl-switch-h{display:inline-flex;max-width:100%}.sc-swirl-switch-h *.sc-swirl-switch{box-sizing:border-box}.switch.sc-swirl-switch{display:inline-flex;width:100%;align-items:center;touch-action:none}.switch.sc-swirl-switch:focus-within .switch__control.sc-swirl-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.switch--label-position-start.sc-swirl-switch{flex-direction:row-reverse}.switch--label-position-start.sc-swirl-switch .switch__content.sc-swirl-switch{margin-right:var(--s-space-12);margin-left:0}.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 1.25rem - var(--s-space-2))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 0.875rem - var(--s-space-2))}}.switch--on.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-default)}.switch--disabled.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-swirl-switch .switch__thumb.sc-swirl-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-swirl-switch .switch__label.sc-swirl-switch{color:var(--s-text-disabled)}.switch--hide-content.sc-swirl-switch .switch__content.sc-swirl-switch{margin-left:0}.switch__control.sc-swirl-switch{position:relative;width:2.75rem;height:1.5rem;flex-shrink:0;border-radius:calc(1.5rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__control.sc-swirl-switch{width:1.875rem;height:1.125rem;border-radius:calc(1.125rem / 2)}}.switch__thumb.sc-swirl-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:1.25rem;height:1.25rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__thumb.sc-swirl-switch{width:0.875rem;height:0.875rem}}.switch__content.sc-swirl-switch{position:relative;z-index:1;margin-left:var(--s-space-12)}.switch__label.sc-swirl-switch{overflow:hidden;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}.switch__description.sc-swirl-switch{color:var(--s-text-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-normal);line-height:var(--s-line-height-sm)}"}},[2,"swirl-switch",{checked:[1028],description:[1],disabled:[4],hideDescription:[4,"hide-description"],hideLabel:[4,"hide-label"],inputId:[1,"input-id"],inputName:[1,"input-name"],label:[1],labelPosition:[1,"label-position"],value:[1],swirlAriaLabel:[1,"swirl-aria-label"],toggle:[64]}]),w=n,o=function(){"undefined"!=typeof customElements&&["swirl-switch","swirl-stack","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-switch":customElements.get(r(i))||customElements.define(r(i),n);break;case"swirl-stack":customElements.get(r(i))||h();break;case"swirl-visually-hidden":customElements.get(r(i))||l()}}))};export{w as SwirlSwitch,o as defineCustomElement}