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

package/eds-badge/eds-wc-badge.js

@@ -5,144 +5,249 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } 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';
 /**
  * `<eds-wc-badge>` — EDS Badge Web Component.
  *
- * A small status indicator supporting color variants, sizes,
- * outline, dotted, and icon-only modes. Can truncate numeric
- * content via `max-char-count`.
+ * A badge that displays text, numbers, or a dot indicator with semantic color, size,
+ * and variant styling. Supports content truncation via `max-char-count`, an automatic
+ * empty state (dot), and an icon-only mode. 1:1 projection of the Angular `eds-badge`.
  *
  * @example
  * ```html
- * <eds-wc-badge color="critical" size="m">5</eds-wc-badge>
- * <eds-wc-badge color="success" size="xs" dotted></eds-wc-badge>
- * <eds-wc-badge color="info" max-char-count="2" char-replacement="99+">128</eds-wc-badge>
+ * <eds-wc-badge>99</eds-wc-badge>
+ * <eds-wc-badge color="success">Active</eds-wc-badge>
+ * <eds-wc-badge color="info" variant="outline">New</eds-wc-badge>
+ * <eds-wc-badge max-char-count="2" char-replacement="99+">150</eds-wc-badge>
+ * <eds-wc-badge icon-only color="critical"></eds-wc-badge>
  * ```
  *
- * @slot - Badge content (text, number, or icon)
+ * @slot - Badge content (text, number). Empty content renders a dot indicator.
  */
-let EdsWcBadge = class EdsWcBadge extends SizeMixin(ColorMixin(EdsBaseElement)) {
+let EdsWcBadge = class EdsWcBadge extends EdsBaseElement {
     constructor() {
         super(...arguments);
         /**
-         * Maximum number of characters before truncating with `charReplacement`.
-         * Set to 0 to disable truncation.
+         * Semantic color of the badge.
+         * @default 'neutral'
+         */
+        this.color = 'neutral';
+        /**
+         * Visual variant. `filled` uses a solid semantic surface; `outline` uses a
+         * transparent surface with a stronger border.
+         * @default 'filled'
+         */
+        this.variant = 'filled';
+        /**
+         * Size of the badge.
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Whether the badge is a small dot indicator with no text content.
+         * @default false
+         */
+        this.iconOnly = false;
+        /**
+         * Maximum number of characters to display before truncating. When the content
+         * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.
+         * @default 0
          */
         this.maxCharCount = 0;
         /**
-         * Replacement text shown when content exceeds `maxCharCount`.
-         * @default '99+'
+         * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.
+         * @default ''
          */
         this.charReplacement = '';
-        /** Whether the badge is in icon-only mode (small dot indicator). */
-        this.iconOnly = false;
-        /** Whether to display the badge with dotted styling. */
-        this.dotted = false;
-        /** Whether to use outline styling. */
-        this.outline = false;
-        this._isEmpty = false;
-        this._truncatedContent = '';
+        /**
+         * Data attribute for e2e testing.
+         * @default 'eds-badge'
+         */
+        this.e2eAttr = 'eds-badge';
+        /**
+         * ARIA label for accessibility. When `null`, the visible content serves as the
+         * accessible name.
+         * @default 'badge'
+         */
+        this.ariaLabel = 'badge';
+        /** Whether the projected content is empty (drives the dot/empty state). Reflected → `:host([empty])`. */
+        this.empty = false;
+        /** Whether the content was truncated by `maxCharCount`. */
         this._isTruncated = false;
     }
     static { this.styles = css `
-        :host {
-            display: inline-flex;
-            border-radius: var(--eds-br-full);
-
-            --_border-width: var(--eds-bw-none);
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
         }
 
-        /* Color: filled */
-        :host([color="neutral"]) { --_surface: var(--eds-c-surface-neutral); --_on-surface: var(--eds-c-on-surface-neutral); }
-        :host([color="info"]) { --_surface: var(--eds-c-surface-info); --_on-surface: var(--eds-c-on-surface-info); }
-        :host([color="success"]) { --_surface: var(--eds-c-surface-success); --_on-surface: var(--eds-c-on-surface-success); }
-        :host([color="warning"]) { --_surface: var(--eds-c-surface-warning); --_on-surface: var(--eds-c-on-surface-warning); }
-        :host([color="critical"]) { --_surface: var(--eds-c-surface-critical); --_on-surface: var(--eds-c-on-surface-critical); }
-
-        /* Color: outline */
-        :host([outline][color="neutral"]) { --_surface: var(--eds-c-surface-neutral-subtle); --_on-surface: var(--eds-c-on-surface-neutral-subtle); }
-        :host([outline][color="info"]) { --_surface: var(--eds-c-surface-info-subtle); --_on-surface: var(--eds-c-on-surface-info-subtle); }
-        :host([outline][color="success"]) { --_surface: var(--eds-c-surface-success-subtle); --_on-surface: var(--eds-c-on-surface-success-subtle); }
-        :host([outline][color="warning"]) { --_surface: var(--eds-c-surface-warning-subtle); --_on-surface: var(--eds-c-on-surface-warning-subtle); }
-        :host([outline][color="critical"]) { --_surface: var(--eds-c-surface-critical-subtle); --_on-surface: var(--eds-c-on-surface-critical-subtle); }
-
-        /* Size × empty state */
-        :host([size="xs"]) { --_min-height: var(--eds-si-s); --_min-width: var(--eds-si-s); --_font: var(--eds-f-microcopy-2xs); --_padding: var(--eds-sp-5xs) var(--eds-sp-4xs); }
-        :host([size="s"]) { --_font: var(--eds-f-microcopy-xs); --_padding: var(--eds-sp-none) var(--eds-sp-3xs); }
-        :host([size="m"]) { --_min-height: var(--eds-si-l); --_min-width: var(--eds-si-l); --_font: var(--eds-f-microcopy-xs); --_padding: var(--eds-sp-4xs) var(--eds-sp-3xs); }
-        :host([size="l"]) { --_min-height: var(--eds-si-xl); --_min-width: var(--eds-si-xl); --_font: var(--eds-f-paragraph-s-semi-bold); --_padding: var(--eds-sp-4xs) var(--eds-sp-2xs); }
+        :host {
+            /* Common defaults */
+            --_eds-badge-padding: 0 var(--eds-sp-3xs);
+            --_eds-badge-border-radius: var(--eds-br-full);
+            --_eds-badge-border-width: var(--eds-bw-xs);
+            --_eds-badge-font: var(--eds-f-microcopy-xs);
+            --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));
+            --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));
+            --_eds-badge-empty-size: var(--eds-sp-s);
 
-        /* Empty (dotted) overrides */
-        :host(.eds-badge--empty) { --_border-width: var(--eds-bw-xs); }
-        :host(.eds-badge--empty[size="xs"]) { --_min-height: var(--eds-si-xs); --_min-width: var(--eds-si-xs); --_padding: 0; }
-        :host(.eds-badge--empty[size="s"]) { --_min-height: var(--eds-si-s); --_min-width: var(--eds-si-s); --_padding: 0; }
-        :host(.eds-badge--empty[size="m"]) { --_min-height: var(--eds-si-m); --_min-width: var(--eds-si-m); --_padding: 0; }
-        :host(.eds-badge--empty[size="l"]) { --_min-height: var(--eds-si-l); --_min-width: var(--eds-si-l); --_padding: 0; }
+            /* Default color (neutral) */
+            --_eds-badge-surface: var(--eds-c-surface-neutral);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);
+            --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);
 
-        /* Icon-only */
-        :host([icon-only]) { --_padding: 0; }
-        :host([icon-only][size="2xs"]) { --_icon-size: var(--eds-is-2xs); }
-        :host([icon-only][size="xs"]) { --_icon-size: var(--eds-is-2xs); }
-        :host([icon-only][size="s"]) { --_icon-size: var(--eds-is-xs); }
-        :host([icon-only][size="m"]) { --_icon-size: var(--eds-is-s); }
-        :host([icon-only][size="l"]) { --_icon-size: var(--eds-is-m); }
+            display: inline-flex;
+            border: var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);
+            border-radius: var(--_eds-badge-border-radius);
+            background-color: var(--_eds-badge-surface);
+        }
 
-        .eds-badge-wrapper {
+        .eds-badge__wrapper {
             display: inline-flex;
-            border-radius: var(--eds-br-full);
-            border: var(--_border-width) solid var(--eds-c-border-inverted);
             align-items: center;
-            min-height: var(--_min-height);
-            min-width: var(--_min-width);
-            padding: var(--_padding);
             justify-content: center;
-            font: var(--_font);
-            background-color: var(--_surface);
-            color: var(--_on-surface);
+            color: var(--_eds-badge-on-surface);
+            height: var(--_eds-badge-height);
+            min-width: var(--_eds-badge-min-width);
+            padding: var(--_eds-badge-padding);
+            font: var(--_eds-badge-font);
+            /* base.eds-ellipsis() inlined */
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
+
+        /* COLOR — filled (default) surface / foreground / border */
+        :host([color="primary"]) {
+            --_eds-badge-surface: var(--eds-c-surface-primary);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-primary);
+            --_eds-badge-border-color: var(--eds-c-border-primary-subtle);
+        }
+        :host([color="neutral"]) {
+            --_eds-badge-surface: var(--eds-c-surface-neutral);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);
+            --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);
+        }
+        :host([color="success"]) {
+            --_eds-badge-surface: var(--eds-c-surface-success);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-success);
+            --_eds-badge-border-color: var(--eds-c-border-success-subtle);
+        }
+        :host([color="info"]) {
+            --_eds-badge-surface: var(--eds-c-surface-info);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-info);
+            --_eds-badge-border-color: var(--eds-c-border-info-subtle);
+        }
+        :host([color="warning"]) {
+            --_eds-badge-surface: var(--eds-c-surface-warning);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-warning);
+            --_eds-badge-border-color: var(--eds-c-border-warning-subtle);
+        }
+        :host([color="critical"]) {
+            --_eds-badge-surface: var(--eds-c-surface-critical);
+            --_eds-badge-on-surface: var(--eds-c-on-surface-critical);
+            --_eds-badge-border-color: var(--eds-c-border-critical-subtle);
+        }
+
+        /* VARIANT — outline: transparent surface, subtler foreground, stronger border */
+        :host([variant="outline"]) {
+            --_eds-badge-surface: transparent;
+        }
+        :host([variant="outline"][color="primary"]) {
+            --_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);
+            --_eds-badge-border-color: var(--eds-c-border-primary);
+        }
+        :host([variant="outline"][color="neutral"]) {
+            --_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);
+            --_eds-badge-border-color: var(--eds-c-border-neutral);
+        }
+        :host([variant="outline"][color="success"]) {
+            --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);
+            --_eds-badge-border-color: var(--eds-c-border-success);
+        }
+        :host([variant="outline"][color="info"]) {
+            --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);
+            --_eds-badge-border-color: var(--eds-c-border-info);
+        }
+        :host([variant="outline"][color="warning"]) {
+            --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);
+            --_eds-badge-border-color: var(--eds-c-border-warning);
+        }
+        :host([variant="outline"][color="critical"]) {
+            --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);
+            --_eds-badge-border-color: var(--eds-c-border-critical);
+        }
+
+        /* SIZE */
+        :host([size="s"]) {
+            --_eds-badge-height: var(--eds-sp-m);
+            --_eds-badge-min-width: var(--eds-sp-m);
+            --_eds-badge-font: var(--eds-f-microcopy-2xs);
+        }
+
+        /* EMPTY — dot badge, no content in wrapper */
+        :host([empty]) {
+            width: var(--_eds-badge-empty-size);
+            height: var(--_eds-badge-empty-size);
+        }
+
+        /* ICON-ONLY — dot indicator, no wrapper padding */
+        :host([icon-only]) .eds-badge__wrapper {
+            padding: 0;
+        }
     `; }
     render() {
-        if (this._isTruncated) {
-            return html `<span class="eds-badge-wrapper">${this._truncatedContent}</span>`;
-        }
-        return html `<span class="eds-badge-wrapper"><slot @slotchange="${this._onSlotChange}"></slot></span>`;
+        // The <slot> is ALWAYS mounted (never toggled) to avoid the slotchange render loop.
+        // When truncated, the slot is hidden and the replacement text is shown beside it.
+        return html `<span class="eds-badge__wrapper">${this._isTruncated ? html `<span>${this.charReplacement || '99+'}</span>` : ''}<slot @slotchange="${this._onSlotChange}" style="${this._isTruncated ? 'display:none' : ''}"></slot></span>`;
     }
     updated() {
         this.setAttribute('role', 'status');
-        // Manage empty class
-        const isEmpty = this._isEmpty || this.dotted;
-        if (isEmpty) {
-            this.classList.add('eds-badge--empty');
-        }
-        else {
-            this.classList.remove('eds-badge--empty');
-        }
+    }
+    firstUpdated() {
+        // A badge that never receives a `slotchange` (e.g. icon-only / content-less) must
+        // still get `empty` evaluated on first render. Runs the same guarded computation.
+        this._evaluate(this._slot);
     }
     _onSlotChange(e) {
-        const slot = e.target;
+        this._evaluate(e.target);
+    }
+    /** Guarded computation of `empty` + `_isTruncated` from the slot's assigned content. */
+    _evaluate(slot) {
+        if (!slot) {
+            return;
+        }
         const nodes = slot.assignedNodes({ flatten: true });
-        this._isEmpty = nodes.length === 0 || nodes.every(n => n.textContent?.trim() === '');
-        if (!this._isEmpty) {
-            this._checkContent(nodes);
+        // Empty = no meaningful content: no element nodes AND no non-whitespace text.
+        const nextEmpty = nodes.every(n => n.nodeType === Node.TEXT_NODE ? !(n.textContent ?? '').trim() : false);
+        if (this.empty !== nextEmpty) {
+            this.empty = nextEmpty;
+        }
+        const nextTruncated = this._computeTruncated(nextEmpty, nodes);
+        if (this._isTruncated !== nextTruncated) {
+            this._isTruncated = nextTruncated;
         }
     }
-    _checkContent(nodes) {
-        if (this.maxCharCount > 0) {
-            const text = nodes.map(n => n.textContent).join('').trim();
-            if (text.length > this.maxCharCount) {
-                this._isTruncated = true;
-                this._truncatedContent = this.charReplacement || '99+';
-            }
+    _computeTruncated(isEmpty, nodes) {
+        if (isEmpty || this.maxCharCount === 0) {
+            return false;
         }
+        const text = nodes.map(n => n.textContent ?? '').join('').trim();
+        return !!text && text.length > this.maxCharCount;
     }
 };
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcBadge.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcBadge.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'icon-only' })
+], EdsWcBadge.prototype, "iconOnly", void 0);
 __decorate([
     property({ type: Number, attribute: 'max-char-count' })
 ], EdsWcBadge.prototype, "maxCharCount", void 0);
@@ -150,23 +255,20 @@ __decorate([
     property({ type: String, attribute: 'char-replacement' })
 ], EdsWcBadge.prototype, "charReplacement", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'icon-only' })
-], EdsWcBadge.prototype, "iconOnly", void 0);
+    property({ type: String, reflect: true, attribute: 'data-e2e' })
+], EdsWcBadge.prototype, "e2eAttr", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], EdsWcBadge.prototype, "dotted", void 0);
+    property({ type: String, reflect: true, attribute: 'aria-label' })
+], EdsWcBadge.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], EdsWcBadge.prototype, "outline", void 0);
-__decorate([
-    state()
-], EdsWcBadge.prototype, "_isEmpty", void 0);
-__decorate([
-    state()
-], EdsWcBadge.prototype, "_truncatedContent", void 0);
+], EdsWcBadge.prototype, "empty", void 0);
 __decorate([
     state()
 ], EdsWcBadge.prototype, "_isTruncated", void 0);
+__decorate([
+    query('slot')
+], EdsWcBadge.prototype, "_slot", void 0);
 EdsWcBadge = __decorate([
     customElement('eds-wc-badge')
 ], EdsWcBadge);

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

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

package/eds-badge/index.d.ts

@@ -1,2 +1,3 @@
 export { EdsWcBadge } from './eds-wc-badge.js';
+export type { EdsWcBadgeColor, EdsWcBadgeVariant, EdsWcBadgeSize } from './eds-wc-badge.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/eds-chip/eds-wc-chip.d.ts

@@ -1,43 +1,132 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcChip_base: (new (...args: any[]) => import("../shared/size-mixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../shared/color-mixin.js").ColorMixinInterface) & typeof EdsBaseElement;
+/**
+ * Local narrowed color union — the chip's color contract. Copied verbatim from the
+ * Angular `eds-chip` exported `EdsChipColor` union. No shared-token import.
+ */
+export type EdsWcChipColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+/**
+ * Local narrowed size union — the chip's size contract. Copied verbatim from the
+ * Angular `eds-chip` exported `EdsChipSize` union.
+ */
+export type EdsWcChipSize = 's' | 'm' | 'l';
+/**
+ * Payload emitted by chip events and passed via the `data` property.
+ * Mirrors the Angular `EdsChipData` model.
+ */
+export interface EdsWcChipData {
+    id?: string | number;
+    tooltip?: {
+        tooltipMessage?: string;
+        position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
+        contentAlignment?: 'center' | 'left' | 'right' | 'justify' | null;
+        delay?: number;
+        color?: string;
+    };
+    /** Internal event reference, present when triggered via keyboard. */
+    _event?: Event;
+    [key: string]: unknown;
+}
 /**
  * `<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.
  */
-export declare class EdsWcChip extends EdsWcChip_base {
-    /** Whether the chip shows a remove icon and emits `chip-remove` on click. */
+export declare class EdsWcChip extends EdsBaseElement {
+    /**
+     * Semantic color of the chip.
+     * @default 'neutral'
+     */
+    color: EdsWcChipColor;
+    /**
+     * Size of the chip.
+     * @default 'm'
+     */
+    size: EdsWcChipSize;
+    /**
+     * Whether the chip can be removed.
+     * @default false
+     */
     removable: boolean;
-    /** Whether the chip is in active/pressed state. */
+    /**
+     * Whether the chip is in active/pressed state.
+     * @default false
+     */
     active: boolean;
-    /** Disabled state. */
+    /**
+     * Controls the disabled state of the chip.
+     * When true, prevents interaction and applies disabled styling.
+     * @default false
+     */
     disabled: boolean;
+    /**
+     * Sets the `aria-label` attribute for the host element.
+     * When not set, assistive technology will use the text content of the chip.
+     * @default null
+     */
+    ariaLabel: string | null;
+    /**
+     * Data attribute for e2e testing.
+     * @default 'eds-chip'
+     */
+    e2eAttr: string;
+    /**
+     * Internal id of the chip.
+     * @default ''
+     */
+    edsInternalId: string;
+    /**
+     * Label of the tooltip to display on hover.
+     * @default ''
+     */
+    tooltipMessage: string;
+    /**
+     * Id of the chip.
+     * @default ''
+     */
+    id: string;
+    /**
+     * Data payload of the chip (e.g. tooltip configuration). Emitted with chip events.
+     */
+    data: EdsWcChipData;
+    /** Resolved inner remove-icon size, derived from the chip size. */
+    private get iconSize();
+    /** Resolved role — 'listitem' when inside an eds-wc-chip-list, 'button' otherwise. */
+    private get hostRole();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    private _onHostClick;
+    private _onKeyDown;
+    private _onKeyRemove;
+    private _onRemove;
     private _onClick;
-    private _onKeydown;
+    private _emitRemove;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'eds-wc-chip': EdsWcChip;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-chip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-chip.d.ts","sourceRoot":"","sources":["../../src/eds-chip/eds-wc-chip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAIvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,SAAU,SAAQ,cAAqC;IAChE,6EAA6E;IAE7E,SAAS,UAAS;IAElB,mDAAmD;IAEnD,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,OAAgB,MAAM,0BAgFpB;IAEF,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;cAMT,OAAO,IAAI,IAAI;cAcf,MAAM;IAezB,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,UAAU,CAUhB;CACL;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,SAAS,CAAC;KAC5B;CACJ"}
+{"version":3,"file":"eds-wc-chip.d.ts","sourceRoot":"","sources":["../../src/eds-chip/eds-wc-chip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAErF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE;QACN,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;QACrE,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;QAClE,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,qEAAqE;IACrE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AASD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,SAAU,SAAQ,cAAc;IACzC;;;OAGG;IAEH,KAAK,EAAE,cAAc,CAAa;IAElC;;;OAGG;IAEH,IAAI,EAAE,aAAa,CAAO;IAE1B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;;OAGG;IAEH,OAAO,SAAc;IAErB;;;OAGG;IAEH,aAAa,SAAM;IAEnB;;;OAGG;IAEH,cAAc,SAAM;IAEpB;;;OAGG;IAEM,EAAE,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,IAAI,EAAE,aAAa,CAOjB;IAEF,mEAAmE;IACnE,OAAO,KAAK,QAAQ,GAEnB;IAED,sFAAsF;IACtF,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAgB,MAAM,0BAsKpB;IAEO,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,UAAU,CAUhB;IAEF,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,WAAW;cAQA,MAAM;cAoBN,OAAO,IAAI,IAAI;CAiBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,SAAS,CAAC;KAC5B;CACJ"}