@justeattakeaway/pie-tag 0.14.1 → 0.16.0

package/custom-elements.json

@@ -135,6 +135,32 @@
               "privacy": "public",
               "attribute": "iconPlacement"
             },
+            {
+              "kind": "field",
+              "name": "_iconSlotNodes",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isIconOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "checkIfIsIconOnly",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderIconSlot",
@@ -194,8 +220,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-tag",
           "customElement": true

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import type { PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
 export declare type DefaultProps = ComponentDefaultProps<TagProps>;
@@ -14,13 +15,18 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
  * @slot icon - The icon slot
  * @slot - Default slot
  */
-export declare class PieTag extends LitElement implements TagProps {
+export declare class PieTag extends PieElement implements TagProps {
     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;
     iconPlacement: "leading" | "trailing";
+    _iconSlotNodes: Array<HTMLElement>;
+    private isIconOnly;
+    updated(changedProperties: PropertyValues<this>): void;
+    private checkIfIsIconOnly;
+    private handleSlotChange;
     private renderIconSlot;
     private renderTag;
     private renderButtonTag;

package/dist/index.js

@@ -1,8 +1,21 @@
-import { LitElement as u, nothing as f, html as n, unsafeCSS as x } from "lit";
-import { property as c } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-import { validPropertyValues as g, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
-const w = "*,*:after,*:before{box-sizing:inherit}.c-tag{--int-states-mixin-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-cursor: text;--tag-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;flex-direction:row;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);cursor:var(--tag-cursor)}.c-tag.c-tag--interactive{--tag-cursor: pointer;border:none;-webkit-user-select:none;user-select:none}.c-tag.c-tag--interactive:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-tag.c-tag--icon-placement--trailing{flex-direction:row-reverse}.c-tag.c-tag--small{--tag-padding-block: 0;--tag-padding-inline: var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag.c-tag--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)}", y = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], z = ["small", "large"], S = ["leading", "trailing"], t = {
+import { LitElement as w, nothing as y, html as m, unsafeCSS as S } from "lit";
+import { property as l, queryAssignedElements as I } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { validPropertyValues as h, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
+var P = Object.defineProperty, $ = (n, i, a, s) => {
+  for (var t = void 0, r = n.length - 1, o; r >= 0; r--)
+    (o = n[r]) && (t = o(i, a, t) || t);
+  return t && P(i, a, t), t;
+};
+class x extends w {
+  constructor() {
+    super(...arguments), this.v = "0.16.0";
+  }
+}
+$([
+  l({ type: String, reflect: !0 })
+], x.prototype, "v");
+const O = "*,*:after,*:before{box-sizing:inherit}.c-tag{--int-states-mixin-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-cursor: text;--tag-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;flex-direction:row;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);cursor:var(--tag-cursor)}.c-tag.c-tag--interactive{--tag-cursor: pointer;border:none;-webkit-user-select:none;user-select:none}.c-tag.c-tag--interactive:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-tag.c-tag--icon-placement--trailing{flex-direction:row-reverse}.c-tag.c-tag--small{--tag-padding-block: 0;--tag-padding-inline: var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag.c-tag--icon-only{--tag-padding-block: var(--dt-spacing-a)}.c-tag.c-tag--neutral.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-strong))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-strong))}}.c-tag.c-tag--neutral.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-tag.c-tag--information{--int-states-mixin-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--hover-modifier)))}.c-tag.c-tag--information.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--information.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-info-02))}.c-tag.c-tag--information.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-info-02))}}.c-tag.c-tag--information.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--hover-modifier)))}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-info))}.c-tag.c-tag--information.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--information.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-info))}}.c-tag.c-tag--success{--int-states-mixin-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--hover-modifier)))}.c-tag.c-tag--success.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--success.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-positive-02))}.c-tag.c-tag--success.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-positive-02))}}.c-tag.c-tag--success.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--hover-modifier)))}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-positive))}.c-tag.c-tag--success.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--success.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-positive))}}.c-tag.c-tag--error{--int-states-mixin-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--hover-modifier)))}.c-tag.c-tag--error.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--error.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error-02))}.c-tag.c-tag--error.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error-02))}}.c-tag.c-tag--error.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}.c-tag.c-tag--error.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--error.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.c-tag.c-tag--brand-02{--int-states-mixin-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-02.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-02.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-02.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-02.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-02))}.c-tag.c-tag--brand-02.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-02.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-02))}}.c-tag.c-tag--brand-03{--int-states-mixin-bg-color: var(--dt-color-support-brand-03);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-03.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-03-h), var(--dt-color-support-brand-03-s), calc(var(--dt-color-support-brand-03-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-03.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-03.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-03-h), var(--dt-color-support-brand-03-s), calc(var(--dt-color-support-brand-03-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-03.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-03))}.c-tag.c-tag--brand-03.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-03.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-03))}}.c-tag.c-tag--brand-04{--int-states-mixin-bg-color: var(--dt-color-support-brand-04);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-04-h), var(--dt-color-support-brand-04-s), calc(var(--dt-color-support-brand-04-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-04.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-04.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-04-h), var(--dt-color-support-brand-04-s), calc(var(--dt-color-support-brand-04-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-04.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-brand-04))}.c-tag.c-tag--brand-04.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-04.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-brand-04))}}.c-tag.c-tag--brand-05{--int-states-mixin-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-05.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-05.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-warning-02))}.c-tag.c-tag--brand-05.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-warning-02))}}.c-tag.c-tag--brand-05.c-tag--strong{--int-states-mixin-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-warning))}.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-05.c-tag--strong.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-warning))}}.c-tag.c-tag--brand-06{--int-states-mixin-bg-color: var(--dt-color-support-brand-06);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-06.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-06-h), var(--dt-color-support-brand-06-s), calc(var(--dt-color-support-brand-06-l) + var(--hover-modifier)))}.c-tag.c-tag--brand-06.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-06.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-support-brand-06-h), var(--dt-color-support-brand-06-s), calc(var(--dt-color-support-brand-06-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--brand-06.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-light-bg) var(--dt-color-hover-02-light), var(--dt-color-support-brand-06))}.c-tag.c-tag--brand-06.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--brand-06.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-light-bg) var(--dt-color-active-02-light), var(--dt-color-support-brand-06))}}.c-tag.c-tag--neutral-alternative{--int-states-mixin-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral-alternative.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--neutral-alternative.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-tag.c-tag--outline{--int-states-mixin-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag.c-tag--outline.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--hover-modifier)))}.c-tag.c-tag--outline.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--outline.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--outline.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--tag-transparent-bg-color))}.c-tag.c-tag--outline.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--outline.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--tag-transparent-bg-color))}}.c-tag.c-tag--ghost{--int-states-mixin-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--ghost.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--hover-modifier)))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--ghost.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--tag-transparent-bg-color-h), var(--tag-transparent-bg-color-s), calc(var(--tag-transparent-bg-color-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-tag.c-tag--ghost.c-tag--interactive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--tag-transparent-bg-color))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(:disabled,.is-disabled,.is-dismissible),.c-tag.c-tag--ghost.c-tag--interactive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--tag-transparent-bg-color))}}.c-tag.is-disabled{opacity:.5}.c-tag[disabled]{--tag-cursor: not-allowed}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", _ = ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"], C = ["small", "large"], N = ["leading", "trailing"], e = {
   variant: "neutral",
   isStrong: !1,
   isInteractive: !1,
@@ -10,33 +23,48 @@ const w = "*,*:after,*:before{box-sizing:inherit}.c-tag{--int-states-mixin-bg-co
   size: "large",
   iconPlacement: "leading"
 };
-var P = Object.defineProperty, s = (b, r, o, p) => {
-  for (var a = void 0, e = b.length - 1, l; e >= 0; e--)
-    (l = b[e]) && (a = l(r, o, a) || a);
-  return a && P(r, o, a), a;
+var E = Object.defineProperty, d = (n, i, a, s) => {
+  for (var t = void 0, r = n.length - 1, o; r >= 0; r--)
+    (o = n[r]) && (t = o(i, a, t) || t);
+  return t && E(i, a, t), t;
 };
-const d = "pie-tag", v = class v extends u {
+const p = "pie-tag", u = class u extends x {
   constructor() {
-    super(...arguments), this.variant = t.variant, this.size = t.size, this.isStrong = t.isStrong, this.disabled = t.disabled, this.isInteractive = t.isInteractive, this.iconPlacement = t.iconPlacement;
+    super(...arguments), this.variant = e.variant, this.size = e.size, this.isStrong = e.isStrong, this.disabled = e.disabled, this.isInteractive = e.isInteractive, this.iconPlacement = e.iconPlacement, this.isIconOnly = !1;
+  }
+  updated(i) {
+    i.has("size") && this.checkIfIsIconOnly();
+  }
+  checkIfIsIconOnly() {
+    const { size: i, textContent: a, _iconSlotNodes: s } = this, t = i === "large", o = (a == null ? void 0 : a.trim()) === "", v = s.length > 0;
+    if (t && o && v && s && s.length === 1) {
+      const g = s[0].tagName.toUpperCase(), k = g.startsWith("ICON-") || g === "SVG";
+      this.isIconOnly = k, this.requestUpdate();
+      return;
+    }
+    this.isIconOnly = !1, this.requestUpdate();
+  }
+  handleSlotChange() {
+    this.checkIfIsIconOnly();
   }
   renderIconSlot() {
-    return this.size !== "large" ? f : n`<slot name="icon"></slot>`;
+    return this.size !== "large" ? y : m`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
   }
-  renderTag(r) {
-    return n`
+  renderTag(i) {
+    return m`
         <div
-            class="${h(r)}"
+            class="${f(i)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
-            <slot></slot>
+            <slot @slotchange=${this.handleSlotChange}></slot>
         </div>`;
   }
-  renderButtonTag(r) {
-    return n`
+  renderButtonTag(i) {
+    return m`
         <button
             type="button"
             ?disabled="${this.disabled}"
-            class="${h(r)}"
+            class="${f(i)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
             <slot></slot>
@@ -44,52 +72,57 @@ const d = "pie-tag", v = class v extends u {
   }
   render() {
     const {
-      disabled: r,
-      isInteractive: o,
-      isStrong: p,
-      size: a,
-      variant: e,
-      iconPlacement: l
-    } = this, m = {
+      disabled: i,
+      isInteractive: a,
+      isStrong: s,
+      size: t,
+      variant: r,
+      iconPlacement: o,
+      isIconOnly: v
+    } = this, b = v ? !1 : a, g = {
       "c-tag": !0,
-      [`c-tag--${a}`]: !0,
-      [`c-tag--${e}`]: !0,
-      "is-disabled": r,
-      "c-tag--strong": p,
-      "c-tag--interactive": o,
-      [`c-tag--icon-placement--${l}`]: o && l
+      [`c-tag--${t}`]: !0,
+      [`c-tag--${r}`]: !0,
+      "is-disabled": i,
+      "c-tag--strong": s,
+      "c-tag--interactive": b,
+      "c-tag--icon-only": v,
+      [`c-tag--icon-placement--${o}`]: b && o
     };
-    return o ? this.renderButtonTag(m) : this.renderTag(m);
+    return b ? this.renderButtonTag(g) : this.renderTag(g);
   }
 };
-v.styles = x(w);
-let i = v;
-s([
-  c({ type: String }),
-  g(d, y, t.variant)
-], i.prototype, "variant");
-s([
-  c({ type: String }),
-  g(d, z, t.size)
-], i.prototype, "size");
-s([
-  c({ type: Boolean })
-], i.prototype, "isStrong");
-s([
-  c({ type: Boolean })
-], i.prototype, "disabled");
-s([
-  c({ type: Boolean })
-], i.prototype, "isInteractive");
-s([
-  c({ type: String }),
-  g(d, S, t.iconPlacement)
-], i.prototype, "iconPlacement");
-k(d, i);
+u.styles = S(O);
+let c = u;
+d([
+  l({ type: String }),
+  h(p, _, e.variant)
+], c.prototype, "variant");
+d([
+  l({ type: String }),
+  h(p, C, e.size)
+], c.prototype, "size");
+d([
+  l({ type: Boolean })
+], c.prototype, "isStrong");
+d([
+  l({ type: Boolean })
+], c.prototype, "disabled");
+d([
+  l({ type: Boolean })
+], c.prototype, "isInteractive");
+d([
+  l({ type: String }),
+  h(p, N, e.iconPlacement)
+], c.prototype, "iconPlacement");
+d([
+  I({ slot: "icon", flatten: !0 })
+], c.prototype, "_iconSlotNodes");
+z(p, c);
 export {
-  i as PieTag,
-  t as defaultProps,
-  S as iconPlacements,
-  z as sizes,
-  y as variants
+  c as PieTag,
+  e as defaultProps,
+  N as iconPlacements,
+  C as sizes,
+  _ as variants
 };

package/dist/react.d.ts

@@ -1,6 +1,7 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
@@ -17,13 +18,18 @@ export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_
  * @slot icon - The icon slot
  * @slot - Default slot
  */
-declare class PieTag_2 extends LitElement implements TagProps {
+declare class PieTag_2 extends PieElement implements TagProps {
     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;
     iconPlacement: "leading" | "trailing";
+    _iconSlotNodes: Array<HTMLElement>;
+    private isIconOnly;
+    updated(changedProperties: PropertyValues<this>): void;
+    private checkIfIsIconOnly;
+    private handleSlotChange;
     private renderIconSlot;
     private renderTag;
     private renderButtonTag;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tag",
   "description": "PIE Design System Tag built using Web Components",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,14 +39,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.15.1",
-    "@justeattakeaway/pie-icons-webc": "1.5.0",
+    "@justeattakeaway/pie-components-config": "0.19.0",
+    "@justeattakeaway/pie-css": "0.16.0",
+    "@justeattakeaway/pie-icons-webc": "1.6.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.2"
+    "@justeattakeaway/pie-webc-core": "0.25.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,7 +1,8 @@
 import {
-    LitElement, html, unsafeCSS, nothing,
+    html, unsafeCSS, nothing, type PropertyValues,
 } from 'lit';
-import { property } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './tag.scss?inline';
@@ -23,7 +24,7 @@ const componentSelector = 'pie-tag';
  * @slot icon - The icon slot
  * @slot - Default slot
  */
-export class PieTag extends LitElement implements TagProps {
+export class PieTag extends PieElement implements TagProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
@@ -45,10 +46,53 @@ export class PieTag extends LitElement implements TagProps {
     @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
     public iconPlacement = defaultProps.iconPlacement;
 
+    @queryAssignedElements({ slot: 'icon', flatten: true }) _iconSlotNodes!: Array<HTMLElement>;
+
+    private isIconOnly = false;
+
+    updated (changedProperties: PropertyValues<this>) {
+        if (changedProperties.has('size')) this.checkIfIsIconOnly();
+    }
+
+    private checkIfIsIconOnly () {
+        const { size, textContent, _iconSlotNodes } = this;
+
+        // The instance size must be large
+        const isLargeSize = size === 'large';
+
+        // The default slot must be empty
+        const defaultSlotText = textContent?.trim();
+        const isDefaultSlotEmpty = defaultSlotText === '';
+
+        // The icon slot must have some content
+        const iconsSlotNotEmpty = _iconSlotNodes.length > 0;
+
+        if (isLargeSize && isDefaultSlotEmpty && iconsSlotNotEmpty) {
+            // The icon slot content must be an icon
+            if (_iconSlotNodes && _iconSlotNodes.length === 1) {
+                const firstNode = (_iconSlotNodes[0] as Element);
+                const tag = firstNode.tagName.toUpperCase();
+                const isIcon = tag.startsWith('ICON-') || tag === 'SVG';
+
+                this.isIconOnly = isIcon;
+                this.requestUpdate();
+
+                return;
+            }
+        }
+
+        this.isIconOnly = false;
+        this.requestUpdate();
+    }
+
+    private handleSlotChange () {
+        this.checkIfIsIconOnly();
+    }
+
     private renderIconSlot () {
         if (this.size !== 'large') return nothing;
 
-        return html`<slot name="icon"></slot>`;
+        return html`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
     }
 
     private renderTag (classes: ClassInfo) {
@@ -57,7 +101,7 @@ export class PieTag extends LitElement implements TagProps {
             class="${classMap(classes)}"
             data-test-id="pie-tag">
             ${this.renderIconSlot()}
-            <slot></slot>
+            <slot @slotchange=${this.handleSlotChange}></slot>
         </div>`;
     }
 
@@ -81,19 +125,24 @@ export class PieTag extends LitElement implements TagProps {
             size,
             variant,
             iconPlacement,
+            isIconOnly,
         } = this;
 
+        // isInteractive can only be true when isIconOnly is false
+        const _isInteractive = isIconOnly ? false : isInteractive;
+
         const classes = {
             'c-tag': true,
             [`c-tag--${size}`]: true,
             [`c-tag--${variant}`]: true,
             'is-disabled': disabled,
             'c-tag--strong': isStrong,
-            'c-tag--interactive': isInteractive,
-            [`c-tag--icon-placement--${iconPlacement}`]: isInteractive && iconPlacement,
+            'c-tag--interactive': _isInteractive,
+            'c-tag--icon-only': isIconOnly,
+            [`c-tag--icon-placement--${iconPlacement}`]: _isInteractive && iconPlacement,
         };
 
-        if (isInteractive) {
+        if (_isInteractive) {
             return this.renderButtonTag(classes);
         }
 

package/src/tag.scss

@@ -69,6 +69,10 @@
         // same as default styles
     }
 
+    &.c-tag--icon-only {
+        --tag-padding-block: var(--dt-spacing-a);
+    }
+
     // Variant
     &.c-tag--neutral {
         &.c-tag--interactive {