@justeattakeaway/pie-chip 0.11.4 → 0.12.0

package/dist/index.js

@@ -1,36 +1,31 @@
-import { LitElement as x, html as h, nothing as m, unsafeCSS as y } from "lit";
-import { property as c } from "lit/decorators.js";
+import { LitElement as u, unsafeCSS as f, html as v, nothing as g } from "lit";
+import { property as d } from "lit/decorators.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
-import { classMap as k } from "lit/directives/class-map.js";
-import { dispatchCustomEvent as w, validPropertyValues as $, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { classMap as x } from "lit/directives/class-map.js";
+import { validPropertyValues as y, safeCustomElement as k, dispatchCustomEvent as w } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
 import "@justeattakeaway/pie-spinner";
-var S = Object.defineProperty, B = (a, e, t, n) => {
-  for (var i = void 0, o = a.length - 1, r; o >= 0; o--)
-    (r = a[o]) && (i = r(e, t, i) || i);
-  return i && S(e, t, i), i;
-};
-class g extends x {
-  constructor() {
-    super(...arguments), this.v = "0.11.4";
+const h = class h extends u {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", h.v);
   }
-}
-B([
-  c({ type: String, reflect: !0 })
-], g.prototype, "v");
-const _ = "*,*:after,*:before{box-sizing:inherit}.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;--icon-display-override: block;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:1px 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-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-weight-bold)}.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:not(.is-disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent}.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--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.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}.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}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", D = ["default", "outline", "ghost"], z = "pie-chip-close", l = {
+};
+h.v = "0.12.0";
+let b = h;
+const C = "*,*:after,*:before{box-sizing:inherit}.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;--icon-display-override: block;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:1px 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-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-weight-bold)}.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:not(.is-disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent}.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--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.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}.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}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", $ = ["default", "outline", "ghost"], S = "pie-chip-close", l = {
   variant: "default",
   disabled: !1,
   isSelected: !1,
   isLoading: !1,
   isDismissible: !1
 };
-var E = Object.defineProperty, d = (a, e, t, n) => {
-  for (var i = void 0, o = a.length - 1, r; o >= 0; o--)
-    (r = a[o]) && (i = r(e, t, i) || i);
-  return i && E(e, t, i), i;
+var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (i, t, c, s) => {
+  for (var e = s > 1 ? void 0 : s ? D(t, c) : t, r = i.length - 1, n; r >= 0; r--)
+    (n = i[r]) && (e = (s ? n(t, c, e) : n(e)) || e);
+  return s && e && B(t, c, e), e;
 };
-const u = "pie-chip", v = class v extends g {
+const _ = "pie-chip";
+let o = class extends b {
   constructor() {
     super(...arguments), this.variant = l.variant, this.disabled = l.disabled, this.isSelected = l.isSelected, this.isLoading = l.isLoading, this.isDismissible = l.isDismissible;
   }
@@ -40,8 +35,8 @@ const u = "pie-chip", v = class v extends g {
    *
    * @private
    */
-  onClickHandler(e) {
-    (this.disabled || this.isDismissible) && (e.preventDefault(), e.stopPropagation());
+  onClickHandler(i) {
+    (this.disabled || this.isDismissible) && (i.preventDefault(), i.stopPropagation());
   }
   /**
    * Template for the loading state
@@ -49,12 +44,12 @@ const u = "pie-chip", v = class v extends g {
    * @private
    */
   renderSpinner() {
-    const { isSelected: e } = this;
-    return h`
+    const { isSelected: i } = this;
+    return v`
                     <pie-spinner
                         class="c-chip-spinner"
                         size="small"
-                        variant="${e ? "inverse" : "secondary"}">
+                        variant="${i ? "inverse" : "secondary"}">
                     </pie-spinner>`;
   }
   /**
@@ -63,7 +58,7 @@ const u = "pie-chip", v = class v extends g {
    * @private
    */
   _handleCloseButtonClick() {
-    w(this, z);
+    w(this, S);
   }
   /**
    * Template for the dismissible state
@@ -71,77 +66,78 @@ const u = "pie-chip", v = class v extends g {
    * @private
    */
   renderCloseButton() {
-    var e;
-    return h`
+    var i;
+    return v`
                     <button
                         @click="${this._handleCloseButtonClick}"
                         ?disabled=${this.disabled}
-                        aria-label="${p((e = this.aria) == null ? void 0 : e.close)}"
+                        aria-label="${p((i = this.aria) == null ? void 0 : i.close)}"
                         class="c-chip-closeBtn"
                         data-test-id="chip-close-button">
                         <icon-close-circle-filled size="m"></icon-close-circle-filled>
                     </button>`;
   }
   render() {
-    var b;
+    var m;
     const {
-      variant: e,
+      variant: i,
       disabled: t,
-      isSelected: n,
-      isLoading: i,
-      isDismissible: o
-    } = this, r = o && n, f = {
+      isSelected: c,
+      isLoading: s,
+      isDismissible: e
+    } = this, r = e && c, n = {
       "c-chip": !0,
-      [`c-chip--${e}`]: !0,
-      "c-chip--selected": n,
+      [`c-chip--${i}`]: !0,
+      "c-chip--selected": c,
       "is-dismissible": r,
       "is-disabled": t,
-      "is-loading": i
+      "is-loading": s
     };
-    return h`
+    return v`
             <div
                 role="${p(r ? void 0 : "button")}"
                 tabindex="${p(r ? void 0 : "0")}"
                 aria-atomic="true"
-                aria-busy="${i}"
-                aria-current="${n}"
-                aria-label="${p((b = this.aria) == null ? void 0 : b.label)}"
+                aria-busy="${s}"
+                aria-current="${c}"
+                aria-label="${p((m = this.aria) == null ? void 0 : m.label)}"
                 aria-live="polite"
-                class=${k(f)}
+                class=${x(n)}
                 data-test-id="pie-chip"
                 @click="${this.onClickHandler}">
                     <slot name="icon"></slot>
-                    ${i ? this.renderSpinner() : m}
+                    ${s ? this.renderSpinner() : g}
                     <slot></slot>
-                    ${r ? this.renderCloseButton() : m}
+                    ${r ? this.renderCloseButton() : g}
             </div>`;
   }
 };
-v.styles = y(_);
-let s = v;
-d([
-  c({ type: String }),
-  $(u, D, l.variant)
-], s.prototype, "variant");
-d([
-  c({ type: Boolean })
-], s.prototype, "disabled");
-d([
-  c({ type: Boolean })
-], s.prototype, "isSelected");
-d([
-  c({ type: Boolean })
-], s.prototype, "isLoading");
-d([
-  c({ type: Boolean })
-], s.prototype, "isDismissible");
-d([
-  c({ type: Object })
-], s.prototype, "aria");
-C(u, s);
+o.styles = f(C);
+a([
+  d({ type: String }),
+  y(_, $, l.variant)
+], o.prototype, "variant", 2);
+a([
+  d({ type: Boolean })
+], o.prototype, "disabled", 2);
+a([
+  d({ type: Boolean })
+], o.prototype, "isSelected", 2);
+a([
+  d({ type: Boolean })
+], o.prototype, "isLoading", 2);
+a([
+  d({ type: Boolean })
+], o.prototype, "isDismissible", 2);
+a([
+  d({ type: Object })
+], o.prototype, "aria", 2);
+o = a([
+  k("pie-chip")
+], o);
 export {
-  z as ON_CHIP_CLOSE_EVENT,
-  s as PieChip,
+  S as ON_CHIP_CLOSE_EVENT,
+  o as PieChip,
   l as defaultProps,
-  D as variants
+  $ as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-chip",
   "description": "PIE Design System Chip built using Web Components",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,9 +45,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.9.0",
-    "@justeattakeaway/pie-spinner": "1.1.1",
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-icons-webc": "1.10.0",
+    "@justeattakeaway/pie-spinner": "1.2.0",
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -7,7 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import {
-    validPropertyValues, defineCustomElement, dispatchCustomEvent,
+    validPropertyValues, dispatchCustomEvent,
+    safeCustomElement,
 } from '@justeattakeaway/pie-webc-core';
 import styles from './chip.scss?inline';
 import {
@@ -27,6 +28,7 @@ const componentSelector = 'pie-chip';
  * @slot - Default slot
  * @event {CustomEvent} pie-chip-close - when a user clicks close button.
  */
+@safeCustomElement('pie-chip')
 export class PieChip extends PieElement implements ChipProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
@@ -145,8 +147,6 @@ export class PieChip extends PieElement implements ChipProps {
     static styles = unsafeCSS(styles);
 }
 
-defineCustomElement(componentSelector, PieChip);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieChip;