@justeattakeaway/pie-icon-button 2.1.0 → 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 -9
  2. package/dist/index.d.ts +3 -7
  3. package/dist/index.js +32 -33
  4. package/dist/react.d.ts +3 -7
  5. package/package.json +5 -5
  6. package/src/iconButton.scss +7 -6
  7. package/src/index.ts +3 -7
package/custom-elements.json CHANGED
@@ -101,15 +101,6 @@
101
101
  "name": "isLoading",
102
102
  "privacy": "public"
103
103
  },
104
- {
105
- "kind": "field",
106
- "name": "shadowRootOptions",
107
- "type": {
108
- "text": "object"
109
- },
110
- "static": true,
111
- "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
112
- },
113
104
  {
114
105
  "kind": "method",
115
106
  "name": "renderSpinner",
@@ -117,6 +108,12 @@
117
108
  "description": "Template for the loading state"
118
109
  }
119
110
  ],
111
+ "mixins": [
112
+ {
113
+ "name": "DelegatesFocusMixin",
114
+ "package": "@justeattakeaway/pie-webc-core"
115
+ }
116
+ ],
120
117
  "superclass": {
121
118
  "name": "PieElement",
122
119
  "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
package/dist/index.d.ts CHANGED
@@ -45,18 +45,12 @@ 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";
52
52
  disabled: boolean;
53
53
  isLoading: boolean;
54
- static shadowRootOptions: {
55
- delegatesFocus: boolean;
56
- mode: ShadowRootMode;
57
- serializable?: boolean;
58
- slotAssignment?: SlotAssignmentMode;
59
- };
60
54
  /**
61
55
  * Template for the loading state
62
56
  *
@@ -67,6 +61,8 @@ export declare class PieIconButton extends PieElement implements IconButtonProps
67
61
  static styles: CSSResult;
68
62
  }
69
63
 
64
+ declare const PieIconButton_base: typeof PieElement;
65
+
70
66
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
71
67
 
72
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 g, 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 p, 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
- const v = class v extends g {
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.1.0";
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",
@@ -25,13 +25,13 @@ const y = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--bt
25
25
  disabled: !1,
26
26
  isLoading: !1
27
27
  };
28
- var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (i, n, e, t) => {
29
- for (var o = t > 1 ? void 0 : t ? $(n, e) : n, c = i.length - 1, b; c >= 0; c--)
30
- (b = i[c]) && (o = (t ? b(n, e, o) : b(o)) || o);
31
- return t && o && w(n, e, o), o;
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
+ (b = i[c]) && (o = (r ? b(t, e, o) : b(o)) || o);
31
+ return r && o && $(t, e, o), o;
32
32
  };
33
- const B = "pie-icon-button";
34
- let r = class extends h {
33
+ const p = "pie-icon-button";
34
+ let n = class extends u(h) {
35
35
  constructor() {
36
36
  super(...arguments), this.size = s.size, this.variant = s.variant, this.disabled = s.disabled, this.isLoading = s.isLoading;
37
37
  }
@@ -41,26 +41,26 @@ let r = class extends h {
41
41
  * @private
42
42
  */
43
43
  renderSpinner() {
44
- const { variant: i, size: n, disabled: e } = this, t = n === "xsmall" ? "small" : "medium";
44
+ const { variant: i, size: t, disabled: e } = this, r = t === "xsmall" ? "small" : "medium";
45
45
  let o = "brand";
46
46
  return i != null && i.includes("secondary") && (o = "secondary"), (i === "primary" && !e || i === "ghost-inverse") && (o = "inverse"), m`
47
47
  <pie-spinner
48
- size="${t}"
48
+ size="${r}"
49
49
  variant="${o}">
50
50
  </pie-spinner>`;
51
51
  }
52
52
  render() {
53
53
  const {
54
54
  disabled: i,
55
- size: n,
55
+ size: t,
56
56
  variant: e,
57
- isLoading: t,
57
+ isLoading: r,
58
58
  aria: o
59
59
  } = this, c = {
60
60
  "o-iconBtn": !0,
61
- [`o-iconBtn--${n}`]: !0,
61
+ [`o-iconBtn--${t}`]: !0,
62
62
  [`o-iconBtn--${e}`]: !0,
63
- "is-loading": t
63
+ "is-loading": r
64
64
  };
65
65
  return m`
66
66
  <button
@@ -72,35 +72,34 @@ let r = class extends h {
72
72
  aria-describedby="${l(o == null ? void 0 : o.describedby)}"
73
73
  aria-expanded="${l(o == null ? void 0 : o.expanded)}"
74
74
  aria-controls="${l(o == null ? void 0 : o.controls)}">
75
- ${t ? this.renderSpinner() : m`<slot></slot>`}
75
+ ${r ? this.renderSpinner() : m`<slot></slot>`}
76
76
  </button>`;
77
77
  }
78
78
  };
79
- r.shadowRootOptions = { ...g.shadowRootOptions, delegatesFocus: !0 };
80
- r.styles = x(y);
79
+ n.styles = x(k);
81
80
  a([
82
81
  d({ type: Object })
83
- ], r.prototype, "aria", 2);
82
+ ], n.prototype, "aria", 2);
84
83
  a([
85
84
  d({ type: String }),
86
- p(B, k, s.size)
87
- ], r.prototype, "size", 2);
85
+ g(p, z, s.size)
86
+ ], n.prototype, "size", 2);
88
87
  a([
89
88
  d({ type: String }),
90
- p(B, z, s.variant)
91
- ], r.prototype, "variant", 2);
89
+ g(p, w, s.variant)
90
+ ], n.prototype, "variant", 2);
92
91
  a([
93
92
  d({ type: Boolean })
94
- ], r.prototype, "disabled", 2);
93
+ ], n.prototype, "disabled", 2);
95
94
  a([
96
95
  d({ type: Boolean })
97
- ], r.prototype, "isLoading", 2);
98
- r = a([
99
- u("pie-icon-button")
100
- ], r);
96
+ ], n.prototype, "isLoading", 2);
97
+ n = a([
98
+ y("pie-icon-button")
99
+ ], n);
101
100
  export {
102
- r as PieIconButton,
101
+ n as PieIconButton,
103
102
  s as defaultProps,
104
- k as sizes,
105
- z as variants
103
+ z as sizes,
104
+ w as variants
106
105
  };
package/dist/react.d.ts CHANGED
@@ -48,18 +48,12 @@ 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";
55
55
  disabled: boolean;
56
56
  isLoading: boolean;
57
- static shadowRootOptions: {
58
- delegatesFocus: boolean;
59
- mode: ShadowRootMode;
60
- serializable?: boolean;
61
- slotAssignment?: SlotAssignmentMode;
62
- };
63
57
  /**
64
58
  * Template for the loading state
65
59
  *
@@ -70,6 +64,8 @@ declare class PieIconButton_2 extends PieElement implements IconButtonProps {
70
64
  static styles: CSSResult;
71
65
  }
72
66
 
67
+ declare const PieIconButton_base: typeof PieElement;
68
+
73
69
  declare type ReactBaseType = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
74
70
 
75
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.1.0",
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.21.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, LitElement, 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
 
@@ -39,8 +37,6 @@ export class PieIconButton extends PieElement implements IconButtonProps {
39
37
  @property({ type: Boolean })
40
38
  public isLoading = defaultProps.isLoading;
41
39
 
42
- static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
43
-
44
40
  /**
45
41
  * Template for the loading state
46
42
  *