@justeattakeaway/pie-icon-button 2.3.5 → 2.5.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 (9) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +27 -25
  5. package/dist/react.d.ts +2 -2
  6. package/package.json +5 -5
  7. package/src/defs.ts +1 -1
  8. package/src/iconButton.scss +15 -1
  9. package/src/index.ts +1 -1
package/README.md CHANGED
@@ -34,7 +34,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
34
34
  |------|---------|-------------|---------|
35
35
  | `aria` | `{ label?: string }`, `{ labelledby?: string }`, `{ describedby?: string }`, `{ expanded?: boolean }`, `{ controls?: string }` | The ARIA attributes available to use on the icon button. Offers `label`, `labelledby`, `describedby`, `expanded` and `controls`. | `undefined` |
36
36
  | `size` | `"xsmall"`, `"small"`, `"medium"`, `"large"` | Set the size of the icon button. | `"medium"` |
37
- | `variant` | `"primary"`, `"secondary"`, `"outline"`, `"ghost"`, `"ghost-secondary"`, `"inverse"`, `"ghost-inverse"`, `"translucent"` | Set the variant of the icon button. | `"primary"` |
37
+ | `variant` | `"primary"`, `"primary-alternative"`, `"primary-alternative-dark"`, `"secondary"`, `"outline"`, `"ghost"`, `"ghost-secondary"`, `"inverse"`, `"ghost-inverse"`, `"translucent"` | Set the variant of the icon button. | `"primary"` |
38
38
  | `disabled` | `true`, `false` | If true, disables the icon button. | `false` |
39
39
  | `isLoading` | `true`, `false` | If true, displays a loading indicator inside the icon button. | `false` |
40
40
 
package/custom-elements.json CHANGED
@@ -24,9 +24,9 @@
24
24
  "kind": "variable",
25
25
  "name": "variants",
26
26
  "type": {
27
- "text": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent']"
27
+ "text": "['primary', 'primary-alternative', 'primary-alternative-dark', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent']"
28
28
  },
29
- "default": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent']"
29
+ "default": "['primary', 'primary-alternative', 'primary-alternative-dark', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent']"
30
30
  },
31
31
  {
32
32
  "kind": "variable",
package/dist/index.d.ts CHANGED
@@ -48,7 +48,7 @@ export declare interface IconButtonProps {
48
48
  export declare class PieIconButton extends PieIconButton_base implements IconButtonProps {
49
49
  aria: IconButtonProps['aria'];
50
50
  size: "xsmall" | "small" | "medium" | "large";
51
- variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse" | "translucent";
51
+ variant: "primary" | "primary-alternative" | "primary-alternative-dark" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse" | "translucent";
52
52
  disabled: boolean;
53
53
  isLoading: boolean;
54
54
  /**
@@ -65,6 +65,6 @@ declare const PieIconButton_base: typeof PieElement;
65
65
 
66
66
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
67
67
 
68
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse", "translucent"];
68
+ export declare const variants: readonly ["primary", "primary-alternative", "primary-alternative-dark", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse", "translucent"];
69
69
 
70
70
  export { }
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { LitElement as p, html as m, unsafeCSS as u } from "lit";
2
- import { classMap as x } from "lit/directives/class-map.js";
1
+ import { LitElement as p, html as m, unsafeCSS as x } from "lit";
2
+ import { classMap as u } 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
5
  import { DelegatesFocusMixin as f, validPropertyValues as g, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
@@ -9,10 +9,12 @@ const v = class v extends p {
9
9
  this.getAttribute("v") || this.setAttribute("v", v.v);
10
10
  }
11
11
  };
12
- v.v = "2.3.5";
12
+ v.v = "2.5.0";
13
13
  let h = v;
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);block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));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.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.o-iconBtn--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--btn-icon-fill: var(--dt-color-content-interactive-secondary-solid);-webkit-backdrop-filter:blur(var(--dt-blur-neutral));backdrop-filter:blur(var(--dt-blur-neutral));border:1px solid var(--dt-color-border-neutral)}.o-iconBtn.o-iconBtn--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--translucent.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-neutral))}.o-iconBtn.o-iconBtn--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--translucent.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-neutral))}}.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,.o-iconBtn[disabled].o-iconBtn--translucent{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 = [
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);block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));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.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--primary-alternative{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-icon-fill: var(--dt-color-content-interactive-primary)}.o-iconBtn.o-iconBtn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary-alternative.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary-alternative: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-interactive-primary))}.o-iconBtn.o-iconBtn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary-alternative.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-interactive-primary))}}.o-iconBtn.o-iconBtn--primary-alternative-dark{--int-states-mixin-bg-color: var(--dt-color-interactive-dark);--btn-icon-fill: var(--dt-color-content-interactive-light)}.o-iconBtn.o-iconBtn--primary-alternative-dark:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary-alternative-dark.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary-alternative-dark: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-interactive-dark))}.o-iconBtn.o-iconBtn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary-alternative-dark.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-interactive-dark))}}.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.o-iconBtn--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--btn-icon-fill: var(--dt-color-content-interactive-secondary-solid);-webkit-backdrop-filter:blur(var(--dt-blur-neutral));backdrop-filter:blur(var(--dt-blur-neutral));border:1px solid var(--dt-color-border-neutral)}.o-iconBtn.o-iconBtn--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--translucent.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-neutral))}.o-iconBtn.o-iconBtn--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--translucent.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-neutral))}}.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,.o-iconBtn[disabled].o-iconBtn--translucent{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}", w = ["xsmall", "small", "medium", "large"], z = [
15
15
  "primary",
16
+ "primary-alternative",
17
+ "primary-alternative-dark",
16
18
  "secondary",
17
19
  "outline",
18
20
  "ghost",
@@ -20,21 +22,21 @@ const k = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--bt
20
22
  "inverse",
21
23
  "ghost-inverse",
22
24
  "translucent"
23
- ], a = {
25
+ ], e = {
24
26
  size: "medium",
25
27
  variant: "primary",
26
28
  disabled: !1,
27
29
  isLoading: !1
28
30
  };
29
- var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (t, r, e, i) => {
30
- for (var o = i > 1 ? void 0 : i ? S(r, e) : r, c = t.length - 1, b; c >= 0; c--)
31
- (b = t[c]) && (o = (i ? b(r, e, o) : b(o)) || o);
32
- return i && o && $(r, e, o), o;
31
+ var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (r, t, a, i) => {
32
+ for (var o = i > 1 ? void 0 : i ? S(t, a) : t, c = r.length - 1, b; c >= 0; c--)
33
+ (b = r[c]) && (o = (i ? b(t, a, o) : b(o)) || o);
34
+ return i && o && $(t, a, o), o;
33
35
  };
34
36
  const B = "pie-icon-button";
35
37
  let n = class extends f(h) {
36
38
  constructor() {
37
- super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
39
+ super(...arguments), this.size = e.size, this.variant = e.variant, this.disabled = e.disabled, this.isLoading = e.isLoading;
38
40
  }
39
41
  /**
40
42
  * Template for the loading state
@@ -42,9 +44,9 @@ let n = class extends f(h) {
42
44
  * @private
43
45
  */
44
46
  renderSpinner() {
45
- const { variant: t, size: r, disabled: e } = this, i = r === "xsmall" ? "small" : "medium";
47
+ const { variant: r, size: t, disabled: a } = this, i = t === "xsmall" ? "small" : "medium";
46
48
  let o = "brand";
47
- return /secondary|translucent/.test(t) && (o = "secondary"), (t === "primary" && !e || t === "ghost-inverse") && (o = "inverse"), m`
49
+ return /secondary|translucent/.test(r) && (o = "secondary"), (r.includes("primary") && !a || r === "ghost-inverse") && (o = "inverse"), m`
48
50
  <pie-spinner
49
51
  size="${i}"
50
52
  variant="${o}">
@@ -52,22 +54,22 @@ let n = class extends f(h) {
52
54
  }
53
55
  render() {
54
56
  const {
55
- disabled: t,
56
- size: r,
57
- variant: e,
57
+ disabled: r,
58
+ size: t,
59
+ variant: a,
58
60
  isLoading: i,
59
61
  aria: o
60
62
  } = this, c = {
61
63
  "o-iconBtn": !0,
62
- [`o-iconBtn--${r}`]: !0,
63
- [`o-iconBtn--${e}`]: !0,
64
+ [`o-iconBtn--${t}`]: !0,
65
+ [`o-iconBtn--${a}`]: !0,
64
66
  "is-loading": i
65
67
  };
66
68
  return m`
67
69
  <button
68
- class="${x(c)}"
70
+ class="${u(c)}"
69
71
  data-test-id="pie-icon-button"
70
- ?disabled="${t}"
72
+ ?disabled="${r}"
71
73
  aria-label="${l(o == null ? void 0 : o.label)}"
72
74
  aria-labelledby="${l(o == null ? void 0 : o.labelledby)}"
73
75
  aria-describedby="${l(o == null ? void 0 : o.describedby)}"
@@ -77,17 +79,17 @@ let n = class extends f(h) {
77
79
  </button>`;
78
80
  }
79
81
  };
80
- n.styles = u(k);
82
+ n.styles = x(k);
81
83
  s([
82
84
  d({ type: Object })
83
85
  ], n.prototype, "aria", 2);
84
86
  s([
85
87
  d({ type: String }),
86
- g(B, z, a.size)
88
+ g(B, w, e.size)
87
89
  ], n.prototype, "size", 2);
88
90
  s([
89
91
  d({ type: String }),
90
- g(B, w, a.variant)
92
+ g(B, z, e.variant)
91
93
  ], n.prototype, "variant", 2);
92
94
  s([
93
95
  d({ type: Boolean })
@@ -100,7 +102,7 @@ n = s([
100
102
  ], n);
101
103
  export {
102
104
  n as PieIconButton,
103
- a as defaultProps,
104
- z as sizes,
105
- w as variants
105
+ e as defaultProps,
106
+ w as sizes,
107
+ z as variants
106
108
  };
package/dist/react.d.ts CHANGED
@@ -51,7 +51,7 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<React_2.Pr
51
51
  declare class PieIconButton_2 extends PieIconButton_base implements IconButtonProps {
52
52
  aria: IconButtonProps['aria'];
53
53
  size: "xsmall" | "small" | "medium" | "large";
54
- variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse" | "translucent";
54
+ variant: "primary" | "primary-alternative" | "primary-alternative-dark" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse" | "translucent";
55
55
  disabled: boolean;
56
56
  isLoading: boolean;
57
57
  /**
@@ -70,6 +70,6 @@ declare type ReactBaseType = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
70
70
 
71
71
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
72
72
 
73
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse", "translucent"];
73
+ export declare const variants: readonly ["primary", "primary-alternative", "primary-alternative-dark", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse", "translucent"];
74
74
 
75
75
  export { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "2.3.5",
3
+ "version": "2.5.0",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -44,15 +44,15 @@
44
44
  "devDependencies": {
45
45
  "@custom-elements-manifest/analyzer": "0.9.0",
46
46
  "@justeattakeaway/pie-components-config": "0.21.0",
47
- "@justeattakeaway/pie-css": "0.26.0",
47
+ "@justeattakeaway/pie-css": "0.26.1",
48
48
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
49
49
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
50
50
  "cem-plugin-module-file-extensions": "0.0.5"
51
51
  },
52
52
  "dependencies": {
53
- "@justeattakeaway/pie-icons-webc": "1.18.1",
54
- "@justeattakeaway/pie-spinner": "1.3.6",
55
- "@justeattakeaway/pie-webc-core": "6.0.0"
53
+ "@justeattakeaway/pie-icons-webc": "1.18.2",
54
+ "@justeattakeaway/pie-spinner": "1.3.7",
55
+ "@justeattakeaway/pie-webc-core": "6.0.1"
56
56
  },
57
57
  "volta": {
58
58
  "extends": "../../../package.json"
package/src/defs.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
 
3
3
  export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
4
- export const variants = ['primary', 'secondary', 'outline', 'ghost',
4
+ export const variants = ['primary', 'primary-alternative', 'primary-alternative-dark', 'secondary', 'outline', 'ghost',
5
5
  'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent'] as const;
6
6
 
7
7
  type AriaProps = {
package/src/iconButton.scss CHANGED
@@ -43,6 +43,20 @@
43
43
  @include p.interactive-states('--dt-color-interactive-brand');
44
44
  }
45
45
 
46
+ &.o-iconBtn--primary-alternative {
47
+ --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
48
+ --btn-icon-fill: var(--dt-color-content-interactive-primary);
49
+
50
+ @include p.interactive-states('--dt-color-interactive-primary', 'inverse', '02');
51
+ }
52
+
53
+ &.o-iconBtn--primary-alternative-dark {
54
+ --int-states-mixin-bg-color: var(--dt-color-interactive-dark);
55
+ --btn-icon-fill: var(--dt-color-content-interactive-light);
56
+
57
+ @include p.interactive-states('--dt-color-interactive-dark', 'inverse', '02');
58
+ }
59
+
46
60
  &.o-iconBtn--secondary {
47
61
  --int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
48
62
  --btn-icon-fill: var(--dt-color-content-interactive-secondary-solid);
@@ -109,7 +123,7 @@
109
123
  }
110
124
 
111
125
  // For outline variants, set the border to the disabled color
112
- &.o-iconBtn--outline,
126
+ &.o-iconBtn--outline,
113
127
  &.o-iconBtn--translucent {
114
128
  border-color: var(--dt-color-disabled-01);
115
129
  }
package/src/index.ts CHANGED
@@ -47,7 +47,7 @@ export class PieIconButton extends DelegatesFocusMixin(PieElement) implements Ic
47
47
  const spinnerSize = size === 'xsmall' ? 'small' : 'medium';
48
48
  let spinnerVariant = 'brand';
49
49
  if (/secondary|translucent/.test(variant)) spinnerVariant = 'secondary';
50
- if ((variant === 'primary' && !disabled) || variant === 'ghost-inverse') spinnerVariant = 'inverse';
50
+ if ((variant.includes('primary') && !disabled) || variant === 'ghost-inverse') spinnerVariant = 'inverse';
51
51
 
52
52
  return html`
53
53
  <pie-spinner