@justeattakeaway/pie-tag 0.11.1 → 0.13.0

package/custom-elements.json

@@ -16,9 +16,9 @@
           "kind": "variable",
           "name": "variants",
           "type": {
-            "text": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand', 'brand-03', 'brand-04', 'brand-06']"
+            "text": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'information', 'success', 'error', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06']"
           },
-          "default": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand', 'brand-03', 'brand-04', 'brand-06']"
+          "default": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'information', 'success', 'error', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06']"
         },
         {
           "kind": "variable",
@@ -28,13 +28,21 @@
           },
           "default": "['small', 'large']"
         },
+        {
+          "kind": "variable",
+          "name": "iconPlacements",
+          "type": {
+            "text": "['leading', 'trailing']"
+          },
+          "default": "['leading', 'trailing']"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'neutral',\n    isStrong: false,\n    isInteractive: false,\n    disabled: false,\n    size: 'large',\n}"
+          "default": "{\n    variant: 'neutral',\n    isStrong: false,\n    isInteractive: false,\n    disabled: false,\n    size: 'large',\n    iconPlacement: 'leading',\n}"
         }
       ],
       "exports": [
@@ -54,6 +62,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "iconPlacements",
+          "declaration": {
+            "name": "iconPlacements",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -113,6 +129,12 @@
               "privacy": "public",
               "attribute": "isInteractive"
             },
+            {
+              "kind": "field",
+              "name": "iconPlacement",
+              "privacy": "public",
+              "attribute": "iconPlacement"
+            },
             {
               "kind": "method",
               "name": "renderIconSlot",
@@ -165,6 +187,10 @@
             {
               "name": "isInteractive",
               "fieldName": "isInteractive"
+            },
+            {
+              "name": "iconPlacement",
+              "fieldName": "iconPlacement"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -7,21 +7,24 @@ export declare type DefaultProps = ComponentDefaultProps<TagProps>;
 
 export declare const defaultProps: DefaultProps;
 
+export declare const iconPlacements: readonly ["leading", "trailing"];
+
 /**
  * @tagname pie-tag
  * @slot icon - The icon slot
  * @slot - Default slot
  */
 export declare class PieTag extends LitElement implements TagProps {
-    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand" | "brand-03" | "brand-04" | "brand-06";
+    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
     size: "small" | "large";
     isStrong: boolean;
     disabled: boolean;
     isInteractive: boolean;
-    render(): TemplateResult<1>;
+    iconPlacement: "leading" | "trailing";
     private renderIconSlot;
     private renderTag;
     private renderButtonTag;
+    render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
@@ -33,7 +36,7 @@ export declare interface TagProps {
      */
     variant?: typeof variants[number];
     /**
-     * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
+     * When true, the "information", "success", "error", "brand-05", and "neutral" variants change their styles and become bolder
      */
     isStrong?: boolean;
     /**
@@ -49,8 +52,12 @@ export declare interface TagProps {
      * What size the tag should be.
      */
     size?: typeof sizes[number];
+    /**
+     * The placement of the icon slot such as leading (default) or trailing. Available only if `isInteractive` is set to true.
+     */
+    iconPlacement?: typeof iconPlacements[number];
 }
 
-export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand", "brand-03", "brand-04", "brand-06"];
+export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"];
 
 export { }

package/dist/index.js

@@ -1,87 +1,95 @@
-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 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 = {
+import { LitElement as f, nothing as m, html as v, unsafeCSS as y } from "lit";
+import { property as e } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { validPropertyValues as g, defineCustomElement as w } from "@justeattakeaway/pie-webc-core";
+const k = "*,*: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;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(--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--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--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--information{--tag-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(.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--information.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--information.c-tag--strong{--tag-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(.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--information.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--success{--tag-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(.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--success.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--success.c-tag--strong{--tag-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(.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--success.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--error{--tag-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(.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--error.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--error.c-tag--strong{--tag-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(.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--error.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-02{--tag-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(.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-02.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--brand-03{--tag-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(.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-dark)}.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-05{--tag-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(.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--brand-05.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--brand-05.c-tag--strong{--tag-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(.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--brand-05.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--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--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)}", x = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], z = ["small", "large"], S = ["leading", "trailing"], r = {
   variant: "neutral",
   isStrong: !1,
   isInteractive: !1,
   disabled: !1,
-  size: "large"
+  size: "large",
+  iconPlacement: "leading"
 };
-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;
+var P = Object.defineProperty, i = (p, o, c, b) => {
+  for (var a = void 0, l = p.length - 1, d; l >= 0; l--)
+    (d = p[l]) && (a = d(o, c, a) || a);
+  return a && P(o, c, a), a;
 };
-const g = "pie-tag", n = class n extends u {
+const n = "pie-tag", s = class s extends f {
   constructor() {
-    super(...arguments), this.variant = a.variant, this.size = a.size, this.isStrong = a.isStrong, this.disabled = a.disabled, this.isInteractive = a.isInteractive;
-  }
-  render() {
-    const {
-      disabled: r,
-      isInteractive: c,
-      isStrong: p,
-      size: t,
-      variant: e
-    } = this, i = {
-      "c-tag": !0,
-      [`c-tag--${t}`]: !0,
-      [`c-tag--${e}`]: !0,
-      "c-tag--disabled": r,
-      "c-tag--strong": p,
-      "c-tag--interactive": c
-    };
-    return c ? this.renderButtonTag(i) : this.renderTag(i);
+    super(...arguments), this.variant = r.variant, this.size = r.size, this.isStrong = r.isStrong, this.disabled = r.disabled, this.isInteractive = r.isInteractive, this.iconPlacement = r.iconPlacement;
   }
   renderIconSlot() {
-    return this.size !== "large" ? f : v`<slot name="icon"></slot>`;
+    return this.size !== "large" ? m : v`<slot name="icon"></slot>`;
   }
-  renderTag(r) {
+  renderTag(o) {
     return v`
         <div
-            class="${b(r)}"
+            class="${u(o)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
             <slot></slot>
         </div>`;
   }
-  renderButtonTag(r) {
+  renderButtonTag(o) {
     return v`
         <button
             type="button"
             ?disabled="${this.disabled}"
-            class="${b(r)}"
+            class="${u(o)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
             <slot></slot>
         </button>`;
   }
+  render() {
+    const {
+      disabled: o,
+      isInteractive: c,
+      isStrong: b,
+      size: a,
+      variant: l,
+      iconPlacement: d
+    } = this, h = {
+      "c-tag": !0,
+      [`c-tag--${a}`]: !0,
+      [`c-tag--${l}`]: !0,
+      "c-tag--disabled": o,
+      "c-tag--strong": b,
+      "c-tag--interactive": c,
+      [`c-tag--icon-placement--${d}`]: c && d
+    };
+    return c ? this.renderButtonTag(h) : this.renderTag(h);
+  }
 };
-n.styles = m(w);
-let o = n;
-d([
-  l({ type: String }),
-  h(g, k, a.variant)
-], o.prototype, "variant");
-d([
-  l({ type: String }),
-  h(g, z, a.size)
-], o.prototype, "size");
-d([
-  l({ type: Boolean })
-], o.prototype, "isStrong");
-d([
-  l({ type: Boolean })
-], o.prototype, "disabled");
-d([
-  l({ type: Boolean })
-], o.prototype, "isInteractive");
-y(g, o);
+s.styles = y(k);
+let t = s;
+i([
+  e({ type: String }),
+  g(n, x, r.variant)
+], t.prototype, "variant");
+i([
+  e({ type: String }),
+  g(n, z, r.size)
+], t.prototype, "size");
+i([
+  e({ type: Boolean })
+], t.prototype, "isStrong");
+i([
+  e({ type: Boolean })
+], t.prototype, "disabled");
+i([
+  e({ type: Boolean })
+], t.prototype, "isInteractive");
+i([
+  e({ type: String }),
+  g(n, S, r.iconPlacement)
+], t.prototype, "iconPlacement");
+w(n, t);
 export {
-  o as PieTag,
-  a as defaultProps,
+  t as PieTag,
+  r as defaultProps,
+  S as iconPlacements,
   z as sizes,
-  k as variants
+  x as variants
 };

package/dist/react.d.ts

@@ -8,6 +8,8 @@ export declare type DefaultProps = ComponentDefaultProps<TagProps>;
 
 export declare const defaultProps: DefaultProps;
 
+export declare const iconPlacements: readonly ["leading", "trailing"];
+
 export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_2.RefAttributes<PieTag_2> & ReactBaseType>;
 
 /**
@@ -16,15 +18,16 @@ 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" | "brand-03" | "brand-04" | "brand-06";
+    variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
     size: "small" | "large";
     isStrong: boolean;
     disabled: boolean;
     isInteractive: boolean;
-    render(): TemplateResult<1>;
+    iconPlacement: "leading" | "trailing";
     private renderIconSlot;
     private renderTag;
     private renderButtonTag;
+    render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
@@ -38,7 +41,7 @@ export declare interface TagProps {
      */
     variant?: typeof variants[number];
     /**
-     * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
+     * When true, the "information", "success", "error", "brand-05", and "neutral" variants change their styles and become bolder
      */
     isStrong?: boolean;
     /**
@@ -54,8 +57,12 @@ export declare interface TagProps {
      * What size the tag should be.
      */
     size?: typeof sizes[number];
+    /**
+     * The placement of the icon slot such as leading (default) or trailing. Available only if `isInteractive` is set to true.
+     */
+    iconPlacement?: typeof iconPlacements[number];
 }
 
-export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand", "brand-03", "brand-04", "brand-06"];
+export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"];
 
 export { }

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as a } from "@lit/react";
 import { PieTag as t } from "./index.js";
-import { defaultProps as g, sizes as n, variants as c } from "./index.js";
+import { defaultProps as p, iconPlacements as c, sizes as g, variants as P } from "./index.js";
 const o = a({
   displayName: "PieTag",
   elementClass: t,
@@ -11,7 +11,8 @@ const o = a({
 }), s = o;
 export {
   s as PieTag,
-  g as defaultProps,
-  n as sizes,
-  c as variants
+  p as defaultProps,
+  c as iconPlacements,
+  g as sizes,
+  P as variants
 };

package/package.json

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

package/src/defs.ts

@@ -1,7 +1,8 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand', 'brand-03', 'brand-04', 'brand-06'] as const;
+export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'information', 'success', 'error', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06'] as const;
 export const sizes = ['small', 'large'] as const;
+export const iconPlacements = ['leading', 'trailing'] as const;
 
 export interface TagProps {
     /**
@@ -10,7 +11,7 @@ export interface TagProps {
     variant?: typeof variants[number];
 
     /**
-     * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
+     * When true, the "information", "success", "error", "brand-05", and "neutral" variants change their styles and become bolder
      */
     isStrong?: boolean;
 
@@ -29,6 +30,11 @@ export interface TagProps {
      * What size the tag should be.
      */
     size?: typeof sizes[number];
+
+    /**
+     * The placement of the icon slot such as leading (default) or trailing. Available only if `isInteractive` is set to true.
+     */
+    iconPlacement?: typeof iconPlacements[number];
 }
 
 export type DefaultProps = ComponentDefaultProps<TagProps>;
@@ -39,4 +45,5 @@ export const defaultProps: DefaultProps = {
     isInteractive: false,
     disabled: false,
     size: 'large',
+    iconPlacement: 'leading',
 };

package/src/index.ts

@@ -6,7 +6,11 @@ import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './tag.scss?inline';
 import {
-    type TagProps, variants, sizes, defaultProps,
+    variants,
+    sizes,
+    defaultProps,
+    iconPlacements,
+    type TagProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -37,30 +41,9 @@ export class PieTag extends LitElement implements TagProps {
     @property({ type: Boolean })
     public isInteractive = defaultProps.isInteractive;
 
-    render () {
-        const {
-            disabled,
-            isInteractive,
-            isStrong,
-            size,
-            variant,
-        } = this;
-
-        const classes = {
-            'c-tag': true,
-            [`c-tag--${size}`]: true,
-            [`c-tag--${variant}`]: true,
-            'c-tag--disabled': disabled,
-            'c-tag--strong': isStrong,
-            'c-tag--interactive': isInteractive,
-        };
-
-        if (isInteractive) {
-            return this.renderButtonTag(classes);
-        }
-
-        return this.renderTag(classes);
-    }
+    @property({ type: String })
+    @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
+    public iconPlacement = defaultProps.iconPlacement;
 
     private renderIconSlot () {
         if (this.size !== 'large') return nothing;
@@ -90,6 +73,33 @@ export class PieTag extends LitElement implements TagProps {
         </button>`;
     }
 
+    render () {
+        const {
+            disabled,
+            isInteractive,
+            isStrong,
+            size,
+            variant,
+            iconPlacement,
+        } = this;
+
+        const classes = {
+            'c-tag': true,
+            [`c-tag--${size}`]: true,
+            [`c-tag--${variant}`]: true,
+            'c-tag--disabled': disabled,
+            'c-tag--strong': isStrong,
+            'c-tag--interactive': isInteractive,
+            [`c-tag--icon-placement--${iconPlacement}`]: isInteractive && iconPlacement,
+        };
+
+        if (isInteractive) {
+            return this.renderButtonTag(classes);
+        }
+
+        return this.renderTag(classes);
+    }
+
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 }

package/src/tag.scss

@@ -55,6 +55,7 @@
     --icon-size-override: 16px;
 
     display: inline-flex;
+    flex-direction: row;
     vertical-align: middle;
     align-items: center;
     justify-content: center;
@@ -80,6 +81,14 @@
         }
     }
 
+    &.c-tag--icon-placement--leading {
+        // same as default styles
+    }
+
+    &.c-tag--icon-placement--trailing {
+        flex-direction: row-reverse;
+    }
+
     // Size
     &.c-tag--small {
         --tag-padding-block: 0;
@@ -104,7 +113,7 @@
         }
     }
 
-    &.c-tag--blue {
+    &.c-tag--information {
         --tag-bg-color: var(--dt-color-support-info-02);
         --tag-color: var(--dt-color-content-default);
         @include tag-interactive-states('--dt-color-support-info-02');
@@ -116,7 +125,7 @@
         }
     }
 
-    &.c-tag--green {
+    &.c-tag--success {
         --tag-bg-color: var(--dt-color-support-positive-02);
         --tag-color: var(--dt-color-content-default);
         @include tag-interactive-states('--dt-color-support-positive-02');
@@ -128,19 +137,7 @@
         }
     }
 
-    &.c-tag--yellow {
-        --tag-bg-color: var(--dt-color-support-warning-02);
-        --tag-color: var(--dt-color-content-default);
-        @include tag-interactive-states('--dt-color-support-warning-02');
-
-        &.c-tag--strong {
-            --tag-bg-color: var(--dt-color-support-warning);
-            --tag-color: var(--dt-color-content-dark);
-            @include tag-interactive-states('--dt-color-support-warning');
-        }
-    }
-
-    &.c-tag--red {
+    &.c-tag--error {
         --tag-bg-color: var(--dt-color-support-error-02);
         --tag-color: var(--dt-color-content-default);
         @include tag-interactive-states('--dt-color-support-error-02');
@@ -152,30 +149,42 @@
         }
     }
 
+    &.c-tag--brand-02 {
+        --tag-bg-color: var(--dt-color-support-brand-02);
+        --tag-color: var(--dt-color-content-default);
+        @include tag-interactive-states('--dt-color-support-brand-02');
+    }
+
     &.c-tag--brand-03 {
         --tag-bg-color: var(--dt-color-support-brand-03);
-        --tag-color: var(--dt-color-content-default);
+        --tag-color: var(--dt-color-content-dark);
         @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);
+        --tag-color: var(--dt-color-content-dark);
         @include tag-interactive-states('--dt-color-support-brand-04');
     }
 
+    &.c-tag--brand-05 {
+        --tag-bg-color: var(--dt-color-support-warning-02);
+        --tag-color: var(--dt-color-content-default);
+        @include tag-interactive-states('--dt-color-support-warning-02');
+
+        &.c-tag--strong {
+            --tag-bg-color: var(--dt-color-support-warning);
+            --tag-color: var(--dt-color-content-dark);
+            @include tag-interactive-states('--dt-color-support-warning');
+        }
+    }
+
     &.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);
-        @include tag-interactive-states('--dt-color-support-brand-02');
-    }
-
     &.c-tag--neutral-alternative {
         --tag-bg-color: var(--dt-color-container-default);
         --tag-color: var(--dt-color-content-default);