@eui/eds-wc 22.0.0-alpha.5 → 22.0.0-alpha.50

package/eds-chip/eds-wc-chip.js

@@ -4,186 +4,472 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css, nothing } from 'lit';
+import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { EdsBaseElement } from '../shared/eds-base.js';
-import { ColorMixin } from '../shared/color-mixin.js';
-import { SizeMixin } from '../shared/size-mixin.js';
+/** Maps a chip size to the size of its inner (remove) icon. */
+const CHIP_ICON_SIZE = {
+    s: 'xs',
+    m: 's',
+    l: 'm',
+};
 /**
  * `<eds-wc-chip>` — EDS Chip Web Component.
  *
- * An interactive pill element for selection, filtering, or tagging.
- * Supports removable mode (with X icon), active/pressed state,
- * color/size variants, and keyboard interaction.
+ * An interactive chip that displays projected content with a semantic color and size.
+ * The host element itself is the interactive control (`role="button"`, or `role="listitem"`
+ * when nested inside an `<eds-wc-chip-list>`): clicking or pressing Enter/Space either removes
+ * the chip (when `removable`) or emits a click; Delete/Backspace removes it (WAI-ARIA APG
+ * convention). When `removable`, an `x` icon is rendered as the remove affordance.
+ * 1:1 projection of the Angular `eds-chip`.
  *
  * @example
  * ```html
- * <eds-wc-chip color="neutral" size="m">Filter</eds-wc-chip>
- * <eds-wc-chip color="info" removable>Tag</eds-wc-chip>
- * <eds-wc-chip active color="primary">Selected</eds-wc-chip>
+ * <eds-wc-chip color="success">Active</eds-wc-chip>
+ * <eds-wc-chip color="info" size="s" removable>Filter</eds-wc-chip>
+ * <eds-wc-chip active>Selected</eds-wc-chip>
+ * <eds-wc-chip disabled>Disabled</eds-wc-chip>
  * ```
  *
- * @slot - Chip content (text, icon + text)
+ * @slot - Chip content (text).
  *
- * @fires chip-click - Dispatched when the chip is clicked (non-removable)
- * @fires chip-remove - Dispatched when the chip is removed (removable, click or Delete/Backspace key)
+ * @fires chip-remove - Fired when the chip is removed (click/Enter on a removable chip, or
+ *   Delete/Backspace). `detail` is the `EdsWcChipData` payload.
+ * @fires chip-click - Fired when a non-removable chip is activated (click/Enter/Space).
+ *   `detail` is the `EdsWcChipData` payload.
  */
-let EdsWcChip = class EdsWcChip extends SizeMixin(ColorMixin(EdsBaseElement)) {
+let EdsWcChip = class EdsWcChip extends EdsBaseElement {
     constructor() {
         super(...arguments);
-        /** Whether the chip shows a remove icon and emits `chip-remove` on click. */
+        /**
+         * Semantic color of the chip.
+         * @default 'neutral'
+         */
+        this.color = 'neutral';
+        /**
+         * Size of the chip.
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Whether the chip can be removed.
+         * @default false
+         */
         this.removable = false;
-        /** Whether the chip is in active/pressed state. */
+        /**
+         * Whether the chip is in active/pressed state.
+         * @default false
+         */
         this.active = false;
-        /** Disabled state. */
+        /**
+         * Controls the disabled state of the chip.
+         * When true, prevents interaction and applies disabled styling.
+         * @default false
+         */
         this.disabled = false;
-        this._onClick = () => {
-            if (this.disabled)
+        /**
+         * Sets the `aria-label` attribute for the host element.
+         * When not set, assistive technology will use the text content of the chip.
+         * @default null
+         */
+        this.ariaLabel = null;
+        /**
+         * Data attribute for e2e testing.
+         * @default 'eds-chip'
+         */
+        this.e2eAttr = 'eds-chip';
+        /**
+         * Internal id of the chip.
+         * @default ''
+         */
+        this.edsInternalId = '';
+        /**
+         * Label of the tooltip to display on hover.
+         * @default ''
+         */
+        this.tooltipMessage = '';
+        /**
+         * Id of the chip.
+         * @default ''
+         */
+        this.id = '';
+        /**
+         * Data payload of the chip (e.g. tooltip configuration). Emitted with chip events.
+         */
+        this.data = {
+            id: crypto.randomUUID(),
+            tooltip: {
+                color: 'edsTooltipPrimary',
+                contentAlignment: null,
+                position: 'above',
+            },
+        };
+        this._onHostClick = (event) => {
+            if (this.disabled) {
                 return;
+            }
             if (this.removable) {
-                this.dispatchEvent(new CustomEvent('chip-remove', { bubbles: true, composed: true }));
+                this._onRemove(event);
             }
             else {
-                this.dispatchEvent(new CustomEvent('chip-click', { bubbles: true, composed: true }));
+                this._onClick();
             }
         };
-        this._onKeydown = (e) => {
-            if (this.disabled)
-                return;
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                this._onClick();
+        this._onKeyDown = (event) => {
+            const key = event.key;
+            if (key === 'Enter') {
+                this._onHostClick(event);
+            }
+            else if (key === ' ' || key === 'Spacebar') {
+                event.preventDefault();
+                this._onHostClick(event);
             }
-            if ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {
-                e.preventDefault();
-                this.dispatchEvent(new CustomEvent('chip-remove', { bubbles: true, composed: true }));
+            else if (key === 'Delete' || key === 'Backspace') {
+                this._onKeyRemove(event);
             }
         };
     }
+    /** Resolved inner remove-icon size, derived from the chip size. */
+    get iconSize() {
+        return CHIP_ICON_SIZE[this.size];
+    }
+    /** Resolved role — 'listitem' when inside an eds-wc-chip-list, 'button' otherwise. */
+    get hostRole() {
+        return this.closest('eds-wc-chip-list') ? 'listitem' : 'button';
+    }
     static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
         :host {
-            display: inline-flex;
-            align-items: center;
+            /* default color = neutral */
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground);
+            --_eds-chip-border-color: var(--eds-c-border-neutral-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);
+
+            --_eds-chip-icon-size: var(--eds-is-m);
+
+            /* default size = m */
+            --_eds-chip-font: var(--eds-f-paragraph-s);
+            --_eds-chip-font-weight: var(--eds-f-w-regular);
+            --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);
+            --_eds-chip-height: var(--eds-sp-xl);
+
+            /* a projected eds-icon follows the chip foreground (on-surface) color + size */
+            --_eds-icon-color-inherit: var(--_eds-chip-on-surface);
+            --_eds-icon-size-inherit: var(--_eds-chip-icon-size);
+
             border-radius: var(--eds-br-full);
-            border: var(--eds-bw-xs) solid var(--_border-color, var(--eds-c-border-primary-subtle));
-            padding: var(--_chip-padding, var(--eds-sp-4xs) var(--eds-sp-2xs));
-            font: var(--_font, var(--eds-f-paragraph-s));
-            background-color: var(--_surface, transparent);
-            color: var(--_on-surface, var(--eds-c-foreground-primary));
-            height: var(--_height, var(--eds-sp-xl));
+            display: inline-flex;
+            border: var(--eds-bw-xs) solid var(--_eds-chip-border-color);
+            padding: var(--_eds-chip-padding);
+            font: var(--_eds-chip-font);
+            font-weight: var(--_eds-chip-font-weight);
+            background-color: var(--_eds-chip-surface);
+            color: var(--_eds-chip-on-surface);
+            height: var(--_eds-chip-height);
             cursor: pointer;
             gap: var(--eds-sp-2xs);
-            outline: none;
-            box-sizing: border-box;
+            align-items: center;
         }
 
-        :host(:hover) {
-            background-color: var(--_surface-hover, var(--eds-c-surface-primary-subtle));
-            color: var(--_on-surface-hover, var(--eds-c-on-surface-primary-subtle));
+        :host(:not([disabled])):focus-visible {
+            outline: var(--eds-bw-s) solid var(--eds-c-border-focus);
+            outline-offset: var(--eds-bw-xs);
+            border-radius: var(--eds-br-full);
         }
-        :host(:active) {
-            background-color: var(--_surface-active, var(--eds-c-surface-primary-subtle));
-            color: var(--_on-surface-active, var(--eds-c-on-surface-primary-subtle));
+
+        :host(:hover) {
+            background-color: var(--_eds-chip-surface-hover);
+            color: var(--_eds-chip-on-surface-hover);
         }
 
-        :host(:focus-visible) {
-            outline: 2px solid var(--eds-c-border-focus);
-            outline-offset: 2px;
+        :host(:active) {
+            background-color: var(--_eds-chip-surface-active);
+            color: var(--_eds-chip-on-surface-active);
         }
 
-        :host([disabled]) {
-            cursor: default;
-            --_surface: var(--eds-c-surface-disabled-subtle);
-            --_on-surface: var(--eds-c-foreground-disabled);
-            --_border-color: var(--eds-c-border-disabled);
-            --_surface-hover: var(--eds-c-surface-disabled-subtle);
-            --_on-surface-hover: var(--eds-c-foreground-disabled);
-        }
-
-        /* Sizes */
-        :host([size="s"]) { --_font: var(--eds-f-paragraph-xs); --_chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs); --_icon-size: var(--eds-is-xs); --_height: var(--eds-sp-l); }
-        :host([size="m"]) { --_font: var(--eds-f-paragraph-s); --_chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs); --_icon-size: var(--eds-is-s); --_height: var(--eds-sp-xl); }
-        :host([size="l"]) { --_font: var(--eds-f-paragraph-s); --_chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs); --_icon-size: var(--eds-is-m); --_height: var(--eds-sp-2xl); }
-
-        /* Colors */
-        :host([color="neutral"]) { --_on-surface: var(--eds-c-foreground-primary); --_border-color: var(--eds-c-border-primary-subtle); --_surface-hover: var(--eds-c-surface-primary-subtle); --_on-surface-hover: var(--eds-c-on-surface-primary-subtle); }
-        :host([color="info"]) { --_on-surface: var(--eds-c-foreground-info); --_border-color: var(--eds-c-border-info-subtle); --_surface-hover: var(--eds-c-surface-info-subtle); --_on-surface-hover: var(--eds-c-on-surface-info-subtle); }
-        :host([color="success"]) { --_on-surface: var(--eds-c-foreground-success); --_border-color: var(--eds-c-border-success-subtle); --_surface-hover: var(--eds-c-surface-success-subtle); --_on-surface-hover: var(--eds-c-on-surface-success-subtle); }
-        :host([color="warning"]) { --_on-surface: var(--eds-c-foreground-warning); --_border-color: var(--eds-c-border-warning-subtle); --_surface-hover: var(--eds-c-surface-warning-subtle); --_on-surface-hover: var(--eds-c-on-surface-warning-subtle); }
-        :host([color="critical"]) { --_on-surface: var(--eds-c-foreground-critical); --_border-color: var(--eds-c-border-critical-subtle); --_surface-hover: var(--eds-c-surface-critical-subtle); --_on-surface-hover: var(--eds-c-on-surface-critical-subtle); }
-
-        /* Active */
-        :host([active]) {
-            --_surface: var(--eds-c-surface-primary);
-            --_on-surface: var(--eds-c-on-surface-primary);
-            --_border-color: transparent;
-            --_surface-hover: var(--eds-c-surface-primary--hover);
-            --_on-surface-hover: var(--eds-c-on-surface-primary--hover);
-            --_surface-active: var(--eds-c-surface-primary--pressed);
-            --_on-surface-active: var(--eds-c-on-surface-primary--pressed);
-        }
-
-        .chip__content {
+        .eds-chip__content {
             display: inline-flex;
             align-items: center;
+            background: transparent;
             gap: var(--eds-sp-2xs);
         }
 
-        .chip__remove {
-            display: inline-flex;
-            margin-left: var(--eds-sp-3xs);
-            line-height: 0;
+        /* A projected icon at the very start/end of the chip content is pulled slightly toward
+           the edge so it reads as tucked in against the chip rather than double-padded. */
+        .eds-chip__content ::slotted(eds-wc-icon:first-child),
+        .eds-chip__content ::slotted(eds-icon:first-child) {
+            margin-left: calc(-1 * var(--eds-sp-4xs));
+        }
+
+        .eds-chip__content ::slotted(eds-wc-icon:last-child),
+        .eds-chip__content ::slotted(eds-icon:last-child) {
+            margin-right: calc(-1 * var(--eds-sp-4xs));
+        }
+
+        .eds-chip__close {
+            margin-left: var(--eds-sp-xs);
+        }
+
+        .eds-chip__icon {
+            height: var(--_eds-chip-icon-size);
+            width: var(--_eds-chip-icon-size);
+            fill: var(--_eds-chip-on-surface);
+            color: var(--_eds-chip-on-surface);
+        }
+
+        /* SIZE VARIANTS */
+        :host([size="s"]) {
+            /* \`paragraph\` bottoms out at \`s\`; the next step down lives on the \`microcopy\` scale. */
+            --_eds-chip-font: var(--eds-f-microcopy-m);
+            --_eds-chip-font-weight: var(--eds-f-w-regular);
+            --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);
+            --_eds-chip-height: var(--eds-sp-l);
+            --_eds-chip-icon-size: var(--eds-is-xs);
+        }
+
+        :host([size="m"]) {
+            --_eds-chip-font: var(--eds-f-paragraph-s);
+            --_eds-chip-font-weight: var(--eds-f-w-regular);
+            --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);
+            --_eds-chip-height: var(--eds-sp-xl);
+            --_eds-chip-icon-size: var(--eds-is-s);
+        }
+
+        :host([size="l"]) {
+            --_eds-chip-font: var(--eds-f-paragraph-s);
+            --_eds-chip-font-weight: var(--eds-f-w-regular);
+            --_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);
+            --_eds-chip-height: var(--eds-sp-2xl);
+            --_eds-chip-icon-size: var(--eds-is-m);
+        }
+
+        /* COLOR VARIANTS */
+        :host([color="neutral"]) {
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground);
+            --_eds-chip-border-color: var(--eds-c-border-neutral-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);
+        }
+
+        :host([color="primary"]) {
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground-primary);
+            --_eds-chip-border-color: var(--eds-c-border-primary-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);
+        }
+
+        :host([color="info"]) {
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground-info);
+            --_eds-chip-border-color: var(--eds-c-border-info-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-info-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle);
+        }
+
+        :host([color="success"]) {
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground-success);
+            --_eds-chip-border-color: var(--eds-c-border-success-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-success-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle);
+        }
+
+        :host([color="warning"]) {
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground-warning);
+            --_eds-chip-border-color: var(--eds-c-border-warning-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle);
+        }
+
+        :host([color="critical"]) {
+            --_eds-chip-surface: transparent;
+            --_eds-chip-on-surface: var(--eds-c-foreground-critical);
+            --_eds-chip-border-color: var(--eds-c-border-critical-subtle);
+            --_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);
+            --_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle);
+        }
+
+        /* STATE OVERRIDES — ACTIVE (filled)
+           Active fills the chip with its OWN color. The default (no explicit color) and the
+           neutral color resolve to the neutral filled scale; primary resolves to primary. */
+        :host([active]),
+        :host([active][color="neutral"]) {
+            --_eds-chip-surface: var(--eds-c-surface-inverted);
+            --_eds-chip-on-surface: var(--eds-c-on-surface-inverted);
+            --_eds-chip-border-color: transparent;
+            --_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);
+            --_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed);
+        }
+
+        :host([active][color="primary"]) {
+            --_eds-chip-surface: var(--eds-c-surface-primary);
+            --_eds-chip-on-surface: var(--eds-c-on-surface-primary);
+            --_eds-chip-border-color: transparent;
+            --_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);
+            --_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed);
+        }
+
+        :host([active][color="info"]) {
+            --_eds-chip-surface: var(--eds-c-surface-info);
+            --_eds-chip-on-surface: var(--eds-c-on-surface-info);
+            --_eds-chip-border-color: transparent;
+            --_eds-chip-surface-hover: var(--eds-c-surface-info--hover);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);
+            --_eds-chip-surface-active: var(--eds-c-surface-info--pressed);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed);
+        }
+
+        :host([active][color="success"]) {
+            --_eds-chip-surface: var(--eds-c-surface-success);
+            --_eds-chip-on-surface: var(--eds-c-on-surface-success);
+            --_eds-chip-border-color: transparent;
+            --_eds-chip-surface-hover: var(--eds-c-surface-success--hover);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);
+            --_eds-chip-surface-active: var(--eds-c-surface-success--pressed);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed);
+        }
+
+        :host([active][color="warning"]) {
+            --_eds-chip-surface: var(--eds-c-surface-warning);
+            --_eds-chip-on-surface: var(--eds-c-on-surface-warning);
+            --_eds-chip-border-color: transparent;
+            --_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);
+            --_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed);
+        }
+
+        :host([active][color="critical"]) {
+            --_eds-chip-surface: var(--eds-c-surface-critical);
+            --_eds-chip-on-surface: var(--eds-c-on-surface-critical);
+            --_eds-chip-border-color: transparent;
+            --_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);
+            --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);
+            --_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);
+            --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed);
         }
 
-        .chip__remove svg {
-            width: var(--eds-is-xs);
-            height: var(--eds-is-xs);
-            fill: currentColor;
+        /* Disabled wins over every color/active combination. */
+        :host([disabled]),
+        :host([disabled][active]) {
+            --_eds-chip-surface: var(--eds-c-surface-disabled-subtle);
+            --_eds-chip-on-surface: var(--eds-c-foreground-disabled);
+            --_eds-chip-border-color: var(--eds-c-border-disabled);
+            --_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);
+            --_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);
+            --_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);
+            --_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);
+
+            cursor: default;
         }
     `; }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('role', 'button');
-        if (!this.hasAttribute('tabindex')) {
-            this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-        }
-        this.addEventListener('click', this._onClick);
-        this.addEventListener('keydown', this._onKeydown);
+        this.addEventListener('click', this._onHostClick);
+        this.addEventListener('keydown', this._onKeyDown);
     }
     disconnectedCallback() {
+        this.removeEventListener('click', this._onHostClick);
+        this.removeEventListener('keydown', this._onKeyDown);
         super.disconnectedCallback();
-        this.removeEventListener('click', this._onClick);
-        this.removeEventListener('keydown', this._onKeydown);
     }
-    updated() {
-        this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-        if (this.active) {
-            this.setAttribute('aria-pressed', 'true');
+    _onKeyRemove(event) {
+        if (this.disabled || !this.removable) {
+            return;
         }
-        else {
-            this.removeAttribute('aria-pressed');
-        }
-        if (this.disabled) {
-            this.setAttribute('aria-disabled', 'true');
+        event.preventDefault();
+        this._emitRemove(this.data);
+    }
+    _onRemove(event) {
+        if (event instanceof KeyboardEvent && event.code === 'Backspace') {
+            this._emitRemove({ ...this.data, _event: event });
         }
         else {
-            this.removeAttribute('aria-disabled');
+            this._emitRemove(this.data);
         }
     }
+    _onClick() {
+        this.dispatchEvent(new CustomEvent('chip-click', {
+            bubbles: true,
+            composed: true,
+            detail: this.data,
+        }));
+    }
+    _emitRemove(detail) {
+        this.dispatchEvent(new CustomEvent('chip-remove', {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
     render() {
         const baseUrl = EdsBaseElement.assetsBaseUrl;
+        const spriteHref = `${baseUrl}/eds/icons/sprites/core.svg#x`;
+        const chipLabel = this.textContent?.trim() ?? '';
         return html `
-            <span class="chip__content"><slot></slot></span>
+            <div class="eds-chip__content">
+                <slot></slot>
+            </div>
             ${this.removable
-            ? html `
-                    <span class="chip__remove" aria-hidden="true">
-                        <svg aria-hidden="true"><use href="${baseUrl}/eds/icons/sprites/core.svg#x"></use></svg>
-                    </span>
-                `
-            : nothing}
+            ? html `<svg
+                        class="eds-chip__icon eds-chip__icon--${this.iconSize}"
+                        role="img"
+                        aria-label="Remove ${chipLabel} chip">
+                        <use href="${spriteHref}"></use>
+                    </svg>`
+            : ''}
         `;
     }
+    updated() {
+        // Mirror the Angular host bindings.
+        this.setAttribute('role', this.hostRole);
+        this.setAttribute('tabindex', this.disabled ? '-1' : '0');
+        if (this.disabled) {
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.removeAttribute('aria-disabled');
+        }
+        if (this.active) {
+            this.setAttribute('aria-pressed', 'true');
+        }
+        else {
+            this.removeAttribute('aria-pressed');
+        }
+    }
 };
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcChip.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcChip.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EdsWcChip.prototype, "removable", void 0);
@@ -193,6 +479,24 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EdsWcChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label', reflect: true })
+], EdsWcChip.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-e2e' })
+], EdsWcChip.prototype, "e2eAttr", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcChip.prototype, "edsInternalId", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcChip.prototype, "tooltipMessage", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcChip.prototype, "id", void 0);
+__decorate([
+    property({ type: Object })
+], EdsWcChip.prototype, "data", void 0);
 EdsWcChip = __decorate([
     customElement('eds-wc-chip')
 ], EdsWcChip);

package/eds-chip/eds-wc-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-chip.js","sourceRoot":"","sources":["../../src/eds-chip/eds-wc-chip.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"eds-wc-chip.js","sourceRoot":"","sources":["../../src/eds-chip/eds-wc-chip.ts"],"names":[],"mappings":"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"}

package/eds-chip/index.d.ts

@@ -1,2 +1,3 @@
-export { EdsWcChip } from './eds-wc-chip.js';
+export { EdsWcChip } from './eds-wc-chip';
+export type { EdsWcChipColor, EdsWcChipSize, EdsWcChipData } from './eds-wc-chip';
 //# sourceMappingURL=index.d.ts.map

package/eds-chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC"}

package/eds-chip/index.js

@@ -1,2 +1,2 @@
-export { EdsWcChip } from './eds-wc-chip.js';
+export { EdsWcChip } from './eds-wc-chip';
 //# sourceMappingURL=index.js.map