@justeattakeaway/pie-chip 0.9.7 → 0.10.1

package/custom-elements.json

@@ -135,7 +135,7 @@
                   }
                 }
               ],
-              "description": "Hander to prevent click events\nwhen the chip is disabled or dismissible"
+              "description": "Handler to prevent click events\nwhen the chip is disabled or dismissible"
             },
             {
               "kind": "method",

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export declare class PieChip extends LitElement implements ChipProps {
     isDismissible: boolean;
     aria: ChipProps['aria'];
     /**
-     * Hander to prevent click events
+     * Handler to prevent click events
      * when the chip is disabled or dismissible
      *
      * @private

package/dist/index.js

@@ -1,28 +1,28 @@
-import { LitElement as f, html as p, nothing as m, unsafeCSS as y } from "lit";
+import { LitElement as f, html as p, nothing as m, unsafeCSS as x } from "lit";
 import { property as t } from "lit/decorators.js";
 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 { classMap as y } from "lit/directives/class-map.js";
+import { dispatchCustomEvent as k, 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)}", S = ["default", "outline", "ghost"], B = "pie-chip-close", o = {
+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)}", S = ["default", "outline", "ghost"], B = "pie-chip-close", s = {
   variant: "default",
   disabled: !1,
   isSelected: !1,
   isLoading: !1,
   isDismissible: !1
 };
-var D = Object.defineProperty, s = (v, i, a, d) => {
-  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;
+var D = Object.defineProperty, c = (v, i, a, d) => {
+  for (var e = void 0, l = v.length - 1, r; l >= 0; l--)
+    (r = v[l]) && (e = r(i, a, e) || e);
+  return e && D(i, a, e), e;
 };
-const u = "pie-chip", h = class h 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 = s.variant, this.disabled = s.disabled, this.isSelected = s.isSelected, this.isLoading = s.isLoading, this.isDismissible = s.isDismissible;
   }
   /**
-   * Hander to prevent click events
+   * Handler to prevent click events
    * when the chip is disabled or dismissible
    *
    * @private
@@ -50,7 +50,7 @@ const u = "pie-chip", h = class h extends f {
    * @private
    */
   _handleCloseButtonClick() {
-    x(this, B);
+    k(this, B);
   }
   /**
    * Template for the dismissible state
@@ -75,60 +75,60 @@ const u = "pie-chip", h = class h extends f {
       variant: i,
       disabled: a,
       isSelected: d,
-      isLoading: c,
+      isLoading: e,
       isDismissible: l
-    } = this, r = l && d, g = {
+    } = this, r = l && d, u = {
       "c-chip": !0,
       [`c-chip--${i}`]: !0,
       "c-chip--selected": d,
-      "c-chip--dismissible": r,
-      "c-chip--disabled": a,
-      "is-loading": c
+      "is-dismissible": r,
+      "is-disabled": a,
+      "is-loading": e
     };
     return p`
             <div
                 role="${n(r ? void 0 : "button")}"
                 tabindex="${n(r ? void 0 : "0")}"
                 aria-atomic="true"
-                aria-busy="${c}"
+                aria-busy="${e}"
                 aria-current="${d}"
                 aria-label="${n((b = this.aria) == null ? void 0 : b.label)}"
                 aria-live="polite"
-                class=${k(g)}
+                class=${y(u)}
                 data-test-id="pie-chip"
                 @click="${this.onClickHandler}">
                     <slot name="icon"></slot>
-                    ${c ? this.renderSpinner() : m}
+                    ${e ? this.renderSpinner() : m}
                     <slot></slot>
                     ${r ? this.renderCloseButton() : m}
             </div>`;
   }
 };
-h.styles = y(C);
-let e = h;
-s([
+h.styles = x(C);
+let o = h;
+c([
   t({ type: String }),
-  w(u, S, o.variant)
-], e.prototype, "variant");
-s([
+  w(g, S, s.variant)
+], o.prototype, "variant");
+c([
   t({ type: Boolean })
-], e.prototype, "disabled");
-s([
+], o.prototype, "disabled");
+c([
   t({ type: Boolean })
-], e.prototype, "isSelected");
-s([
+], o.prototype, "isSelected");
+c([
   t({ type: Boolean })
-], e.prototype, "isLoading");
-s([
+], o.prototype, "isLoading");
+c([
   t({ type: Boolean })
-], e.prototype, "isDismissible");
-s([
+], o.prototype, "isDismissible");
+c([
   t({ type: Object })
-], e.prototype, "aria");
-$(u, e);
+], o.prototype, "aria");
+$(g, o);
 export {
   B as ON_CHIP_CLOSE_EVENT,
-  e as PieChip,
-  o as defaultProps,
+  o as PieChip,
+  s as defaultProps,
   S as variants
 };

package/dist/react.d.ts

@@ -64,7 +64,7 @@ declare class PieChip_2 extends LitElement implements ChipProps {
     isDismissible: boolean;
     aria: ChipProps['aria'];
     /**
-     * Hander to prevent click events
+     * Handler to prevent click events
      * when the chip is disabled or dismissible
      *
      * @private

package/package.json

@@ -1,7 +1,13 @@
 {
   "name": "@justeattakeaway/pie-chip",
   "description": "PIE Design System Chip built using Web Components",
-  "version": "0.9.7",
+  "version": "0.10.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/justeattakeaway/pie",
+    "directory": "packages/components/pie-chip"
+  },
+  "homepage": "https://pie.design/components/chip/code/",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,12 +40,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.14.1",
+    "@justeattakeaway/pie-css": "0.15.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
     "@justeattakeaway/pie-icons-webc": "1.5.0",
-    "@justeattakeaway/pie-spinner": "1.0.0",
+    "@justeattakeaway/pie-spinner": "1.0.1",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {

package/src/chip.scss

@@ -1,40 +1,7 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
-@mixin chip-interactive-states($bg-color, $mode: 'default') {
-    &:hover:not(.c-chip--disabled, .c-chip--dismissible) {
-        @if $mode == 'inverse' {
-            --hover-modifier: var(--dt-color-hover-02);
-        } @else {
-            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
-        }
-
-        @if $mode == 'transparent' {
-            --hover-modifier: var(--dt-color-hover-01);
-            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
-        } @else {
-            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
-        }
-    }
-
-    &: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 {
-            --active-modifier: calc(-1 * var(--dt-color-active-01));
-        }
-
-        @if $mode == 'transparent' {
-            --active-modifier: var(--dt-color-active-01);
-            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
-        } @else {
-            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
-        }
-    }
-}
-
 .c-chip {
-    --chip-bg-color: var(--dt-color-interactive-secondary);
+    --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;
@@ -59,7 +26,7 @@
     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);
+    background-color: var(--int-states-mixin-bg-color);
     color: var(--chip-color);
     border-radius: var(--dt-radius-rounded-e);
     border: 1px solid;
@@ -72,28 +39,28 @@
     @include p.line-height(--dt-font-interactive-xs-line-height);
     font-weight: var(--dt-font-weight-bold);
 
-    @include chip-interactive-states('--dt-color-interactive-secondary');
+    @include p.interactive-states('--dt-color-interactive-secondary');
 
     &.c-chip--default {
         // same as default styles
     }
 
-    &.c-chip--outline:not(.c-chip--disabled, .c-chip--selected) {
+    &.c-chip--outline:not(.is-disabled, .c-chip--selected) {
         --chip-border-color: var(--dt-color-border-strong);
     }
 
     &.c-chip--outline,
     &.c-chip--ghost {
-        --chip-bg-color: transparent;
+        --int-states-mixin-bg-color: transparent;
 
-        @include chip-interactive-states('--dt-color-black', 'transparent');
+        @include p.interactive-states('--dt-color-transparent', 'transparent');
     }
 
     &.c-chip--selected {
-        --chip-bg-color: var(--dt-color-interactive-primary);
+        --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
         --chip-color: var(--dt-color-content-interactive-primary);
 
-        @include chip-interactive-states('--dt-color-interactive-primary', 'inverse');
+        @include p.interactive-states('--dt-color-interactive-primary', 'inverse', '02');
     }
 
     &.is-loading {
@@ -109,18 +76,18 @@
         }
     }
 
-    &.c-chip--disabled {
-        --chip-bg-color: var(--dt-color-disabled-01);
+    &.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--ghost {
-            --chip-bg-color: transparent;
+            --int-states-mixin-bg-color: transparent;
         }
     }
 
-    &.c-chip--dismissible {
+    &.is-dismissible {
         --chip-cursor: text;
         padding-inline-end: var(--chip-padding-dismissible);
         padding-block-start: var(--chip-padding-dismissible);

package/src/index.ts

@@ -47,7 +47,7 @@ export class PieChip extends LitElement implements ChipProps {
     public aria: ChipProps['aria'];
 
     /**
-     * Hander to prevent click events
+     * Handler to prevent click events
      * when the chip is disabled or dismissible
      *
      * @private
@@ -116,8 +116,8 @@ export class PieChip extends LitElement implements ChipProps {
             'c-chip': true,
             [`c-chip--${variant}`]: true,
             'c-chip--selected': isSelected,
-            'c-chip--dismissible': showCloseButton,
-            'c-chip--disabled': disabled,
+            'is-dismissible': showCloseButton,
+            'is-disabled': disabled,
             'is-loading': isLoading,
         };