@justeattakeaway/pie-tag 0.10.2 → 0.11.1

package/custom-elements.json

@@ -16,9 +16,9 @@
           "kind": "variable",
           "name": "variants",
           "type": {
-            "text": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand']"
+            "text": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand', 'brand-03', 'brand-04', 'brand-06']"
           },
-          "default": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand']"
+          "default": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand', 'brand-03', 'brand-04', 'brand-06']"
         },
         {
           "kind": "variable",

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export declare const defaultProps: DefaultProps;
  * @slot - Default slot
  */
 export declare class PieTag extends LitElement implements TagProps {
-    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand";
+    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand" | "brand-03" | "brand-04" | "brand-06";
     size: "small" | "large";
     isStrong: boolean;
     disabled: boolean;
@@ -51,6 +51,6 @@ export declare interface TagProps {
     size?: typeof sizes[number];
 }
 
-export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"];
+export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand", "brand-03", "brand-04", "brand-06"];
 
 export { }

package/dist/index.js

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

package/dist/react.d.ts

@@ -16,7 +16,7 @@ export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_
  * @slot - Default slot
  */
 declare class PieTag_2 extends LitElement implements TagProps {
-    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand";
+    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand" | "brand-03" | "brand-04" | "brand-06";
     size: "small" | "large";
     isStrong: boolean;
     disabled: boolean;
@@ -56,6 +56,6 @@ export declare interface TagProps {
     size?: typeof sizes[number];
 }
 
-export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"];
+export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand", "brand-03", "brand-04", "brand-06"];
 
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tag",
   "description": "PIE Design System Tag built using Web Components",
-  "version": "0.10.2",
+  "version": "0.11.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,7 +38,7 @@
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-icons-webc": "0.25.3",
+    "@justeattakeaway/pie-icons-webc": "1.1.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "cem-plugin-module-file-extensions": "0.0.5"
   },

package/src/defs.ts

@@ -1,6 +1,6 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand'] as const;
+export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand', 'brand-03', 'brand-04', 'brand-06'] as const;
 export const sizes = ['small', 'large'] as const;
 
 export interface TagProps {

package/src/tag.scss

@@ -45,6 +45,7 @@
     --tag-font-weight: var(--dt-font-body-s-weight);
     --tag-font-size: #{p.font-size(--dt-font-body-s-size)};
     --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)};
+    --tag-cursor: text;
 
     // transparent to variable to function properly in component tests
     --tag-transparent-bg-color: transparent;
@@ -66,9 +67,13 @@
     font-weight: var(--tag-font-weight);
     font-size: var(--tag-font-size);
     line-height: var(--tag-line-height);
+    cursor: var(--tag-cursor);
 
     &.c-tag--interactive {
+        --tag-cursor: pointer;
+
         border: none;
+        user-select: none;
 
         &:focus-visible {
             @include p.focus;
@@ -147,6 +152,24 @@
         }
     }
 
+    &.c-tag--brand-03 {
+        --tag-bg-color: var(--dt-color-support-brand-03);
+        --tag-color: var(--dt-color-content-default);
+        @include tag-interactive-states('--dt-color-support-brand-03');
+    }
+
+    &.c-tag--brand-04 {
+        --tag-bg-color: var(--dt-color-support-brand-04);
+        --tag-color: var(--dt-color-content-default);
+        @include tag-interactive-states('--dt-color-support-brand-04');
+    }
+
+    &.c-tag--brand-06 {
+        --tag-bg-color: var(--dt-color-support-brand-06);
+        --tag-color: var(--dt-color-content-light);
+        @include tag-interactive-states('--dt-color-support-brand-06', 'inverse');
+    }
+
     &.c-tag--brand {
         --tag-bg-color: var(--dt-color-support-brand-02);
         --tag-color: var(--dt-color-content-default);
@@ -181,7 +204,7 @@
     }
 
     &[disabled] {
-        cursor: not-allowed;
+        --tag-cursor: not-allowed;
     }
 }