@eui/eds-react 22.0.0-alpha.8

package/eds-button/eds-button.css

@@ -0,0 +1,233 @@
+/*
+ * eds-button — pure React port of eds-button.scss.
+ * Class-based (pre-String-Props) source: variants are BEM classes computed in the
+ * component's hostClasses(), so the CSS keeps `.eds-button.eds-button--type-primary` style
+ * selectors verbatim (guide Part 1 rule 9) — NOT data-* attributes. `:host.eds-button` ->
+ * `.eds-button` (the host IS the button); the `.eui-21` wrapper is dropped (share-ready).
+ * Focus-ring mixins inlined from base.eds-focus-visible-ring / *-rounded.
+ */
+
+/* ---------- TYPE + COLOR token mapping ---------- */
+
+.eds-button.eds-button--type-primary {
+    --_border-width: var(--eds-bw-none);
+    --_border-color: transparent;
+}
+.eds-button.eds-button--type-primary.eds-button--primary {
+    --_surface: var(--eds-c-surface-primary);
+    --_on-surface: var(--eds-c-on-surface-primary);
+    --_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);
+}
+.eds-button.eds-button--type-primary.eds-button--highlight {
+    --_surface: var(--eds-c-surface-highlight);
+    --_on-surface: var(--eds-c-on-surface-highlight);
+    --_surface-hover: var(--eds-c-surface-highlight--hover);
+    --_on-surface-hover: var(--eds-c-on-surface-highlight--hover);
+    --_surface-active: var(--eds-c-surface-highlight--pressed);
+    --_on-surface-active: var(--eds-c-on-surface-highlight--pressed);
+}
+.eds-button.eds-button--type-primary.eds-button--critical {
+    --_surface: var(--eds-c-surface-critical);
+    --_on-surface: var(--eds-c-on-surface-critical);
+    --_surface-hover: var(--eds-c-surface-critical--hover);
+    --_on-surface-hover: var(--eds-c-on-surface-critical--hover);
+    --_surface-active: var(--eds-c-surface-critical--pressed);
+    --_on-surface-active: var(--eds-c-on-surface-critical--pressed);
+}
+.eds-button.eds-button--type-primary:disabled,
+.eds-button.eds-button--type-primary.disabled {
+    --_surface: var(--eds-c-surface-disabled);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-disabled);
+    --_on-surface-hover: var(--eds-c-foreground-disabled);
+    --_surface-active: var(--eds-c-surface-disabled);
+    --_on-surface-active: var(--eds-c-foreground-disabled);
+}
+
+.eds-button.eds-button--type-secondary {
+    --_border-width: var(--eds-bw-xs);
+    --_surface: transparent;
+}
+.eds-button.eds-button--type-secondary.eds-button--primary {
+    --_border-color: var(--eds-c-border-primary);
+    --_on-surface: var(--eds-c-foreground-primary);
+    --_surface-hover: var(--eds-c-surface-primary-subtle);
+    --_on-surface-hover: var(--eds-c-on-surface-primary-subtle);
+    --_surface-active: var(--eds-c-surface-primary-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-primary-subtle);
+}
+.eds-button.eds-button--type-secondary.eds-button--neutral {
+    --_border-color: var(--eds-c-border-neutral);
+    --_on-surface: var(--eds-c-foreground-neutral);
+    --_surface-hover: var(--eds-c-surface-neutral-subtle);
+    --_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
+    --_surface-active: var(--eds-c-surface-neutral-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-neutral-subtle);
+}
+.eds-button.eds-button--type-secondary.eds-button--highlight {
+    --_border-color: var(--eds-c-border-highlight);
+    --_on-surface: var(--eds-c-foreground-highlight);
+    --_surface-hover: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
+    --_surface-active: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-highlight-subtler);
+}
+.eds-button.eds-button--type-secondary.eds-button--critical {
+    --_border-color: var(--eds-c-border-critical);
+    --_on-surface: var(--eds-c-foreground-critical);
+    --_surface-hover: var(--eds-c-surface-critical-subtler);
+    --_on-surface-hover: var(--eds-c-on-surface-critical-subtler);
+    --_surface-active: var(--eds-c-surface-critical-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-critical-subtler);
+}
+.eds-button.eds-button--type-secondary:disabled,
+.eds-button.eds-button--type-secondary.disabled {
+    --_border-width: var(--eds-bw-xs);
+    --_border-color: var(--eds-c-border-disabled);
+    --_surface: var(--eds-c-surface-elevation);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-elevation);
+    --_on-surface-hover: var(--eds-c-foreground-disabled);
+    --_surface-active: var(--eds-c-surface-elevation);
+    --_on-surface-active: var(--eds-c-foreground-disabled);
+}
+
+.eds-button.eds-button--type-tertiary {
+    --_border-width: var(--eds-bw-none);
+    --_surface: transparent;
+}
+.eds-button.eds-button--type-tertiary.eds-button--primary {
+    --_on-surface: var(--eds-c-foreground-primary);
+    --_surface-hover: var(--eds-c-surface-primary-subtle);
+    --_on-surface-hover: var(--eds-c-on-surface-primary-subtle);
+    --_surface-active: var(--eds-c-surface-primary-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-primary-subtle);
+}
+.eds-button.eds-button--type-tertiary.eds-button--neutral {
+    --_on-surface: var(--eds-c-foreground-neutral);
+    --_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle)); /* parent css vars override (see eds-chip f.e.) */
+    --_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle)); /* parent css vars override (see eds-chip f.e.) */
+    --_surface-active: var(--eds-c-surface-neutral-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-neutral-subtle);
+}
+.eds-button.eds-button--type-tertiary.eds-button--highlight {
+    --_on-surface: var(--eds-c-foreground-highlight);
+    --_surface-hover: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
+    --_surface-active: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-highlight-subtler);
+}
+.eds-button.eds-button--type-tertiary.eds-button--critical {
+    --_on-surface: var(--eds-c-foreground-critical);
+    --_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler)); /* parent css vars override (see eds-chip f.e.) */
+    --_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler)); /* parent css vars override (see eds-chip f.e.) */
+    --_surface-active: var(--eds-c-surface-critical-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-critical-subtler);
+}
+.eds-button.eds-button--type-tertiary:disabled,
+.eds-button.eds-button--type-tertiary.disabled {
+    --_surface: var(--eds-c-surface-elevation);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-elevation);
+    --_on-surface-hover: var(--eds-c-foreground-disabled);
+    --_surface-active: var(--eds-c-surface-elevation);
+    --_on-surface-active: var(--eds-c-foreground-disabled);
+}
+
+/* ---------- SIZE token mapping ---------- */
+
+/* 40px (default) */
+.eds-button.eds-button--size-m {
+    --_font-size: var(--eds-f-s-m);
+    --_padding: 0 var(--eds-sp-xs);
+    --_size: var(--eds-sp-5xl);
+    --_icon-size: var(--eds-is-m);
+}
+/* 32px */
+.eds-button.eds-button--size-s {
+    --_font-size: var(--eds-f-s-s);
+    --_padding: 0 var(--eds-sp-2xs);
+    --_size: var(--eds-sp-3xl);
+    --_icon-size: var(--eds-is-s);
+}
+/* 52px */
+.eds-button.eds-button--size-l {
+    --_font-size: var(--eds-f-s-l);
+    --_padding: 0 var(--eds-sp-s);
+    --_size: var(--eds-sp-8xl);
+    --_icon-size: var(--eds-is-m);
+}
+
+/* ---------- common styles ---------- */
+
+.eds-button {
+    align-items: center;
+    background-image: none;
+    border-radius: var(--eds-br-s);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    outline: none;
+    text-transform: none;
+    transition: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    border-style: solid;
+}
+/* inlined base.eds-focus-visible-ring() */
+.eds-button:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-xs) !important;
+}
+.eds-button .eds-button__container {
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+    gap: var(--eds-sp-2xs);
+    justify-content: center; /* Needed for responsive */
+    width: 100%; /* Needed for responsive */
+}
+
+/* ---------- internal css vars mapping ---------- */
+
+.eds-button {
+    background-color: var(--_surface);
+    color: var(--_on-surface);
+    border-width: var(--_border-width);
+    border-color: var(--_border-color);
+    font-size: var(--_font-size);
+    min-height: var(--_size);
+    min-width: var(--_size);
+    padding: var(--_padding);
+
+    /* a projected eds-icon follows the button foreground (on-surface) color */
+    --_eds-icon-on-surface: var(--_on-surface);
+}
+.eds-button:hover {
+    background-color: var(--_surface-hover);
+    color: var(--_on-surface-hover);
+    --_eds-icon-on-surface: var(--_on-surface-hover);
+}
+.eds-button:active {
+    background-color: var(--_surface-active);
+    color: var(--_on-surface-active);
+    --_eds-icon-on-surface: var(--_on-surface-active);
+}
+
+/* ---------- other states ---------- */
+
+.eds-button.eds-button--rounded {
+    border-radius: var(--eds-br-full);
+}
+/* inlined base.eds-focus-visible-ring-rounded() */
+.eds-button.eds-button--rounded:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-full) !important;
+}

package/eds-button/eds-button.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+/**
+ * Local narrowed unions — the button's variant contract (ported 1:1 from the Angular
+ * `button[edsButton]`). No shared-token import.
+ */
+export type EdsButtonType = 'primary' | 'secondary' | 'tertiary';
+/**
+ * Colors the button accepts. `primary` / `neutral` / `highlight` / `critical` have dedicated
+ * SCSS branches; `warning` is accepted (Angular via `edsWarning`) but has no styled branch —
+ * it renders the `eds-button--warning` class only, matching the Angular behavior.
+ */
+export type EdsButtonColor = 'primary' | 'neutral' | 'highlight' | 'critical' | 'warning';
+/** Sizes the button styles (SCSS `eds-button--size-<size>` branches). */
+export type EdsButtonSize = 's' | 'm' | 'l';
+export interface EdsButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type'> {
+    /**
+     * Visual type of the button. `primary` = solid surface; `secondary` = bordered;
+     * `tertiary` = text/ghost. Mirrors the Angular `edsTypeVariant` input and the
+     * `edsButtonPrimary`/`edsButtonSecondary`/`edsButtonTertiary` boolean shorthands.
+     * @default 'primary'
+     */
+    type?: EdsButtonType;
+    /** Semantic color of the button. @default 'primary' */
+    color?: EdsButtonColor;
+    /** Size of the button. @default 'm' */
+    size?: EdsButtonSize;
+    /**
+     * Disables the button (adds the `disabled` attribute and disabled styling).
+     * @default false
+     */
+    disabled?: boolean;
+    /** Makes the button full-width (block-level). @default false */
+    block?: boolean;
+    /** Styles the button for icon-only content. @default false */
+    iconButton?: boolean;
+    /** Styles the button when used as an avatar trigger (e.g. actionable avatar). @default false */
+    avatarButton?: boolean;
+    /** Allows text content to wrap. @default false */
+    lineWrap?: boolean;
+    /** Applies a fully rounded border-radius. @default false */
+    rounded?: boolean;
+    /**
+     * Marks the button as initially checked/selected within a button group. Kept for
+     * parity with the Angular `isChecked` input; read by a parent group.
+     * @default false
+     */
+    checked?: boolean;
+    /** Data attribute for e2e testing. @default 'eds-button' */
+    e2eAttr?: string;
+    /** Optional projected content (label, icons). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsButton` — pure React port of the Angular `button[edsButton]` component.
+ *
+ * The root element is a native `<button.eds-button>` (the host IS the button, matching the
+ * attribute-selector Angular component). This is a **class-based (pre-String-Props) source**:
+ * the Angular component computes a BEM `hostClasses()` string rather than reflecting host
+ * attributes, so the React port reproduces that BEM class logic verbatim in `className`, and
+ * the ported CSS keeps the `.eds-button.eds-button--type-primary` selectors (guide Part 1
+ * rule 9 — the sanctioned exception to the `data-*` rule). The label/icons are projected via
+ * `children` into the `.eds-button__container` wrapper, matching the Angular `<ng-content/>`.
+ */
+export declare const EdsButton: React.ForwardRefExoticComponent<EdsButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=eds-button.d.ts.map

package/eds-button/eds-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-button.d.ts","sourceRoot":"","sources":["../../src/eds-button/eds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1F,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,WAAW,cACb,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7E;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,uCAAuC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gGAAgG;IAChG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,0FA+CpB,CAAC"}

package/eds-button/eds-button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsButton` — pure React port of the Angular `button[edsButton]` component.
+ *
+ * The root element is a native `<button.eds-button>` (the host IS the button, matching the
+ * attribute-selector Angular component). This is a **class-based (pre-String-Props) source**:
+ * the Angular component computes a BEM `hostClasses()` string rather than reflecting host
+ * attributes, so the React port reproduces that BEM class logic verbatim in `className`, and
+ * the ported CSS keeps the `.eds-button.eds-button--type-primary` selectors (guide Part 1
+ * rule 9 — the sanctioned exception to the `data-*` rule). The label/icons are projected via
+ * `children` into the `.eds-button__container` wrapper, matching the Angular `<ng-content/>`.
+ */
+export const EdsButton = React.forwardRef(function EdsButton({ type = 'primary', color = 'primary', size = 'm', disabled = false, block = false, iconButton = false, avatarButton = false, lineWrap = false, rounded = false, checked: _checked = false, e2eAttr = 'eds-button', children, className, ...rest }, ref) {
+    // Angular `hostClasses()` computed — reproduced verbatim (BEM string).
+    const hostClasses = [
+        'eds-button',
+        `eds-button--size-${size}`,
+        `eds-button--${color}`,
+        `eds-button--type-${type}`,
+        rounded ? 'eds-button--rounded' : '',
+        block ? 'eds-button--block' : '',
+        iconButton ? 'eds-button--icon-only' : '',
+        avatarButton ? 'eds-button--avatar' : '',
+        lineWrap ? 'eds-button--line-wrap' : '',
+        className ?? '',
+    ]
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return (_jsx("button", { ref: ref, className: hostClasses, "data-e2e": e2eAttr, disabled: disabled || undefined, ...rest, children: _jsx("span", { className: "eds-button__container", children: children }) }));
+});
+//# sourceMappingURL=eds-button.js.map

package/eds-button/eds-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-button.js","sourceRoot":"","sources":["../../src/eds-button/eds-button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0D/B;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAoC,SAAS,SAAS,CAC3F,EACI,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,UAAU,GAAG,KAAK,EAClB,YAAY,GAAG,KAAK,EACpB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,EAAE,QAAQ,GAAG,KAAK,EACzB,OAAO,GAAG,YAAY,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,uEAAuE;IACvE,MAAM,WAAW,GAAG;QAChB,YAAY;QACZ,oBAAoB,IAAI,EAAE;QAC1B,eAAe,KAAK,EAAE;QACtB,oBAAoB,IAAI,EAAE;QAC1B,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;QACpC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;QAChC,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;QACzC,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;QACvC,SAAS,IAAI,EAAE;KAClB;SACI,IAAI,CAAC,GAAG,CAAC;SACT,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;SACpB,IAAI,EAAE,CAAC;IAEZ,OAAO,CACH,iBACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,cACZ,OAAO,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,KAC3B,IAAI,YAER,eAAM,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAQ,GACpD,CACZ,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-button/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsButton } from './eds-button.js';
+export type { EdsButtonProps, EdsButtonType, EdsButtonColor, EdsButtonSize } from './eds-button.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-button/index.js

@@ -0,0 +1,2 @@
+export { EdsButton } from './eds-button.js';
+//# sourceMappingURL=index.js.map

package/eds-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-chip/eds-chip.css

@@ -0,0 +1,171 @@
+/*
+ * eds-chip — pure React port of eds-chip.scss.
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host                     -> .eds-chip (root class on the rendered element)
+ *   :host([color="v"])        -> .eds-chip[data-color="v"]
+ *   :host([size="v"])         -> .eds-chip[data-size="v"]
+ *   :host([active]) (boolean) -> .eds-chip[data-active]
+ *   :host([disabled])         -> .eds-chip[data-disabled]
+ *   &:not([disabled])         -> .eds-chip:not([data-disabled])
+ * The --_eds-chip-* privates and --eds-* tokens are unchanged; tokens cascade in from the
+ * .eui-21 context (required on an ancestor), exactly like the Angular component. The focus
+ * ring is inlined from base.eds-focus-visible-ring-rounded().
+ */
+
+.eds-chip {
+    /* default color = neutral */
+    --_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);
+
+    /* default size = m */
+    --_eds-chip-font: var(--eds-f-paragraph-s);
+    --_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 */
+    --_eds-icon-on-surface: var(--_eds-chip-on-surface);
+
+    border-radius: var(--eds-br-full);
+    display: inline-flex;
+    border: var(--eds-bw-xs) solid var(--_eds-chip-border-color);
+    padding: var(--_eds-chip-padding);
+    font: var(--_eds-chip-font);
+    background-color: var(--_eds-chip-surface);
+    color: var(--_eds-chip-on-surface);
+    height: var(--_eds-chip-height);
+    cursor: pointer;
+    gap: var(--eds-sp-2xs);
+    align-items: center;
+}
+
+/* inlined base.eds-focus-visible-ring-rounded() */
+.eds-chip:not([data-disabled]):focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-full) !important;
+}
+
+.eds-chip:hover {
+    background-color: var(--_eds-chip-surface-hover);
+    color: var(--_eds-chip-on-surface-hover);
+}
+.eds-chip:active {
+    background-color: var(--_eds-chip-surface-active);
+    color: var(--_eds-chip-on-surface-active);
+}
+
+.eds-chip .eds-chip__content {
+    display: inline-flex;
+    align-items: center;
+    background: transparent;
+    gap: var(--eds-sp-2xs);
+}
+
+.eds-chip .eds-chip__close {
+    margin-left: var(--eds-sp-xs);
+}
+
+/* SIZE VARIANTS
+   ------------- */
+
+.eds-chip[data-size="s"] {
+    --_eds-chip-font: var(--eds-f-paragraph-xs);
+    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);
+    --_eds-chip-height: var(--eds-sp-l);
+}
+
+.eds-chip[data-size="m"] {
+    --_eds-chip-font: var(--eds-f-paragraph-s);
+    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);
+    --_eds-chip-height: var(--eds-sp-xl);
+}
+
+.eds-chip[data-size="l"] {
+    --_eds-chip-font: var(--eds-f-paragraph-s);
+    --_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);
+    --_eds-chip-height: var(--eds-sp-2xl);
+}
+
+/* COLOR VARIANTS
+   -------------- */
+
+.eds-chip[data-color="neutral"] {
+    --_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);
+}
+
+.eds-chip[data-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);
+}
+
+.eds-chip[data-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);
+}
+
+.eds-chip[data-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);
+}
+
+.eds-chip[data-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
+   --------------- */
+
+.eds-chip[data-active] {
+    --_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);
+}
+
+.eds-chip[data-disabled] {
+    --_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;
+}

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+/**
+ * Data structure for chip tooltip configuration (ported 1:1 from the Angular
+ * `eds-chip` `models/eui-chip.model.ts`).
+ */
+export interface EdsChipTooltip {
+    tooltipMessage?: string;
+    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
+    contentAlignment?: 'center' | 'left' | 'right' | 'justify' | null;
+    delay?: number;
+    color?: string;
+}
+/** Data payload emitted by chip events and passed via the `data` prop. */
+export interface EdsChipData {
+    id?: string | number;
+    tooltip?: EdsChipTooltip;
+    /** Internal event reference, present when triggered via keyboard. */
+    _event?: Event;
+    [key: string]: unknown;
+}
+/**
+ * Local narrowed color union — the chip's color contract (ported 1:1 from Angular `eds-chip`).
+ */
+export type EdsChipColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+/** Local narrowed size union — the chip's size contract. */
+export type EdsChipSize = 's' | 'm' | 'l';
+export interface EdsChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'id'> {
+    /** Semantic color of the chip. @default 'neutral' */
+    color?: EdsChipColor;
+    /** Size of the chip. @default 'm' */
+    size?: EdsChipSize;
+    /**
+     * Sets the `aria-label` attribute for the host element. When not set, assistive
+     * technology will use the text content of the chip. @default undefined
+     */
+    ariaLabel?: string;
+    /** Data attribute for e2e testing. @default 'eds-chip' */
+    e2eAttr?: string;
+    /** Sets the edsInternalId of the chip. @default '' */
+    edsInternalId?: string;
+    /** Sets the label of the tooltip to display on hover. @default '' */
+    tooltipMessage?: string;
+    /** Sets the id of the chip. @default '' */
+    id?: string | number;
+    /** Sets the data of the chip like tooltip configuration. */
+    data?: EdsChipData;
+    /** Whether the chip can be removed. @default false */
+    isRemovable?: boolean;
+    /** Whether the chip is in active/pressed state. @default false */
+    isActive?: boolean;
+    /** Controls the disabled state of the chip. @default false */
+    disabled?: boolean;
+    /** Emitted when the chip is removed (Angular output `chipRemove`). */
+    onChipRemove?: (detail: EdsChipData) => void;
+    /** Emitted when the chip is clicked (Angular output `chipClick`). */
+    onChipClick?: (detail: EdsChipData) => void;
+    /** Projected content rendered inside the chip (matches Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsChip` — pure React port of the Angular `eds-chip`.
+ *
+ * An interactive chip: it can be clicked (`onChipClick`), removed (`onChipRemove`, shown
+ * with a trailing remove icon when `isRemovable`), and toggled active/disabled. Host click,
+ * Enter, Space, Delete and Backspace keyboard behavior is reproduced (WAI-ARIA APG chip
+ * conventions). The rendered element IS the component (no wrapper). Requires
+ * `@eui/eds-styles` + the `eui-21` class on an ancestor for the `--eds-*` tokens to cascade
+ * in, and the sprite assets for the remove icon.
+ */
+export declare const EdsChip: React.ForwardRefExoticComponent<EdsChipProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-chip.d.ts","sourceRoot":"","sources":["../../src/eds-chip/eds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrE,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,0EAA0E;AAC1E,MAAM,WAAW,WAAW;IACxB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qEAAqE;IACrE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnF,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAS1C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7F,qDAAqD;IACrD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,qEAAqE;IACrE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,oFAAoF;IACpF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAcD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,sFAmHlB,CAAC"}