@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-card.js

@@ -1,130 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlCardCss = ":host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(\n    --s-surface-raised-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-raised-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-raised-pressed\n  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}";
-
-const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
-const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.componentLoad = createEvent(this, "componentLoad", 7);
-        this.as = "div";
-        this.borderRadius = "base";
-        this.elevationLevel = 3;
-        this.intent = "default";
-        this.justifyContent = "start";
-        this.flashing = false;
-    }
-    /**
-     * Flashes the card to draw focus.
-     */
-    async flash(duration = 5000) {
-        if (Boolean(this.flashingTimeout)) {
-            clearTimeout(this.flashingTimeout);
-            this.flashingTimeout = undefined;
-        }
-        this.flashing = true;
-        this.flashingTimeout = setTimeout(() => {
-            this.flashing = false;
-        }, duration);
-    }
-    componentDidLoad() {
-        this.componentLoad.emit();
-    }
-    render() {
-        const Tag = Boolean(this.href) ? "a" : this.as;
-        const hasFloatingControls = Boolean(this.el.querySelector('[slot="floating-controls"]'));
-        const hasImage = Boolean(this.el.querySelector('[slot="image"]'));
-        const styles = {
-            ...(this.customBackgroundColor
-                ? { "--swirl-card-background-default": this.customBackgroundColor }
-                : {}),
-            backdropFilter: this.customBackdropFilter,
-            borderRadius: swirlCardBorderRadiusTokens.includes(this.borderRadius)
-                ? `var(--s-border-radius-${this.borderRadius})`
-                : this.borderRadius,
-            height: this.height,
-            minHeight: this.minHeight,
-            overflow: this.overflow,
-        };
-        const bodyStyles = {
-            padding: Boolean(this.padding)
-                ? `var(--s-space-${this.padding})`
-                : undefined,
-            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,
-        };
-        const className = classNames("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
-            "card--elevated": this.elevated,
-            "card--flashing": this.flashing,
-            "card--has-floating-controls": hasFloatingControls,
-            "card--has-image": hasImage,
-            "card--highlighted": this.highlighted,
-            "card--interactive": this.interactive || this.href,
-            "card--is--borderless": this.isBorderless,
-        });
-        return (h(Host, { key: '83b6b355f012cfb088f2611c426f0bf77ca5104e', styles: { height: this.height } }, h(Tag, { key: '40068da71c3431f175fca50e354c622aff3468c0', "aria-current": this.swirlAriaCurrent, "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
-                ? "noreferrer"
-                : undefined, style: styles, target: this.linkTarget }, h("div", { key: '49987e8063c4f113c38af82928a4893baf86b441', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '742d2b19d695b930a3feb266f62d91ffea350fe4', name: "image" })), h("div", { key: '0805793c5a6da79d98155d13893d5b415688baee', class: "card__floating-controls" }, h("slot", { key: '748164f9d7554595e817cd94b0d3894f32470945', name: "floating-controls" })), h("div", { key: '86e1aa40d1ac5d0dd78dcb193a706dea9535ad35', class: "card__body", style: bodyStyles }, h("div", { key: 'be6764afd0710adf51eb46ef1d482de3e1595681', class: "card__content" }, h("slot", { key: '5a14b8fff905b77645a85cc60b21cdf5bc68627f', name: "content" }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlCardCss; }
-}, [1, "swirl-card", {
-        "as": [1],
-        "borderRadius": [1, "border-radius"],
-        "customBackgroundColor": [1, "custom-background-color"],
-        "customBackdropFilter": [1, "custom-backdrop-filter"],
-        "elevated": [4],
-        "elevationLevel": [2, "elevation-level"],
-        "height": [1],
-        "highlighted": [4],
-        "href": [1],
-        "imageAspectRatio": [1, "image-aspect-ratio"],
-        "intent": [1],
-        "isBorderless": [4, "is-borderless"],
-        "interactive": [4],
-        "justifyContent": [1, "justify-content"],
-        "linkTarget": [1, "link-target"],
-        "minHeight": [1, "min-height"],
-        "overflow": [1],
-        "padding": [1],
-        "paddingBlockEnd": [1, "padding-block-end"],
-        "paddingBlockStart": [1, "padding-block-start"],
-        "paddingInlineEnd": [1, "padding-inline-end"],
-        "paddingInlineStart": [1, "padding-inline-start"],
-        "swirlAriaCurrent": [1, "swirl-aria-current"],
-        "swirlAriaLabel": [1, "swirl-aria-label"],
-        "swirlAriaLabelledby": [1, "swirl-aria-labelledby"],
-        "flashing": [32],
-        "flash": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-card"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlCard$1);
-            }
-            break;
-    } });
-}
-
-const SwirlCard = SwirlCard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlCard, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as r,createEvent as a,h as s,Host as t,transformTag as i}from"@stencil/core/internal/client";import{c as d}from"./index2.js";const o=["xs","sm","base","l","xl"],c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.componentLoad=a(this,"componentLoad",7),this.as="div",this.borderRadius="base",this.elevationLevel=3,this.intent="default",this.justifyContent="start",this.flashing=!1}async flash(e=5e3){this.flashingTimeout&&(clearTimeout(this.flashingTimeout),this.flashingTimeout=void 0),this.flashing=!0,this.flashingTimeout=setTimeout((()=>{this.flashing=!1}),e)}componentDidLoad(){this.componentLoad.emit()}render(){const e=this.href?"a":this.as,r=!!this.el.querySelector('[slot="floating-controls"]'),a=!!this.el.querySelector('[slot="image"]'),i={...this.customBackgroundColor?{"--swirl-card-background-default":this.customBackgroundColor}:{},backdropFilter:this.customBackdropFilter,borderRadius:o.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,height:this.height,minHeight:this.minHeight,overflow:this.overflow},c={padding:this.padding?`var(--s-space-${this.padding})`:void 0,paddingBlockEnd:this.paddingBlockEnd?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:this.paddingBlockStart?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:this.paddingInlineEnd?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:void 0},n=d("card","card--elevation-level-"+this.elevationLevel,"card--intent-"+this.intent,"card--justify-content-"+this.justifyContent,{"card--elevated":this.elevated,"card--flashing":this.flashing,"card--has-floating-controls":r,"card--has-image":a,"card--highlighted":this.highlighted,"card--interactive":this.interactive||this.href,"card--is--borderless":this.isBorderless});return s(t,{key:"83b6b355f012cfb088f2611c426f0bf77ca5104e",styles:{height:this.height}},s(e,{key:"40068da71c3431f175fca50e354c622aff3468c0","aria-current":this.swirlAriaCurrent,"aria-label":this.swirlAriaLabel,"aria-labelledby":this.swirlAriaLabelledby,class:n,href:this.href,rel:this.href&&"_blank"===this.linkTarget?"noreferrer":void 0,style:i,target:this.linkTarget},s("div",{key:"49987e8063c4f113c38af82928a4893baf86b441",class:"card__image",style:{aspectRatio:this.imageAspectRatio}},s("slot",{key:"742d2b19d695b930a3feb266f62d91ffea350fe4",name:"image"})),s("div",{key:"0805793c5a6da79d98155d13893d5b415688baee",class:"card__floating-controls"},s("slot",{key:"748164f9d7554595e817cd94b0d3894f32470945",name:"floating-controls"})),s("div",{key:"86e1aa40d1ac5d0dd78dcb193a706dea9535ad35",class:"card__body",style:c},s("div",{key:"be6764afd0710adf51eb46ef1d482de3e1595681",class:"card__content"},s("slot",{key:"5a14b8fff905b77645a85cc60b21cdf5bc68627f",name:"content"})))))}get el(){return this}static get style(){return":host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(     --s-surface-raised-default   );--swirl-resource-list-item-background-hovered:var(     --s-surface-raised-hovered   );--swirl-resource-list-item-background-pressed:var(     --s-surface-raised-pressed   );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}"}},[257,"swirl-card",{as:[1],borderRadius:[1,"border-radius"],customBackgroundColor:[1,"custom-background-color"],customBackdropFilter:[1,"custom-backdrop-filter"],elevated:[4],elevationLevel:[2,"elevation-level"],height:[1],highlighted:[4],href:[1],imageAspectRatio:[1,"image-aspect-ratio"],intent:[1],isBorderless:[4,"is-borderless"],interactive:[4],justifyContent:[1,"justify-content"],linkTarget:[1,"link-target"],minHeight:[1,"min-height"],overflow:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],swirlAriaLabelledby:[1,"swirl-aria-labelledby"],flashing:[32],flash:[64]}]),n=c,l=function(){"undefined"!=typeof customElements&&["swirl-card"].forEach((e=>{"swirl-card"===e&&(customElements.get(i(e))||customElements.define(i(e),c))}))};export{n as SwirlCard,l as defineCustomElement}

package/dist/components/swirl-carousel-slide.js

@@ -1,47 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlCarouselSlideCss = ":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}";
-
-const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouselSlide extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.width = "15.5rem";
-    }
-    render() {
-        const className = classNames("carousel-slide", {
-            "carousel-slide--has-min-height": Boolean(this.minHeight),
-        });
-        return (h(Host, { key: 'e43be5975a5399ef11cf176d19cd3f8b5af326a3', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
-                aspectRatio: this.aspectRatio,
-                flexBasis: this.width,
-                minHeight: this.minHeight,
-            }, tabIndex: 0 }, h("slot", { key: 'd6183581ebae542cc66340041e7c1617a4b5587d' })));
-    }
-    static get style() { return swirlCarouselSlideCss; }
-}, [1, "swirl-carousel-slide", {
-        "aspectRatio": [1, "aspect-ratio"],
-        "label": [1],
-        "minHeight": [1, "min-height"],
-        "width": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-carousel-slide"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-carousel-slide":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlCarouselSlide$1);
-            }
-            break;
-    } });
-}
-
-const SwirlCarouselSlide = SwirlCarouselSlide$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlCarouselSlide, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const r=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=l("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"e43be5975a5399ef11cf176d19cd3f8b5af326a3","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"d6183581ebae542cc66340041e7c1617a4b5587d"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),a=r,c=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))||customElements.define(o(e),r))}))};export{a as SwirlCarouselSlide,c as defineCustomElement}

package/dist/components/swirl-carousel.js

@@ -1,206 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as debounce } from './utils.js';
-import { d as defineCustomElement$2 } from './swirl-button2.js';
-
-const swirlCarouselCss = ":host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:\"\";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(\n      90deg,\n      var(--swirl-carousel-fade-color) 0%,\n      transparent 100%\n    )}.carousel:after{right:0;background:linear-gradient(\n      270deg,\n      var(--swirl-carousel-fade-color) 0%,\n      transparent 100%\n    )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}";
-
-const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.activeSlidesChange = createEvent(this, "activeSlidesChange", 7);
-        this.nextSlideButtonLabel = "Next slide";
-        this.previousSlideButtonLabel = "Previous slide";
-        this.fade = false;
-        this.fadeColor = "default";
-        this.loopAround = false;
-        this.padding = "16";
-        this.spacing = "16";
-        this.activeSlides = [];
-        this.carouselFadeColorMap = {
-            default: "var(--s-background-default)",
-            "on-surface-overlay": "var(--s-surface-overlay-default)",
-        };
-        this.updateActiveSlideReferences = debounce(() => {
-            const activeSlides = this.getActiveSlides();
-            const activeSlidesChanged = activeSlides.some((slide, index) => this.activeSlides[index] !== slide);
-            if (activeSlidesChanged) {
-                this.activeSlides = activeSlides;
-                this.activeSlidesChange.emit(this.activeSlides);
-            }
-        }, 100);
-        this.onPreviousSlideButtonClick = () => {
-            this.previousSlide();
-        };
-        this.onNextSlideButtonClick = () => {
-            this.nextSlide();
-        };
-        this.onSlotChange = () => {
-            // restore scroll position to active slide when slides are removed or added after first render
-            if (this.activeSlides.length) {
-                this.scrollToElement(this.activeSlides[0]);
-            }
-            this.checkScrollStatus();
-            this.checkScrollPosition();
-        };
-        this.onScroll = () => {
-            this.updateActiveSlideReferences();
-            this.checkScrollPosition();
-        };
-    }
-    onWindowResize() {
-        this.checkScrollStatus();
-        this.checkScrollPosition();
-    }
-    componentDidLoad() {
-        queueMicrotask(() => {
-            if (!this.el.isConnected) {
-                return;
-            }
-            this.checkScrollStatus();
-            this.checkScrollPosition();
-        });
-    }
-    /**
-     * Scroll to slide with id.
-     */
-    async scrollToSlide(id) {
-        const slides = this.getSlides();
-        const slide = slides.find((slide) => slide.id === id);
-        if (!Boolean(slide)) {
-            return;
-        }
-        this.scrollToElement(slide);
-    }
-    scrollToElement(element) {
-        if (this.slidesContainer && element) {
-            this.slidesContainer?.scroll({
-                left: element.offsetLeft,
-                behavior: "smooth",
-            });
-        }
-    }
-    previousSlide() {
-        const slides = this.getSlides();
-        const activeSlides = this.getActiveSlides();
-        const previousSlide = activeSlides[0].previousElementSibling ||
-            (this.loopAround ? slides[slides.length - 1] : activeSlides[0]);
-        this.scrollToElement(previousSlide);
-    }
-    nextSlide() {
-        const slides = this.getSlides();
-        const activeSlides = this.getActiveSlides();
-        const isAtEnd = !Boolean(activeSlides[activeSlides.length - 1].nextElementSibling);
-        const nextSlide = isAtEnd && this.loopAround
-            ? slides[0]
-            : activeSlides[0].nextElementSibling;
-        this.scrollToElement(nextSlide);
-    }
-    getSlides() {
-        return Array.from(this.el.querySelectorAll("swirl-carousel-slide"));
-    }
-    getActiveSlides() {
-        const slides = this.getSlides();
-        return slides.filter((slide) => this.checkInView(slide));
-    }
-    checkScrollStatus() {
-        this.isScrollable =
-            this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
-    }
-    checkScrollPosition() {
-        const slides = this.getSlides();
-        const activeSlides = this.getActiveSlides();
-        const isAtStart = activeSlides[0] === slides[0];
-        const isAtEnd = activeSlides[activeSlides.length - 1] === slides[slides.length - 1];
-        if (isAtStart !== this.isAtStart) {
-            this.isAtStart = isAtStart;
-        }
-        if (isAtEnd !== this.isAtEnd) {
-            this.isAtEnd = isAtEnd;
-        }
-    }
-    checkInView(element) {
-        let containerLeft = this.slidesContainer.scrollLeft;
-        let containerRight = containerLeft + this.slidesContainer.clientWidth;
-        let elementLeft = element.offsetLeft;
-        let elementRight = elementLeft + element.clientWidth;
-        let inInView = elementLeft >= containerLeft && elementRight <= containerRight;
-        return inInView;
-    }
-    render() {
-        this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
-        this.el.style.setProperty("--swirl-carousel-fade-color", this.carouselFadeColorMap[this.fadeColor]);
-        const slidesStyles = {
-            padding: Boolean(this.padding)
-                ? `var(--s-space-${this.padding})`
-                : undefined,
-            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,
-            scrollPadding: Boolean(this.paddingInlineStart)
-                ? `var(--s-space-${this.paddingInlineStart})`
-                : Boolean(this.padding)
-                    ? `var(--s-space-${this.padding})`
-                    : undefined,
-        };
-        const className = classNames("carousel", {
-            "carousel--fade": this.fade,
-            "carousel--is-at-start": this.isAtStart,
-            "carousel--is-at-end": this.isAtEnd,
-        });
-        return (h(Host, { key: 'c5903f0c46a1eaa6129e2a1b73abee0db5bcd9ed', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: 'a1dfb1a45c399559d25df72add7723b231b5e6b8', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: 'f9e9dd3bb8162550accfcd6b653a3737355f93d4', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: 'bc30a83c74273b4b5832338422a95d91e3e67321', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'cb596e62b8517b2d6ff791032b41608c6a5b25be', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '0fab582bd3650e63d512e934d03183b3ae9b5901', onSlotchange: this.onSlotChange })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlCarouselCss; }
-}, [1, "swirl-carousel", {
-        "label": [1],
-        "nextSlideButtonLabel": [1, "next-slide-button-label"],
-        "previousSlideButtonLabel": [1, "previous-slide-button-label"],
-        "fade": [4],
-        "fadeColor": [1, "fade-color"],
-        "loopAround": [4, "loop-around"],
-        "padding": [1],
-        "paddingBlockEnd": [1, "padding-block-end"],
-        "paddingBlockStart": [1, "padding-block-start"],
-        "paddingInlineEnd": [1, "padding-inline-end"],
-        "paddingInlineStart": [1, "padding-inline-start"],
-        "spacing": [1],
-        "isAtEnd": [32],
-        "isAtStart": [32],
-        "isScrollable": [32],
-        "scrollToSlide": [64]
-    }, [[9, "resize", "onWindowResize"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-carousel", "swirl-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-carousel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlCarousel$1);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlCarousel = SwirlCarousel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlCarousel, defineCustomElement };
+import{proxyCustomElement as s,HTMLElement as t,createEvent as i,h as e,Host as o,transformTag as a}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as l}from"./utils.js";import{d as n}from"./swirl-button2.js";const d=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.activeSlidesChange=i(this,"activeSlidesChange",7),this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.fade=!1,this.fadeColor="default",this.loopAround=!1,this.padding="16",this.spacing="16",this.activeSlides=[],this.carouselFadeColorMap={default:"var(--s-background-default)","on-surface-overlay":"var(--s-surface-overlay-default)"},this.updateActiveSlideReferences=l((()=>{const s=this.getActiveSlides();s.some(((s,t)=>this.activeSlides[t]!==s))&&(this.activeSlides=s,this.activeSlidesChange.emit(this.activeSlides))}),100),this.onPreviousSlideButtonClick=()=>{this.previousSlide()},this.onNextSlideButtonClick=()=>{this.nextSlide()},this.onSlotChange=()=>{this.activeSlides.length&&this.scrollToElement(this.activeSlides[0]),this.checkScrollStatus(),this.checkScrollPosition()},this.onScroll=()=>{this.updateActiveSlideReferences(),this.checkScrollPosition()}}onWindowResize(){this.checkScrollStatus(),this.checkScrollPosition()}componentDidLoad(){queueMicrotask((()=>{this.el.isConnected&&(this.checkScrollStatus(),this.checkScrollPosition())}))}async scrollToSlide(s){const t=this.getSlides().find((t=>t.id===s));t&&this.scrollToElement(t)}scrollToElement(s){this.slidesContainer&&s&&this.slidesContainer?.scroll({left:s.offsetLeft,behavior:"smooth"})}previousSlide(){const s=this.getSlides(),t=this.getActiveSlides();this.scrollToElement(t[0].previousElementSibling||(this.loopAround?s[s.length-1]:t[0]))}nextSlide(){const s=this.getSlides(),t=this.getActiveSlides();this.scrollToElement(!t[t.length-1].nextElementSibling&&this.loopAround?s[0]:t[0].nextElementSibling)}getSlides(){return Array.from(this.el.querySelectorAll("swirl-carousel-slide"))}getActiveSlides(){return this.getSlides().filter((s=>this.checkInView(s)))}checkScrollStatus(){this.isScrollable=this.slidesContainer.scrollWidth>this.slidesContainer.offsetWidth}checkScrollPosition(){const s=this.getSlides(),t=this.getActiveSlides(),i=t[0]===s[0],e=t[t.length-1]===s[s.length-1];i!==this.isAtStart&&(this.isAtStart=i),e!==this.isAtEnd&&(this.isAtEnd=e)}checkInView(s){let t=this.slidesContainer.scrollLeft,i=s.offsetLeft;return i>=t&&i+s.clientWidth<=t+this.slidesContainer.clientWidth}render(){this.el.style.setProperty("--swirl-carousel-spacing",this.spacing+"px"),this.el.style.setProperty("--swirl-carousel-fade-color",this.carouselFadeColorMap[this.fadeColor]);const s={padding:this.padding?`var(--s-space-${this.padding})`:void 0,paddingBlockEnd:this.paddingBlockEnd?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:this.paddingBlockStart?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:this.paddingInlineEnd?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:void 0,scrollPadding:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:this.padding?`var(--s-space-${this.padding})`:void 0},t=r("carousel",{"carousel--fade":this.fade,"carousel--is-at-start":this.isAtStart,"carousel--is-at-end":this.isAtEnd});return e(o,{key:"c5903f0c46a1eaa6129e2a1b73abee0db5bcd9ed","aria-label":this.label,"aria-roledescription":"carousel",role:"group"},e("div",{key:"a1dfb1a45c399559d25df72add7723b231b5e6b8",class:t},this.isScrollable&&!this.isAtStart&&e("swirl-button",{key:"f9e9dd3bb8162550accfcd6b653a3737355f93d4",class:"carousel__previous-slide-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.previousSlideButtonLabel,onClick:this.onPreviousSlideButtonClick,pill:!0,variant:"floating"}),this.isScrollable&&!this.isAtEnd&&e("swirl-button",{key:"bc30a83c74273b4b5832338422a95d91e3e67321",class:"carousel__next-slide-button",hideLabel:!0,icon:"<swirl-icon-arrow-forward></swirl-icon-arrow-forward>",label:this.nextSlideButtonLabel,onClick:this.onNextSlideButtonClick,pill:!0,variant:"floating"}),e("div",{key:"cb596e62b8517b2d6ff791032b41608c6a5b25be","aria-live":"polite",class:"carousel__slides",style:s,onScroll:this.onScroll,ref:s=>this.slidesContainer=s},e("slot",{key:"0fab582bd3650e63d512e934d03183b3ae9b5901",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return':host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:"";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(       90deg,       var(--swirl-carousel-fade-color) 0%,       transparent 100%     )}.carousel:after{right:0;background:linear-gradient(       270deg,       var(--swirl-carousel-fade-color) 0%,       transparent 100%     )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}'}},[257,"swirl-carousel",{label:[1],nextSlideButtonLabel:[1,"next-slide-button-label"],previousSlideButtonLabel:[1,"previous-slide-button-label"],fade:[4],fadeColor:[1,"fade-color"],loopAround:[4,"loop-around"],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],spacing:[1],isAtEnd:[32],isAtStart:[32],isScrollable:[32],scrollToSlide:[64]},[[9,"resize","onWindowResize"]]]),c=d,h=function(){"undefined"!=typeof customElements&&["swirl-carousel","swirl-button"].forEach((s=>{switch(s){case"swirl-carousel":customElements.get(a(s))||customElements.define(a(s),d);break;case"swirl-button":customElements.get(a(s))||n()}}))};export{c as SwirlCarousel,h as defineCustomElement}

package/dist/components/swirl-checkbox.js

@@ -1,92 +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-icon-check-strong2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlCheckboxCss = ".sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;flex-grow:1}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-surface-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-surface-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);align-items:flex-start;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label-container.sc-swirl-checkbox{padding-top:var(--s-space-2)}}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
-
-const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.checked = false;
-        this.disabled = false;
-        this.labelWeight = "medium";
-        this.variant = "default";
-        this.onChange = () => {
-            this.checked =
-                this.checked === true || this.checked === "true" ? false : true;
-            this.valueChange.emit(this.checked);
-        };
-    }
-    getAriaCheckedLabel(checked, unchecked) {
-        if (checked) {
-            return "true";
-        }
-        else if (unchecked) {
-            return "false";
-        }
-        return "mixed";
-    }
-    render() {
-        const unchecked = this.checked === false || this.checked === "false";
-        const checked = this.checked === true || this.checked === "true";
-        const indeterminate = this.checked === "indeterminate";
-        const showLabelContainer = Boolean(this.label) || Boolean(this.description);
-        const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
-        const ariaInvalid = this.invalid === true || this.invalid === false
-            ? String(this.invalid)
-            : undefined;
-        const className = classNames("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
-            "checkbox--checked": checked,
-            "checkbox--disabled": this.disabled,
-            "checkbox--indeterminate": indeterminate,
-            "checkbox--invalid": this.invalid,
-            "checkbox--unchecked": unchecked,
-        });
-        return (h(Host, { key: 'acf777ca7224f41f607bf84f193ecb05881f1fc1', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'c3a3abc5f9e87d3665ad7c797d44a2acd34c8ee5', class: className, htmlFor: this.inputId }, h("span", { key: '5e49492e10519c0f2f4f6ed187b318bca8316dab', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '06217d12dbc1ea25117e421d8e0e1cebd392f599' }, h("input", { key: '455840493b5e9b60aace6f4a0e2de7e5cece2e78', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: '8b69f9ae79e957c52066cd80cf0da11fe5613ed2', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: 'cca029718dd23f8c2e0637ce4f44c24b4fb0b289', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'f3bab31db3d5ab5a6fdc78610abb42763f51154b' }), indeterminate && (h("span", { key: '7002b8fffbb15b73d84fae98761196bbe6af3347', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '082ac434bc4dd0c98d983650aab5208a760063e7', class: "checkbox__label-container" }, this.label && h("span", { key: '62737cd8068a70eb10e722c2ff91ae4dc9917f7d', class: "checkbox__label" }, this.label), this.description && (h("span", { key: '3e7f891b80511b9a4d811db31b594f2a0429d8b0', class: "checkbox__description" }, this.description)))))));
-    }
-    static get style() { return swirlCheckboxCss; }
-}, [2, "swirl-checkbox", {
-        "checked": [1032],
-        "description": [1],
-        "disabled": [4],
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "swirlAriaLabel": [1, "swirl-aria-label"],
-        "inputId": [1, "input-id"],
-        "inputName": [1, "input-name"],
-        "invalid": [4],
-        "label": [1],
-        "labelWeight": [1, "label-weight"],
-        "value": [1],
-        "variant": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-checkbox", "swirl-icon-check-strong", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlCheckbox$1);
-            }
-            break;
-        case "swirl-icon-check-strong":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlCheckbox = SwirlCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlCheckbox, defineCustomElement };
+import{proxyCustomElement as c,HTMLElement as e,createEvent as i,h as o,Host as s,transformTag as r}from"@stencil/core/internal/client";import{c as h}from"./index2.js";import{d as b}from"./swirl-icon-check-strong2.js";import{d as a}from"./swirl-visually-hidden2.js";const l=c(class extends e{constructor(c){super(),!1!==c&&this.__registerHost(),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.labelWeight="medium",this.variant="default",this.onChange=()=>{this.checked=!0!==this.checked&&"true"!==this.checked,this.valueChange.emit(this.checked)}}getAriaCheckedLabel(c,e){return c?"true":e?"false":"mixed"}render(){const c=!1===this.checked||"false"===this.checked,e=!0===this.checked||"true"===this.checked,i="indeterminate"===this.checked,r=!!this.label||!!this.description,b=this.getAriaCheckedLabel(e,c),a=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,l=h("checkbox","checkbox--label-weight-"+this.labelWeight,"checkbox--variant-"+this.variant,{"checkbox--checked":e,"checkbox--disabled":this.disabled,"checkbox--indeterminate":i,"checkbox--invalid":this.invalid,"checkbox--unchecked":c});return o(s,{key:"acf777ca7224f41f607bf84f193ecb05881f1fc1",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"c3a3abc5f9e87d3665ad7c797d44a2acd34c8ee5",class:l,htmlFor:this.inputId},o("span",{key:"5e49492e10519c0f2f4f6ed187b318bca8316dab",class:"checkbox__control"},o("swirl-visually-hidden",{key:"06217d12dbc1ea25117e421d8e0e1cebd392f599"},o("input",{key:"455840493b5e9b60aace6f4a0e2de7e5cece2e78","aria-checked":b,"aria-describedby":this.swirlAriaDescribedby,"aria-invalid":a,"aria-label":this.swirlAriaLabel,checked:e,class:"checkbox__input",disabled:this.disabled,id:this.inputId,indeterminate:i,name:this.inputName,onChange:this.onChange,type:"checkbox",value:this.value})),o("span",{key:"8b69f9ae79e957c52066cd80cf0da11fe5613ed2","aria-hidden":"true",class:"checkbox__box"},o("span",{key:"cca029718dd23f8c2e0637ce4f44c24b4fb0b289",class:"checkbox__icon"},e&&o("swirl-icon-check-strong",{key:"f3bab31db3d5ab5a6fdc78610abb42763f51154b"}),i&&o("span",{key:"7002b8fffbb15b73d84fae98761196bbe6af3347",class:"checkbox__indeterminate-icon"})))),r&&o("span",{key:"082ac434bc4dd0c98d983650aab5208a760063e7",class:"checkbox__label-container"},this.label&&o("span",{key:"62737cd8068a70eb10e722c2ff91ae4dc9917f7d",class:"checkbox__label"},this.label),this.description&&o("span",{key:"3e7f891b80511b9a4d811db31b594f2a0429d8b0",class:"checkbox__description"},this.description))))}static get style(){return'.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;flex-grow:1}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),       0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-surface-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-surface-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon),.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox [part~="icon"]{width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);align-items:flex-start;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label-container.sc-swirl-checkbox{padding-top:var(--s-space-2)}}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-checkbox",{checked:[1032],description:[1],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaLabel:[1,"swirl-aria-label"],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],labelWeight:[1,"label-weight"],value:[1],variant:[1]}]),t=l,d=function(){"undefined"!=typeof customElements&&["swirl-checkbox","swirl-icon-check-strong","swirl-visually-hidden"].forEach((c=>{switch(c){case"swirl-checkbox":customElements.get(r(c))||customElements.define(r(c),l);break;case"swirl-icon-check-strong":customElements.get(r(c))||b();break;case"swirl-visually-hidden":customElements.get(r(c))||a()}}))};export{t as SwirlCheckbox,d as defineCustomElement}