@justeattakeaway/pie-icon-button 2.6.7 → 2.7.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/README.md +2 -2
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +24 -23
  4. package/dist/react.d.ts +2 -1
  5. package/package.json +1 -1
  6. package/src/defs.ts +2 -1
  7. package/src/index.ts +2 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # @justeattakeaway/pie-icon-button
1
+ `# @justeattakeaway/pie-icon-button
2
2
 
3
3
  [Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-icon-button) | [Design Documentation](https://pie.design/components/icon-button) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-icon-button)
4
4
 
@@ -33,7 +33,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
33
33
  ### Properties
34
34
  | Prop | Options | Description | Default |
35
35
  |------|---------|-------------|---------|
36
- | `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
+ | `aria` | `{ label?: string }`, `{ labelledby?: string }`, `{ describedby?: string }`, `{ expanded?: boolean }`, `{ controls?: string }`, `{ haspopup?: string }` | The ARIA attributes available to use on the icon button. Offers `label`, `labelledby`, `describedby`, `expanded`, `controls`, and `haspopup`. | `undefined` |
37
37
  | `size` | `"xsmall"`, `"small"`, `"medium"`, `"large"` | Set the size of the icon button. | `"medium"` |
38
38
  | `variant` | `"primary"`, `"primary-alternative"`, `"primary-alternative-dark"`, `"secondary"`, `"outline"`, `"ghost"`, `"ghost-secondary"`, `"ghost-secondary-dark"`, `"inverse"`, `"inverse-outline"`, `"ghost-inverse"`, `"ghost-inverse-light"`, `"translucent"` | Set the variant of the icon button. | `"primary"` |
39
39
  | `disabled` | `true`, `false` | If true, disables the icon button. | `false` |
package/dist/index.d.ts CHANGED
@@ -9,6 +9,7 @@ declare type AriaProps = {
9
9
  describedby?: string;
10
10
  expanded?: boolean;
11
11
  controls?: string;
12
+ haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
12
13
  };
13
14
 
14
15
  export declare type DefaultProps = ComponentDefaultProps<IconButtonProps, keyof Omit<IconButtonProps, 'aria'>>;
@@ -17,7 +18,7 @@ export declare const defaultProps: DefaultProps;
17
18
 
18
19
  export declare interface IconButtonProps {
19
20
  /**
20
- * The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
21
+ * The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded, controls and haspopup.
21
22
  */
22
23
  aria?: AriaProps;
23
24
  /**
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { LitElement as p, 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
- import { ifDefined as l } from "lit/directives/if-defined.js";
4
+ import { ifDefined as e } from "lit/directives/if-defined.js";
5
5
  import { DelegatesFocusMixin as u, validPropertyValues as g, safeCustomElement as k } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-spinner";
7
7
  const v = class v extends p {
@@ -9,7 +9,7 @@ const v = class v extends p {
9
9
  this.getAttribute("v") || this.setAttribute("v", v.v);
10
10
  }
11
11
  };
12
- v.v = "2.6.7";
12
+ v.v = "2.7.0";
13
13
  let h = v;
14
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);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--ghost-secondary-dark{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-dark-solid)}.o-iconBtn.o-iconBtn--ghost-secondary-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary-dark.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-dark:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-dark-bg) var(--dt-color-hover-01-dark), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-secondary-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary-dark.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-dark-bg) var(--dt-color-active-01-dark), 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--inverse-outline{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-primary-solid);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--inverse-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--inverse-outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse-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--inverse-outline: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--inverse-outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse-outline.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--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--ghost-inverse-light{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-light-solid)}.o-iconBtn.o-iconBtn--ghost-inverse-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse-light.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-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse-light.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-secondary-dark,.o-iconBtn--ghost-inverse,.o-iconBtn--ghost-inverse-light){--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,.o-iconBtn[disabled].o-iconBtn--inverse-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}", w = ["xsmall", "small", "medium", "large"], z = [
15
15
  "primary",
@@ -25,21 +25,21 @@ const y = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--bt
25
25
  "ghost-inverse",
26
26
  "ghost-inverse-light",
27
27
  "translucent"
28
- ], e = {
28
+ ], s = {
29
29
  size: "medium",
30
30
  variant: "primary",
31
31
  disabled: !1,
32
32
  isLoading: !1
33
33
  };
34
- var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (i, t, a, r) => {
35
- for (var o = r > 1 ? void 0 : r ? S(t, a) : t, c = i.length - 1, b; c >= 0; c--)
36
- (b = i[c]) && (o = (r ? b(t, a, o) : b(o)) || o);
34
+ var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (i, t, a, r) => {
35
+ for (var o = r > 1 ? void 0 : r ? S(t, a) : t, l = i.length - 1, b; l >= 0; l--)
36
+ (b = i[l]) && (o = (r ? b(t, a, o) : b(o)) || o);
37
37
  return r && o && $(t, a, o), o;
38
38
  };
39
39
  const B = "pie-icon-button";
40
40
  let n = class extends u(h) {
41
41
  constructor() {
42
- super(...arguments), this.size = e.size, this.variant = e.variant, this.disabled = e.disabled, this.isLoading = e.isLoading;
42
+ super(...arguments), this.size = s.size, this.variant = s.variant, this.disabled = s.disabled, this.isLoading = s.isLoading;
43
43
  }
44
44
  /**
45
45
  * Template for the loading state
@@ -62,7 +62,7 @@ let n = class extends u(h) {
62
62
  variant: a,
63
63
  isLoading: r,
64
64
  aria: o
65
- } = this, c = {
65
+ } = this, l = {
66
66
  "o-iconBtn": !0,
67
67
  [`o-iconBtn--${t}`]: !0,
68
68
  [`o-iconBtn--${a}`]: !0,
@@ -70,42 +70,43 @@ let n = class extends u(h) {
70
70
  };
71
71
  return m`
72
72
  <button
73
- class="${f(c)}"
73
+ class="${f(l)}"
74
74
  data-test-id="pie-icon-button"
75
75
  ?disabled="${i}"
76
- aria-label="${l(o == null ? void 0 : o.label)}"
77
- aria-labelledby="${l(o == null ? void 0 : o.labelledby)}"
78
- aria-describedby="${l(o == null ? void 0 : o.describedby)}"
79
- aria-expanded="${l(o == null ? void 0 : o.expanded)}"
80
- aria-controls="${l(o == null ? void 0 : o.controls)}">
76
+ aria-label="${e(o == null ? void 0 : o.label)}"
77
+ aria-labelledby="${e(o == null ? void 0 : o.labelledby)}"
78
+ aria-describedby="${e(o == null ? void 0 : o.describedby)}"
79
+ aria-expanded="${e(o == null ? void 0 : o.expanded)}"
80
+ aria-controls="${e(o == null ? void 0 : o.controls)}"
81
+ aria-haspopup="${e(o == null ? void 0 : o.haspopup)}">
81
82
  ${r ? this.renderSpinner() : m`<slot></slot>`}
82
83
  </button>`;
83
84
  }
84
85
  };
85
86
  n.styles = x(y);
86
- s([
87
+ c([
87
88
  d({ type: Object })
88
89
  ], n.prototype, "aria", 2);
89
- s([
90
+ c([
90
91
  d({ type: String }),
91
- g(B, w, e.size)
92
+ g(B, w, s.size)
92
93
  ], n.prototype, "size", 2);
93
- s([
94
+ c([
94
95
  d({ type: String }),
95
- g(B, z, e.variant)
96
+ g(B, z, s.variant)
96
97
  ], n.prototype, "variant", 2);
97
- s([
98
+ c([
98
99
  d({ type: Boolean })
99
100
  ], n.prototype, "disabled", 2);
100
- s([
101
+ c([
101
102
  d({ type: Boolean })
102
103
  ], n.prototype, "isLoading", 2);
103
- n = s([
104
+ n = c([
104
105
  k("pie-icon-button")
105
106
  ], n);
106
107
  export {
107
108
  n as PieIconButton,
108
- e as defaultProps,
109
+ s as defaultProps,
109
110
  w as sizes,
110
111
  z as variants
111
112
  };
package/dist/react.d.ts CHANGED
@@ -10,6 +10,7 @@ declare type AriaProps = {
10
10
  describedby?: string;
11
11
  expanded?: boolean;
12
12
  controls?: string;
13
+ haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
13
14
  };
14
15
 
15
16
  export declare type DefaultProps = ComponentDefaultProps<IconButtonProps, keyof Omit<IconButtonProps, 'aria'>>;
@@ -18,7 +19,7 @@ export declare const defaultProps: DefaultProps;
18
19
 
19
20
  export declare interface IconButtonProps {
20
21
  /**
21
- * The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
22
+ * The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded, controls and haspopup.
22
23
  */
23
24
  aria?: AriaProps;
24
25
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "2.6.7",
3
+ "version": "2.7.0",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
5
  "repository": {
6
6
  "type": "git",
package/src/defs.ts CHANGED
@@ -10,11 +10,12 @@ type AriaProps = {
10
10
  describedby?: string;
11
11
  expanded?: boolean;
12
12
  controls?: string;
13
+ haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
13
14
  };
14
15
 
15
16
  export interface IconButtonProps {
16
17
  /**
17
- * The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
18
+ * The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded, controls and haspopup.
18
19
  */
19
20
  aria?: AriaProps;
20
21
 
package/src/index.ts CHANGED
@@ -81,7 +81,8 @@ export class PieIconButton extends DelegatesFocusMixin(PieElement) implements Ic
81
81
  aria-labelledby="${ifDefined(aria?.labelledby)}"
82
82
  aria-describedby="${ifDefined(aria?.describedby)}"
83
83
  aria-expanded="${ifDefined(aria?.expanded)}"
84
- aria-controls="${ifDefined(aria?.controls)}">
84
+ aria-controls="${ifDefined(aria?.controls)}"
85
+ aria-haspopup="${ifDefined(aria?.haspopup)}">
85
86
  ${isLoading ? this.renderSpinner() : html`<slot></slot>`}
86
87
  </button>`;
87
88
  }