@justeattakeaway/pie-tag 0.15.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +84 -71
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +6 -5
  6. package/src/index.ts +3 -2
package/custom-elements.json CHANGED
@@ -220,8 +220,8 @@
220
220
  }
221
221
  ],
222
222
  "superclass": {
223
- "name": "LitElement",
224
- "package": "lit"
223
+ "name": "PieElement",
224
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
225
225
  },
226
226
  "tagName": "pie-tag",
227
227
  "customElement": true
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import type { PropertyValues } from 'lit';
5
5
  import type { TemplateResult } from 'lit-html';
6
6
 
@@ -15,7 +15,7 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
15
15
  * @slot icon - The icon slot
16
16
  * @slot - Default slot
17
17
  */
18
- export declare class PieTag extends LitElement implements TagProps {
18
+ export declare class PieTag extends PieElement implements TagProps {
19
19
  variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
20
20
  size: "small" | "large";
21
21
  isStrong: boolean;
package/dist/index.js CHANGED
@@ -1,8 +1,21 @@
1
- import { LitElement as k, nothing as w, html as p, unsafeCSS as y } from "lit";
2
- import { property as d, queryAssignedElements as S } from "lit/decorators.js";
1
+ import { LitElement as w, nothing as y, html as m, unsafeCSS as S } from "lit";
2
+ import { property as l, queryAssignedElements as I } from "lit/decorators.js";
3
3
  import { classMap as f } from "lit/directives/class-map.js";
4
- import { validPropertyValues as m, defineCustomElement as I } from "@justeattakeaway/pie-webc-core";
5
- const z = "*,*:after,*:before{box-sizing:inherit}.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-display-override: block;--icon-size-override: 16px;display:inline-flex;flex-direction:row;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(--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);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)}.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)}", $ = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], O = ["small", "large"], P = ["leading", "trailing"], r = {
4
+ import { validPropertyValues as h, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
5
+ var P = Object.defineProperty, $ = (n, i, a, s) => {
6
+ for (var t = void 0, r = n.length - 1, o; r >= 0; r--)
7
+ (o = n[r]) && (t = o(i, a, t) || t);
8
+ return t && P(i, a, t), t;
9
+ };
10
+ class x extends w {
11
+ constructor() {
12
+ super(...arguments), this.v = "0.16.0";
13
+ }
14
+ }
15
+ $([
16
+ l({ type: String, reflect: !0 })
17
+ ], x.prototype, "v");
18
+ const O = "*,*:after,*:before{box-sizing:inherit}.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-display-override: block;--icon-size-override: 16px;display:inline-flex;flex-direction:row;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(--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);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)}.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)}", _ = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], C = ["small", "large"], N = ["leading", "trailing"], e = {
6
19
  variant: "neutral",
7
20
  isStrong: !1,
8
21
  isInteractive: !1,
@@ -10,23 +23,23 @@ const z = "*,*:after,*:before{box-sizing:inherit}.c-tag{--int-states-mixin-bg-co
10
23
  size: "large",
11
24
  iconPlacement: "leading"
12
25
  };
13
- var C = Object.defineProperty, e = (u, t, o, c) => {
14
- for (var i = void 0, l = u.length - 1, s; l >= 0; l--)
15
- (s = u[l]) && (i = s(t, o, i) || i);
16
- return i && C(t, o, i), i;
26
+ var E = Object.defineProperty, d = (n, i, a, s) => {
27
+ for (var t = void 0, r = n.length - 1, o; r >= 0; r--)
28
+ (o = n[r]) && (t = o(i, a, t) || t);
29
+ return t && E(i, a, t), t;
17
30
  };
18
- const b = "pie-tag", h = class h extends k {
31
+ const p = "pie-tag", u = class u extends x {
19
32
  constructor() {
20
- super(...arguments), this.variant = r.variant, this.size = r.size, this.isStrong = r.isStrong, this.disabled = r.disabled, this.isInteractive = r.isInteractive, this.iconPlacement = r.iconPlacement, this.isIconOnly = !1;
33
+ super(...arguments), this.variant = e.variant, this.size = e.size, this.isStrong = e.isStrong, this.disabled = e.disabled, this.isInteractive = e.isInteractive, this.iconPlacement = e.iconPlacement, this.isIconOnly = !1;
21
34
  }
22
- updated(t) {
23
- t.has("size") && this.checkIfIsIconOnly();
35
+ updated(i) {
36
+ i.has("size") && this.checkIfIsIconOnly();
24
37
  }
25
38
  checkIfIsIconOnly() {
26
- const { size: t, textContent: o, _iconSlotNodes: c } = this, i = t === "large", s = (o == null ? void 0 : o.trim()) === "", g = c.length > 0;
27
- if (i && s && g && c && c.length === 1) {
28
- const n = c[0].tagName.toUpperCase(), x = n.startsWith("ICON-") || n === "SVG";
29
- this.isIconOnly = x, this.requestUpdate();
39
+ const { size: i, textContent: a, _iconSlotNodes: s } = this, t = i === "large", o = (a == null ? void 0 : a.trim()) === "", v = s.length > 0;
40
+ if (t && o && v && s && s.length === 1) {
41
+ const g = s[0].tagName.toUpperCase(), k = g.startsWith("ICON-") || g === "SVG";
42
+ this.isIconOnly = k, this.requestUpdate();
30
43
  return;
31
44
  }
32
45
  this.isIconOnly = !1, this.requestUpdate();
@@ -35,23 +48,23 @@ const b = "pie-tag", h = class h extends k {
35
48
  this.checkIfIsIconOnly();
36
49
  }
37
50
  renderIconSlot() {
38
- return this.size !== "large" ? w : p`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
51
+ return this.size !== "large" ? y : m`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
39
52
  }
40
- renderTag(t) {
41
- return p`
53
+ renderTag(i) {
54
+ return m`
42
55
  <div
43
- class="${f(t)}"
56
+ class="${f(i)}"
44
57
  data-test-id="pie-tag">
45
58
  ${this.renderIconSlot()}
46
59
  <slot @slotchange=${this.handleSlotChange}></slot>
47
60
  </div>`;
48
61
  }
49
- renderButtonTag(t) {
50
- return p`
62
+ renderButtonTag(i) {
63
+ return m`
51
64
  <button
52
65
  type="button"
53
66
  ?disabled="${this.disabled}"
54
- class="${f(t)}"
67
+ class="${f(i)}"
55
68
  data-test-id="pie-tag">
56
69
  ${this.renderIconSlot()}
57
70
  <slot></slot>
@@ -59,57 +72,57 @@ const b = "pie-tag", h = class h extends k {
59
72
  }
60
73
  render() {
61
74
  const {
62
- disabled: t,
63
- isInteractive: o,
64
- isStrong: c,
65
- size: i,
66
- variant: l,
67
- iconPlacement: s,
68
- isIconOnly: g
69
- } = this, v = g ? !1 : o, n = {
75
+ disabled: i,
76
+ isInteractive: a,
77
+ isStrong: s,
78
+ size: t,
79
+ variant: r,
80
+ iconPlacement: o,
81
+ isIconOnly: v
82
+ } = this, b = v ? !1 : a, g = {
70
83
  "c-tag": !0,
71
- [`c-tag--${i}`]: !0,
72
- [`c-tag--${l}`]: !0,
73
- "is-disabled": t,
74
- "c-tag--strong": c,
75
- "c-tag--interactive": v,
76
- "c-tag--icon-only": g,
77
- [`c-tag--icon-placement--${s}`]: v && s
84
+ [`c-tag--${t}`]: !0,
85
+ [`c-tag--${r}`]: !0,
86
+ "is-disabled": i,
87
+ "c-tag--strong": s,
88
+ "c-tag--interactive": b,
89
+ "c-tag--icon-only": v,
90
+ [`c-tag--icon-placement--${o}`]: b && o
78
91
  };
79
- return v ? this.renderButtonTag(n) : this.renderTag(n);
92
+ return b ? this.renderButtonTag(g) : this.renderTag(g);
80
93
  }
81
94
  };
82
- h.styles = y(z);
83
- let a = h;
84
- e([
85
- d({ type: String }),
86
- m(b, $, r.variant)
87
- ], a.prototype, "variant");
88
- e([
89
- d({ type: String }),
90
- m(b, O, r.size)
91
- ], a.prototype, "size");
92
- e([
93
- d({ type: Boolean })
94
- ], a.prototype, "isStrong");
95
- e([
96
- d({ type: Boolean })
97
- ], a.prototype, "disabled");
98
- e([
99
- d({ type: Boolean })
100
- ], a.prototype, "isInteractive");
101
- e([
102
- d({ type: String }),
103
- m(b, P, r.iconPlacement)
104
- ], a.prototype, "iconPlacement");
105
- e([
106
- S({ slot: "icon", flatten: !0 })
107
- ], a.prototype, "_iconSlotNodes");
108
- I(b, a);
95
+ u.styles = S(O);
96
+ let c = u;
97
+ d([
98
+ l({ type: String }),
99
+ h(p, _, e.variant)
100
+ ], c.prototype, "variant");
101
+ d([
102
+ l({ type: String }),
103
+ h(p, C, e.size)
104
+ ], c.prototype, "size");
105
+ d([
106
+ l({ type: Boolean })
107
+ ], c.prototype, "isStrong");
108
+ d([
109
+ l({ type: Boolean })
110
+ ], c.prototype, "disabled");
111
+ d([
112
+ l({ type: Boolean })
113
+ ], c.prototype, "isInteractive");
114
+ d([
115
+ l({ type: String }),
116
+ h(p, N, e.iconPlacement)
117
+ ], c.prototype, "iconPlacement");
118
+ d([
119
+ I({ slot: "icon", flatten: !0 })
120
+ ], c.prototype, "_iconSlotNodes");
121
+ z(p, c);
109
122
  export {
110
- a as PieTag,
111
- r as defaultProps,
112
- P as iconPlacements,
113
- O as sizes,
114
- $ as variants
123
+ c as PieTag,
124
+ e as defaultProps,
125
+ N as iconPlacements,
126
+ C as sizes,
127
+ _ as variants
115
128
  };
package/dist/react.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import type { PropertyValues } from 'lit';
5
5
  import * as React_2 from 'react';
6
6
  import type { TemplateResult } from 'lit-html';
@@ -18,7 +18,7 @@ export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_
18
18
  * @slot icon - The icon slot
19
19
  * @slot - Default slot
20
20
  */
21
- declare class PieTag_2 extends LitElement implements TagProps {
21
+ declare class PieTag_2 extends PieElement implements TagProps {
22
22
  variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
23
23
  size: "small" | "large";
24
24
  isStrong: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-tag",
3
3
  "description": "PIE Design System Tag built using Web Components",
4
- "version": "0.15.0",
4
+ "version": "0.16.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,14 +39,15 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-components-config": "0.18.0",
43
- "@justeattakeaway/pie-css": "0.15.1",
44
- "@justeattakeaway/pie-icons-webc": "1.6.0",
42
+ "@justeattakeaway/pie-components-config": "0.19.0",
43
+ "@justeattakeaway/pie-css": "0.16.0",
44
+ "@justeattakeaway/pie-icons-webc": "1.6.1",
45
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
45
46
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
46
47
  "cem-plugin-module-file-extensions": "0.0.5"
47
48
  },
48
49
  "dependencies": {
49
- "@justeattakeaway/pie-webc-core": "0.24.2"
50
+ "@justeattakeaway/pie-webc-core": "0.25.0"
50
51
  },
51
52
  "volta": {
52
53
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
- LitElement, html, unsafeCSS, nothing, type PropertyValues,
2
+ html, unsafeCSS, nothing, type PropertyValues,
3
3
  } from 'lit';
4
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
5
  import { property, queryAssignedElements } from 'lit/decorators.js';
5
6
  import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
6
7
  import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -23,7 +24,7 @@ const componentSelector = 'pie-tag';
23
24
  * @slot icon - The icon slot
24
25
  * @slot - Default slot
25
26
  */
26
- export class PieTag extends LitElement implements TagProps {
27
+ export class PieTag extends PieElement implements TagProps {
27
28
  @property({ type: String })
28
29
  @validPropertyValues(componentSelector, variants, defaultProps.variant)
29
30
  public variant = defaultProps.variant;