@justeattakeaway/pie-chip 0.9.1 → 0.9.3

package/custom-elements.json

@@ -87,9 +87,6 @@
             {
               "kind": "field",
               "name": "variant",
-              "type": {
-                "text": "ChipProps['variant']"
-              },
               "privacy": "public",
               "attribute": "variant"
             },
@@ -186,9 +183,6 @@
           "attributes": [
             {
               "name": "variant",
-              "type": {
-                "text": "ChipProps['variant']"
-              },
               "fieldName": "variant"
             },
             {

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit';
 
-export declare type AriaProps = {
+declare type AriaProps = {
     close?: string;
     label?: string;
 };
@@ -54,7 +54,7 @@ export declare const ON_CHIP_CLOSE_EVENT = "pie-chip-close";
  * @event {CustomEvent} pie-chip-close - when a user clicks close button.
  */
 export declare class PieChip extends LitElement implements ChipProps {
-    variant: ChipProps['variant'];
+    variant: "default" | "outline" | "ghost";
     disabled: boolean;
     isSelected: boolean;
     isLoading: boolean;

package/dist/index.js

@@ -5,7 +5,7 @@ import { classMap as k } from "lit/directives/class-map.js";
 import { dispatchCustomEvent as x, validPropertyValues as w, defineCustomElement as $ } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
 import "@justeattakeaway/pie-spinner";
-const C = "*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-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(--chip-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(.c-chip--disabled,.c-chip--dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-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(.c-chip--disabled,.c-chip--dismissible),.c-chip.is-loading:not(.c-chip--disabled,.c-chip--dismissible){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-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)))}.c-chip.c-chip--outline:not(.c-chip--disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--chip-bg-color: transparent}.c-chip.c-chip--outline:hover:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--ghost:hover:not(.c-chip--disabled,.c-chip--dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip.c-chip--outline:active:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--outline.is-loading:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--ghost:active:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--ghost.is-loading:not(.c-chip--disabled,.c-chip--dismissible){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip.c-chip--selected{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip.c-chip--selected:hover:not(.c-chip--disabled,.c-chip--dismissible){--hover-modifier: var(--dt-color-hover-02);--chip-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(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--selected.is-loading:not(.c-chip--disabled,.c-chip--dismissible){--active-modifier: var(--dt-color-active-02);--chip-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)))}.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.c-chip--disabled{--chip-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.c-chip--disabled.c-chip--ghost{--chip-bg-color: transparent}.c-chip.c-chip--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.c-chip--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.c-chip--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)}", B = ["default", "outline", "ghost"], S = "pie-chip-close", r = {
+const C = "*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-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(--chip-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(.c-chip--disabled,.c-chip--dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-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(.c-chip--disabled,.c-chip--dismissible),.c-chip.is-loading:not(.c-chip--disabled,.c-chip--dismissible){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-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)))}.c-chip.c-chip--outline:not(.c-chip--disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--chip-bg-color: transparent}.c-chip.c-chip--outline:hover:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--ghost:hover:not(.c-chip--disabled,.c-chip--dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip.c-chip--outline:active:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--outline.is-loading:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--ghost:active:not(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--ghost.is-loading:not(.c-chip--disabled,.c-chip--dismissible){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip.c-chip--selected{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip.c-chip--selected:hover:not(.c-chip--disabled,.c-chip--dismissible){--hover-modifier: var(--dt-color-hover-02);--chip-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(.c-chip--disabled,.c-chip--dismissible),.c-chip.c-chip--selected.is-loading:not(.c-chip--disabled,.c-chip--dismissible){--active-modifier: var(--dt-color-active-02);--chip-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)))}.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.c-chip--disabled{--chip-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.c-chip--disabled.c-chip--ghost{--chip-bg-color: transparent}.c-chip.c-chip--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.c-chip--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.c-chip--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)}", S = ["default", "outline", "ghost"], B = "pie-chip-close", o = {
   variant: "default",
   disabled: !1,
   isSelected: !1,
@@ -13,13 +13,13 @@ const C = "*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-bg-color: var(--
   isDismissible: !1
 };
 var D = Object.defineProperty, s = (v, i, a, d) => {
-  for (var c = void 0, l = v.length - 1, o; l >= 0; l--)
-    (o = v[l]) && (c = o(i, a, c) || c);
+  for (var c = void 0, l = v.length - 1, r; l >= 0; l--)
+    (r = v[l]) && (c = r(i, a, c) || c);
   return c && D(i, a, c), c;
 };
 const g = "pie-chip", h = class h extends f {
   constructor() {
-    super(...arguments), this.variant = r.variant, this.disabled = r.disabled, this.isSelected = r.isSelected, this.isLoading = r.isLoading, this.isDismissible = r.isDismissible;
+    super(...arguments), this.variant = o.variant, this.disabled = o.disabled, this.isSelected = o.isSelected, this.isLoading = o.isLoading, this.isDismissible = o.isDismissible;
   }
   /**
    * Hander to prevent click events
@@ -50,7 +50,7 @@ const g = "pie-chip", h = class h extends f {
    * @private
    */
   _handleCloseButtonClick() {
-    x(this, S);
+    x(this, B);
   }
   /**
    * Template for the dismissible state
@@ -77,18 +77,18 @@ const g = "pie-chip", h = class h extends f {
       isSelected: d,
       isLoading: c,
       isDismissible: l
-    } = this, o = l && d, u = {
+    } = this, r = l && d, u = {
       "c-chip": !0,
       [`c-chip--${i}`]: !0,
       "c-chip--selected": d,
-      "c-chip--dismissible": o,
+      "c-chip--dismissible": r,
       "c-chip--disabled": a,
       "is-loading": c
     };
     return p`
             <div
-                role="${n(o ? void 0 : "button")}"
-                tabindex="${n(o ? void 0 : "0")}"
+                role="${n(r ? void 0 : "button")}"
+                tabindex="${n(r ? void 0 : "0")}"
                 aria-atomic="true"
                 aria-busy="${c}"
                 aria-current="${d}"
@@ -100,15 +100,15 @@ const g = "pie-chip", h = class h extends f {
                     <slot name="icon"></slot>
                     ${c ? this.renderSpinner() : m}
                     <slot></slot>
-                    ${o ? this.renderCloseButton() : m}
+                    ${r ? this.renderCloseButton() : m}
             </div>`;
   }
 };
 h.styles = y(C);
 let e = h;
 s([
-  t(),
-  w(g, B, r.variant)
+  t({ type: String }),
+  w(g, S, o.variant)
 ], e.prototype, "variant");
 s([
   t({ type: Boolean })
@@ -127,8 +127,8 @@ s([
 ], e.prototype, "aria");
 $(g, e);
 export {
-  S as ON_CHIP_CLOSE_EVENT,
+  B as ON_CHIP_CLOSE_EVENT,
   e as PieChip,
-  r as defaultProps,
-  B as variants
+  o as defaultProps,
+  S as variants
 };

package/dist/react.d.ts

@@ -4,7 +4,7 @@ import type { LitElement } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit';
 
-export declare type AriaProps = {
+declare type AriaProps = {
     close?: string;
     label?: string;
 };
@@ -57,7 +57,7 @@ export declare const PieChip: React_2.ForwardRefExoticComponent<ChipProps & Reac
  * @event {CustomEvent} pie-chip-close - when a user clicks close button.
  */
 declare class PieChip_2 extends LitElement implements ChipProps {
-    variant: ChipProps['variant'];
+    variant: "default" | "outline" | "ghost";
     disabled: boolean;
     isSelected: boolean;
     isLoading: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-chip",
   "description": "PIE Design System Chip built using Web Components",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-icons-webc": "1.1.0",
-    "@justeattakeaway/pie-spinner": "0.7.2",
+    "@justeattakeaway/pie-spinner": "1.0.0",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {

package/src/defs.ts

@@ -2,7 +2,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const variants = ['default', 'outline', 'ghost'] as const;
 
-export type AriaProps = {
+type AriaProps = {
     close?: string;
     label?: string;
 };

package/src/index.ts

@@ -27,9 +27,9 @@ const componentSelector = 'pie-chip';
  * @event {CustomEvent} pie-chip-close - when a user clicks close button.
  */
 export class PieChip extends LitElement implements ChipProps {
-    @property()
+    @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
-    public variant: ChipProps['variant'] = defaultProps.variant;
+    public variant = defaultProps.variant;
 
     @property({ type: Boolean })
     public disabled = defaultProps.disabled;