@justeattakeaway/pie-icon-button 1.3.1 → 1.4.0

package/custom-elements.json

@@ -139,8 +139,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-icon-button",
           "customElement": true

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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 { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
@@ -45,7 +45,7 @@ export declare interface IconButtonProps {
 /**
  * @tagname pie-icon-button
  */
-export declare class PieIconButton extends LitElement implements IconButtonProps {
+export declare class PieIconButton extends PieElement implements IconButtonProps {
     aria: IconButtonProps['aria'];
     size: "xsmall" | "small" | "medium" | "large";
     variant: "secondary" | "inverse" | "primary" | "outline" | "ghost" | "ghost-secondary" | "ghost-inverse";

package/dist/index.js

@@ -1,10 +1,23 @@
-import { LitElement as p, html as v, unsafeCSS as B } from "lit";
+import { LitElement as B, html as b, unsafeCSS as f } from "lit";
+import { property as c } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
-import { property as s } from "lit/decorators.js";
-import { ifDefined as a } from "lit/directives/if-defined.js";
-import { validPropertyValues as g, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { validPropertyValues as g, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-light);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn.o-iconBtn--primary: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-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary: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-interactive-brand))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.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-interactive-brand))}}.o-iconBtn.o-iconBtn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--secondary: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-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--secondary: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-interactive-secondary))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.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-interactive-secondary))}}.o-iconBtn.o-iconBtn--outline{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--outline: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--outline: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-transparent))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.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-transparent))}}.o-iconBtn.o-iconBtn--ghost{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--ghost: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost: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-transparent))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.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-transparent))}}.o-iconBtn.o-iconBtn--ghost-secondary{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--ghost-secondary: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-secondary: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-transparent))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.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-transparent))}}.o-iconBtn.o-iconBtn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--inverse: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-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--inverse: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-interactive-inverse))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.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-interactive-inverse))}}.o-iconBtn.o-iconBtn--ghost-inverse{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn.o-iconBtn--ghost-inverse: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-inverse: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-transparent))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.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-transparent))}}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--int-states-mixin-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", y = ["xsmall", "small", "medium", "large"], k = [
+var y = Object.defineProperty, k = (a, r, t, l) => {
+  for (var i = void 0, o = a.length - 1, e; o >= 0; o--)
+    (e = a[o]) && (i = e(r, t, i) || i);
+  return i && y(r, t, i), i;
+};
+class p extends B {
+  constructor() {
+    super(...arguments), this.v = "1.4.0";
+  }
+}
+k([
+  c({ type: String, reflect: !0 })
+], p.prototype, "v");
+const z = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-light);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn.o-iconBtn--primary: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-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary: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-interactive-brand))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.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-interactive-brand))}}.o-iconBtn.o-iconBtn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--secondary: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-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--secondary: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-interactive-secondary))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.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-interactive-secondary))}}.o-iconBtn.o-iconBtn--outline{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--outline: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--outline: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-transparent))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.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-transparent))}}.o-iconBtn.o-iconBtn--ghost{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--ghost: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost: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-transparent))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.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-transparent))}}.o-iconBtn.o-iconBtn--ghost-secondary{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--ghost-secondary: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-secondary: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-transparent))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.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-transparent))}}.o-iconBtn.o-iconBtn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--inverse: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-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--inverse: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-interactive-inverse))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.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-interactive-inverse))}}.o-iconBtn.o-iconBtn--ghost-inverse{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn.o-iconBtn--ghost-inverse: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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.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(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-inverse: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-transparent))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.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-transparent))}}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--int-states-mixin-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", $ = ["xsmall", "small", "medium", "large"], w = [
   "primary",
   "secondary",
   "outline",
@@ -12,20 +25,20 @@ const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
   "ghost-secondary",
   "inverse",
   "ghost-inverse"
-], e = {
+], s = {
   size: "medium",
   variant: "primary",
   disabled: !1,
   isLoading: !1
 };
-var z = Object.defineProperty, c = (h, r, n, l) => {
-  for (var i = void 0, o = h.length - 1, d; o >= 0; o--)
-    (d = h[o]) && (i = d(r, n, i) || i);
-  return i && z(r, n, i), i;
+var S = Object.defineProperty, v = (a, r, t, l) => {
+  for (var i = void 0, o = a.length - 1, e; o >= 0; o--)
+    (e = a[o]) && (i = e(r, t, i) || i);
+  return i && S(r, t, i), i;
 };
-const b = "pie-icon-button", m = class m extends p {
+const m = "pie-icon-button", h = class h extends p {
   constructor() {
-    super(...arguments), this.size = e.size, this.variant = e.variant, this.disabled = e.disabled, this.isLoading = e.isLoading;
+    super(...arguments), this.size = s.size, this.variant = s.variant, this.disabled = s.disabled, this.isLoading = s.isLoading;
   }
   /**
    * Template for the loading state
@@ -33,9 +46,9 @@ const b = "pie-icon-button", m = class m extends p {
    * @private
    */
   renderSpinner() {
-    const { variant: r, size: n, disabled: l } = this, i = n === "xsmall" ? "small" : "medium";
+    const { variant: r, size: t, disabled: l } = this, i = t === "xsmall" ? "small" : "medium";
     let o = "brand";
-    return r != null && r.includes("secondary") && (o = "secondary"), (r === "primary" && !l || r === "ghost-inverse") && (o = "inverse"), v`
+    return r != null && r.includes("secondary") && (o = "secondary"), (r === "primary" && !l || r === "ghost-inverse") && (o = "inverse"), b`
                 <pie-spinner
                     size="${i}"
                     variant="${o}">
@@ -44,53 +57,53 @@ const b = "pie-icon-button", m = class m extends p {
   render() {
     const {
       disabled: r,
-      size: n,
+      size: t,
       variant: l,
       isLoading: i,
       aria: o
-    } = this, d = {
+    } = this, e = {
       "o-iconBtn": !0,
-      [`o-iconBtn--${n}`]: !0,
+      [`o-iconBtn--${t}`]: !0,
       [`o-iconBtn--${l}`]: !0,
       "is-loading": i
     };
-    return v`
+    return b`
             <button
-                class="${x(d)}"
+                class="${x(e)}"
                 data-test-id="pie-icon-button"
                 ?disabled="${r}"
-                aria-label="${a(o == null ? void 0 : o.label)}"
-                aria-labelledby="${a(o == null ? void 0 : o.labelledby)}"
-                aria-describedby="${a(o == null ? void 0 : o.describedby)}"
-                aria-expanded="${a(o == null ? void 0 : o.expanded)}"
-                aria-controls="${a(o == null ? void 0 : o.controls)}">
-                ${i ? this.renderSpinner() : v`<slot></slot>`}
+                aria-label="${d(o == null ? void 0 : o.label)}"
+                aria-labelledby="${d(o == null ? void 0 : o.labelledby)}"
+                aria-describedby="${d(o == null ? void 0 : o.describedby)}"
+                aria-expanded="${d(o == null ? void 0 : o.expanded)}"
+                aria-controls="${d(o == null ? void 0 : o.controls)}">
+                ${i ? this.renderSpinner() : b`<slot></slot>`}
             </button>`;
   }
 };
-m.styles = B(u);
-let t = m;
-c([
-  s({ type: Object })
-], t.prototype, "aria");
-c([
-  s({ type: String }),
-  g(b, y, e.size)
-], t.prototype, "size");
-c([
-  s({ type: String }),
-  g(b, k, e.variant)
-], t.prototype, "variant");
-c([
-  s({ type: Boolean })
-], t.prototype, "disabled");
-c([
-  s({ type: Boolean })
-], t.prototype, "isLoading");
-f(b, t);
+h.styles = f(z);
+let n = h;
+v([
+  c({ type: Object })
+], n.prototype, "aria");
+v([
+  c({ type: String }),
+  g(m, $, s.size)
+], n.prototype, "size");
+v([
+  c({ type: String }),
+  g(m, w, s.variant)
+], n.prototype, "variant");
+v([
+  c({ type: Boolean })
+], n.prototype, "disabled");
+v([
+  c({ type: Boolean })
+], n.prototype, "isLoading");
+u(m, n);
 export {
-  t as PieIconButton,
-  e as defaultProps,
-  y as sizes,
-  k as variants
+  n as PieIconButton,
+  s as defaultProps,
+  $ as sizes,
+  w as variants
 };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 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 * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
@@ -48,7 +48,7 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<IconButton
 /**
  * @tagname pie-icon-button
  */
-declare class PieIconButton_2 extends LitElement implements IconButtonProps {
+declare class PieIconButton_2 extends PieElement implements IconButtonProps {
     aria: IconButtonProps['aria'];
     size: "xsmall" | "small" | "medium" | "large";
     variant: "secondary" | "inverse" | "primary" | "outline" | "ghost" | "ghost-secondary" | "ghost-inverse";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "repository": {
     "type": "git",
@@ -38,15 +38,16 @@
   "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-components-config": "0.19.0",
+    "@justeattakeaway/pie-css": "0.16.0",
+    "@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-icons-webc": "1.5.0",
-    "@justeattakeaway/pie-spinner": "1.0.1",
-    "@justeattakeaway/pie-webc-core": "0.24.2"
+    "@justeattakeaway/pie-icons-webc": "1.6.1",
+    "@justeattakeaway/pie-spinner": "1.1.0",
+    "@justeattakeaway/pie-webc-core": "0.25.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,6 +1,7 @@
 import {
-    LitElement, html, unsafeCSS,
+    html, unsafeCSS,
 } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -19,7 +20,7 @@ const componentSelector = 'pie-icon-button';
 /**
  * @tagname pie-icon-button
  */
-export class PieIconButton extends LitElement implements IconButtonProps {
+export class PieIconButton extends PieElement implements IconButtonProps {
     @property({ type: Object })
     public aria: IconButtonProps['aria'];