@justeattakeaway/pie-chip 0.15.20 → 0.15.21

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 (4) hide show
  1. package/dist/index.js +35 -35
  2. package/package.json +5 -5
  3. package/src/chip.scss +1 -1
  4. package/src/index.ts +3 -3
package/dist/index.js CHANGED
@@ -10,9 +10,9 @@ const v = class v extends _ {
10
10
  this.getAttribute("v") || this.setAttribute("v", v.v);
11
11
  }
12
12
  };
13
- v.v = "0.15.20";
13
+ v.v = "0.15.21";
14
14
  let u = v;
15
- const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:var(--chip-border-width) solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-family:inherit;font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-interactive-xs-weight)}.c-chip: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)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.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)){.c-chip: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))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.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))}}.c-chip.c-chip--outline{--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-interactive-secondary-solid)}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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))}}.c-chip.c-chip--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--chip-color: var(--dt-color-content-interactive-secondary-solid);--chip-border-color: var(--dt-color-border-neutral)}.c-chip.c-chip--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)))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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)){.c-chip.c-chip--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))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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))}}.c-chip.c-chip--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary);--chip-border-color: transparent}.c-chip.c-chip--selected: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)))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.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)){.c-chip.c-chip--selected: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))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.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))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-disabled-solid)}.c-chip.is-disabled.c-chip--outline,.c-chip.is-disabled.c-chip--translucent{--chip-border-color: var(--dt-color-disabled-01)}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}[type=checkbox]:focus-visible{outline:none}[type=checkbox]:focus-visible+.c-chip{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", z = ["default", "outline", "ghost", "translucent"], P = ["button", "checkbox"], a = {
15
+ const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:var(--chip-border-width) solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-family:inherit;font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-interactive-xs-weight)}.c-chip: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)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.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)){.c-chip: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))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.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))}}.c-chip.c-chip--outline{--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-interactive-secondary-solid)}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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))}}.c-chip.c-chip--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--chip-color: var(--dt-color-content-interactive-secondary-solid);--chip-border-color: var(--dt-color-border-neutral)}.c-chip.c-chip--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)))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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)){.c-chip.c-chip--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))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--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))}}.c-chip.is-selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary);--chip-border-color: transparent}.c-chip.is-selected: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)))}.c-chip.is-selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-selected.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)){.c-chip.is-selected: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))}.c-chip.is-selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-selected.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))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-disabled-solid)}.c-chip.is-disabled.c-chip--outline,.c-chip.is-disabled.c-chip--translucent{--chip-border-color: var(--dt-color-disabled-01)}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}[type=checkbox]:focus-visible{outline:none}[type=checkbox]:focus-visible+.c-chip{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", z = ["default", "outline", "ghost", "translucent"], P = ["button", "checkbox"], a = {
16
16
  variant: "default",
17
17
  disabled: !1,
18
18
  isSelected: !1,
@@ -20,13 +20,13 @@ const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:hos
20
20
  isDismissible: !1,
21
21
  type: "button"
22
22
  };
23
- var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (i, c, t, o) => {
24
- for (var e = o > 1 ? void 0 : o ? O(c, t) : c, r = i.length - 1, h; r >= 0; r--)
25
- (h = i[r]) && (e = (o ? h(c, t, e) : h(e)) || e);
26
- return o && e && E(c, t, e), e;
23
+ var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (i, r, t, o) => {
24
+ for (var e = o > 1 ? void 0 : o ? O(r, t) : r, s = i.length - 1, h; s >= 0; s--)
25
+ (h = i[s]) && (e = (o ? h(r, t, e) : h(e)) || e);
26
+ return o && e && E(r, t, e), e;
27
27
  };
28
28
  const k = "pie-chip";
29
- let s = class extends D(u) {
29
+ let c = class extends D(u) {
30
30
  constructor() {
31
31
  super(...arguments), this.variant = a.variant, this.type = a.type, this.disabled = a.disabled, this.isSelected = a.isSelected, this.isLoading = a.isLoading, this.isDismissible = a.isDismissible;
32
32
  }
@@ -72,14 +72,14 @@ let s = class extends D(u) {
72
72
  _renderCheckbox() {
73
73
  const {
74
74
  aria: i,
75
- variant: c,
75
+ variant: r,
76
76
  disabled: t,
77
77
  isSelected: o,
78
78
  isLoading: e
79
- } = this, r = {
79
+ } = this, s = {
80
80
  "c-chip": !0,
81
- [`c-chip--${c}`]: !0,
82
- "c-chip--selected": o,
81
+ [`c-chip--${r}`]: !0,
82
+ "is-selected": o,
83
83
  "is-disabled": t,
84
84
  "is-loading": e
85
85
  };
@@ -94,7 +94,7 @@ let s = class extends D(u) {
94
94
  @change="${this._onCheckboxChange}"/>
95
95
  <label
96
96
  for="pie-chip"
97
- class=${g(r)}
97
+ class=${g(s)}
98
98
  data-test-id="pie-chip">
99
99
  ${this._renderContent()}
100
100
  </label>`;
@@ -102,14 +102,14 @@ let s = class extends D(u) {
102
102
  _renderButton() {
103
103
  const {
104
104
  aria: i,
105
- variant: c,
105
+ variant: r,
106
106
  disabled: t,
107
107
  isSelected: o,
108
108
  isLoading: e
109
- } = this, r = {
109
+ } = this, s = {
110
110
  "c-chip": !0,
111
- [`c-chip--${c}`]: !0,
112
- "c-chip--selected": o,
111
+ [`c-chip--${r}`]: !0,
112
+ "is-selected": o,
113
113
  "is-disabled": t,
114
114
  "is-loading": e
115
115
  };
@@ -117,7 +117,7 @@ let s = class extends D(u) {
117
117
  <button
118
118
  id="pie-chip"
119
119
  type="button"
120
- class=${g(r)}
120
+ class=${g(s)}
121
121
  aria-busy="${n(e)}"
122
122
  aria-haspopup="${n(i == null ? void 0 : i.haspopup)}"
123
123
  aria-expanded="${n(i == null ? void 0 : i.expanded)}"
@@ -136,19 +136,19 @@ let s = class extends D(u) {
136
136
  var m, f;
137
137
  const {
138
138
  variant: i,
139
- disabled: c,
139
+ disabled: r,
140
140
  isSelected: t,
141
141
  isLoading: o,
142
142
  isDismissible: e
143
- } = this, r = e && t, h = {
143
+ } = this, s = e && t, h = {
144
144
  "c-chip": !0,
145
145
  [`c-chip--${i}`]: !0,
146
- "c-chip--selected": t,
147
- "is-dismissible": r,
148
- "is-disabled": c,
146
+ "is-selected": t,
147
+ "is-dismissible": s,
148
+ "is-disabled": r,
149
149
  "is-loading": o
150
150
  }, w = (b) => {
151
- (c || e) && (b.preventDefault(), b.stopPropagation());
151
+ (r || e) && (b.preventDefault(), b.stopPropagation());
152
152
  }, $ = (b) => {
153
153
  b.stopPropagation();
154
154
  const C = new Event("close", { bubbles: !0, composed: !0 });
@@ -163,7 +163,7 @@ let s = class extends D(u) {
163
163
  data-test-id="pie-chip"
164
164
  @click=${w}>
165
165
  ${this._renderContent()}
166
- ${r ? p`<button
166
+ ${s ? p`<button
167
167
  @click="${$}"
168
168
  ?disabled=${this.disabled}
169
169
  aria-label="${n((f = this.aria) == null ? void 0 : f.close)}"
@@ -177,35 +177,35 @@ let s = class extends D(u) {
177
177
  return this.isDismissible ? this._renderDismissible() : this.type === "checkbox" ? this._renderCheckbox() : this._renderButton();
178
178
  }
179
179
  };
180
- s.styles = S(L);
180
+ c.styles = S(L);
181
181
  l([
182
182
  d({ type: String }),
183
183
  y(k, z, a.variant)
184
- ], s.prototype, "variant", 2);
184
+ ], c.prototype, "variant", 2);
185
185
  l([
186
186
  d({ type: String }),
187
187
  y(k, P, a.type)
188
- ], s.prototype, "type", 2);
188
+ ], c.prototype, "type", 2);
189
189
  l([
190
190
  d({ type: Boolean, reflect: !0 })
191
- ], s.prototype, "disabled", 2);
191
+ ], c.prototype, "disabled", 2);
192
192
  l([
193
193
  d({ type: Boolean, reflect: !0 })
194
- ], s.prototype, "isSelected", 2);
194
+ ], c.prototype, "isSelected", 2);
195
195
  l([
196
196
  d({ type: Boolean, reflect: !0 })
197
- ], s.prototype, "isLoading", 2);
197
+ ], c.prototype, "isLoading", 2);
198
198
  l([
199
199
  d({ type: Boolean })
200
- ], s.prototype, "isDismissible", 2);
200
+ ], c.prototype, "isDismissible", 2);
201
201
  l([
202
202
  d({ type: Object })
203
- ], s.prototype, "aria", 2);
204
- s = l([
203
+ ], c.prototype, "aria", 2);
204
+ c = l([
205
205
  B("pie-chip")
206
- ], s);
206
+ ], c);
207
207
  export {
208
- s as PieChip,
208
+ c as PieChip,
209
209
  a as defaultProps,
210
210
  P as types,
211
211
  z as variants
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-chip",
3
3
  "description": "PIE Design System Chip built using Web Components",
4
- "version": "0.15.20",
4
+ "version": "0.15.21",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,14 +45,14 @@
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
47
  "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "0.32.0",
48
+ "@justeattakeaway/pie-css": "1.0.0",
49
49
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
50
50
  "cem-plugin-module-file-extensions": "0.0.5"
51
51
  },
52
52
  "dependencies": {
53
- "@justeattakeaway/pie-icons-webc": "1.21.1",
54
- "@justeattakeaway/pie-spinner": "1.4.10",
55
- "@justeattakeaway/pie-webc-core": "12.0.0"
53
+ "@justeattakeaway/pie-icons-webc": "1.21.2",
54
+ "@justeattakeaway/pie-spinner": "1.4.11",
55
+ "@justeattakeaway/pie-webc-core": "13.0.0"
56
56
  },
57
57
  "volta": {
58
58
  "extends": "../../../package.json"
package/src/chip.scss CHANGED
@@ -72,7 +72,7 @@
72
72
  @include p.interactive-states('--dt-color-container-neutral');
73
73
  }
74
74
 
75
- &.c-chip--selected {
75
+ &.is-selected {
76
76
  --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
77
77
  --chip-color: var(--dt-color-content-interactive-primary);
78
78
  --chip-border-color: transparent;
package/src/index.ts CHANGED
@@ -116,7 +116,7 @@ export class PieChip extends DelegatesFocusMixin(PieElement) implements ChipProp
116
116
  const classes = {
117
117
  'c-chip': true,
118
118
  [`c-chip--${variant}`]: true,
119
- 'c-chip--selected': isSelected,
119
+ 'is-selected': isSelected,
120
120
  'is-disabled': disabled,
121
121
  'is-loading': isLoading,
122
122
  };
@@ -150,7 +150,7 @@ export class PieChip extends DelegatesFocusMixin(PieElement) implements ChipProp
150
150
  const classes = {
151
151
  'c-chip': true,
152
152
  [`c-chip--${variant}`]: true,
153
- 'c-chip--selected': isSelected,
153
+ 'is-selected': isSelected,
154
154
  'is-disabled': disabled,
155
155
  'is-loading': isLoading,
156
156
  };
@@ -189,7 +189,7 @@ export class PieChip extends DelegatesFocusMixin(PieElement) implements ChipProp
189
189
  const classes = {
190
190
  'c-chip': true,
191
191
  [`c-chip--${variant}`]: true,
192
- 'c-chip--selected': isSelected,
192
+ 'is-selected': isSelected,
193
193
  'is-dismissible': showCloseButton,
194
194
  'is-disabled': disabled,
195
195
  'is-loading': isLoading,