@justeattakeaway/pie-chip 0.8.6 → 0.9.1

package/custom-elements.json

@@ -126,6 +126,20 @@
               "privacy": "public",
               "attribute": "aria"
             },
+            {
+              "kind": "method",
+              "name": "onClickHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Hander to prevent click events\nwhen the chip is disabled or dismissible"
+            },
             {
               "kind": "method",
               "name": "renderSpinner",

package/dist/index.d.ts

@@ -60,6 +60,13 @@ export declare class PieChip extends LitElement implements ChipProps {
     isLoading: boolean;
     isDismissible: boolean;
     aria: ChipProps['aria'];
+    /**
+     * Hander to prevent click events
+     * when the chip is disabled or dismissible
+     *
+     * @private
+     */
+    private onClickHandler;
     /**
      * Template for the loading state
      *

package/dist/index.js

@@ -1,25 +1,34 @@
-import { LitElement as f, html as n, nothing as b, unsafeCSS as u } from "lit";
+import { LitElement as f, html as p, nothing as m, unsafeCSS as y } from "lit";
 import { property as t } from "lit/decorators.js";
-import { ifDefined as g } from "lit/directives/if-defined.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { dispatchCustomEvent as k, validPropertyValues as x, defineCustomElement as w } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+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 S = "*,*: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);--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:pointer;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]){--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([disabled]),.c-chip.is-loading:not([disabled]){--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([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([disabled]),.c-chip.c-chip--ghost:hover:not([disabled]){--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([disabled]),.c-chip.c-chip--outline.is-loading:not([disabled]),.c-chip.c-chip--ghost:active:not([disabled]),.c-chip.c-chip--ghost.is-loading:not([disabled]){--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([disabled]){--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([disabled]),.c-chip.c-chip--selected.is-loading:not([disabled]){--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.c-chip--dismissible.c-chip--selected{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip.c-chip--dismissible.c-chip--selected .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:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.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[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.c-chip[disabled].c-chip--ghost{--chip-bg-color: transparent}.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"], B = "pie-chip-close", o = {
+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 = {
   variant: "default",
   disabled: !1,
   isSelected: !1,
   isLoading: !1,
   isDismissible: !1
 };
-var C = Object.defineProperty, a = (h, e, l, s) => {
-  for (var i = void 0, r = h.length - 1, d; r >= 0; r--)
-    (d = h[r]) && (i = d(e, l, i) || i);
-  return i && C(e, l, i), i;
+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);
+  return c && D(i, a, c), c;
 };
-const m = "pie-chip", p = class p extends f {
+const g = "pie-chip", h = class h extends f {
   constructor() {
-    super(...arguments), this.variant = o.variant, this.disabled = o.disabled, this.isSelected = o.isSelected, this.isLoading = o.isLoading, this.isDismissible = o.isDismissible;
+    super(...arguments), this.variant = r.variant, this.disabled = r.disabled, this.isSelected = r.isSelected, this.isLoading = r.isLoading, this.isDismissible = r.isDismissible;
+  }
+  /**
+   * Hander to prevent click events
+   * when the chip is disabled or dismissible
+   *
+   * @private
+   */
+  onClickHandler(i) {
+    (this.disabled || this.isDismissible) && (i.preventDefault(), i.stopPropagation());
   }
   /**
    * Template for the loading state
@@ -27,12 +36,12 @@ const m = "pie-chip", p = class p extends f {
    * @private
    */
   renderSpinner() {
-    const { isSelected: e } = this;
-    return n`
+    const { isSelected: i } = this;
+    return p`
                     <pie-spinner
                         class="c-chip-spinner"
                         size="small"
-                        variant="${e ? "inverse" : "secondary"}">
+                        variant="${i ? "inverse" : "secondary"}">
                     </pie-spinner>`;
   }
   /**
@@ -41,7 +50,7 @@ const m = "pie-chip", p = class p extends f {
    * @private
    */
   _handleCloseButtonClick() {
-    k(this, B);
+    x(this, S);
   }
   /**
    * Template for the dismissible state
@@ -49,76 +58,77 @@ const m = "pie-chip", p = class p extends f {
    * @private
    */
   renderCloseButton() {
-    var e;
-    return n`
+    var i;
+    return p`
                     <button
                         @click="${this._handleCloseButtonClick}"
                         ?disabled=${this.disabled}
-                        aria-label="${g((e = this.aria) == null ? void 0 : e.close)}"
+                        aria-label="${n((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 v;
+    var b;
     const {
-      variant: e,
-      disabled: l,
-      isSelected: s,
-      isLoading: i,
-      isDismissible: r
-    } = this, d = {
+      variant: i,
+      disabled: a,
+      isSelected: d,
+      isLoading: c,
+      isDismissible: l
+    } = this, o = l && d, u = {
       "c-chip": !0,
-      [`c-chip--${e}`]: !0,
-      "c-chip--selected": s,
-      "c-chip--dismissible": r,
-      "is-loading": i
+      [`c-chip--${i}`]: !0,
+      "c-chip--selected": d,
+      "c-chip--dismissible": o,
+      "c-chip--disabled": a,
+      "is-loading": c
     };
-    return n`
+    return p`
             <div
+                role="${n(o ? void 0 : "button")}"
+                tabindex="${n(o ? void 0 : "0")}"
                 aria-atomic="true"
-                aria-busy="${i}"
-                aria-current="${s}"
-                aria-label="${g((v = this.aria) == null ? void 0 : v.label)}"
+                aria-busy="${c}"
+                aria-current="${d}"
+                aria-label="${n((b = this.aria) == null ? void 0 : b.label)}"
                 aria-live="polite"
-                class=${y(d)}
+                class=${k(u)}
                 data-test-id="pie-chip"
-                tabindex="0"
-                role="button"
-                ?disabled="${l}">
+                @click="${this.onClickHandler}">
                     <slot name="icon"></slot>
-                    ${i ? this.renderSpinner() : b}
+                    ${c ? this.renderSpinner() : m}
                     <slot></slot>
-                    ${r && s ? this.renderCloseButton() : b}
+                    ${o ? this.renderCloseButton() : m}
             </div>`;
   }
 };
-p.styles = u(S);
-let c = p;
-a([
+h.styles = y(C);
+let e = h;
+s([
   t(),
-  x(m, $, o.variant)
-], c.prototype, "variant");
-a([
+  w(g, B, r.variant)
+], e.prototype, "variant");
+s([
   t({ type: Boolean })
-], c.prototype, "disabled");
-a([
+], e.prototype, "disabled");
+s([
   t({ type: Boolean })
-], c.prototype, "isSelected");
-a([
+], e.prototype, "isSelected");
+s([
   t({ type: Boolean })
-], c.prototype, "isLoading");
-a([
+], e.prototype, "isLoading");
+s([
   t({ type: Boolean })
-], c.prototype, "isDismissible");
-a([
+], e.prototype, "isDismissible");
+s([
   t({ type: Object })
-], c.prototype, "aria");
-w(m, c);
+], e.prototype, "aria");
+$(g, e);
 export {
-  B as ON_CHIP_CLOSE_EVENT,
-  c as PieChip,
-  o as defaultProps,
-  $ as variants
+  S as ON_CHIP_CLOSE_EVENT,
+  e as PieChip,
+  r as defaultProps,
+  B as variants
 };

package/dist/react.d.ts

@@ -63,6 +63,13 @@ declare class PieChip_2 extends LitElement implements ChipProps {
     isLoading: boolean;
     isDismissible: boolean;
     aria: ChipProps['aria'];
+    /**
+     * Hander to prevent click events
+     * when the chip is disabled or dismissible
+     *
+     * @private
+     */
+    private onClickHandler;
     /**
      * Template for the loading state
      *

package/package.json

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

package/src/chip.scss

@@ -1,7 +1,7 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 @mixin chip-interactive-states($bg-color, $mode: 'default') {
-    &:hover:not([disabled]) {
+    &:hover:not(.c-chip--disabled, .c-chip--dismissible) {
         @if $mode == 'inverse' {
             --hover-modifier: var(--dt-color-hover-02);
         } @else {
@@ -16,8 +16,8 @@
         }
     }
 
-    &:active:not([disabled]),
-    &.is-loading:not([disabled]) {
+    &:active:not(.c-chip--disabled, .c-chip--dismissible),
+    &.is-loading:not(.c-chip--disabled, .c-chip--dismissible) {
         @if $mode == 'inverse' {
             --active-modifier: var(--dt-color-active-02);
         } @else {
@@ -44,6 +44,8 @@
     --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); // ensures the spacing between the text and close icon is 4px
+    --chip-cursor: pointer;
+    --chip-close-btn-cursor: pointer;
 
     // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
     --icon-display-override: block;
@@ -62,7 +64,8 @@
     border-radius: var(--dt-radius-rounded-e);
     border: 1px solid;
     border-color: var(--chip-border-color);
-    cursor: pointer;
+    cursor: var(--chip-cursor);
+    user-select: none;
     min-width: var(--chip-min-width);
 
     @include p.font-size(--dt-font-interactive-xs-size);
@@ -75,7 +78,7 @@
         // same as default styles
     }
 
-    &.c-chip--outline:not([disabled], .c-chip--selected) {
+    &.c-chip--outline:not(.c-chip--disabled, .c-chip--selected) {
         --chip-border-color: var(--dt-color-border-strong);
     }
 
@@ -93,25 +96,6 @@
         @include chip-interactive-states('--dt-color-interactive-primary', 'inverse');
     }
 
-    &.c-chip--dismissible.c-chip--selected {
-        padding-inline-end: var(--chip-padding-dismissible);
-        padding-block-start: var(--chip-padding-dismissible);
-        padding-block-end: var(--chip-padding-dismissible);
-
-        .c-chip-closeBtn {
-            display: inline-flex;
-            user-select: none;
-            outline: none;
-            border: none;
-            color: inherit;
-            background-color: inherit;
-            border-radius: inherit;
-            cursor: pointer;
-            padding: 0;
-            margin-inline-start: var(--chip-dismissible-offset);
-        }
-    }
-
     &.is-loading {
         & > *:not(.c-chip-spinner) {
             visibility: hidden;
@@ -125,15 +109,40 @@
         }
     }
 
-    &[disabled] {
+    &.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--ghost {
             --chip-bg-color: transparent;
         }
+    }
+
+    &.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);
+        user-select: auto;
 
-        cursor: not-allowed;
+        .c-chip-closeBtn {
+            display: inline-flex;
+            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);
+
+            &:focus-visible {
+                @include p.focus;
+            }
+        }
     }
 
     &:focus-visible {

package/src/index.ts

@@ -46,6 +46,19 @@ export class PieChip extends LitElement implements ChipProps {
     @property({ type: Object })
     public aria: ChipProps['aria'];
 
+    /**
+     * Hander to prevent click events
+     * when the chip is disabled or dismissible
+     *
+     * @private
+     */
+    private onClickHandler (event: Event) {
+        if (this.disabled || this.isDismissible) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
     /**
      * Template for the loading state
      *
@@ -97,17 +110,21 @@ export class PieChip extends LitElement implements ChipProps {
             isLoading,
             isDismissible,
         } = this;
+        const showCloseButton = isDismissible && isSelected;
 
         const classes = {
             'c-chip': true,
             [`c-chip--${variant}`]: true,
             'c-chip--selected': isSelected,
-            'c-chip--dismissible': isDismissible,
+            'c-chip--dismissible': showCloseButton,
+            'c-chip--disabled': disabled,
             'is-loading': isLoading,
         };
 
         return html`
             <div
+                role="${ifDefined(showCloseButton ? undefined : 'button')}"
+                tabindex="${ifDefined(showCloseButton ? undefined : '0')}"
                 aria-atomic="true"
                 aria-busy="${isLoading}"
                 aria-current="${isSelected}"
@@ -115,13 +132,11 @@ export class PieChip extends LitElement implements ChipProps {
                 aria-live="polite"
                 class=${classMap(classes)}
                 data-test-id="pie-chip"
-                tabindex="0"
-                role="button"
-                ?disabled="${disabled}">
+                @click="${this.onClickHandler}">
                     <slot name="icon"></slot>
                     ${isLoading ? this.renderSpinner() : nothing}
                     <slot></slot>
-                    ${isDismissible && isSelected ? this.renderCloseButton() : nothing}
+                    ${showCloseButton ? this.renderCloseButton() : nothing}
             </div>`;
     }