@getflip/swirl-components 0.531.1 → 0.531.3

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

@@ -13,6 +13,7 @@ const SwirlToast = class {
         this.accessibleDismissLabel = "Dismiss";
         this.actionPosition = "inline";
         this.intent = "default";
+        this.loaded = false;
         this.mediaQueryUnsubscribe = () => { };
         this.onAction = () => {
             this.action.emit(this.toastId);
@@ -25,16 +26,30 @@ const SwirlToast = class {
     watchDuration() {
         this.startTimer();
     }
+    connectedCallback() {
+        // moving toasts in the DOM disconnects and reconnects them,
+        // this restores what disconnectedCallback cleaned up. (e.g. provider moving into a dialog)
+        if (!this.loaded) {
+            return;
+        }
+        this.scheduleDismiss();
+        this.subscribeToMediaQuery();
+    }
     componentDidLoad() {
+        this.loaded = true;
         this.startTimer();
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-        });
+        this.subscribeToMediaQuery();
     }
     disconnectedCallback() {
-        this.clearTimer();
+        this.cancelScheduledDismiss();
         this.mediaQueryUnsubscribe();
     }
+    subscribeToMediaQuery() {
+        this.mediaQueryUnsubscribe();
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
+    }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
         const dismissIcon = this.dismissIconEl;
@@ -46,20 +61,33 @@ const SwirlToast = class {
         if (this.duration === undefined || this.duration === Infinity) {
             return;
         }
+        this.dismissAt = Date.now() + this.duration;
+        this.scheduleDismiss();
+    }
+    scheduleDismiss() {
+        if (this.dismissAt === undefined) {
+            return;
+        }
+        this.cancelScheduledDismiss();
         this.timeout = setTimeout(() => {
+            this.clearTimer();
             this.dismiss.emit(this.toastId);
-        }, this.duration);
+        }, Math.max(0, this.dismissAt - Date.now()));
     }
-    clearTimer() {
+    cancelScheduledDismiss() {
         if (!Boolean(this.timeout)) {
             return;
         }
         clearTimeout(this.timeout);
         this.timeout = undefined;
     }
+    clearTimer() {
+        this.cancelScheduledDismiss();
+        this.dismissAt = undefined;
+    }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`, `toast--action-position-${this.actionPosition}`);
-        return (h(Host, { key: 'f263cbe9a8e349d88043fb0d0324e074e4419f0d' }, h("div", { key: '5f43b16eb1a1e75e8b7e4fe6b4376965d636924d', class: className }, this.icon && (h("span", { key: 'adf6249bfd7605b15740e6db5ecf4141df68d614', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'aad0cd3c9b764eb3e05cc5bb9341857aad7a70d2', class: "toast__content-container" }, h("span", { key: '82f1b9eab0e381248cbaca4d2b5afbbcb4f30184', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '0cd204c4d4eab757ad6bc067ba5e356bcaeb9fd2' })), this.actionLabel && (h("swirl-button", { key: 'bafaa29ab97d29c6cf41b5d01028c96c1821887b', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: 'b52db302c2841959fbe68eb938cf10fe59c08103', "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: '48379c17bd2ea4b0f183b003b3d0c5e86a8300f4', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '236d1921fc495438af83821a3e84d460ac5838d7' }, h("div", { key: '5baabef2daf9411797548efc84b48ce124e3be71', class: className }, this.icon && (h("span", { key: '91293a10a4ca9c1b4cd44d20ff59a15864569d00', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'b1f55e219c324f31ac5adfef6fd01c0752a883a9', class: "toast__content-container" }, h("span", { key: '007ad76a5e78dc93ae72ae5ef20673bb3e00a1af', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '25bc9837c8d25fccf874b1d1664a56921588024d' })), this.actionLabel && (h("swirl-button", { key: '7ea51c33fdeba411204364f4d00f9f18e9de3fed', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: '7c05d917a8778519b92acbbf44d1a64e2f251d85', "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: '6e70406ba4e7decb6739d0ccf77023cc23710e2e', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": [{

package/dist/swirl-components/p-da6fa0fa.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as i,a}from"./p-Dz56lJ37.js";import{c as e}from"./p-orsBiyT_.js";import{D as o}from"./p-Bfn7CHM9.js";import"./p-CCck-DTo.js";const n=class{constructor(i){t(this,i),this.action=s(this,"action",7),this.dismiss=s(this,"dismiss",7),this.accessibleDismissLabel="Dismiss",this.actionPosition="inline",this.intent="default",this.loaded=!1,this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}connectedCallback(){this.loaded&&(this.scheduleDismiss(),this.subscribeToMediaQuery())}componentDidLoad(){this.loaded=!0,this.startTimer(),this.subscribeToMediaQuery()}disconnectedCallback(){this.cancelScheduledDismiss(),this.mediaQueryUnsubscribe()}subscribeToMediaQuery(){this.mediaQueryUnsubscribe(),this.mediaQueryUnsubscribe=o.subscribe((t=>{this.forceIconProps(t)}))}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.dismissAt=Date.now()+this.duration,this.scheduleDismiss())}scheduleDismiss(){void 0!==this.dismissAt&&(this.cancelScheduledDismiss(),this.timeout=setTimeout((()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}),Math.max(0,this.dismissAt-Date.now())))}cancelScheduledDismiss(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}clearTimer(){this.cancelScheduledDismiss(),this.dismissAt=void 0}render(){const t=e("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return i(a,{key:"236d1921fc495438af83821a3e84d460ac5838d7"},i("div",{key:"5baabef2daf9411797548efc84b48ce124e3be71",class:t},this.icon&&i("span",{key:"91293a10a4ca9c1b4cd44d20ff59a15864569d00",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),i("span",{key:"b1f55e219c324f31ac5adfef6fd01c0752a883a9",class:"toast__content-container"},i("span",{key:"007ad76a5e78dc93ae72ae5ef20673bb3e00a1af",class:"toast__content",innerHTML:this.content,part:"toast__content"},i("slot",{key:"25bc9837c8d25fccf874b1d1664a56921588024d"})),this.actionLabel&&i("swirl-button",{key:"7ea51c33fdeba411204364f4d00f9f18e9de3fed",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),i("button",{key:"7c05d917a8778519b92acbbf44d1a64e2f251d85","aria-label":this.dismissLabel||this.accessibleDismissLabel,class:"toast__dismiss-button",onClick:this.onDismiss,type:"button"},this.dismissLabel,!Boolean(this.dismissLabel)&&i("swirl-icon-close",{key:"6e70406ba4e7decb6739d0ccf77023cc23710e2e",ref:t=>this.dismissIconEl=t}))))}static get watchers(){return{duration:[{watchDuration:0}]}}};n.style=":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--action-position-bottom .toast__content-container{flex-direction:column}.toast--action-position-bottom .toast__action-button{margin-top:var(--s-space-8);margin-left:0;align-self:flex-start}.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-container{display:flex;flex-grow:1;min-width:0}.toast__content{flex-basis:min-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);min-width:0;flex-shrink:1}@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)}";export{n as swirl_toast}

package/dist/swirl-components/p-ecfa7c79.entry.js

@@ -0,0 +1 @@
+import{r as t,h as n,a as o,d as i}from"./p-Dz56lJ37.js";import{c as r}from"./p-orsBiyT_.js";import{D as a}from"./p-Bfn7CHM9.js";import"./p-CCck-DTo.js";const s=class{constructor(n){t(this,n),this.cursor="pointer",this.iconPosition="start",this.intent="default",this.size="m",this.textAlign="center",this.type="button",this.variant="ghost",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.updateFormAttribute(),this.mediaQueryUnsubscribe=a.subscribe((t=>{this.isDesktop=t,this.forceIconProps()}))}componentDidRender(){this.updateFormAttribute(),this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl))return;const t=this.iconEl.children[0];(t?.tagName.startsWith("SWIRL-ICON")||t?.tagName.startsWith("SWIRL-EMOJI")||t?.tagName.startsWith("SWIRL-SYMBOL"))&&t?.setAttribute("size",this.isDesktop||"s"===this.size?"20":"24")}getAriaLabel(t){return Boolean(this.swirlAriaLabel)?this.swirlAriaLabel:t?this.label:void 0}updateFormAttribute(){Boolean(this.href)||!Boolean(this.form)?this.buttonEl?.removeAttribute("form"):this.buttonEl?.setAttribute("form",this.form)}render(){const t=Boolean(this.icon)||Boolean(this.el.querySelector("[slot='icon']")),i=this.hideLabel&&t||"floating"===this.variant&&"default"===this.intent,a=Boolean(this.href),s=this.getAriaLabel(i),e=Boolean(this.el.querySelector("[slot='tag']")),b=Boolean(this.el.querySelector("[slot='trailing']")),l=r("button",`button--icon-position-${this.iconPosition}`,`button--intent-${this.intent}`,`button--size-${this.size}`,`button--text-align-${this.textAlign}`,`button--variant-${this.variant}`,{"button--elevated":this.elevated,"button--disabled":this.disabled,"button--has-icon":t,"button--icon-only":i,"button--pill":this.pill,"button--pressed":this.pressed});return n(o,{key:"39431a264dbc13b90dd7861927bf56ee030faaa8",style:{pointerEvents:this.disabled?"none":""}},n(a?"a":"button",{key:"b7ddae041810657c2f8eae75c22e1241a97e25f3","aria-controls":this.swirlAriaControls,"aria-current":this.swirlAriaCurrent,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled&&!a?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,"aria-label":s,"aria-pressed":this.pressed?"true":void 0,class:l,disabled:a?void 0:this.disabled,download:a?void 0:this.download,form:a?void 0:this.form,href:this.href,name:a?void 0:this.name,ref:t=>this.buttonEl=t,target:a?this.target:void 0,type:a?void 0:this.type,value:a?void 0:this.value,style:{cursor:this.disabled||"pointer"===this.cursor?void 0:this.cursor,fontSize:this.inheritFontSize?"inherit":void 0,lineHeight:this.inheritFontSize?"inherit":void 0}},Boolean(this.icon)&&n("span",{key:"58ad9ec67fd692d1bbd4d877f6820faeec548a59",class:"button__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),!Boolean(this.icon)&&n("span",{key:"89b0f33c96234cca0dbca8caf9c2e13edf330067",class:"button__icon",ref:t=>this.iconEl=t},n("slot",{key:"8fe33f30f6424c19d7f3322e77794ab409432d27",name:"icon"})),!i&&n("span",{key:"11f2397daaced6b03f241db1cda3a5b2786b5ae5",class:"button__label"},this.label),e&&n("span",{key:"67703c9b0d1d51f5bdefb185959354ed1741577e",class:"button__tag"},n("slot",{key:"c947a911fcd57072f283fcfa03d5002b6d8f5992",name:"tag"})),b&&n("div",{key:"c419181f3f91737ff6f10cec5f0774d87a6c1e9e",class:"button__trailing-slot"},n("slot",{key:"24a5177b877256fd1eef407855fe6d5558ec10d1",name:"trailing"}))))}get el(){return i(this)}};s.style=".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);min-width:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-width:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-state-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-subdued);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-outline.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-state-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-state-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid     var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-translucent.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-translucent.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--size-s.sc-swirl-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-width:var(--s-line-height-sm);gap:var(--s-space-4);border-radius:var(--s-border-radius-sm)}.button--size-s.sc-swirl-button:not(.button--variant-plain),.button--size-s.button--variant-floating.button--intent-primary.sc-swirl-button{min-height:1.75rem;padding:var(--s-space-4) var(--s-space-8)}.button--size-s.button--pill.sc-swirl-button,.button--size-s.button--variant-floating.button--intent-primary.sc-swirl-button{border-radius:0.875rem}.button--size-s.sc-swirl-button .button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}.button--size-s.button--icon-only.sc-swirl-button:not(.button--variant-plain),.button--size-s.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{min-width:1.75rem;padding:var(--s-space-4)}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(       --swirl-icon-button-border-bottom-right-radius     );border-bottom-left-radius:var(       --swirl-icon-button-border-bottom-left-radius     )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";export{s as swirl_button}

package/dist/swirl-components/p-fad7aae8.entry.js

@@ -0,0 +1 @@
+import{r as a,c as i,h as t,a as r,d as s}from"./p-Dz56lJ37.js";import{c as e}from"./p-orsBiyT_.js";const o={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},n=class{constructor(t){a(this,t),this.imageError=i(this,"imageError",7),this.imageLoad=i(this,"imageLoad",7),this.badgePosition="bottom",this.color="kiwi",this.interactive=!1,this.showLabel=!1,this.size="m",this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.inViewport=!1,this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())}}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=Boolean(this.src)&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),i=(!a||!this.loaded&&!this.loadingError)&&Boolean(this.initials),s=!a&&!i&&Boolean(this.icon),n=!a&&!i&&!s,l=Boolean(this.badge)&&"m"===this.size,d=this.interactive?"button":void 0,v=e("avatar",`avatar--color-${this.color}`,`avatar--size-${this.size}`,`avatar--variant-${this.variant}`,{"avatar--has-icon":s||n,"avatar--has-initials":i,"avatar--interactive":this.interactive}),c=e("avatar__badge",`avatar__badge--position-${this.badgePosition}`),h=e("avatar__tool",`avatar__tool--position-${this.toolPosition}`);return t(r,{key:"507321c143bd3a7bd96727522250a32a0bddfda9","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:d,tabIndex:this.interactive?0:void 0},t("span",{key:"41c06e0e9a91b7012a898a19c7d2ff66b93a3584",class:v,part:"avatar"},a&&t("span",{key:"4026f68212a7026dfdb236bffacc210a7dfd7b30",class:"avatar__image"},t("img",{key:"0699557694dc623f53036b508311c1f4eba09203",alt:this.label,height:o[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:o[this.size]})),i&&t("span",{key:"b3472929371b253c5e595dd3e06249a2c93c54c2","aria-label":this.label,class:"avatar__initials",role:"img"},t("span",{key:"a5a799062a74c2f221016ade901faaf2cd486732"},this.initials)),s&&t("span",{key:"c07bdccd23723a9b8edf8f37d0c91d58cecf3509","aria-label":this.label,class:"avatar__icon",innerHTML:this.icon,role:"img"}),n&&t("span",{key:"a0c4320679482b1cedeed96e43624ed5b5f742c4","aria-label":this.label,class:"avatar__icon",role:"img"},t("swirl-icon-person",{key:"dcd0196bb0e0a22f998d327f7d96e74f0fc42222"})),l&&t("span",{key:"bf05b4f9203f2fc5c7b12be8ff6ab739ed62d6ed",class:c,innerHTML:this.badge}),t("span",{key:"6e410915db1a4e551498b756cd27c2055a9f154b",class:h},t("slot",{key:"3246af86e577fec79fa0775547947743510a127b",name:"tool"}))),this.showLabel&&t("span",{key:"06de3d3ee675f209fe1c25a679d58fd19425fd87","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return s(this)}static get watchers(){return{src:[{watchSrcProp:0}]}}};n.style=':host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column;--swirl-avatar-radius:50%;--swirl-avatar-size:2.5rem}:host *{box-sizing:border-box}:host([size="3xs"]){--swirl-avatar-size:1.25rem}:host([size="2xs"]){--swirl-avatar-size:1.5rem}:host([size="xs"]){--swirl-avatar-size:1.75rem}:host([size="s"]){--swirl-avatar-size:2rem}:host([size="l"]){--swirl-avatar-size:3rem}:host([size="xl"]){--swirl-avatar-size:4rem}:host([size="2xl"]){--swirl-avatar-size:9rem}:host([variant="square"][size="3xs"]),:host([variant="square"][size="2xs"]){--swirl-avatar-radius:0.25rem}:host([variant="square"][size="xs"]),:host([variant="square"][size="s"]){--swirl-avatar-radius:0.5rem}:host([variant="square"][size="m"]){--swirl-avatar-radius:0.625rem}:host([variant="square"][size="l"]){--swirl-avatar-radius:0.75rem}:host([variant="square"][size="xl"]){--swirl-avatar-radius:1rem}:host([variant="square"][size="2xl"]){--swirl-avatar-radius:1.25rem}.avatar{position:relative;display:inline-flex;width:var(--swirl-avatar-size);height:var(--swirl-avatar-size);justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);border:var(--swirl-avatar-border-width, 0) solid     var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:var(--swirl-avatar-radius)}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}';export{n as swirl_avatar}