@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-box2.js

@@ -1,187 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlBoxCss = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--hide-scrollbar){scrollbar-width:none}:host(.box--hide-scrollbar)::-webkit-scrollbar{display:none}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
-
-const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.componentLoad = createEvent(this, "componentLoad", 7);
-        this.borderColor = "default";
-        this.overflow = "visible";
-        this.padding = "0";
-        this.scrollState = {
-            scrollable: false,
-            scrolledToBottom: false,
-            scrolledToTop: false,
-        };
-        this.onScroll = () => {
-            this.updateScrollState();
-        };
-    }
-    connectedCallback() {
-        if (this.needsScrollTracking) {
-            this.setupResizeObserver();
-        }
-    }
-    componentDidLoad() {
-        this.componentLoad.emit();
-    }
-    disconnectedCallback() {
-        this.teardownResizeObserver();
-    }
-    onScrollTrackingPropChange() {
-        if (this.needsScrollTracking) {
-            this.setupResizeObserver();
-        }
-        else {
-            this.teardownResizeObserver();
-        }
-    }
-    setupResizeObserver() {
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
-        this.resizeObserver.observe(this.el);
-    }
-    teardownResizeObserver() {
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-    }
-    get needsScrollTracking() {
-        return (this.borderedBlockEndWhenScrolled || this.borderedBlockStartWhenScrolled);
-    }
-    updateScrollState() {
-        if (!this.el.isConnected) {
-            return;
-        }
-        const newScrollState = {
-            scrollable: this.el.scrollHeight > this.el.clientHeight,
-            scrolledToTop: this.el.scrollTop === 0,
-            scrolledToBottom: Math.round(this.el.scrollTop + this.el.clientHeight) >=
-                this.el.scrollHeight,
-        };
-        if (Object.keys(newScrollState).some((key) => newScrollState[key] !== this.scrollState[key])) {
-            this.scrollState = newScrollState;
-        }
-    }
-    render() {
-        const styles = {
-            alignItems: this.centerBlock ? "center" : undefined,
-            bottom: this.bottom,
-            display: this.centerBlock || this.centerInline ? "flex" : undefined,
-            flexBasis: this.basis,
-            flexShrink: this.shrink,
-            flexGrow: this.grow,
-            height: this.cover ? "100%" : this.height,
-            justifyContent: this.centerInline ? "center" : undefined,
-            left: this.left,
-            maxHeight: this.maxHeight,
-            minHeight: this.minHeight,
-            maxWidth: this.maxWidth,
-            minWidth: this.minWidth,
-            overflow: this.overflow,
-            ...(this.overflowX && { overflowX: this.overflowX }),
-            ...(this.overflowY && { overflowY: this.overflowY }),
-            padding: `var(--s-space-${this.padding})`,
-            paddingBlockEnd: Boolean(this.paddingBlockEnd)
-                ? `var(--s-space-${this.paddingBlockEnd})`
-                : undefined,
-            paddingBlockStart: Boolean(this.paddingBlockStart)
-                ? `var(--s-space-${this.paddingBlockStart})`
-                : undefined,
-            paddingInlineEnd: Boolean(this.paddingInlineEnd)
-                ? `var(--s-space-${this.paddingInlineEnd})`
-                : undefined,
-            paddingInlineStart: Boolean(this.paddingInlineStart)
-                ? `var(--s-space-${this.paddingInlineStart})`
-                : undefined,
-            position: Boolean(this.overflow) ||
-                Boolean(this.overflowX) ||
-                Boolean(this.overflowY)
-                ? this.position || "relative"
-                : this.position,
-            right: this.right,
-            top: this.top,
-            width: this.cover ? "100%" : this.width,
-            zIndex: this.zIndex,
-        };
-        const className = classNames("box", `box--border-color-${this.borderColor}`, {
-            "box--bordered": this.bordered,
-            "box--bordered-block-end": this.borderedBlockEnd,
-            "box--bordered-block-end-when-scrolled": this.borderedBlockEndWhenScrolled,
-            "box--bordered-block-start": this.borderedBlockStart,
-            "box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled,
-            "box--bordered-inline-end": this.borderedInlineEnd,
-            "box--bordered-inline-start": this.borderedInlineStart,
-            "box--cover": this.cover,
-            "box--hide-scrollbar": this.hideScrollbar,
-            "box--scrollable": this.scrollState.scrollable,
-            "box--scrolled-to-top": this.scrollState.scrolledToTop,
-            "box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
-        });
-        return (h(Host, { key: '843522cfc2ce24e99758982aecddaf6c660df174', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '0be371ff18d90e453f314ebd6a218eb6be29e4be' })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "borderedBlockEndWhenScrolled": ["onScrollTrackingPropChange"],
-        "borderedBlockStartWhenScrolled": ["onScrollTrackingPropChange"]
-    }; }
-    static get style() { return swirlBoxCss; }
-}, [1, "swirl-box", {
-        "borderColor": [1, "border-color"],
-        "bordered": [4],
-        "borderedBlockEnd": [4, "bordered-block-end"],
-        "borderedBlockEndWhenScrolled": [4, "bordered-block-end-when-scrolled"],
-        "borderedBlockStart": [4, "bordered-block-start"],
-        "borderedBlockStartWhenScrolled": [4, "bordered-block-start-when-scrolled"],
-        "borderedInlineEnd": [4, "bordered-inline-end"],
-        "borderedInlineStart": [4, "bordered-inline-start"],
-        "bottom": [1],
-        "centerBlock": [4, "center-block"],
-        "centerInline": [4, "center-inline"],
-        "cover": [4],
-        "height": [1],
-        "hideScrollbar": [4, "hide-scrollbar"],
-        "left": [1],
-        "maxHeight": [1, "max-height"],
-        "minHeight": [1, "min-height"],
-        "maxWidth": [1, "max-width"],
-        "minWidth": [1, "min-width"],
-        "overflow": [1],
-        "overflowX": [1, "overflow-x"],
-        "overflowY": [1, "overflow-y"],
-        "padding": [1],
-        "paddingBlockEnd": [1, "padding-block-end"],
-        "paddingBlockStart": [1, "padding-block-start"],
-        "paddingInlineEnd": [1, "padding-inline-end"],
-        "paddingInlineStart": [1, "padding-inline-start"],
-        "position": [1],
-        "right": [1],
-        "basis": [1],
-        "shrink": [1],
-        "grow": [1],
-        "top": [1],
-        "width": [1],
-        "zIndex": [1, "z-index"],
-        "scrollState": [32]
-    }, undefined, {
-        "borderedBlockEndWhenScrolled": ["onScrollTrackingPropChange"],
-        "borderedBlockStartWhenScrolled": ["onScrollTrackingPropChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-box"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlBox);
-            }
-            break;
-    } });
-}
-
-export { SwirlBox as S, defineCustomElement as d };
+import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,Host as d,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";const l=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.componentLoad=r(this,"componentLoad",7),this.borderColor="default",this.overflow="visible",this.padding="0",this.scrollState={scrollable:!1,scrolledToBottom:!1,scrolledToTop:!1},this.onScroll=()=>{this.updateScrollState()}}connectedCallback(){this.needsScrollTracking&&this.setupResizeObserver()}componentDidLoad(){this.componentLoad.emit()}disconnectedCallback(){this.teardownResizeObserver()}onScrollTrackingPropChange(){this.needsScrollTracking?this.setupResizeObserver():this.teardownResizeObserver()}setupResizeObserver(){this.resizeObserver?.disconnect(),this.resizeObserver=new ResizeObserver((()=>this.updateScrollState())),this.resizeObserver.observe(this.el)}teardownResizeObserver(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0}get needsScrollTracking(){return this.borderedBlockEndWhenScrolled||this.borderedBlockStartWhenScrolled}updateScrollState(){if(!this.el.isConnected)return;const o={scrollable:this.el.scrollHeight>this.el.clientHeight,scrolledToTop:0===this.el.scrollTop,scrolledToBottom:Math.round(this.el.scrollTop+this.el.clientHeight)>=this.el.scrollHeight};Object.keys(o).some((e=>o[e]!==this.scrollState[e]))&&(this.scrollState=o)}render(){const o={alignItems:this.centerBlock?"center":void 0,bottom:this.bottom,display:this.centerBlock||this.centerInline?"flex":void 0,flexBasis:this.basis,flexShrink:this.shrink,flexGrow:this.grow,height:this.cover?"100%":this.height,justifyContent:this.centerInline?"center":void 0,left:this.left,maxHeight:this.maxHeight,minHeight:this.minHeight,maxWidth:this.maxWidth,minWidth:this.minWidth,overflow:this.overflow,...this.overflowX&&{overflowX:this.overflowX},...this.overflowY&&{overflowY:this.overflowY},padding:`var(--s-space-${this.padding})`,paddingBlockEnd:Boolean(this.paddingBlockEnd)?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:Boolean(this.paddingBlockStart)?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:Boolean(this.paddingInlineEnd)?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:Boolean(this.paddingInlineStart)?`var(--s-space-${this.paddingInlineStart})`:void 0,position:Boolean(this.overflow)||Boolean(this.overflowX)||Boolean(this.overflowY)?this.position||"relative":this.position,right:this.right,top:this.top,width:this.cover?"100%":this.width,zIndex:this.zIndex},e=i("box",`box--border-color-${this.borderColor}`,{"box--bordered":this.bordered,"box--bordered-block-end":this.borderedBlockEnd,"box--bordered-block-end-when-scrolled":this.borderedBlockEndWhenScrolled,"box--bordered-block-start":this.borderedBlockStart,"box--bordered-block-start-when-scrolled":this.borderedBlockStartWhenScrolled,"box--bordered-inline-end":this.borderedInlineEnd,"box--bordered-inline-start":this.borderedInlineStart,"box--cover":this.cover,"box--hide-scrollbar":this.hideScrollbar,"box--scrollable":this.scrollState.scrollable,"box--scrolled-to-top":this.scrollState.scrolledToTop,"box--scrolled-to-bottom":this.scrollState.scrolledToBottom});return t(d,{key:"843522cfc2ce24e99758982aecddaf6c660df174",class:e,onScroll:this.onScroll,style:o},t("slot",{key:"0be371ff18d90e453f314ebd6a218eb6be29e4be"}))}get el(){return this}static get watchers(){return{borderedBlockEndWhenScrolled:[{onScrollTrackingPropChange:0}],borderedBlockStartWhenScrolled:[{onScrollTrackingPropChange:0}]}}static get style(){return":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--hide-scrollbar){scrollbar-width:none}:host(.box--hide-scrollbar)::-webkit-scrollbar{display:none}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}"}},[257,"swirl-box",{borderColor:[1,"border-color"],bordered:[4],borderedBlockEnd:[4,"bordered-block-end"],borderedBlockEndWhenScrolled:[4,"bordered-block-end-when-scrolled"],borderedBlockStart:[4,"bordered-block-start"],borderedBlockStartWhenScrolled:[4,"bordered-block-start-when-scrolled"],borderedInlineEnd:[4,"bordered-inline-end"],borderedInlineStart:[4,"bordered-inline-start"],bottom:[1],centerBlock:[4,"center-block"],centerInline:[4,"center-inline"],cover:[4],height:[1],hideScrollbar:[4,"hide-scrollbar"],left:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],minWidth:[1,"min-width"],overflow:[1],overflowX:[1,"overflow-x"],overflowY:[1,"overflow-y"],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],position:[1],right:[1],basis:[1],shrink:[1],grow:[1],top:[1],width:[1],zIndex:[1,"z-index"],scrollState:[32]},void 0,{borderedBlockEndWhenScrolled:[{onScrollTrackingPropChange:0}],borderedBlockStartWhenScrolled:[{onScrollTrackingPropChange:0}]}]);function n(){"undefined"!=typeof customElements&&["swirl-box"].forEach((o=>{"swirl-box"===o&&(customElements.get(s(o))||customElements.define(s(o),l))}))}export{l as S,n as d}

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

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

package/dist/components/swirl-button-group2.js

@@ -1,53 +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-stack2.js';
-
-const swirlButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:\"\";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled=\"false\"][intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}";
-
-const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.orientation = "horizontal";
-        this.spacing = "8";
-    }
-    render() {
-        const spacing = this.segmented ? "0" : this.spacing;
-        const className = classNames("button-group", {
-            "button-group--segmented": this.segmented,
-        });
-        return (h(Host, { key: '1c5dcaf521e8ee19f572f03e428f6f6297106ae0' }, h("swirl-stack", { key: '78073a9c28c55e16c68c9f32f4573e18f08d8822', align: this.orientation === "vertical" && this.stretch
-                ? "stretch"
-                : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
-                ? "stretch"
-                : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: '4936fecbd49610aec18174458b1cd7ef42723eba' }))));
-    }
-    static get style() { return swirlButtonGroupCss; }
-}, [1, "swirl-button-group", {
-        "orientation": [1],
-        "segmented": [4],
-        "spacing": [1],
-        "stretch": [4],
-        "wrap": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-button-group", "swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-button-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlButtonGroup);
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlButtonGroup as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as r,h as o,Host as s,transformTag as e}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{d as n}from"./swirl-stack2.js";const a=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.orientation="horizontal",this.spacing="8"}render(){const t=this.segmented?"0":this.spacing,r=i("button-group",{"button-group--segmented":this.segmented});return o(s,{key:"1c5dcaf521e8ee19f572f03e428f6f6297106ae0"},o("swirl-stack",{key:"78073a9c28c55e16c68c9f32f4573e18f08d8822",align:"vertical"===this.orientation&&this.stretch?"stretch":"start",class:r,justify:"horizontal"===this.orientation&&this.stretch?"stretch":"start",orientation:this.orientation,role:"group",spacing:t,wrap:this.wrap},o("slot",{key:"4936fecbd49610aec18174458b1cd7ef42723eba"})))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}'}},[257,"swirl-button-group",{orientation:[1],segmented:[4],spacing:[1],stretch:[4],wrap:[4]}]);function d(){"undefined"!=typeof customElements&&["swirl-button-group","swirl-stack"].forEach((t=>{switch(t){case"swirl-button-group":customElements.get(e(t))||customElements.define(e(t),a);break;case"swirl-stack":customElements.get(e(t))||n()}}))}export{a as S,d}

package/dist/components/swirl-button.js

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

package/dist/components/swirl-button2.js

@@ -1,135 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-
-const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{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-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid\n    var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
-
-const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.cursor = "pointer";
-        this.iconPosition = "start";
-        this.intent = "default";
-        this.size = "m";
-        this.textAlign = "center";
-        this.type = "button";
-        this.variant = "ghost";
-        this.mediaQueryUnsubscribe = () => { };
-    }
-    componentDidLoad() {
-        this.updateFormAttribute();
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.isDesktop = isDesktop;
-            this.forceIconProps();
-        });
-    }
-    componentDidRender() {
-        this.updateFormAttribute();
-        this.forceIconProps();
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps() {
-        if (!Boolean(this.iconEl)) {
-            return;
-        }
-        const icon = this.iconEl.children[0];
-        if (icon?.tagName.startsWith("SWIRL-ICON") ||
-            icon?.tagName.startsWith("SWIRL-EMOJI") ||
-            icon?.tagName.startsWith("SWIRL-SYMBOL")) {
-            icon?.setAttribute("size", this.isDesktop ? "20" : "24");
-        }
-    }
-    getAriaLabel(hideLabel) {
-        if (Boolean(this.swirlAriaLabel)) {
-            return this.swirlAriaLabel;
-        }
-        else if (hideLabel) {
-            return this.label;
-        }
-        return undefined;
-    }
-    updateFormAttribute() {
-        // Workaround: form attribute cannot be set via Stencil JSX
-        // https://github.com/ionic-team/stencil/issues/2703
-        const isLink = Boolean(this.href);
-        if (isLink || !Boolean(this.form)) {
-            this.buttonEl?.removeAttribute("form");
-        }
-        else {
-            this.buttonEl?.setAttribute("form", this.form);
-        }
-    }
-    render() {
-        const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
-            (this.variant === "floating" && this.intent === "default");
-        const isLink = Boolean(this.href);
-        const ariaLabel = this.getAriaLabel(hideLabel);
-        const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
-        const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
-        const hasTrailingSlot = Boolean(this.el.querySelector("[slot='trailing']"));
-        const className = classNames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
-            "button--elevated": this.elevated,
-            "button--disabled": this.disabled,
-            "button--has-icon": hasIcon,
-            "button--icon-only": hideLabel,
-            "button--pill": this.pill,
-            "button--pressed": this.pressed,
-        });
-        const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '08f425e502d0f95c2cefd7468e1dcafa24ee48cc', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '78c9d582bacd29ed0bb5045b701da915621d1988', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
-                cursor: !this.disabled && this.cursor !== "pointer"
-                    ? this.cursor
-                    : undefined,
-                fontSize: this.inheritFontSize ? "inherit" : undefined,
-                lineHeight: this.inheritFontSize ? "inherit" : undefined,
-            } }, Boolean(this.icon) && (h("span", { key: 'ca742100720788f3b187a2b4eb7d24a0527da881', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '85c755f928c33a2076a28ae44c961ecd48126749', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '84a67a65f34f200261c1a70b0f3d3679f8413351', name: "icon" }))), !hideLabel && h("span", { key: '33d82152407febb56c8b27a956b1a60b9eb9d61e', class: "button__label" }, this.label), hasTag && (h("span", { key: 'dd715d4605571e384e6a28b110191474ca4b0c44', class: "button__tag" }, h("slot", { key: '3a5e3a9b4f54048fb16c0dca3ccdc4ff11c7f699', name: "tag" }))), hasTrailingSlot && (h("div", { key: 'd3d469056217738fce0c0485d18785be43df66a9', class: "button__trailing-slot" }, h("slot", { key: '55b7587f089c3cfbc832e46e18e78421d559fe3b', name: "trailing" }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlButtonCss; }
-}, [6, "swirl-button", {
-        "cursor": [1],
-        "disabled": [4],
-        "download": [1],
-        "elevated": [4],
-        "form": [1],
-        "hideLabel": [4, "hide-label"],
-        "href": [1],
-        "icon": [1],
-        "iconPosition": [1, "icon-position"],
-        "intent": [1],
-        "inheritFontSize": [4, "inherit-font-size"],
-        "label": [1],
-        "name": [1],
-        "pill": [4],
-        "pressed": [4],
-        "size": [1],
-        "swirlAriaControls": [1, "swirl-aria-controls"],
-        "swirlAriaCurrent": [1, "swirl-aria-current"],
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "swirlAriaExpanded": [1, "swirl-aria-expanded"],
-        "swirlAriaHaspopup": [1, "swirl-aria-haspopup"],
-        "swirlAriaLabel": [1, "swirl-aria-label"],
-        "target": [1],
-        "textAlign": [1, "text-align"],
-        "type": [1],
-        "value": [1],
-        "variant": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlButton);
-            }
-            break;
-    } });
-}
-
-export { SwirlButton as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as o,h as n,Host as i,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as s}from"./media-query.service.js";const e=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.cursor="pointer",this.iconPosition="start",this.intent="default",this.size="m",this.textAlign="center",this.type="button",this.variant="ghost",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.updateFormAttribute(),this.mediaQueryUnsubscribe=s.subscribe((t=>{this.isDesktop=t,this.forceIconProps()}))}componentDidRender(){this.updateFormAttribute(),this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl))return;const t=this.iconEl.children[0];(t?.tagName.startsWith("SWIRL-ICON")||t?.tagName.startsWith("SWIRL-EMOJI")||t?.tagName.startsWith("SWIRL-SYMBOL"))&&t?.setAttribute("size",this.isDesktop?"20":"24")}getAriaLabel(t){return Boolean(this.swirlAriaLabel)?this.swirlAriaLabel:t?this.label:void 0}updateFormAttribute(){Boolean(this.href)||!Boolean(this.form)?this.buttonEl?.removeAttribute("form"):this.buttonEl?.setAttribute("form",this.form)}render(){const t=this.hideLabel&&Boolean(this.icon)||"floating"===this.variant&&"default"===this.intent,o=Boolean(this.href),r=this.getAriaLabel(t),s=this.icon||Boolean(this.el.querySelector("[slot='icon']")),e=Boolean(this.el.querySelector("[slot='tag']")),l=Boolean(this.el.querySelector("[slot='trailing']")),b=a("button",`button--icon-position-${this.iconPosition}`,`button--intent-${this.intent}`,`button--size-${this.size}`,`button--text-align-${this.textAlign}`,`button--variant-${this.variant}`,{"button--elevated":this.elevated,"button--disabled":this.disabled,"button--has-icon":s,"button--icon-only":t,"button--pill":this.pill,"button--pressed":this.pressed});return n(i,{key:"08f425e502d0f95c2cefd7468e1dcafa24ee48cc",style:{pointerEvents:this.disabled?"none":""}},n(o?"a":"button",{key:"78c9d582bacd29ed0bb5045b701da915621d1988","aria-controls":this.swirlAriaControls,"aria-current":this.swirlAriaCurrent,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled&&!o?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,"aria-label":r,"aria-pressed":this.pressed?"true":void 0,class:b,disabled:o?void 0:this.disabled,download:o?void 0:this.download,form:o?void 0:this.form,href:this.href,name:o?void 0:this.name,ref:t=>this.buttonEl=t,target:o?this.target:void 0,type:o?void 0:this.type,value:o?void 0:this.value,style:{cursor:this.disabled||"pointer"===this.cursor?void 0:this.cursor,fontSize:this.inheritFontSize?"inherit":void 0,lineHeight:this.inheritFontSize?"inherit":void 0}},Boolean(this.icon)&&n("span",{key:"ca742100720788f3b187a2b4eb7d24a0527da881",class:"button__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),!Boolean(this.icon)&&n("span",{key:"85c755f928c33a2076a28ae44c961ecd48126749",class:"button__icon",ref:t=>this.iconEl=t},n("slot",{key:"84a67a65f34f200261c1a70b0f3d3679f8413351",name:"icon"})),!t&&n("span",{key:"33d82152407febb56c8b27a956b1a60b9eb9d61e",class:"button__label"},this.label),e&&n("span",{key:"dd715d4605571e384e6a28b110191474ca4b0c44",class:"button__tag"},n("slot",{key:"3a5e3a9b4f54048fb16c0dca3ccdc4ff11c7f699",name:"tag"})),l&&n("div",{key:"d3d469056217738fce0c0485d18785be43df66a9",class:"button__trailing-slot"},n("slot",{key:"55b7587f089c3cfbc832e46e18e78421d559fe3b",name:"trailing"}))))}get el(){return this}static get style(){return".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{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-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid     var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(       --swirl-icon-button-border-bottom-right-radius     );border-bottom-left-radius:var(       --swirl-icon-button-border-bottom-left-radius     )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}"}},[262,"swirl-button",{cursor:[1],disabled:[4],download:[1],elevated:[4],form:[1],hideLabel:[4,"hide-label"],href:[1],icon:[1],iconPosition:[1,"icon-position"],intent:[1],inheritFontSize:[4,"inherit-font-size"],label:[1],name:[1],pill:[4],pressed:[4],size:[1],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlAriaHaspopup:[1,"swirl-aria-haspopup"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],textAlign:[1,"text-align"],type:[1],value:[1],variant:[1]}]);function l(){"undefined"!=typeof customElements&&["swirl-button"].forEach((t=>{"swirl-button"===t&&(customElements.get(r(t))||customElements.define(r(t),e))}))}export{e as S,l as d}