@getflip/swirl-components 0.516.0 → 0.517.0

package/dist/collection/components/swirl-chip/swirl-chip.js

@@ -54,7 +54,7 @@ export class SwirlChip {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (h(Host, { key: 'a143d32603ecf2843a8b1291dfcad7c9a59fb6dc' }, h(Tag, { key: 'a6ec7b1554b4b53317da9e4f4174eeb37fa71292', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, disabled: this.interactive ? this.disabled : undefined, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '06290531c4484d1d40350190cca4e28fb9554701', class: "chip__inner" }, showAvatar && (h("span", { key: 'fb1586360058ce70836b0d9abb16fb2ffb4ffbf3', class: "chip__avatar" }, h("slot", { key: 'cbea43f4ad440ca2d59b56dbef167a0197930544', name: "avatar" }))), showIcon && (h("span", { key: '82b15edc910565d8b8d2d494f1e061771aeaa0a2', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '6c5882703ac0a24145ccce4063d89f1ebaea5f41', class: "chip__label" }, this.label), this.trailingIcon && (h("span", { key: '1dd62bebc93bcf530cd049084c0c9f867d803c84', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (h("span", { key: 'dea6309c1dd6d1648c5abbf353270da7d272d9a6', class: "chip__trailing-content" }, h("slot", { key: 'c8de705b65639aca3758e81fb6f0547b35a6b485', name: "trailing-content" })))), this.progress !== undefined && (h("span", { key: '1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'f48ecfa4f1d207cd9202af9206478d59c176a096', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.removeButtonLabel, class: "chip__remove-button", disabled: this.disabled, onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'c143ebba597808238fd7bb07fd356d85333d8c5c', size: 20 })))));
+        return (h(Host, { key: '4eeea347e1cb4364bc73250ce0dc92fcea6fb2fc' }, h(Tag, { key: '81902afb6e4d47f1fee2bf350232f8aa48951b22', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-label": this.swirlAriaLabel, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, disabled: this.interactive ? this.disabled : undefined, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '303a419d8ea5ade9041c0bbdbfd56e4291b2f4e0', class: "chip__inner" }, showAvatar && (h("span", { key: '5dd0488f364aef03c7412ab18e595a2030dede6e', class: "chip__avatar" }, h("slot", { key: 'e3e8aaaf7d6f71af024e5e102d2f79f35cb2e5f5', name: "avatar" }))), showIcon && (h("span", { key: '505c6a0f50740442192e1883d70c63ab089359ac', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '37ebcf518fea192827b330243aa8df727cbdf933', class: "chip__label" }, this.label), this.trailingIcon && (h("span", { key: '2df2096e835ff05378c0efef5e4aeaa2eb5df7fe', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (h("span", { key: '8949aa83ab41fb4231eec2a614fd37783eab0c3b', class: "chip__trailing-content" }, h("slot", { key: '9def8fa64f4b88d48e62d0c8b63c9ce1b273dfde', name: "trailing-content" })))), this.progress !== undefined && (h("span", { key: 'df797b45f4739fd9f8c716cb195221526fbeed89', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'f58cfbf6f821b782390913231f77528e5569176e', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '424a7d876e35675b6fdb3cf1eb957b766d2104ca', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.removeButtonLabel, class: "chip__remove-button", disabled: this.disabled, onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '6a71e93487b33035a47d2f4cc31defc9055dcad9', size: 20 })))));
     }
     static get is() { return "swirl-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -367,6 +367,25 @@ export class SwirlChip {
                 "attribute": "size",
                 "defaultValue": "\"m\""
             },
+            "swirlAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swirl-aria-label"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

package/dist/components/swirl-chip.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as s,createEvent as c,h as r,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as n}from"./swirl-icon-close2.js";import{d as h}from"./swirl-progress-indicator2.js";const l=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!this.iconEl&&!this.trailingIconEl)return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const s=this.iconEl.children[0];s?.setAttribute("size",i)}if(this.trailingIconEl){const s=this.trailingIconEl.children[0];s?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",s=!!this.el.querySelector('[slot="avatar"]'),c=!s&&!!this.icon,a=!!this.el.querySelector('[slot="trailing-content"]'),o=t("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return r(e,{key:"a143d32603ecf2843a8b1291dfcad7c9a59fb6dc"},r(i,{key:"a6ec7b1554b4b53317da9e4f4174eeb37fa71292","aria-disabled":this.interactive&&this.disabled?"true":void 0,"aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:o,disabled:this.interactive?this.disabled:void 0,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},r("span",{key:"06290531c4484d1d40350190cca4e28fb9554701",class:"chip__inner"},s&&r("span",{key:"fb1586360058ce70836b0d9abb16fb2ffb4ffbf3",class:"chip__avatar"},r("slot",{key:"cbea43f4ad440ca2d59b56dbef167a0197930544",name:"avatar"})),c&&r("span",{key:"82b15edc910565d8b8d2d494f1e061771aeaa0a2",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),r("span",{key:"6c5882703ac0a24145ccce4063d89f1ebaea5f41",class:"chip__label"},this.label),this.trailingIcon&&r("span",{key:"1dd62bebc93bcf530cd049084c0c9f867d803c84",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),a&&r("span",{key:"dea6309c1dd6d1648c5abbf353270da7d272d9a6",class:"chip__trailing-content"},r("slot",{key:"c8de705b65639aca3758e81fb6f0547b35a6b485",name:"trailing-content"}))),void 0!==this.progress&&r("span",{key:"1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab",class:"chip__progress-indicator"},r("swirl-progress-indicator",{key:"5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50",label:this.progressBarLabel,value:this.progress}))),this.removable&&r("button",{key:"f48ecfa4f1d207cd9202af9206478d59c176a096","aria-disabled":this.disabled?"true":void 0,"aria-label":this.removeButtonLabel,class:"chip__remove-button",disabled:this.disabled,onClick:this.removeChip.emit,type:"button"},r("swirl-icon-close",{key:"c143ebba597808238fd7bb07fd356d85333d8c5c",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip:not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip:not(:disabled){border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip:not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover:not(:disabled){background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],disabled:[4],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],variant:[1]}]),p=l,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(a(i))||customElements.define(a(i),l);break;case"swirl-icon-close":customElements.get(a(i))||n();break;case"swirl-progress-indicator":customElements.get(a(i))||h()}}))};export{p as SwirlChip,d as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as s,createEvent as r,h as c,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as n}from"./swirl-icon-close2.js";import{d as h}from"./swirl-progress-indicator2.js";const l=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=r(this,"chipClick",7),this.removeChip=r(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!this.iconEl&&!this.trailingIconEl)return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const s=this.iconEl.children[0];s?.setAttribute("size",i)}if(this.trailingIconEl){const s=this.trailingIconEl.children[0];s?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",s=!!this.el.querySelector('[slot="avatar"]'),r=!s&&!!this.icon,a=!!this.el.querySelector('[slot="trailing-content"]'),o=t("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return c(e,{key:"4eeea347e1cb4364bc73250ce0dc92fcea6fb2fc"},c(i,{key:"81902afb6e4d47f1fee2bf350232f8aa48951b22","aria-disabled":this.interactive&&this.disabled?"true":void 0,"aria-label":this.swirlAriaLabel,"aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:o,disabled:this.interactive?this.disabled:void 0,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},c("span",{key:"303a419d8ea5ade9041c0bbdbfd56e4291b2f4e0",class:"chip__inner"},s&&c("span",{key:"5dd0488f364aef03c7412ab18e595a2030dede6e",class:"chip__avatar"},c("slot",{key:"e3e8aaaf7d6f71af024e5e102d2f79f35cb2e5f5",name:"avatar"})),r&&c("span",{key:"505c6a0f50740442192e1883d70c63ab089359ac",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),c("span",{key:"37ebcf518fea192827b330243aa8df727cbdf933",class:"chip__label"},this.label),this.trailingIcon&&c("span",{key:"2df2096e835ff05378c0efef5e4aeaa2eb5df7fe",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),a&&c("span",{key:"8949aa83ab41fb4231eec2a614fd37783eab0c3b",class:"chip__trailing-content"},c("slot",{key:"9def8fa64f4b88d48e62d0c8b63c9ce1b273dfde",name:"trailing-content"}))),void 0!==this.progress&&c("span",{key:"df797b45f4739fd9f8c716cb195221526fbeed89",class:"chip__progress-indicator"},c("swirl-progress-indicator",{key:"f58cfbf6f821b782390913231f77528e5569176e",label:this.progressBarLabel,value:this.progress}))),this.removable&&c("button",{key:"424a7d876e35675b6fdb3cf1eb957b766d2104ca","aria-disabled":this.disabled?"true":void 0,"aria-label":this.removeButtonLabel,class:"chip__remove-button",disabled:this.disabled,onClick:this.removeChip.emit,type:"button"},c("swirl-icon-close",{key:"6a71e93487b33035a47d2f4cc31defc9055dcad9",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip:not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip:not(:disabled){border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip:not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover:not(:disabled){background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],disabled:[4],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],swirlAriaLabel:[1,"swirl-aria-label"],variant:[1]}]),p=l,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(a(i))||customElements.define(a(i),l);break;case"swirl-icon-close":customElements.get(a(i))||n();break;case"swirl-progress-indicator":customElements.get(a(i))||h()}}))};export{p as SwirlChip,d as defineCustomElement}