@justeattakeaway/pie-tag 0.10.0 → 0.10.2

package/dist/index.js

@@ -1,88 +1,87 @@
-import { unsafeCSS as b, LitElement as u, nothing as f, html as n } from "lit";
-import { property as v } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { validPropertyValues as h, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
-const y = `*,*:after,*:before{box-sizing:inherit}.c-tag{--tag-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-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--tag-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)}.c-tag.c-tag--interactive{border: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--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--neutral.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--neutral.c-tag--strong{--tag-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(.c-tag--disabled){--hover-modifier: var(--dt-color-hover-02);--tag-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(.c-tag--disabled){--active-modifier: var(--dt-color-active-02);--tag-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)))}.c-tag.c-tag--blue{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--blue.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--blue.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--blue.c-tag--strong{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--blue.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--blue.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--green{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--green.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--green.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--green.c-tag--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--green.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--green.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--yellow{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--yellow.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--yellow.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--yellow.c-tag--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--yellow.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--yellow.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--red{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--red.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--red.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--red.c-tag--strong{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--red.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--red.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--brand{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--neutral-alternative{--tag-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(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--outline{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag.c-tag--outline.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-tag.c-tag--outline.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-tag.c-tag--ghost{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--ghost.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-tag.c-tag--disabled{opacity:.5}.c-tag[disabled]{cursor:not-allowed}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
-`, w = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], z = ["small", "large"], o = {
+import { LitElement as u, nothing as f, html as d, unsafeCSS as m } from "lit";
+import { property as l } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { validPropertyValues as b, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
+const w = "*,*:after,*:before{box-sizing:inherit}.c-tag{--tag-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-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--tag-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)}.c-tag.c-tag--interactive{border: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--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--neutral.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--neutral.c-tag--strong{--tag-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(.c-tag--disabled){--hover-modifier: var(--dt-color-hover-02);--tag-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(.c-tag--disabled){--active-modifier: var(--dt-color-active-02);--tag-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)))}.c-tag.c-tag--blue{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--blue.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--blue.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--blue.c-tag--strong{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--blue.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--blue.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--green{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--green.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--green.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--green.c-tag--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--green.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--green.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--yellow{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--yellow.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--yellow.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--yellow.c-tag--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--yellow.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--yellow.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--red{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--red.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--red.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--red.c-tag--strong{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--red.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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--red.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--brand{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--neutral-alternative{--tag-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(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-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(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-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)))}.c-tag.c-tag--outline{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag.c-tag--outline.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-tag.c-tag--outline.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-tag.c-tag--ghost{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--ghost.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-tag.c-tag--disabled{opacity:.5}.c-tag[disabled]{cursor:not-allowed}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", k = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], z = ["small", "large"], a = {
   variant: "neutral",
   isStrong: !1,
   isInteractive: !1,
   disabled: !1,
   size: "large"
 };
-var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (g, t, c, e) => {
-  for (var r = e > 1 ? void 0 : e ? k(t, c) : t, l = g.length - 1, i; l >= 0; l--)
-    (i = g[l]) && (r = (e ? i(t, c, r) : i(r)) || r);
-  return e && r && x(t, c, r), r;
+var x = Object.defineProperty, v = (s, t, c, p) => {
+  for (var r = void 0, e = s.length - 1, i; e >= 0; e--)
+    (i = s[e]) && (r = i(t, c, r) || r);
+  return r && x(t, c, r), r;
 };
-const s = "pie-tag";
-class a extends u {
+const g = "pie-tag", n = class n extends u {
   constructor() {
-    super(...arguments), this.variant = o.variant, this.size = o.size, this.isStrong = o.isStrong, this.disabled = o.disabled, this.isInteractive = o.isInteractive;
+    super(...arguments), this.variant = a.variant, this.size = a.size, this.isStrong = a.isStrong, this.disabled = a.disabled, this.isInteractive = a.isInteractive;
   }
   render() {
     const {
       disabled: t,
       isInteractive: c,
-      isStrong: e,
+      isStrong: p,
       size: r,
-      variant: l
+      variant: e
     } = this, i = {
       "c-tag": !0,
       [`c-tag--${r}`]: !0,
-      [`c-tag--${l}`]: !0,
+      [`c-tag--${e}`]: !0,
       "c-tag--disabled": t,
-      "c-tag--strong": e,
+      "c-tag--strong": p,
       "c-tag--interactive": c
     };
     return c ? this.renderButtonTag(i) : this.renderTag(i);
   }
   renderIconSlot() {
-    return this.size !== "large" ? f : n`<slot name="icon"></slot>`;
+    return this.size !== "large" ? f : d`<slot name="icon"></slot>`;
   }
   renderTag(t) {
-    return n`
+    return d`
         <div
-            class="${p(t)}"
+            class="${h(t)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
             <slot></slot>
         </div>`;
   }
   renderButtonTag(t) {
-    return n`
+    return d`
         <button
             type="button"
             ?disabled="${this.disabled}"
-            class="${p(t)}"
+            class="${h(t)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
             <slot></slot>
         </button>`;
   }
-}
-a.styles = b(y);
-d([
-  v({ type: String }),
-  h(s, w, o.variant)
-], a.prototype, "variant", 2);
-d([
-  v({ type: String }),
-  h(s, z, o.size)
-], a.prototype, "size", 2);
-d([
-  v({ type: Boolean })
-], a.prototype, "isStrong", 2);
-d([
-  v({ type: Boolean })
-], a.prototype, "disabled", 2);
-d([
-  v({ type: Boolean })
-], a.prototype, "isInteractive", 2);
-m(s, a);
+};
+n.styles = m(w);
+let o = n;
+v([
+  l({ type: String }),
+  b(g, k, a.variant)
+], o.prototype, "variant");
+v([
+  l({ type: String }),
+  b(g, z, a.size)
+], o.prototype, "size");
+v([
+  l({ type: Boolean })
+], o.prototype, "isStrong");
+v([
+  l({ type: Boolean })
+], o.prototype, "disabled");
+v([
+  l({ type: Boolean })
+], o.prototype, "isInteractive");
+y(g, o);
 export {
-  a as PieTag,
-  o as defaultProps,
+  o as PieTag,
+  a as defaultProps,
   z as sizes,
-  w as variants
+  k as variants
 };

package/dist/react.js

@@ -1,21 +1,17 @@
 import * as e from "react";
-import { createComponent as t } from "@lit/react";
-import { PieTag as a } from "./index.js";
-import { defaultProps as f, sizes as T, variants as l } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "@justeattakeaway/pie-webc-core";
-const o = t({
+import { createComponent as a } from "@lit/react";
+import { PieTag as t } from "./index.js";
+import { defaultProps as g, sizes as n, variants as c } from "./index.js";
+const o = a({
   displayName: "PieTag",
-  elementClass: a,
+  elementClass: t,
   react: e,
   tagName: "pie-tag",
   events: {}
-}), n = o;
+}), s = o;
 export {
-  n as PieTag,
-  f as defaultProps,
-  T as sizes,
-  l as variants
+  s as PieTag,
+  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.10.0",
+  "version": "0.10.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-wrapper-react": "0.14.1",
+    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-icons-webc": "0.25.3",
+    "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/react.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
 import { PieTag as PieTagLit } from './index';
-import { TagProps } from './defs';
+import { type TagProps } from './defs';
 
 export * from './defs';