@justeattakeaway/pie-icon-button 2.0.6 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/custom-elements.json +6 -0
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +23 -23
  4. package/dist/react.d.ts +3 -1
  5. package/package.json +5 -5
  6. package/src/iconButton.scss +7 -6
  7. package/src/index.ts +3 -5
package/custom-elements.json CHANGED
@@ -108,6 +108,12 @@
108
108
  "description": "Template for the loading state"
109
109
  }
110
110
  ],
111
+ "mixins": [
112
+ {
113
+ "name": "DelegatesFocusMixin",
114
+ "package": "@justeattakeaway/pie-webc-core"
115
+ }
116
+ ],
111
117
  "superclass": {
112
118
  "name": "PieElement",
113
119
  "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
package/dist/index.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare interface IconButtonProps {
45
45
  /**
46
46
  * @tagname pie-icon-button
47
47
  */
48
- export declare class PieIconButton extends PieElement implements IconButtonProps {
48
+ export declare class PieIconButton extends PieIconButton_base implements IconButtonProps {
49
49
  aria: IconButtonProps['aria'];
50
50
  size: "xsmall" | "small" | "medium" | "large";
51
51
  variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse";
@@ -61,6 +61,8 @@ export declare class PieIconButton extends PieElement implements IconButtonProps
61
61
  static styles: CSSResult;
62
62
  }
63
63
 
64
+ declare const PieIconButton_base: typeof PieElement;
65
+
64
66
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
65
67
 
66
68
  export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
package/dist/index.js CHANGED
@@ -1,17 +1,17 @@
1
- import { LitElement as B, unsafeCSS as x, html as m } from "lit";
1
+ import { LitElement as B, html as m, unsafeCSS as x } from "lit";
2
2
  import { classMap as f } from "lit/directives/class-map.js";
3
3
  import { property as d } from "lit/decorators.js";
4
4
  import { ifDefined as l } from "lit/directives/if-defined.js";
5
- import { validPropertyValues as g, safeCustomElement as u } from "@justeattakeaway/pie-webc-core";
5
+ import { DelegatesFocusMixin as u, validPropertyValues as g, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-spinner";
7
7
  const v = class v extends B {
8
8
  willUpdate() {
9
9
  this.getAttribute("v") || this.setAttribute("v", v.v);
10
10
  }
11
11
  };
12
- v.v = "2.0.6";
12
+ v.v = "2.2.0";
13
13
  let h = v;
14
- const y = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--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}", k = ["xsmall", "small", "medium", "large"], z = [
14
+ const k = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--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-solid)}.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-solid);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-solid)}.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-solid)}.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-interactive-primary-solid)}.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-solid);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);--btn-icon-fill: var(--dt-color-content-disabled)}.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}", z = ["xsmall", "small", "medium", "large"], w = [
15
15
  "primary",
16
16
  "secondary",
17
17
  "outline",
@@ -19,21 +19,21 @@ const y = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--bt
19
19
  "ghost-secondary",
20
20
  "inverse",
21
21
  "ghost-inverse"
22
- ], a = {
22
+ ], s = {
23
23
  size: "medium",
24
24
  variant: "primary",
25
25
  disabled: !1,
26
26
  isLoading: !1
27
27
  };
28
- var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (i, t, e, r) => {
29
- for (var o = r > 1 ? void 0 : r ? $(t, e) : t, c = i.length - 1, b; c >= 0; c--)
28
+ var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (i, t, e, r) => {
29
+ for (var o = r > 1 ? void 0 : r ? S(t, e) : t, c = i.length - 1, b; c >= 0; c--)
30
30
  (b = i[c]) && (o = (r ? b(t, e, o) : b(o)) || o);
31
- return r && o && w(t, e, o), o;
31
+ return r && o && $(t, e, o), o;
32
32
  };
33
33
  const p = "pie-icon-button";
34
- let n = class extends h {
34
+ let n = class extends u(h) {
35
35
  constructor() {
36
- super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
36
+ super(...arguments), this.size = s.size, this.variant = s.variant, this.disabled = s.disabled, this.isLoading = s.isLoading;
37
37
  }
38
38
  /**
39
39
  * Template for the loading state
@@ -76,30 +76,30 @@ let n = class extends h {
76
76
  </button>`;
77
77
  }
78
78
  };
79
- n.styles = x(y);
80
- s([
79
+ n.styles = x(k);
80
+ a([
81
81
  d({ type: Object })
82
82
  ], n.prototype, "aria", 2);
83
- s([
83
+ a([
84
84
  d({ type: String }),
85
- g(p, k, a.size)
85
+ g(p, z, s.size)
86
86
  ], n.prototype, "size", 2);
87
- s([
87
+ a([
88
88
  d({ type: String }),
89
- g(p, z, a.variant)
89
+ g(p, w, s.variant)
90
90
  ], n.prototype, "variant", 2);
91
- s([
91
+ a([
92
92
  d({ type: Boolean })
93
93
  ], n.prototype, "disabled", 2);
94
- s([
94
+ a([
95
95
  d({ type: Boolean })
96
96
  ], n.prototype, "isLoading", 2);
97
- n = s([
98
- u("pie-icon-button")
97
+ n = a([
98
+ y("pie-icon-button")
99
99
  ], n);
100
100
  export {
101
101
  n as PieIconButton,
102
- a as defaultProps,
103
- k as sizes,
104
- z as variants
102
+ s as defaultProps,
103
+ z as sizes,
104
+ w as variants
105
105
  };
package/dist/react.d.ts CHANGED
@@ -48,7 +48,7 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<React_2.Pr
48
48
  /**
49
49
  * @tagname pie-icon-button
50
50
  */
51
- declare class PieIconButton_2 extends PieElement implements IconButtonProps {
51
+ declare class PieIconButton_2 extends PieIconButton_base implements IconButtonProps {
52
52
  aria: IconButtonProps['aria'];
53
53
  size: "xsmall" | "small" | "medium" | "large";
54
54
  variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse";
@@ -64,6 +64,8 @@ declare class PieIconButton_2 extends PieElement implements IconButtonProps {
64
64
  static styles: CSSResult;
65
65
  }
66
66
 
67
+ declare const PieIconButton_base: typeof PieElement;
68
+
67
69
  declare type ReactBaseType = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
68
70
 
69
71
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "2.0.6",
3
+ "version": "2.2.0",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -39,15 +39,15 @@
39
39
  "devDependencies": {
40
40
  "@custom-elements-manifest/analyzer": "0.9.0",
41
41
  "@justeattakeaway/pie-components-config": "0.21.0",
42
- "@justeattakeaway/pie-css": "0.19.0",
42
+ "@justeattakeaway/pie-css": "0.22.0",
43
43
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
44
44
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-icons-webc": "1.14.2",
49
- "@justeattakeaway/pie-spinner": "1.2.5",
50
- "@justeattakeaway/pie-webc-core": "1.1.0"
48
+ "@justeattakeaway/pie-icons-webc": "1.15.0",
49
+ "@justeattakeaway/pie-spinner": "1.3.0",
50
+ "@justeattakeaway/pie-webc-core": "2.0.0"
51
51
  },
52
52
  "volta": {
53
53
  "extends": "../../../package.json"
package/src/iconButton.scss CHANGED
@@ -52,14 +52,14 @@
52
52
 
53
53
  &.o-iconBtn--secondary {
54
54
  --int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
55
- --btn-icon-fill: var(--dt-color-content-interactive-secondary);
55
+ --btn-icon-fill: var(--dt-color-content-interactive-secondary-solid);
56
56
 
57
57
  @include p.interactive-states('--dt-color-interactive-secondary');
58
58
  }
59
59
 
60
60
  &.o-iconBtn--outline {
61
61
  --int-states-mixin-bg-color: transparent;
62
- --btn-icon-fill: var(--dt-color-content-interactive-brand);
62
+ --btn-icon-fill: var(--dt-color-content-interactive-brand-solid);
63
63
 
64
64
  border: 1px solid var(--dt-color-border-strong);
65
65
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  &.o-iconBtn--ghost {
70
70
  --int-states-mixin-bg-color: transparent;
71
- --btn-icon-fill: var(--dt-color-content-interactive-brand);
71
+ --btn-icon-fill: var(--dt-color-content-interactive-brand-solid);
72
72
 
73
73
  @include p.interactive-states('--dt-color-transparent', 'transparent');
74
74
  }
@@ -82,26 +82,27 @@
82
82
 
83
83
  &.o-iconBtn--inverse {
84
84
  --int-states-mixin-bg-color: var(--dt-color-interactive-inverse);
85
- --btn-icon-fill: var(--dt-color-content-interactive-brand);
85
+ --btn-icon-fill: var(--dt-color-content-interactive-brand-solid);
86
86
 
87
87
  @include p.interactive-states('--dt-color-interactive-inverse');
88
88
  }
89
89
 
90
90
  &.o-iconBtn--ghost-inverse {
91
91
  --int-states-mixin-bg-color: transparent;
92
- --btn-icon-fill: var(--dt-color-content-inverse);
92
+ --btn-icon-fill: var(--dt-color-content-interactive-primary-solid);
93
93
 
94
94
  @include p.interactive-states('--dt-color-transparent', 'transparent', '02');
95
95
  }
96
96
 
97
97
  &[disabled] {
98
- --btn-icon-fill: var(--dt-color-content-disabled);
98
+ --btn-icon-fill: var(--dt-color-content-disabled-solid);
99
99
 
100
100
  cursor: not-allowed;
101
101
 
102
102
  // For every variant (except ghost variants) set the disabled background color
103
103
  &:not(.o-iconBtn--ghost, .o-iconBtn--ghost-secondary, .o-iconBtn--ghost-inverse) {
104
104
  --int-states-mixin-bg-color: var(--dt-color-disabled-01);
105
+ --btn-icon-fill: var(--dt-color-content-disabled);
105
106
  }
106
107
 
107
108
  // For outline variants, set the border to the disabled color
package/src/index.ts CHANGED
@@ -1,11 +1,9 @@
1
- import {
2
- html, unsafeCSS,
3
- } from 'lit';
1
+ import { html, unsafeCSS } from 'lit';
4
2
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
5
3
  import { classMap } from 'lit/directives/class-map.js';
6
4
  import { property } from 'lit/decorators.js';
7
5
  import { ifDefined } from 'lit/directives/if-defined.js';
8
- import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
6
+ import { safeCustomElement, validPropertyValues, DelegatesFocusMixin } from '@justeattakeaway/pie-webc-core';
9
7
  import styles from './iconButton.scss?inline';
10
8
  import {
11
9
  type IconButtonProps, sizes, variants, defaultProps,
@@ -21,7 +19,7 @@ const componentSelector = 'pie-icon-button';
21
19
  * @tagname pie-icon-button
22
20
  */
23
21
  @safeCustomElement('pie-icon-button')
24
- export class PieIconButton extends PieElement implements IconButtonProps {
22
+ export class PieIconButton extends DelegatesFocusMixin(PieElement) implements IconButtonProps {
25
23
  @property({ type: Object })
26
24
  public aria: IconButtonProps['aria'];
27
25