@justeattakeaway/pie-tag 0.19.0 → 0.21.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 (8) hide show
  1. package/README.md +7 -0
  2. package/custom-elements.json +10 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +5 -3
  5. package/dist/react.d.ts +2 -0
  6. package/package.json +10 -5
  7. package/src/index.ts +5 -1
  8. package/src/tag.scss +3 -3
package/README.md CHANGED
@@ -16,6 +16,7 @@
16
16
  - [Properties](#properties)
17
17
  - [Slots](#slots)
18
18
  - [CSS Variables](#css-variables)
19
+ - [CSS Parts](#css-parts)
19
20
  - [Events](#events)
20
21
  - [Usage Examples](#usage-examples)
21
22
  - [Questions and Support](#questions-and-support)
@@ -48,6 +49,12 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
48
49
  ### CSS Variables
49
50
  This component does not expose any CSS variables for style overrides.
50
51
 
52
+ ### CSS Parts
53
+ | Part | Description |
54
+ |-----------|--------------------------------------------------------------|
55
+ | `body` | This part allows consumers to fully rewrite the styles of the tag container element. This allows for a lot of customisation, but should be used with caution. |
56
+ | `icon` | Allows full customisation of the tag icon container. |
57
+
51
58
  ### Events
52
59
 
53
60
  This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
package/custom-elements.json CHANGED
@@ -88,6 +88,16 @@
88
88
  "kind": "class",
89
89
  "description": "",
90
90
  "name": "PieTag",
91
+ "cssParts": [
92
+ {
93
+ "description": "The main container of the tag.",
94
+ "name": "body"
95
+ },
96
+ {
97
+ "description": "The container for the icon slot.",
98
+ "name": "icon"
99
+ }
100
+ ],
91
101
  "slots": [
92
102
  {
93
103
  "description": "The icon slot",
package/dist/index.d.ts CHANGED
@@ -14,6 +14,8 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
14
14
  * @tagname pie-tag
15
15
  * @slot icon - The icon slot
16
16
  * @slot - Default slot
17
+ * @csspart body - The main container of the tag.
18
+ * @csspart icon - The container for the icon slot.
17
19
  */
18
20
  export declare class PieTag extends PieElement implements TagProps {
19
21
  variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
package/dist/index.js CHANGED
@@ -7,9 +7,9 @@ const b = class b extends k {
7
7
  this.getAttribute("v") || this.setAttribute("v", b.v);
8
8
  }
9
9
  };
10
- b.v = "0.19.0";
10
+ b.v = "0.21.0";
11
11
  let m = b;
12
- const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}.c-tag{--int-states-mixin-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-cursor: text;--tag-transparent-bg-color: transparent;--icon-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)}", O = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], P = ["small", "large"], $ = ["leading", "trailing"], c = {
12
+ const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}.c-tag{--int-states-mixin-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-cursor: text;--tag-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;flex-direction:row;gap:var(--dt-spacing-a);vertical-align:middle;align-items:center;justify-content:center;padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);cursor:var(--tag-cursor)}.c-tag.c-tag--interactive{--tag-cursor: pointer;border:none;-webkit-user-select:none;user-select:none}.c-tag.c-tag--interactive:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-tag.c-tag--icon-placement--trailing{flex-direction:row-reverse}.c-tag.c-tag--small{--tag-padding-block: 0;--tag-padding-inline: var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag.c-tag--icon-only{--tag-padding-block: var(--dt-spacing-a)}.c-tag.c-tag--neutral.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-strong))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-strong))}}.c-tag.c-tag--neutral.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-tag.c-tag--information{--int-states-mixin-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--hover-modifier)))}.c-tag.c-tag--information.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--information.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-info-02))}.c-tag.c-tag--information.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-info-02))}}.c-tag.c-tag--information.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--hover-modifier)))}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-info))}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-info))}}.c-tag.c-tag--success{--int-states-mixin-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--hover-modifier)))}.c-tag.c-tag--success.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--success.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-positive-02))}.c-tag.c-tag--success.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-positive-02))}}.c-tag.c-tag--success.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--hover-modifier)))}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-positive))}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-positive))}}.c-tag.c-tag--error{--int-states-mixin-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--hover-modifier)))}.c-tag.c-tag--error.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--error.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error-02))}.c-tag.c-tag--error.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error-02))}}.c-tag.c-tag--error.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.c-tag.c-tag--brand-02{--int-states-mixin-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-02.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-02.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-02.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-02.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-02))}.c-tag.c-tag--brand-02.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-02.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-02))}}.c-tag.c-tag--brand-03{--int-states-mixin-bg-color: var(--dt-color-support-brand-03);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-03.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-03-h), var(--dt-color-support-brand-03-s), calc(var(--dt-color-support-brand-03-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-03.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-03.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-03-h), var(--dt-color-support-brand-03-s), calc(var(--dt-color-support-brand-03-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-03.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-03))}.c-tag.c-tag--brand-03.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-03.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-03))}}.c-tag.c-tag--brand-04{--int-states-mixin-bg-color: var(--dt-color-support-brand-04);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-04-h), var(--dt-color-support-brand-04-s), calc(var(--dt-color-support-brand-04-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-04.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-04.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-04-h), var(--dt-color-support-brand-04-s), calc(var(--dt-color-support-brand-04-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-04.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-04))}.c-tag.c-tag--brand-04.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-04.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-04))}}.c-tag.c-tag--brand-05{--int-states-mixin-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-05.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-05.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-warning-02))}.c-tag.c-tag--brand-05.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-warning-02))}}.c-tag.c-tag--brand-05.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-warning))}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-warning))}}.c-tag.c-tag--brand-06{--int-states-mixin-bg-color: var(--dt-color-support-brand-06);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-06.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-06-h), var(--dt-color-support-brand-06-s), calc(var(--dt-color-support-brand-06-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-06.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-06.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-06-h), var(--dt-color-support-brand-06-s), calc(var(--dt-color-support-brand-06-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-06.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-light-bg) var(--dt-color-hover-02-light), var(--dt-color-support-brand-06))}.c-tag.c-tag--brand-06.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-06.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-light-bg) var(--dt-color-active-02-light), var(--dt-color-support-brand-06))}}.c-tag.c-tag--neutral-alternative{--int-states-mixin-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral-alternative.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral-alternative.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-tag.c-tag--outline{--int-states-mixin-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default-solid);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag.c-tag--outline.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--hover-modifier)))}.c-tag.c-tag--outline.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--outline.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--outline.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--tag-transparent-bg-color))}.c-tag.c-tag--outline.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--outline.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--tag-transparent-bg-color))}}.c-tag.c-tag--ghost{--int-states-mixin-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--ghost.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--hover-modifier)))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--ghost.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--ghost.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--tag-transparent-bg-color))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--ghost.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--tag-transparent-bg-color))}}.c-tag.is-disabled{opacity:.5}.c-tag[disabled]{--tag-cursor: not-allowed}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", O = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], P = ["small", "large"], $ = ["leading", "trailing"], c = {
13
13
  variant: "neutral",
14
14
  isStrong: !1,
15
15
  isInteractive: !1,
@@ -43,11 +43,12 @@ let o = class extends m {
43
43
  this.checkIfIsIconOnly();
44
44
  }
45
45
  renderIconSlot() {
46
- return this.size !== "large" ? y : p`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
46
+ return this.size !== "large" ? y : p`<slot part="icon" name="icon" @slotchange=${this.handleSlotChange}></slot>`;
47
47
  }
48
48
  renderTag(t) {
49
49
  return p`
50
50
  <div
51
+ part="body"
51
52
  class="${f(t)}"
52
53
  data-test-id="pie-tag">
53
54
  ${this.renderIconSlot()}
@@ -57,6 +58,7 @@ let o = class extends m {
57
58
  renderButtonTag(t) {
58
59
  return p`
59
60
  <button
61
+ part="body"
60
62
  type="button"
61
63
  ?disabled="${this.disabled}"
62
64
  class="${f(t)}"
package/dist/react.d.ts CHANGED
@@ -17,6 +17,8 @@ export declare const PieTag: React_2.ForwardRefExoticComponent<React_2.PropsWith
17
17
  * @tagname pie-tag
18
18
  * @slot icon - The icon slot
19
19
  * @slot - Default slot
20
+ * @csspart body - The main container of the tag.
21
+ * @csspart icon - The container for the icon slot.
20
22
  */
21
23
  declare class PieTag_2 extends PieElement implements TagProps {
22
24
  variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
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.19.0",
4
+ "version": "0.21.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -19,7 +19,12 @@
19
19
  "**/*.d.ts"
20
20
  ],
21
21
  "pieMetadata": {
22
- "componentStatus": "beta"
22
+ "componentStatus": "beta",
23
+ "replaces": {
24
+ "snacks": [
25
+ "Tag"
26
+ ]
27
+ }
23
28
  },
24
29
  "scripts": {
25
30
  "build": "run -T vite build",
@@ -40,14 +45,14 @@
40
45
  "devDependencies": {
41
46
  "@custom-elements-manifest/analyzer": "0.9.0",
42
47
  "@justeattakeaway/pie-components-config": "0.21.0",
43
- "@justeattakeaway/pie-css": "0.21.0",
44
- "@justeattakeaway/pie-icons-webc": "1.14.2",
48
+ "@justeattakeaway/pie-css": "0.23.0",
49
+ "@justeattakeaway/pie-icons-webc": "1.15.1",
45
50
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
46
51
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
47
52
  "cem-plugin-module-file-extensions": "0.0.5"
48
53
  },
49
54
  "dependencies": {
50
- "@justeattakeaway/pie-webc-core": "1.1.0"
55
+ "@justeattakeaway/pie-webc-core": "3.0.0"
51
56
  },
52
57
  "volta": {
53
58
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -23,6 +23,8 @@ const componentSelector = 'pie-tag';
23
23
  * @tagname pie-tag
24
24
  * @slot icon - The icon slot
25
25
  * @slot - Default slot
26
+ * @csspart body - The main container of the tag.
27
+ * @csspart icon - The container for the icon slot.
26
28
  */
27
29
  @safeCustomElement('pie-tag')
28
30
  export class PieTag extends PieElement implements TagProps {
@@ -93,12 +95,13 @@ export class PieTag extends PieElement implements TagProps {
93
95
  private renderIconSlot () {
94
96
  if (this.size !== 'large') return nothing;
95
97
 
96
- return html`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
98
+ return html`<slot part="icon" name="icon" @slotchange=${this.handleSlotChange}></slot>`;
97
99
  }
98
100
 
99
101
  private renderTag (classes: ClassInfo) {
100
102
  return html`
101
103
  <div
104
+ part="body"
102
105
  class="${classMap(classes)}"
103
106
  data-test-id="pie-tag">
104
107
  ${this.renderIconSlot()}
@@ -109,6 +112,7 @@ export class PieTag extends PieElement implements TagProps {
109
112
  private renderButtonTag (classes: ClassInfo) {
110
113
  return html`
111
114
  <button
115
+ part="body"
112
116
  type="button"
113
117
  ?disabled="${this.disabled}"
114
118
  class="${classMap(classes)}"
package/src/tag.scss CHANGED
@@ -27,10 +27,10 @@
27
27
 
28
28
  display: inline-flex;
29
29
  flex-direction: row;
30
+ gap: var(--dt-spacing-a);
30
31
  vertical-align: middle;
31
32
  align-items: center;
32
33
  justify-content: center;
33
- gap: var(--dt-spacing-a);
34
34
  padding: var(--tag-padding-block) var(--tag-padding-inline);
35
35
  border-radius: var(--tag-border-radius);
36
36
  background-color: var(--int-states-mixin-bg-color);
@@ -212,7 +212,7 @@
212
212
 
213
213
  &.c-tag--outline {
214
214
  --int-states-mixin-bg-color: var(--tag-transparent-bg-color);
215
- --tag-color: var(--dt-color-content-default);
215
+ --tag-color: var(--dt-color-content-default-solid);
216
216
 
217
217
  &.c-tag--interactive {
218
218
  @include p.interactive-states('--tag-transparent-bg-color', 'transparent');
@@ -226,7 +226,7 @@
226
226
 
227
227
  &.c-tag--ghost {
228
228
  --int-states-mixin-bg-color: var(--tag-transparent-bg-color);
229
- --tag-color: var(--dt-color-content-default);
229
+ --tag-color: var(--dt-color-content-default-solid);
230
230
 
231
231
  &.c-tag--interactive {
232
232
  @include p.interactive-states('--tag-transparent-bg-color', 'transparent');