@justeattakeaway/pie-tag 0.17.3 → 0.17.5

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 (5) hide show
  1. package/custom-elements.json +6 -38
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.js +1 -1
  4. package/dist/react.d.ts +4 -4
  5. package/package.json +7 -7
package/custom-elements.json CHANGED
@@ -102,38 +102,32 @@
102
102
  {
103
103
  "kind": "field",
104
104
  "name": "variant",
105
- "privacy": "public",
106
- "attribute": "variant"
105
+ "privacy": "public"
107
106
  },
108
107
  {
109
108
  "kind": "field",
110
109
  "name": "size",
111
- "privacy": "public",
112
- "attribute": "size"
110
+ "privacy": "public"
113
111
  },
114
112
  {
115
113
  "kind": "field",
116
114
  "name": "isStrong",
117
- "privacy": "public",
118
- "attribute": "isStrong"
115
+ "privacy": "public"
119
116
  },
120
117
  {
121
118
  "kind": "field",
122
119
  "name": "disabled",
123
- "privacy": "public",
124
- "attribute": "disabled"
120
+ "privacy": "public"
125
121
  },
126
122
  {
127
123
  "kind": "field",
128
124
  "name": "isInteractive",
129
- "privacy": "public",
130
- "attribute": "isInteractive"
125
+ "privacy": "public"
131
126
  },
132
127
  {
133
128
  "kind": "field",
134
129
  "name": "iconPlacement",
135
- "privacy": "public",
136
- "attribute": "iconPlacement"
130
+ "privacy": "public"
137
131
  },
138
132
  {
139
133
  "kind": "field",
@@ -193,32 +187,6 @@
193
187
  ]
194
188
  }
195
189
  ],
196
- "attributes": [
197
- {
198
- "name": "variant",
199
- "fieldName": "variant"
200
- },
201
- {
202
- "name": "size",
203
- "fieldName": "size"
204
- },
205
- {
206
- "name": "isStrong",
207
- "fieldName": "isStrong"
208
- },
209
- {
210
- "name": "disabled",
211
- "fieldName": "disabled"
212
- },
213
- {
214
- "name": "isInteractive",
215
- "fieldName": "isInteractive"
216
- },
217
- {
218
- "name": "iconPlacement",
219
- "fieldName": "iconPlacement"
220
- }
221
- ],
222
190
  "superclass": {
223
191
  "name": "PieElement",
224
192
  "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
package/dist/index.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
- import type { CSSResult } from 'lit';
2
+ import { CSSResult } from 'lit';
3
3
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
- import type { PropertyValues } from 'lit';
5
- import type { TemplateResult } from 'lit-html';
4
+ import { PropertyValues } from 'lit';
5
+ import { TemplateResult } from 'lit-html';
6
6
 
7
7
  export declare type DefaultProps = ComponentDefaultProps<TagProps>;
8
8
 
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ const b = class b extends k {
7
7
  this.getAttribute("v") || this.setAttribute("v", b.v);
8
8
  }
9
9
  };
10
- b.v = "0.17.3";
10
+ b.v = "0.17.5";
11
11
  let m = b;
12
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 = {
13
13
  variant: "neutral",
package/dist/react.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
- import type { CSSResult } from 'lit';
2
+ import { CSSResult } from 'lit';
3
3
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
- import type { PropertyValues } from 'lit';
4
+ import { PropertyValues } from 'lit';
5
5
  import * as React_2 from 'react';
6
- import type { TemplateResult } from 'lit-html';
6
+ import { TemplateResult } from 'lit-html';
7
7
 
8
8
  export declare type DefaultProps = ComponentDefaultProps<TagProps>;
9
9
 
@@ -11,7 +11,7 @@ export declare const defaultProps: DefaultProps;
11
11
 
12
12
  export declare const iconPlacements: readonly ["leading", "trailing"];
13
13
 
14
- export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_2.RefAttributes<PieTag_2> & ReactBaseType>;
14
+ export declare const PieTag: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TagProps> & React_2.RefAttributes<PieTag_2> & ReactBaseType>;
15
15
 
16
16
  /**
17
17
  * @tagname pie-tag
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-tag",
3
3
  "description": "PIE Design System Tag built using Web Components",
4
- "version": "0.17.3",
4
+ "version": "0.17.5",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
8
8
  "directory": "packages/components/pie-tag"
9
9
  },
10
- "homepage": "https://pie.design/components/tag/code/",
10
+ "homepage": "https://webc.pie.design/?path=/docs/components-tag--overview",
11
11
  "type": "module",
12
12
  "main": "dist/index.js",
13
13
  "module": "dist/index.js",
@@ -39,15 +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.20.1",
43
- "@justeattakeaway/pie-css": "0.16.0",
44
- "@justeattakeaway/pie-icons-webc": "1.11.1",
45
- "@justeattakeaway/pie-monorepo-utils": "0.5.1",
42
+ "@justeattakeaway/pie-components-config": "0.21.0",
43
+ "@justeattakeaway/pie-css": "0.19.0",
44
+ "@justeattakeaway/pie-icons-webc": "1.14.2",
45
+ "@justeattakeaway/pie-monorepo-utils": "0.7.0",
46
46
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
47
47
  "cem-plugin-module-file-extensions": "0.0.5"
48
48
  },
49
49
  "dependencies": {
50
- "@justeattakeaway/pie-webc-core": "1.0.0"
50
+ "@justeattakeaway/pie-webc-core": "1.1.0"
51
51
  },
52
52
  "volta": {
53
53
  "extends": "../../../package.json"