@justeattakeaway/pie-tag 0.21.3 → 0.22.0

package/dist/index.js

@@ -1,126 +1,102 @@
-import { LitElement as k, unsafeCSS as w, nothing as y, html as p } from "lit";
-import { property as n, queryAssignedElements as S } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { validPropertyValues as h, safeCustomElement as I } from "@justeattakeaway/pie-webc-core";
-const b = class b extends k {
+import { LitElement as u, unsafeCSS as f, html as y } from "lit";
+import { property as g } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { validPropertyValues as p, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
+const s = class s extends u {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", b.v);
+    this.getAttribute("v") || this.setAttribute("v", s.v);
   }
 };
-b.v = "0.21.3";
-let m = b;
-const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}.c-tag{--int-states-mixin-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-cursor: text;--tag-transparent-bg-color: transparent;--icon-size-override: 16px;display:inline-flex;flex-direction:row;gap:var(--dt-spacing-a);vertical-align:middle;align-items:center;justify-content:center;padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);cursor:var(--tag-cursor)}.c-tag.c-tag--interactive{--tag-cursor: pointer;border:none;-webkit-user-select:none;user-select:none}.c-tag.c-tag--interactive:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-tag.c-tag--icon-placement--trailing{flex-direction:row-reverse}.c-tag.c-tag--small{--tag-padding-block: 0;--tag-padding-inline: var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag.c-tag--icon-only{--tag-padding-block: var(--dt-spacing-a)}.c-tag.c-tag--neutral.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-strong))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-strong))}}.c-tag.c-tag--neutral.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-tag.c-tag--information{--int-states-mixin-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--hover-modifier)))}.c-tag.c-tag--information.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--information.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-info-02))}.c-tag.c-tag--information.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-info-02))}}.c-tag.c-tag--information.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--hover-modifier)))}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-info))}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-info))}}.c-tag.c-tag--success{--int-states-mixin-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--hover-modifier)))}.c-tag.c-tag--success.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--success.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-positive-02))}.c-tag.c-tag--success.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-positive-02))}}.c-tag.c-tag--success.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--hover-modifier)))}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-positive))}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-positive))}}.c-tag.c-tag--error{--int-states-mixin-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--hover-modifier)))}.c-tag.c-tag--error.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--error.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error-02))}.c-tag.c-tag--error.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error-02))}}.c-tag.c-tag--error.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.c-tag.c-tag--brand-02{--int-states-mixin-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-02.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-02.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-02.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-02.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-02))}.c-tag.c-tag--brand-02.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-02.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-02))}}.c-tag.c-tag--brand-03{--int-states-mixin-bg-color: var(--dt-color-support-brand-03);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-03.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-03-h), var(--dt-color-support-brand-03-s), calc(var(--dt-color-support-brand-03-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-03.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-03.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-03-h), var(--dt-color-support-brand-03-s), calc(var(--dt-color-support-brand-03-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-03.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-03))}.c-tag.c-tag--brand-03.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-03.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-03))}}.c-tag.c-tag--brand-04{--int-states-mixin-bg-color: var(--dt-color-support-brand-04);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-04-h), var(--dt-color-support-brand-04-s), calc(var(--dt-color-support-brand-04-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-04.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-04.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-04-h), var(--dt-color-support-brand-04-s), calc(var(--dt-color-support-brand-04-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-04.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-04))}.c-tag.c-tag--brand-04.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-04.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-04))}}.c-tag.c-tag--brand-05{--int-states-mixin-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-05.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-05.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-warning-02))}.c-tag.c-tag--brand-05.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-warning-02))}}.c-tag.c-tag--brand-05.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-warning))}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-warning))}}.c-tag.c-tag--brand-06{--int-states-mixin-bg-color: var(--dt-color-support-brand-06);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-06.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-06-h), var(--dt-color-support-brand-06-s), calc(var(--dt-color-support-brand-06-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-06.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-06.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-06-h), var(--dt-color-support-brand-06-s), calc(var(--dt-color-support-brand-06-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-06.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-light-bg) var(--dt-color-hover-02-light), var(--dt-color-support-brand-06))}.c-tag.c-tag--brand-06.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-06.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-light-bg) var(--dt-color-active-02-light), var(--dt-color-support-brand-06))}}.c-tag.c-tag--neutral-alternative{--int-states-mixin-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral-alternative.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral-alternative.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-tag.c-tag--outline{--int-states-mixin-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default-solid);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag.c-tag--outline.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--hover-modifier)))}.c-tag.c-tag--outline.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--outline.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--outline.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--tag-transparent-bg-color))}.c-tag.c-tag--outline.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--outline.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--tag-transparent-bg-color))}}.c-tag.c-tag--ghost{--int-states-mixin-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--ghost.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--hover-modifier)))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--ghost.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--ghost.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--tag-transparent-bg-color))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--ghost.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--tag-transparent-bg-color))}}.c-tag.is-disabled{opacity:.5}.c-tag[disabled]{--tag-cursor: not-allowed}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", O = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], P = ["small", "large"], $ = ["leading", "trailing"], c = {
+s.v = "0.22.0";
+let v = s;
+const w = '*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}.c-tag{--tag-bg-color: var(--dt-color-container-strong);--tag-icon-bg-color: var(--dt-color-container-inverse);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default);--tag-transparent-bg-color: transparent;--tag-border-width: 1px;--tag-border-color: var(--tag-bg-color);border:var(--tag-border-width) solid var(--tag-border-color);border-radius:var(--tag-border-radius);width:100%;font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);color:var(--tag-color);display:flex;align-items:center;justify-content:center;background-color:var(--tag-bg-color);padding-inline-start:var(--tag-padding-inline-start);padding-inline-end:var(--tag-padding-inline-end);padding-block-start:var(--tag-padding-block-start);padding-block-end:var(--tag-padding-block-end)}.c-tag slot[name=icon]{color:var(--tag-icon-color)}.c-tag slot[name=icon]::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}.c-tag slot:not([name=icon]){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag.c-tag--large{--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-border-radius: var(--dt-radius-rounded-e);--icon-size-override: 16px;--tag-padding-block-start: calc(var(--dt-spacing-a-small) - var(--tag-border-width));--tag-padding-block-end: calc(var(--dt-spacing-a-small) - var(--tag-border-width));--tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a)}.c-tag.c-tag--small{--tag-font-family: var(--dt-font-caption-family);--tag-font-weight: var(--dt-font-caption-weight);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px);--tag-border-radius: var(--dt-radius-rounded-c);--icon-size-override: 12px;--tag-padding-block-start: 0;--tag-padding-block-end: 0;--tag-padding-inline-start: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a-small)}.c-tag.c-tag--icon-only.c-tag--large,.c-tag.c-tag--icon-only.c-tag--small{--tag-padding-block-start: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-padding-block-end: calc(var(--dt-spacing-a) - var(--tag-border-width))}.c-tag.c-tag--icon-only.c-tag--small{--tag-border-radius: var(--dt-radius-rounded-e);--icon-size-override: 16px;--tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a)}.c-tag.c-tag--has-icon:not(.c-tag--icon-only){--tag-padding-inline-start: 0;--tag-padding-block-start: 0;--tag-padding-block-end: 0;gap:var(--tag-gap)}.c-tag.c-tag--has-icon:not(.c-tag--icon-only).c-tag--large{--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-icon-container-size: 22px}.c-tag.c-tag--has-icon:not(.c-tag--icon-only).c-tag--small{--tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-icon-container-size: 16px}.c-tag.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]{background-color:var(--tag-icon-bg-color);display:grid;place-items:center;border-radius:inherit;height:var(--tag-icon-container-size);aspect-ratio:1/1}.c-tag.c-tag--is-dimmed{opacity:.5}.c-tag.c-tag--neutral.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-container-inverse);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-container-inverse);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral-alternative{--tag-bg-color: var(--dt-color-container-default);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-default);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--information{--tag-bg-color: var(--dt-color-support-info-02);--tag-icon-bg-color: var(--dt-color-support-info);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-info-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-info);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--information.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-info);--tag-icon-bg-color: var(--dt-color-support-info-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success{--tag-bg-color: var(--dt-color-support-positive-02);--tag-icon-bg-color: var(--dt-color-support-positive);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-positive-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-positive);--tag-icon-bg-color: var(--dt-color-support-positive-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--error{--tag-bg-color: var(--dt-color-support-error-02);--tag-icon-bg-color: var(--dt-color-support-error);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-error-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-error);--tag-icon-color: var(--dt-color-content-light)}.c-tag.c-tag--error.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-error);--tag-icon-bg-color: var(--dt-color-support-error-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--warning{--tag-bg-color: var(--dt-color-support-warning-02);--tag-icon-bg-color: var(--dt-color-support-warning);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--warning.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-warning-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--warning.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--warning.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-warning);--tag-icon-bg-color: var(--dt-color-support-warning-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-02{--tag-bg-color: var(--dt-color-support-brand-02);--tag-icon-bg-color: var(--dt-color-support-brand-01);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-02.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03{--tag-bg-color: var(--dt-color-support-brand-03-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-03);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-03-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-03);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-03.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-03);--tag-icon-bg-color: var(--dt-color-support-brand-03-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04{--tag-bg-color: var(--dt-color-support-brand-04-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-04);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-04.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-04-subtle);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-04);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-04);--tag-icon-bg-color: var(--dt-color-support-brand-04-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05{--tag-bg-color: var(--dt-color-support-brand-05-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-05);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-05-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-05);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-05);--tag-icon-bg-color: var(--dt-color-support-brand-05-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-06{--tag-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-06);--tag-icon-color: var(--dt-color-content-light);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-06.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-06.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-06);--tag-icon-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-06.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-06);--tag-icon-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-08{--tag-bg-color: var(--dt-color-support-brand-08-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-08);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-08.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-08-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-08.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-08);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-08.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-08);--tag-icon-bg-color: var(--dt-color-support-brand-08-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--ghost{--tag-bg-color: var(--dt-color-transparent);--tag-icon-bg-color: var(--dt-color-transparent);--tag-icon-color: var(--dt-color-content-default-solid);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--ghost.c-tag--icon-only{--tag-bg-color: var(--dt-color-transparent);--tag-icon-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--translucent{--tag-bg-color: var(--dt-color-container-prominent);--tag-icon-bg-color: var(--dt-color-container-neutral);--tag-icon-color: var(--dt-color-content-default-solid);--tag-color: var(--dt-color-content-default-solid);--tag-border-color: var(--dt-color-border-neutral);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-tag.c-tag--translucent.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-prominent);--tag-icon-color: var(--dt-color-content-default-solid);--tag-border-color: var(--dt-color-border-neutral)}.c-tag.c-tag--outline{--tag-bg-color: var(--dt-color-transparent);--tag-border-color: var(--dt-color-border-strong);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--outline.c-tag--icon-only{--tag-icon-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--outline.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]{position:relative}.c-tag.c-tag--outline.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]:before{content:"";position:absolute;left:-.25px;height:var(--tag-icon-container-size);aspect-ratio:1;z-index:-1;border-radius:inherit;box-shadow:inset 5px 0 0 0 var(--tag-icon-bg-color)}', k = [
+  "neutral",
+  "neutral-alternative",
+  "ghost",
+  "outline",
+  "translucent",
+  "information",
+  "success",
+  "error",
+  "warning",
+  "brand-02",
+  "brand-03",
+  "brand-04",
+  "brand-05",
+  "brand-06",
+  "brand-08"
+], z = ["small", "large"], a = {
   variant: "neutral",
   isStrong: !1,
-  isInteractive: !1,
-  disabled: !1,
+  isDimmed: !1,
   size: "large",
-  iconPlacement: "leading"
+  isIconOnly: !1,
+  hasLeadingIcon: !1
 };
-var C = Object.defineProperty, N = Object.getOwnPropertyDescriptor, d = (t, i, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? N(i, a) : i, e = t.length - 1, l; e >= 0; e--)
-    (l = t[e]) && (r = (s ? l(i, a, r) : l(r)) || r);
-  return s && r && C(i, a, r), r;
+var x = Object.defineProperty, I = Object.getOwnPropertyDescriptor, r = (e, c, l, n) => {
+  for (var o = n > 1 ? void 0 : n ? I(c, l) : c, i = e.length - 1, d; i >= 0; i--)
+    (d = e[i]) && (o = (n ? d(c, l, o) : d(o)) || o);
+  return n && o && x(c, l, o), o;
 };
-const u = "pie-tag";
-let o = class extends m {
+const b = "pie-tag";
+let t = class extends v {
   constructor() {
-    super(...arguments), this.variant = c.variant, this.size = c.size, this.isStrong = c.isStrong, this.disabled = c.disabled, this.isInteractive = c.isInteractive, this.iconPlacement = c.iconPlacement, this.isIconOnly = !1;
-  }
-  updated(t) {
-    t.has("size") && this.checkIfIsIconOnly();
-  }
-  checkIfIsIconOnly() {
-    const { size: t, textContent: i, _iconSlotNodes: a } = this, s = t === "large", e = (i == null ? void 0 : i.trim()) === "", l = a.length > 0;
-    if (s && e && l && a && a.length === 1) {
-      const g = a[0].tagName.toUpperCase(), x = g.startsWith("ICON-") || g === "SVG";
-      this.isIconOnly = x, this.requestUpdate();
-      return;
-    }
-    this.isIconOnly = !1, this.requestUpdate();
-  }
-  handleSlotChange() {
-    this.checkIfIsIconOnly();
-  }
-  renderIconSlot() {
-    return this.size !== "large" ? y : p`<slot part="icon" name="icon" @slotchange=${this.handleSlotChange}></slot>`;
-  }
-  renderTag(t) {
-    return p`
-        <div
-            part="body"
-            class="${f(t)}"
-            data-test-id="pie-tag">
-            ${this.renderIconSlot()}
-            <slot @slotchange=${this.handleSlotChange}></slot>
-        </div>`;
-  }
-  renderButtonTag(t) {
-    return p`
-        <button
-            part="body"
-            type="button"
-            ?disabled="${this.disabled}"
-            class="${f(t)}"
-            data-test-id="pie-tag">
-            ${this.renderIconSlot()}
-            <slot></slot>
-        </button>`;
+    super(...arguments), this.variant = a.variant, this.size = a.size, this.isStrong = a.isStrong, this.isDimmed = a.isDimmed, this.isIconOnly = a.isIconOnly, this.hasLeadingIcon = a.hasLeadingIcon;
   }
   render() {
     const {
-      disabled: t,
-      isInteractive: i,
-      isStrong: a,
-      size: s,
-      variant: r,
-      iconPlacement: e,
-      isIconOnly: l
-    } = this, v = l ? !1 : i, g = {
+      isDimmed: e,
+      isStrong: c,
+      size: l,
+      variant: n,
+      isIconOnly: o,
+      hasLeadingIcon: i
+    } = this, d = {
       "c-tag": !0,
-      [`c-tag--${s}`]: !0,
-      [`c-tag--${r}`]: !0,
-      "is-disabled": t,
-      "c-tag--strong": a,
-      "c-tag--interactive": v,
-      "c-tag--icon-only": l,
-      [`c-tag--icon-placement--${e}`]: v && e
+      [`c-tag--${l}`]: !0,
+      [`c-tag--${n}`]: !0,
+      "c-tag--is-dimmed": e,
+      "c-tag--strong": c,
+      "c-tag--icon-only": o,
+      "c-tag--has-icon": i
     };
-    return v ? this.renderButtonTag(g) : this.renderTag(g);
+    return y`
+        <div
+            part="body"
+            class="${h(d)}"
+            data-test-id="pie-tag">
+            <slot part="icon" name="icon"></slot>
+            <slot></slot>
+        </div>`;
   }
 };
-o.styles = w(z);
-d([
-  n({ type: String }),
-  h(u, O, c.variant)
-], o.prototype, "variant", 2);
-d([
-  n({ type: String }),
-  h(u, P, c.size)
-], o.prototype, "size", 2);
-d([
-  n({ type: Boolean })
-], o.prototype, "isStrong", 2);
-d([
-  n({ type: Boolean })
-], o.prototype, "disabled", 2);
-d([
-  n({ type: Boolean })
-], o.prototype, "isInteractive", 2);
-d([
-  n({ type: String }),
-  h(u, $, c.iconPlacement)
-], o.prototype, "iconPlacement", 2);
-d([
-  S({ slot: "icon", flatten: !0 })
-], o.prototype, "_iconSlotNodes", 2);
-o = d([
-  I("pie-tag")
-], o);
+t.styles = f(w);
+r([
+  g({ type: String }),
+  p(b, k, a.variant)
+], t.prototype, "variant", 2);
+r([
+  g({ type: String }),
+  p(b, z, a.size)
+], t.prototype, "size", 2);
+r([
+  g({ type: Boolean })
+], t.prototype, "isStrong", 2);
+r([
+  g({ type: Boolean })
+], t.prototype, "isDimmed", 2);
+r([
+  g({ type: Boolean })
+], t.prototype, "isIconOnly", 2);
+r([
+  g({ type: Boolean })
+], t.prototype, "hasLeadingIcon", 2);
+t = r([
+  m("pie-tag")
+], t);
 export {
-  o as PieTag,
-  c as defaultProps,
-  $ as iconPlacements,
-  P as sizes,
-  O as variants
+  t as PieTag,
+  a as defaultProps,
+  z as sizes,
+  k as variants
 };

package/dist/react.d.ts

@@ -1,7 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import { TemplateResult } from 'lit-html';
 
@@ -9,8 +8,6 @@ export declare type DefaultProps = ComponentDefaultProps<TagProps>;
 
 export declare const defaultProps: DefaultProps;
 
-export declare const iconPlacements: readonly ["leading", "trailing"];
-
 export declare const PieTag: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TagProps> & React_2.RefAttributes<PieTag_2> & ReactBaseType>;
 
 /**
@@ -21,20 +18,12 @@ export declare const PieTag: React_2.ForwardRefExoticComponent<React_2.PropsWith
  * @csspart icon - The container for the icon slot.
  */
 declare class PieTag_2 extends PieElement implements TagProps {
-    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
+    variant: "neutral" | "neutral-alternative" | "ghost" | "outline" | "translucent" | "information" | "success" | "error" | "warning" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06" | "brand-08";
     size: "small" | "large";
     isStrong: boolean;
-    disabled: boolean;
-    isInteractive: boolean;
-    iconPlacement: "leading" | "trailing";
-    _iconSlotNodes: Array<HTMLElement>;
-    private isIconOnly;
-    updated(changedProperties: PropertyValues<this>): void;
-    private checkIfIsIconOnly;
-    private handleSlotChange;
-    private renderIconSlot;
-    private renderTag;
-    private renderButtonTag;
+    isDimmed: boolean;
+    isIconOnly: boolean;
+    hasLeadingIcon: boolean;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -49,28 +38,27 @@ export declare interface TagProps {
      */
     variant?: typeof variants[number];
     /**
-     * When true, the "information", "success", "error", "brand-05", and "neutral" variants change their styles and become bolder
+     * When true, the "neutral", "information", "success", "error", "warning", "brand-03", "brand-04", "brand-05", "brand-06", and "brand-08" variants change their styles and become bolder
      */
     isStrong?: boolean;
     /**
-     * When `true`, the tag will be rendered as a button and can be interacted with.
-     */
-    isInteractive?: boolean;
-    /**
-     * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
-     * For a non-interactive tag, this only applies the disabled styling.
+     * When true, applies a dimmed styling to the tag.
      */
-    disabled?: boolean;
+    isDimmed?: boolean;
     /**
      * What size the tag should be.
      */
     size?: typeof sizes[number];
     /**
-     * The placement of the icon slot such as leading (default) or trailing. Available only if `isInteractive` is set to true.
+     * Required to correctly render the tag when it contains only an icon.
+     */
+    isIconOnly?: boolean;
+    /**
+     * Required to correctly render the tag when it has a leading icon plus text.
      */
-    iconPlacement?: typeof iconPlacements[number];
+    hasLeadingIcon?: boolean;
 }
 
-export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"];
+export declare const variants: readonly ["neutral", "neutral-alternative", "ghost", "outline", "translucent", "information", "success", "error", "warning", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06", "brand-08"];
 
 export { }

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as a } from "@lit/react";
 import { PieTag as t } from "./index.js";
-import { defaultProps as p, iconPlacements as c, sizes as g, variants as P } from "./index.js";
+import { defaultProps as g, sizes as n, variants as c } from "./index.js";
 const o = a({
   displayName: "PieTag",
   elementClass: t,
@@ -11,8 +11,7 @@ const o = a({
 }), s = o;
 export {
   s as PieTag,
-  p as defaultProps,
-  c as iconPlacements,
-  g as sizes,
-  P as variants
+  g as defaultProps,
+  n as sizes,
+  c as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tag",
   "description": "PIE Design System Tag built using Web Components",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,14 +45,14 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.23.2",
-    "@justeattakeaway/pie-icons-webc": "1.16.1",
+    "@justeattakeaway/pie-css": "0.24.0",
+    "@justeattakeaway/pie-icons-webc": "1.16.2",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "3.0.2"
+    "@justeattakeaway/pie-webc-core": "4.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,8 +1,23 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'information', 'success', 'error', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06'] as const;
+export const variants = [
+    'neutral',
+    'neutral-alternative',
+    'ghost',
+    'outline',
+    'translucent',
+    'information',
+    'success',
+    'error',
+    'warning',
+    'brand-02',
+    'brand-03',
+    'brand-04',
+    'brand-05',
+    'brand-06',
+    'brand-08'
+] as const;
 export const sizes = ['small', 'large'] as const;
-export const iconPlacements = ['leading', 'trailing'] as const;
 
 export interface TagProps {
     /**
@@ -11,30 +26,29 @@ export interface TagProps {
     variant?: typeof variants[number];
 
     /**
-     * When true, the "information", "success", "error", "brand-05", and "neutral" variants change their styles and become bolder
+     * When true, the "neutral", "information", "success", "error", "warning", "brand-03", "brand-04", "brand-05", "brand-06", and "brand-08" variants change their styles and become bolder
      */
     isStrong?: boolean;
 
     /**
-     * When `true`, the tag will be rendered as a button and can be interacted with.
+     * When true, applies a dimmed styling to the tag.
      */
-    isInteractive?: boolean;
+    isDimmed?: boolean;
 
     /**
-     * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
-     * For a non-interactive tag, this only applies the disabled styling.
+     * What size the tag should be.
      */
-    disabled?: boolean;
+    size?: typeof sizes[number];
 
     /**
-     * What size the tag should be.
+     * Required to correctly render the tag when it contains only an icon.
      */
-    size?: typeof sizes[number];
+    isIconOnly?: boolean;
 
     /**
-     * The placement of the icon slot such as leading (default) or trailing. Available only if `isInteractive` is set to true.
+     * Required to correctly render the tag when it has a leading icon plus text.
      */
-    iconPlacement?: typeof iconPlacements[number];
+    hasLeadingIcon?: boolean;
 }
 
 export type DefaultProps = ComponentDefaultProps<TagProps>;
@@ -42,8 +56,8 @@ export type DefaultProps = ComponentDefaultProps<TagProps>;
 export const defaultProps: DefaultProps = {
     variant: 'neutral',
     isStrong: false,
-    isInteractive: false,
-    disabled: false,
+    isDimmed: false,
     size: 'large',
-    iconPlacement: 'leading',
+    isIconOnly: false,
+    hasLeadingIcon: false,
 };