@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-toast-provider.js

@@ -1,188 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './swirl-button2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$3 } from './swirl-stack2.js';
-import { d as defineCustomElement$2 } from './swirl-toast2.js';
-
-const swirlToastProviderCss = ".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}";
-
-const SwirlToastProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToastProvider extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.toasts = [];
-        this.activeDialogStack = [];
-        this.originalParent = null;
-        this.onAction = (event) => {
-            const toast = this.toasts.find(({ toastId }) => toastId === event.detail);
-            if (!toast) {
-                return;
-            }
-            toast.onAction?.(toast.toastId);
-            if (toast.dismissOnAction) {
-                this.dismiss(event.detail);
-            }
-        };
-        this.onDismiss = (event) => {
-            this.dismiss(event.detail);
-        };
-    }
-    /**
-     * Clear all toasts
-     * @param newToast
-     * @returns
-     */
-    async clearAll() {
-        this.toasts = [];
-    }
-    /**
-     * Dismiss a toast
-     * @param toastId
-     * @returns
-     */
-    async dismiss(toastId) {
-        const toast = this.toasts.find((toast) => toastId === toast.toastId);
-        if (!toast) {
-            return;
-        }
-        toast.onDismiss?.(toast.toastId);
-        this.toasts = [...this.toasts].filter((toast) => toast.toastId !== toastId);
-    }
-    /**
-     * Create a new toast
-     * @param newToast
-     * @returns
-     */
-    async toast(newToast) {
-        if (this.toasts.some((toast) => toast.toastId === newToast.toastId)) {
-            return;
-        }
-        const newToastWithId = {
-            ...newToast,
-            createdAt: new Date(),
-            duration: newToast.duration || this.globalDuration || undefined,
-            toastId: newToast.toastId || String(Math.round(Math.random() * 10000)),
-        };
-        this.toasts = [...this.toasts, newToastWithId];
-        return newToastWithId;
-    }
-    componentWillLoad() {
-        this.originalParent = this.el.parentElement;
-    }
-    disconnectedCallback() {
-        // Recover the position of the element when it's disconnected from the DOM
-        if (!this.el.isConnected) {
-            // Remove any dialogs that are no longer in the DOM
-            this.activeDialogStack = this.activeDialogStack.filter((dialog) => dialog.isConnected);
-            this.ensureCorrectPosition();
-        }
-    }
-    handleDialogToggle(event) {
-        const { newState, dialog } = event.detail;
-        if (newState === "open") {
-            this.onDialogOpen(dialog);
-        }
-        else {
-            this.onDialogClose(dialog);
-        }
-    }
-    onToastsChange() {
-        if (this.toasts.length > 0) {
-            this.ensureCorrectPosition();
-        }
-        else {
-            this.popoverEl.hidePopover();
-        }
-    }
-    onDialogOpen(dialog) {
-        if (!this.activeDialogStack.includes(dialog)) {
-            this.activeDialogStack.push(dialog);
-        }
-        if (this.toasts.length > 0) {
-            this.ensureCorrectPosition();
-        }
-    }
-    onDialogClose(dialog) {
-        this.activeDialogStack = this.activeDialogStack.filter((currentDialog) => currentDialog != dialog);
-        if (this.toasts.length > 0) {
-            this.ensureCorrectPosition();
-        }
-    }
-    /**
-     * Ensures that the toasts are positioned inside dialogs when they are open.
-     *
-     * This is necessary to allow toasts to be interactable when a dialog is open, otherwise the toasts would be inert.
-     */
-    ensureCorrectPosition() {
-        const parent = this.activeDialogStack[this.activeDialogStack.length - 1] ||
-            this.originalParent;
-        if (this.el.parentElement !== parent) {
-            parent.appendChild(this.el);
-        }
-        this.popoverEl.hidePopover();
-        this.popoverEl.showPopover();
-    }
-    render() {
-        return (h(Host, { key: '0045e7bf78ca03cb11579bfdfd371e51383c203c', role: "status" }, h("swirl-stack", { key: 'dde819924a5e447fc0a0f8224f7a6d019198b34e', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
-            const props = {
-                ...toast,
-                content: undefined,
-                onDismiss: undefined,
-                onAction: undefined,
-            };
-            return (h("swirl-toast", { key: toast.toastId, ...props, onDismiss: this.onDismiss, onAction: this.onAction }, toast.content));
-        }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "toasts": ["onToastsChange"]
-    }; }
-    static get style() { return swirlToastProviderCss; }
-}, [1, "swirl-toast-provider", {
-        "globalDuration": [2, "global-duration"],
-        "toasts": [32],
-        "clearAll": [64],
-        "dismiss": [64],
-        "toast": [64]
-    }, [[4, "toggleDialog", "handleDialogToggle"]], {
-        "toasts": ["onToastsChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-toast-provider", "swirl-button", "swirl-icon-close", "swirl-stack", "swirl-toast"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-toast-provider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlToastProvider$1);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-toast":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlToastProvider = SwirlToastProvider$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlToastProvider, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as s,h as i,Host as o,transformTag as e}from"@stencil/core/internal/client";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-close2.js";import{d as r}from"./swirl-stack2.js";import{d as c}from"./swirl-toast2.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||Math.round(1e4*Math.random())+""};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return i(o,{key:"0045e7bf78ca03cb11579bfdfd371e51383c203c",role:"status"},i("swirl-stack",{key:"dde819924a5e447fc0a0f8224f7a6d019198b34e",class:"toast-provider__stack",part:"toast-provider__stack",popover:"manual",spacing:"12",align:"center",ref:t=>this.popoverEl=t},this.toasts.map((t=>{const s={...t,content:void 0,onDismiss:void 0,onAction:void 0};return i("swirl-toast",{key:t.toastId,...s,onDismiss:this.onDismiss,onAction:this.onAction},t.content)}))))}get el(){return this}static get watchers(){return{toasts:[{onToastsChange:0}]}}static get style(){return".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}"}},[1,"swirl-toast-provider",{globalDuration:[2,"global-duration"],toasts:[32],clearAll:[64],dismiss:[64],toast:[64]},[[4,"toggleDialog","handleDialogToggle"]],{toasts:[{onToastsChange:0}]}]),h=l,d=function(){"undefined"!=typeof customElements&&["swirl-toast-provider","swirl-button","swirl-icon-close","swirl-stack","swirl-toast"].forEach((t=>{switch(t){case"swirl-toast-provider":customElements.get(e(t))||customElements.define(e(t),l);break;case"swirl-button":customElements.get(e(t))||a();break;case"swirl-icon-close":customElements.get(e(t))||n();break;case"swirl-stack":customElements.get(e(t))||r();break;case"swirl-toast":customElements.get(e(t))||c()}}))};export{h as SwirlToastProvider,d as defineCustomElement}

package/dist/components/swirl-toast.js

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

package/dist/components/swirl-toast2.js

@@ -1,104 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-import { d as defineCustomElement$2 } from './swirl-button2.js';
-import { d as defineCustomElement$1 } from './swirl-icon-close2.js';
-
-const swirlToastCss = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}";
-
-const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.action = createEvent(this, "action", 7);
-        this.dismiss = createEvent(this, "dismiss", 7);
-        this.accessibleDismissLabel = "Dismiss";
-        this.intent = "default";
-        this.mediaQueryUnsubscribe = () => { };
-        this.onAction = () => {
-            this.action.emit(this.toastId);
-        };
-        this.onDismiss = () => {
-            this.dismiss.emit(this.toastId);
-        };
-    }
-    watchDuration() {
-        this.startTimer();
-    }
-    componentDidLoad() {
-        this.startTimer();
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        const icon = this.iconEl?.children[0];
-        const dismissIcon = this.dismissIconEl;
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
-        dismissIcon?.setAttribute("size", smallIcon ? "20" : "24");
-    }
-    startTimer() {
-        this.clearTimer();
-        if (this.duration === undefined || this.duration === Infinity) {
-            return;
-        }
-        this.timeout = setTimeout(() => {
-            this.dismiss.emit(this.toastId);
-        }, this.duration);
-    }
-    clearTimer() {
-        if (!Boolean(this.timeout)) {
-            return;
-        }
-        clearTimeout(this.timeout);
-        this.timeout = undefined;
-    }
-    render() {
-        const className = classNames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: 'cf76512aa8c7be4fe00caefc36443a2181d3c1c5' }, h("div", { key: '560c934324b0955670d4ecc2eef3668ea05b211e', class: className }, this.icon && (h("span", { key: 'a2f3b4b4a63011fb61175d478cdf43074ad55f5b', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'd5d5735f247ec25d0e25aeda02e6bb14cddd2cd3', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '1c0e09b0289f15b7f0346aa2645864e9d0dca91b' })), this.actionLabel && (h("swirl-button", { key: '202c4f6ea0c9379f22770f2f89a9a2b70984a1f6', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" })), h("button", { key: '931ee0ecc8130c1f579648fd87796e8d2d728a1d', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'e2c5a6a13d9b1738d2db60e3a5e9a940c31963ab', ref: (el) => (this.dismissIconEl = el) }))))));
-    }
-    static get watchers() { return {
-        "duration": ["watchDuration"]
-    }; }
-    static get style() { return swirlToastCss; }
-}, [1, "swirl-toast", {
-        "accessibleDismissLabel": [1, "accessible-dismiss-label"],
-        "actionLabel": [1, "action-label"],
-        "content": [1],
-        "dismissLabel": [1, "dismiss-label"],
-        "duration": [2],
-        "icon": [1],
-        "intent": [1],
-        "toastId": [1, "toast-id"]
-    }, undefined, {
-        "duration": ["watchDuration"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-toast", "swirl-button", "swirl-icon-close"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-toast":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlToast);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlToast as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as c}from"./swirl-button2.js";import{d as l}from"./swirl-icon-close2.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.action=i(this,"action",7),this.dismiss=i(this,"dismiss",7),this.accessibleDismissLabel="Dismiss",this.intent="default",this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}componentDidLoad(){this.startTimer(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(t){const s=this.iconEl?.children[0],i=this.dismissIconEl;s?.setAttribute("size",t?"20":"24"),i?.setAttribute("size",t?"20":"24")}startTimer(){this.clearTimer(),void 0!==this.duration&&this.duration!==1/0&&(this.timeout=setTimeout((()=>{this.dismiss.emit(this.toastId)}),this.duration))}clearTimer(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}render(){const t=n("toast",`toast--intent-${this.intent}`);return e(a,{key:"bf9638f08521fedb196d410aa46818f997439f4d"},e("div",{key:"9d1b3929421ba853e5094c2bcb1b03de41a5a52b",class:t},this.icon&&e("span",{key:"12cf8e8745a728f2b0cda36d558e464c1d999eb9",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),e("span",{key:"c97cd2dda035df85a9a6ffa3c75b603dbf054f64",class:"toast__content",innerHTML:this.content,part:"toast__content"},e("slot",{key:"9771bab25fa0dd37742df2987e32fd63b89134f4"})),this.actionLabel&&e("swirl-button",{key:"b5c85c8d8ab869b9bf13625f88b370cfbe6abff7",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"}),e("button",{key:"64ca30ce150bb6389fe8e89b5553299b9172356a","aria-label":this.dismissLabel||this.accessibleDismissLabel,class:"toast__dismiss-button",onClick:this.onDismiss,type:"button"},this.dismissLabel,!Boolean(this.dismissLabel)&&e("swirl-icon-close",{key:"ee8a94183043125dec09bd48c4bae44c75a3ffc2",ref:t=>this.dismissIconEl=t}))))}static get watchers(){return{duration:[{watchDuration:0}]}}static get style(){return":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}"}},[257,"swirl-toast",{accessibleDismissLabel:[1,"accessible-dismiss-label"],actionLabel:[1,"action-label"],content:[1],dismissLabel:[1,"dismiss-label"],duration:[2],icon:[1],intent:[1],toastId:[1,"toast-id"]},void 0,{duration:[{watchDuration:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-toast","swirl-button","swirl-icon-close"].forEach((t=>{switch(t){case"swirl-toast":customElements.get(o(t))||customElements.define(o(t),d);break;case"swirl-button":customElements.get(o(t))||c();break;case"swirl-icon-close":customElements.get(o(t))||l()}}))}export{d as S,h as d}

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

@@ -1,52 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$2 } from './swirl-icon2.js';
-
-const swirlToggleButtonCss = ":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-surface-sunken-hovered)}.button:active{background-color:var(--s-surface-sunken-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}";
-
-const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.isPressed = false;
-        this.onClick = () => {
-            this.isPressed = true;
-        };
-    }
-    render() {
-        const classNames$1 = classNames("button", {
-            "button--pressed": this.isPressed,
-        });
-        return (h("button", { key: '6c77cfd5c4246d9e45e3616e9acc67262b25da00', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '6bc9adc920cca40a506672c204caf0797c7cda39', class: "button__icon", glyph: this.icon })), h("span", { key: 'b3963df5a627452a1909eea47c17af086ba4643b', class: "button__label" }, this.label)));
-    }
-    static get style() { return swirlToggleButtonCss; }
-}, [1, "swirl-toggle-button", {
-        "identifier": [1],
-        "label": [1],
-        "icon": [1],
-        "isPressed": [1028, "is-pressed"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-toggle-button", "swirl-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-toggle-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlToggleButton$1);
-            }
-            break;
-        case "swirl-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlToggleButton = SwirlToggleButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlToggleButton, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as o,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{d as n}from"./swirl-icon2.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isPressed=!1,this.onClick=()=>{this.isPressed=!0}}render(){const t=i("button",{"button--pressed":this.isPressed});return o("button",{key:"6c77cfd5c4246d9e45e3616e9acc67262b25da00",class:t,type:"button","aria-pressed":this.isPressed?"true":"false",onClick:this.onClick},this.icon&&o("swirl-icon",{key:"6bc9adc920cca40a506672c204caf0797c7cda39",class:"button__icon",glyph:this.icon}),o("span",{key:"b3963df5a627452a1909eea47c17af086ba4643b",class:"button__label"},this.label))}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-surface-sunken-hovered)}.button:active{background-color:var(--s-surface-sunken-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}"}},[1,"swirl-toggle-button",{identifier:[1],label:[1],icon:[1],isPressed:[1028,"is-pressed"]}]),a=r,c=function(){"undefined"!=typeof customElements&&["swirl-toggle-button","swirl-icon"].forEach((t=>{switch(t){case"swirl-toggle-button":customElements.get(s(t))||customElements.define(s(t),r);break;case"swirl-icon":customElements.get(s(t))||n()}}))};export{a as SwirlToggleButton,c as defineCustomElement}

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

@@ -1,103 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$2 } from './swirl-stack2.js';
-
-const swirlToggleGroupCss = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}";
-
-const SwirlToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleGroup extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.selectedToggleChange = createEvent(this, "selectedToggleChange", 7);
-        this.variant = "flat";
-        this.toggleButtons = [];
-        this.onSlotChange = () => {
-            this.toggleButtons = Array.from(this.el.querySelectorAll("swirl-toggle-button"));
-            this.setTogglePressedStates();
-        };
-    }
-    watchSelectedToggleId(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.selectedToggleChange.emit(newValue);
-            this.setTogglePressedStates();
-        }
-    }
-    onClick(event) {
-        const target = event.target;
-        if (target?.tagName === "SWIRL-TOGGLE-BUTTON") {
-            event.stopPropagation();
-            const toggleButton = target;
-            this.selectedToggleId = toggleButton.identifier;
-        }
-    }
-    setTogglePressedStates() {
-        if (!this.toggleButtons?.length) {
-            return;
-        }
-        if (!this.selectedToggleId) {
-            this.toggleButtonWithId(this.toggleButtons[0].identifier);
-            return;
-        }
-        const toggleWithIdentifierExists = this.toggleButtons.some((toggleButton) => toggleButton.identifier === this.selectedToggleId);
-        if (!toggleWithIdentifierExists) {
-            this.toggleButtonWithId(this.toggleButtons[0].identifier);
-            return;
-        }
-        this.toggleButtonWithId(this.selectedToggleId);
-    }
-    toggleButtonWithId(identifier) {
-        if (!this.toggleButtons?.length) {
-            return;
-        }
-        this.toggleButtons.forEach((toggleButton) => {
-            if (toggleButton.identifier === identifier) {
-                toggleButton.isPressed = true;
-            }
-            else {
-                toggleButton.isPressed = false;
-            }
-        });
-    }
-    render() {
-        const className = classNames("toggle-group", `toggle-group--variant-${this.variant}`, {
-            "toggle-group--elevated": this.elevated,
-        });
-        return (h("swirl-stack", { key: '75244fe3e82d5aebeae23c4a4709c7ca8ee8c8f7', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '6d06cb23832d4d57a142a3c98d2221141ebdbc81', onSlotchange: this.onSlotChange })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "selectedToggleId": ["watchSelectedToggleId"]
-    }; }
-    static get style() { return swirlToggleGroupCss; }
-}, [1, "swirl-toggle-group", {
-        "elevated": [4],
-        "variant": [1],
-        "swirlAriaLabel": [1, "swirl-aria-label"],
-        "selectedToggleId": [1025, "selected-toggle-id"]
-    }, [[0, "click", "onClick"]], {
-        "selectedToggleId": ["watchSelectedToggleId"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-toggle-group", "swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-toggle-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlToggleGroup$1);
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlToggleGroup = SwirlToggleGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlToggleGroup, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as o,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as r}from"./swirl-stack2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.selectedToggleChange=s(this,"selectedToggleChange",7),this.variant="flat",this.toggleButtons=[],this.onSlotChange=()=>{this.toggleButtons=Array.from(this.el.querySelectorAll("swirl-toggle-button")),this.setTogglePressedStates()}}watchSelectedToggleId(e,t){e!==t&&(this.selectedToggleChange.emit(e),this.setTogglePressedStates())}onClick(e){const t=e.target;"SWIRL-TOGGLE-BUTTON"===t?.tagName&&(e.stopPropagation(),this.selectedToggleId=t.identifier)}setTogglePressedStates(){this.toggleButtons?.length&&(this.selectedToggleId&&this.toggleButtons.some((e=>e.identifier===this.selectedToggleId))?this.toggleButtonWithId(this.selectedToggleId):this.toggleButtonWithId(this.toggleButtons[0].identifier))}toggleButtonWithId(e){this.toggleButtons?.length&&this.toggleButtons.forEach((t=>{t.isPressed=t.identifier===e}))}render(){const e=l("toggle-group","toggle-group--variant-"+this.variant,{"toggle-group--elevated":this.elevated});return o("swirl-stack",{key:"75244fe3e82d5aebeae23c4a4709c7ca8ee8c8f7",class:e,"aria-label":this.swirlAriaLabel,spacing:"4",orientation:"horizontal",align:"center",role:"group"},o("slot",{key:"6d06cb23832d4d57a142a3c98d2221141ebdbc81",onSlotchange:this.onSlotChange}))}get el(){return this}static get watchers(){return{selectedToggleId:[{watchSelectedToggleId:0}]}}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}"}},[257,"swirl-toggle-group",{elevated:[4],variant:[1],swirlAriaLabel:[1,"swirl-aria-label"],selectedToggleId:[1025,"selected-toggle-id"]},[[0,"click","onClick"]],{selectedToggleId:[{watchSelectedToggleId:0}]}]),g=a,c=function(){"undefined"!=typeof customElements&&["swirl-toggle-group","swirl-stack"].forEach((e=>{switch(e){case"swirl-toggle-group":customElements.get(i(e))||customElements.define(i(e),a);break;case"swirl-stack":customElements.get(i(e))||r()}}))};export{g as SwirlToggleGroup,c as defineCustomElement}

package/dist/components/swirl-toolbar.js

@@ -1,105 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { k as getActiveElement } from './utils.js';
-import { d as defineCustomElement$2 } from './swirl-stack2.js';
-
-const swirlToolbarCss = ":host{display:block}:host *{box-sizing:border-box}";
-
-const SwirlToolbar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToolbar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.orientation = "horizontal";
-        this.onKeyDown = (event) => {
-            if (event.code === "ArrowDown" || event.code === "ArrowRight") {
-                event.preventDefault();
-                this.focusNextItem();
-            }
-            else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
-                event.preventDefault();
-                this.focusPreviousItem();
-            }
-        };
-    }
-    componentDidLoad() {
-        const items = this.getItems();
-        this.deactivateTabIndexes(items);
-        const firstButton = items[0]?.querySelector("button");
-        if (!Boolean(firstButton)) {
-            return;
-        }
-        firstButton.tabIndex = 0;
-    }
-    getItems() {
-        return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"));
-    }
-    focusNextItem() {
-        const items = this.getItems();
-        const activeItemIndex = this.getActiveItemIndex(items);
-        const newIndex = (activeItemIndex + 1) % items.length;
-        this.focusItem(items[newIndex]);
-    }
-    focusPreviousItem() {
-        const items = this.getItems();
-        const activeItemIndex = this.getActiveItemIndex(items);
-        const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
-        this.focusItem(items[newIndex]);
-    }
-    getActiveItemIndex(items) {
-        const activeElement = getActiveElement();
-        return items.findIndex((item) => item === activeElement?.closest("swirl-button, swirl-chip"));
-    }
-    focusItem(item) {
-        const items = this.getItems();
-        this.deactivateTabIndexes(items);
-        if (!Boolean(item)) {
-            return;
-        }
-        const button = item.querySelector("button");
-        if (!Boolean(button)) {
-            return;
-        }
-        button.tabIndex = 0;
-        button.focus();
-    }
-    deactivateTabIndexes(items) {
-        items.forEach((item) => {
-            const button = item.querySelector("button");
-            if (!Boolean(button)) {
-                return;
-            }
-            button.tabIndex = -1;
-        });
-    }
-    render() {
-        return (h(Host, { key: 'd18312df2d377df2e8c55ebda8379365974ef4f9' }, h("swirl-stack", { key: '72faafb90bcb7d608fa3eff7d04bf375ea6e65a3', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: 'ed5a2b42383be2bf507efd04e4381f2e199dbc67' }))));
-    }
-    get el() { return this; }
-    static get style() { return swirlToolbarCss; }
-}, [1, "swirl-toolbar", {
-        "label": [1],
-        "orientation": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-toolbar", "swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-toolbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlToolbar$1);
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlToolbar = SwirlToolbar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlToolbar, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as s,h as e,Host as o,transformTag as i}from"@stencil/core/internal/client";import{k as r}from"./utils.js";import{d as n}from"./swirl-stack2.js";const a=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.orientation="horizontal",this.onKeyDown=t=>{"ArrowDown"===t.code||"ArrowRight"===t.code?(t.preventDefault(),this.focusNextItem()):"ArrowUp"!==t.code&&"ArrowLeft"!==t.code||(t.preventDefault(),this.focusPreviousItem())}}componentDidLoad(){const t=this.getItems();this.deactivateTabIndexes(t);const s=t[0]?.querySelector("button");s&&(s.tabIndex=0)}getItems(){return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"))}focusNextItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[(s+1)%t.length])}focusPreviousItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[0===s?t.length-1:s-1])}getActiveItemIndex(t){const s=r();return t.findIndex((t=>t===s?.closest("swirl-button, swirl-chip")))}focusItem(t){const s=this.getItems();if(this.deactivateTabIndexes(s),!t)return;const e=t.querySelector("button");e&&(e.tabIndex=0,e.focus())}deactivateTabIndexes(t){t.forEach((t=>{const s=t.querySelector("button");s&&(s.tabIndex=-1)}))}render(){return e(o,{key:"d18312df2d377df2e8c55ebda8379365974ef4f9"},e("swirl-stack",{key:"72faafb90bcb7d608fa3eff7d04bf375ea6e65a3",align:"center","aria-label":this.label,"aria-orientation":this.orientation,role:"toolbar",onKeyDown:this.onKeyDown,orientation:this.orientation,spacing:"8",wrap:!0},e("slot",{key:"ed5a2b42383be2bf507efd04e4381f2e199dbc67"})))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}"}},[257,"swirl-toolbar",{label:[1],orientation:[1]}]),c=a,l=function(){"undefined"!=typeof customElements&&["swirl-toolbar","swirl-stack"].forEach((t=>{switch(t){case"swirl-toolbar":customElements.get(i(t))||customElements.define(i(t),a);break;case"swirl-stack":customElements.get(i(t))||n()}}))};export{c as SwirlToolbar,l as defineCustomElement}

package/dist/components/swirl-tooltip.js

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