@eui/eds-react 22.0.0-alpha.8

package/eds-chip/eds-chip.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRef } from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/** Maps a chip size to the size of its inner (remove) icon. */
+const CHIP_ICON_SIZE = {
+    s: 'xs',
+    m: 's',
+    l: 'm',
+};
+/** Lazily builds the default `data` payload, mirroring the Angular input default. */
+function defaultChipData() {
+    return {
+        id: crypto.randomUUID(),
+        tooltip: {
+            color: 'edsTooltipPrimary',
+            contentAlignment: null,
+            position: 'above',
+        },
+    };
+}
+/**
+ * `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 const EdsChip = React.forwardRef(function EdsChip({ color = 'neutral', size = 'm', ariaLabel, e2eAttr = 'eds-chip', edsInternalId: _edsInternalId = '', tooltipMessage: _tooltipMessage = '', id = '', data, isRemovable = false, isActive = false, disabled = false, onChipRemove, onChipClick, children, className, onClick, onKeyDown, ...rest }, ref) {
+    const contentRef = useRef(null);
+    const iconSize = CHIP_ICON_SIZE[size];
+    // The `data` input has a per-instance default; keep it stable across renders.
+    const dataRef = useRef(undefined);
+    if (dataRef.current === undefined) {
+        dataRef.current = data ?? defaultChipData();
+    }
+    const chipData = data ?? dataRef.current;
+    const emitRemove = (event) => {
+        if (event instanceof KeyboardEvent && event.code === 'Backspace') {
+            onChipRemove?.({ ...chipData, _event: event });
+        }
+        else {
+            onChipRemove?.(chipData);
+        }
+    };
+    const handleHostAction = (event) => {
+        if (disabled) {
+            return;
+        }
+        if (isRemovable) {
+            emitRemove(event);
+        }
+        else {
+            onChipClick?.(chipData);
+        }
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        handleHostAction(event.nativeEvent);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        const key = event.key;
+        if (key === 'Enter') {
+            handleHostAction(event.nativeEvent);
+        }
+        else if (key === ' ' || key === 'Spacebar') {
+            // Space activation — prevent page scroll and trigger the host action.
+            event.preventDefault();
+            handleHostAction(event.nativeEvent);
+        }
+        else if (key === 'Delete' || key === 'Backspace') {
+            if (disabled || !isRemovable) {
+                return;
+            }
+            event.preventDefault();
+            emitRemove(event.nativeEvent);
+        }
+    };
+    // Angular reads the projected text for the remove-icon aria-label. We approximate by
+    // reading the rendered content on demand (falls back to a generic label).
+    const removeLabel = `Remove ${contentRef.current?.textContent?.trim() ?? ''} chip`
+        .replace(/\s+/g, ' ')
+        .trim();
+    return (_jsxs("span", { ref: ref, className: className ? `eds-chip ${className}` : 'eds-chip', id: id !== '' ? String(id) : undefined, "data-color": color, "data-size": size, "data-removable": isRemovable ? '' : undefined, "data-active": isActive ? '' : undefined, "data-disabled": disabled ? '' : undefined, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled ? 'true' : undefined, "aria-pressed": isActive ? 'true' : undefined, "aria-label": ariaLabel, "data-e2e": e2eAttr, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [_jsx("div", { className: "eds-chip__content", ref: contentRef, children: children }), isRemovable ? (_jsx(EdsIcon, { className: "eds-chip__close", ariaLabel: removeLabel, ariaHidden: false, icon: "x:core", size: iconSize })) : null] }));
+});
+//# sourceMappingURL=eds-chip.js.map

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

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

package/eds-chip/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsChip } from './eds-chip.js';
+export type { EdsChipProps, EdsChipColor, EdsChipSize, EdsChipData, EdsChipTooltip, } from './eds-chip.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EACR,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,cAAc,GACjB,MAAM,eAAe,CAAC"}

package/eds-chip/index.js

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

package/eds-chip/index.js.map

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

package/eds-icon/eds-icon.css

@@ -0,0 +1,80 @@
+/*
+ * eds-icon — pure React port of eds-icon.scss.
+ *
+ * :host -> .eds-icon ; :host([attr="v"]) -> .eds-icon[data-attr="v"] ;
+ * :host([bool]) -> .eds-icon[data-bool]. --_eds-icon-* privates + --eds-* tokens unchanged;
+ * tokens cascade in from the .eui-21 context (required on an ancestor).
+ */
+
+.eds-icon {
+    --_eds-icon-size: var(--_icon-size, var(--eds-is-m)); /* inherited from parent */
+    /* --_eds-icon-on-surface lets a parent (e.g. eds-badge) override the icon color;
+       when unset, each color variant supplies its own token below. */
+    --_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));
+
+    display: inline-flex;
+    position: relative;
+}
+
+.eds-icon .eds-icon-svg {
+    height: var(--_eds-icon-size);
+    width: var(--_eds-icon-size);
+    fill: var(--_eds-icon-color);
+    color: var(--_eds-icon-color);
+}
+
+/* Multi-color sprites (flags) — disable fill inheritance so path fill attributes render */
+.eds-icon .eds-icon-svg.eds-icon-set-flags-1x1,
+.eds-icon .eds-icon-svg.eds-icon-set-flags-4x3 {
+    fill: none;
+}
+
+/* SIZE VARIANTS */
+.eds-icon[data-size="2xs"] { --_eds-icon-size: var(--eds-is-2xs); }
+.eds-icon[data-size="xs"]  { --_eds-icon-size: var(--eds-is-xs); }
+.eds-icon[data-size="s"]   { --_eds-icon-size: var(--eds-is-s); }
+.eds-icon[data-size="m"]   { --_eds-icon-size: var(--eds-is-m); }
+.eds-icon[data-size="l"]   { --_eds-icon-size: var(--eds-is-l); }
+.eds-icon[data-size="xl"]  { --_eds-icon-size: var(--eds-is-xl); }
+.eds-icon[data-size="2xl"] { --_eds-icon-size: var(--eds-is-2xl); }
+.eds-icon[data-size="3xl"] { --_eds-icon-size: var(--eds-is-3xl); }
+.eds-icon[data-size="4xl"] { --_eds-icon-size: var(--eds-is-4xl); }
+
+/* COLOR VARIANTS */
+.eds-icon[data-color="neutral"]         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground)); }
+.eds-icon[data-color="neutral-subtle"]  { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle)); }
+.eds-icon[data-color="neutral-subtler"] { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler)); }
+.eds-icon[data-color="primary"]         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary)); }
+.eds-icon[data-color="highlight"]       { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight)); }
+.eds-icon[data-color="info"]            { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info)); }
+.eds-icon[data-color="success"]         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success)); }
+.eds-icon[data-color="warning"]         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning)); }
+.eds-icon[data-color="critical"]        { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical)); }
+.eds-icon[data-color="brand"]           { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand)); }
+.eds-icon[data-color="disabled"]        { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled)); }
+
+/* ROUNDED */
+.eds-icon[data-rounded] {
+    border-radius: 50%;
+    overflow: hidden;
+}
+.eds-icon[data-rounded] .eds-icon-svg {
+    border-radius: 50%;
+}
+
+/* LOADING SPINNER — inherits icon size and color */
+.eds-icon[data-loading] .eds-icon-spinner {
+    display: inline-block;
+    width: var(--_eds-icon-size);
+    height: var(--_eds-icon-size);
+    border: 3px solid var(--eds-c-border-neutral-subtle);
+    border-top-color: var(--_eds-icon-color);
+    border-radius: 50%;
+    animation: eds-icon-spin 0.6s linear infinite;
+}
+
+@keyframes eds-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/eds-icon/eds-icon.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+/**
+ * Local narrowed color union — the icon's color contract (ported 1:1 from Angular `eds-icon`).
+ */
+export type EdsIconColor = 'neutral' | 'neutral-subtle' | 'neutral-subtler' | 'primary' | 'highlight' | 'info' | 'success' | 'warning' | 'critical' | 'brand' | 'disabled';
+/** Local narrowed size union — the icon's size contract. */
+export type EdsIconSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface EdsIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /**
+     * Name of the icon, optionally including the set via `'iconName:setName'`. When a colon
+     * is present it splits into the icon name and set.
+     */
+    icon?: string;
+    /** Icon set library to load the icon from. @default 'regular' */
+    set?: string;
+    /** Semantic color of the icon. @default 'neutral' */
+    color?: EdsIconColor;
+    /** Size of the icon. @default 'm' */
+    size?: EdsIconSize;
+    /** Accessible label describing the icon's purpose (used when not decorative). */
+    ariaLabel?: string;
+    /** Hides the icon from assistive technologies when purely decorative. @default true */
+    ariaHidden?: boolean;
+    /** Applies a circular clip (border-radius: 50%), useful for flag icons. @default false */
+    rounded?: boolean;
+    /** Replaces the icon with a spinning loading indicator (inherits size + color). @default false */
+    isLoading?: boolean;
+    /** Base URL under which the sprite assets live. @default 'assets' */
+    assetsBaseUrl?: string;
+    /** Optional projected content rendered after the icon svg (matches Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsIcon` — pure React port of the Angular `eds-icon`.
+ *
+ * Displays a scalable vector icon from a sprite set via `<use href>`, with semantic color
+ * and size (reflected as `data-*` attributes), an optional circular clip, and a loading
+ * spinner. No Web Component / `@lit/react` dependency. The `.eds-icon` root class is kept
+ * (not just a data attribute) because other components (e.g. `eds-badge`) position
+ * themselves against an `.eds-icon` ancestor. Requires `@eui/eds-styles` + the `eui-21`
+ * class on an ancestor, and the sprite assets served under `assetsBaseUrl`.
+ */
+export declare const EdsIcon: React.ForwardRefExoticComponent<EdsIconProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon.d.ts","sourceRoot":"","sources":["../../src/eds-icon/eds-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,YAAY,GAClB,SAAS,GACT,gBAAgB,GAChB,iBAAiB,GACjB,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,CAAC;AAEjB,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAExF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACtF;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kGAAkG;IAClG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAWD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,sFA8ClB,CAAC"}

package/eds-icon/eds-icon.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+/** Split `'name:set'` into its parts, falling back to the `set` prop / `'regular'`. */
+function resolveIcon(icon, set) {
+    if (icon && icon.indexOf(':') > -1) {
+        const [name, iconSet] = icon.split(':');
+        return { iconName: name, resolvedSet: iconSet || 'regular' };
+    }
+    return { iconName: icon, resolvedSet: set || 'regular' };
+}
+/**
+ * `EdsIcon` — pure React port of the Angular `eds-icon`.
+ *
+ * Displays a scalable vector icon from a sprite set via `<use href>`, with semantic color
+ * and size (reflected as `data-*` attributes), an optional circular clip, and a loading
+ * spinner. No Web Component / `@lit/react` dependency. The `.eds-icon` root class is kept
+ * (not just a data attribute) because other components (e.g. `eds-badge`) position
+ * themselves against an `.eds-icon` ancestor. Requires `@eui/eds-styles` + the `eui-21`
+ * class on an ancestor, and the sprite assets served under `assetsBaseUrl`.
+ */
+export const EdsIcon = React.forwardRef(function EdsIcon({ icon = '', set = 'regular', color = 'neutral', size = 'm', ariaLabel = '', ariaHidden = true, rounded = false, isLoading = false, assetsBaseUrl = 'assets', children, className, ...rest }, ref) {
+    const { iconName, resolvedSet } = resolveIcon(icon, set);
+    const rootClass = className ? `eds-icon ${className}` : 'eds-icon';
+    return (_jsxs("span", { ref: ref, className: rootClass, "data-color": color, "data-size": size, "data-rounded": rounded ? '' : undefined, "data-loading": isLoading ? '' : undefined, role: ariaHidden ? undefined : 'img', "aria-label": ariaLabel || undefined, "aria-hidden": ariaHidden || undefined, ...rest, children: [isLoading ? (_jsx("span", { className: "eds-icon-spinner", "aria-hidden": "true" })) : (_jsx("svg", { className: `eds-icon-svg eds-sprite-${iconName} eds-icon-set-${resolvedSet}`, "aria-hidden": "true", children: _jsx("use", { href: `${assetsBaseUrl}/eds/icons/sprites/${resolvedSet}.svg#${iconName}` }) })), children] }));
+});
+//# sourceMappingURL=eds-icon.js.map

package/eds-icon/eds-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon.js","sourceRoot":"","sources":["../../src/eds-icon/eds-icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+C/B,uFAAuF;AACvF,SAAS,WAAW,CAAC,IAAY,EAAE,GAAW;IAC1C,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QACjC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACxC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,SAAS,EAAE,CAAC;IACjE,CAAC;IACD,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;AAC7D,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAgC,SAAS,OAAO,CACnF,EACI,IAAI,GAAG,EAAE,EACT,GAAG,GAAG,SAAS,EACf,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,SAAS,GAAG,EAAE,EACd,UAAU,GAAG,IAAI,EACjB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,QAAQ,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;IAEnE,OAAO,CACH,gBACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,gBACR,KAAK,eACN,IAAI,kBACD,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBACxB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACxC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,gBACxB,SAAS,IAAI,SAAS,iBACrB,UAAU,IAAI,SAAS,KAChC,IAAI,aAEP,SAAS,CAAC,CAAC,CAAC,CACT,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,GAAG,CAC3D,CAAC,CAAC,CAAC,CACA,cACI,SAAS,EAAE,2BAA2B,QAAQ,iBAAiB,WAAW,EAAE,iBAChE,MAAM,YAElB,cAAK,IAAI,EAAE,GAAG,aAAa,sBAAsB,WAAW,QAAQ,QAAQ,EAAE,GAAI,GAChF,CACT,EACA,QAAQ,IACN,CACV,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-icon/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsIcon } from './eds-icon.js';
+export type { EdsIconProps, EdsIconColor, EdsIconSize } from './eds-icon.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/eds-icon/index.js

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

package/eds-icon/index.js.map

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

package/eds-icon-button/eds-icon-button.css

@@ -0,0 +1,83 @@
+/*
+ * eds-icon-button — pure React port of eds-icon-button.scss.
+ * :host -> .eds-icon-button ; :host([attr]) -> .eds-icon-button[data-attr].
+ * Parent overrides: --_button-padding, --_button-surface-hover, --_button-on-surface-hover,
+ * --_button-color (e.g. the alert sets --_button-padding). Focus-ring mixins inlined.
+ */
+
+.eds-icon-button {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));
+    --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-3xs));
+    --_eds-icon-button-color: var(--eds-c-foreground-subtle);
+
+    display: inline-flex;
+    border: none;
+    cursor: pointer;
+    background-color: inherit;
+    padding: var(--_eds-icon-button-padding);
+    position: relative;
+    color: var(--_eds-icon-button-color);
+}
+.eds-icon-button:hover,
+.eds-icon-button:active {
+    background-color: var(--_eds-icon-button-surface-hover);
+    color: var(--_eds-icon-button-on-surface-hover);
+}
+
+/* COLOR VARIANTS */
+.eds-icon-button[data-color="brand"] {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-brand--hover));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-brand--hover));
+    --_eds-icon-button-color: var(--_button-color, var(--eds-c-on-surface-brand));
+}
+.eds-icon-button[data-color="neutral"] {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover));
+}
+.eds-icon-button[data-color="info"] {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-info-subtler--hover));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-info-subtler--hover));
+}
+.eds-icon-button[data-color="success"] {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-success-subtler--hover));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-success-subtler--hover));
+}
+.eds-icon-button[data-color="warning"] {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-warning-subtler--hover));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-warning-subtler--hover));
+}
+.eds-icon-button[data-color="critical"] {
+    --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler--hover));
+    --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler--hover));
+}
+
+/* SIZE VARIANTS */
+.eds-icon-button[data-size="2xs"] { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-2xs)); }
+.eds-icon-button[data-size="xs"]  { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-2xs)); }
+.eds-icon-button[data-size="s"]   { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-2xs)); }
+.eds-icon-button[data-size="m"]   { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-xs)); }
+.eds-icon-button[data-size="l"]   { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-s)); }
+
+/* STATE */
+.eds-icon-button[data-rounded] {
+    border-radius: var(--eds-br-full);
+}
+.eds-icon-button[data-disabled] {
+    --_eds-icon-button-color: var(--_button-color, var(--eds-c-foreground-disabled));
+    --_eds-icon-button-surface-hover: transparent;
+    --_eds-icon-button-on-surface-hover: var(--_eds-icon-button-color);
+    cursor: default;
+}
+
+/* FOCUS RING — inlined base.eds-focus-visible-ring / *-rounded */
+.eds-icon-button:not(: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-xs) !important;
+}
+.eds-icon-button[data-rounded]:not(: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;
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/** Local narrowed color union — the icon button's color contract. */
+export type EdsIconButtonColor = 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+/** Local narrowed size union — the icon button's size contract. */
+export type EdsIconButtonSize = '2xs' | 'xs' | 's' | 'm' | 'l';
+export interface EdsIconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onClick'> {
+    /** The name of the icon to display. */
+    icon?: string;
+    /** Semantic color of the icon button. @default 'neutral' */
+    color?: EdsIconButtonColor;
+    /** Size of the icon button. @default 'm' */
+    size?: EdsIconButtonSize;
+    /** Accessible label describing the button's purpose. @default 'EDS Icon button' */
+    ariaLabel?: string;
+    /** Applies rounded corners. @default false */
+    rounded?: boolean;
+    /** Disables the button (non-interactive, disabled styling, removed from tab order). @default false */
+    disabled?: boolean;
+    /** Emitted when the button is clicked (native click event). */
+    onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Optional projected content (e.g. an EdsBadge) rendered inside the icon. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsIconButton` — pure React port of the Angular `button[edsIconButton]`.
+ *
+ * The root element is a native `<button.eds-icon-button>` (the host IS the button, matching
+ * the attribute-selector Angular component). Renders the pure-React `EdsIcon`; projected
+ * children (e.g. a badge) pass into the icon. `color`/`size`/`rounded`/`disabled` reflect as
+ * `data-*` attributes; the Angular `(buttonClick)` output maps to the `onButtonClick` prop.
+ */
+export declare const EdsIconButton: React.ForwardRefExoticComponent<EdsIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=eds-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon-button.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/eds-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,qEAAqE;AACrE,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnG,mEAAmE;AACnE,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/D,MAAM,WAAW,kBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChF,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sGAAsG;IACtG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,8FAkCxB,CAAC"}

package/eds-icon-button/eds-icon-button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/**
+ * `EdsIconButton` — pure React port of the Angular `button[edsIconButton]`.
+ *
+ * The root element is a native `<button.eds-icon-button>` (the host IS the button, matching
+ * the attribute-selector Angular component). Renders the pure-React `EdsIcon`; projected
+ * children (e.g. a badge) pass into the icon. `color`/`size`/`rounded`/`disabled` reflect as
+ * `data-*` attributes; the Angular `(buttonClick)` output maps to the `onButtonClick` prop.
+ */
+export const EdsIconButton = React.forwardRef(function EdsIconButton({ icon = '', color = 'neutral', size = 'm', ariaLabel = 'EDS Icon button', rounded = false, disabled = false, onButtonClick, children, className, ...rest }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", className: className ? `eds-icon-button ${className}` : 'eds-icon-button', "data-color": color, "data-size": size, "data-rounded": rounded ? '' : undefined, "data-disabled": disabled ? '' : undefined, disabled: disabled, "aria-label": ariaLabel, onClick: onButtonClick, ...rest, children: _jsx(EdsIcon, { icon: icon, color: color, size: size, children: children }) }));
+});
+//# sourceMappingURL=eds-icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon-button.js","sourceRoot":"","sources":["../../src/eds-icon-button/eds-icon-button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AA4BlD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAwC,SAAS,aAAa,CACvG,EACI,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,SAAS,GAAG,iBAAiB,EAC7B,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,OAAO,CACH,iBACI,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,iBAAiB,gBAC7D,KAAK,eACN,IAAI,kBACD,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBACvB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACxC,QAAQ,EAAE,QAAQ,gBACN,SAAS,EACrB,OAAO,EAAE,aAAa,KAClB,IAAI,YAER,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,YACxC,QAAQ,GACH,GACL,CACZ,CAAC;AACN,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { EdsIconButton } from './eds-icon-button.js';
+export type { EdsIconButtonProps, EdsIconButtonColor, EdsIconButtonSize } from './eds-icon-button.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-icon-button/index.js

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

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

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

package/eds-icon-state/eds-icon-state.css

@@ -0,0 +1,5 @@
+/* eds-icon-state — pure React port of eds-icon-state.scss. :host -> .eds-icon-state. */
+
+.eds-icon-state {
+    display: flex;
+}

package/eds-icon-state/eds-icon-state.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * Local narrowed color union — the icon-state's color contract (each value maps to a
+ * specific status icon). Ported 1:1 from Angular `eds-icon-state`.
+ */
+export type EdsIconStateColor = 'info' | 'success' | 'warning' | 'critical';
+/** Local narrowed size union — the icon-state's size contract. */
+export type EdsIconStateSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export interface EdsIconStateProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Semantic status color, selecting the corresponding status icon. @default 'info' */
+    color?: EdsIconStateColor;
+    /** Size of the status icon. @default 'm' */
+    size?: EdsIconStateSize;
+    /** Accessible label describing the icon's meaning (defaults to the per-status label). */
+    ariaLabel?: string;
+}
+/**
+ * `EdsIconState` — pure React port of the Angular `eds-icon-state`.
+ *
+ * Renders the status icon for a semantic color via the pure-React `EdsIcon`. Reflects
+ * `color`/`size` as `data-*` attributes (matching the Angular host bindings).
+ */
+export declare const EdsIconState: React.ForwardRefExoticComponent<EdsIconStateProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-icon-state.d.ts.map

package/eds-icon-state/eds-icon-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon-state.d.ts","sourceRoot":"","sources":["../../src/eds-icon-state/eds-icon-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,kEAAkE;AAClE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAErE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC3F,sFAAsF;IACtF,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,2FAsBvB,CAAC"}

package/eds-icon-state/eds-icon-state.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/** color → { icon, default aria-label }, mirroring the Angular @switch template. */
+const STATE_ICON = {
+    success: { icon: 'check-circle:core', label: 'EDS success icon' },
+    warning: { icon: 'warning:core', label: 'EDS warning icon' },
+    critical: { icon: 'warning-circle:core', label: 'EDS danger icon' },
+    info: { icon: 'info:core', label: 'EDS info icon' },
+};
+/**
+ * `EdsIconState` — pure React port of the Angular `eds-icon-state`.
+ *
+ * Renders the status icon for a semantic color via the pure-React `EdsIcon`. Reflects
+ * `color`/`size` as `data-*` attributes (matching the Angular host bindings).
+ */
+export const EdsIconState = React.forwardRef(function EdsIconState({ color = 'info', size = 'm', ariaLabel, className, ...rest }, ref) {
+    const state = STATE_ICON[color];
+    return (_jsx("span", { ref: ref, className: className ? `eds-icon-state ${className}` : 'eds-icon-state', "data-color": color, "data-size": size, ...rest, children: _jsx(EdsIcon, { icon: state.icon, color: color, size: size, ariaHidden: false, ariaLabel: ariaLabel || state.label }) }));
+});
+//# sourceMappingURL=eds-icon-state.js.map

package/eds-icon-state/eds-icon-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon-state.js","sourceRoot":"","sources":["../../src/eds-icon-state/eds-icon-state.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAoBlD,oFAAoF;AACpF,MAAM,UAAU,GAA+D;IAC3E,OAAO,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IACjE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC5D,QAAQ,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACnE,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE;CACtD,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAqC,SAAS,YAAY,CAClG,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAC7D,GAAG;IAEH,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAChC,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC,CAAC,gBAAgB,gBAC3D,KAAK,eACN,IAAI,KACX,IAAI,YAER,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,SAAS,IAAI,KAAK,CAAC,KAAK,GACrC,GACC,CACV,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-icon-state/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsIconState } from './eds-icon-state.js';
+export type { EdsIconStateProps, EdsIconStateColor, EdsIconStateSize } from './eds-icon-state.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-icon-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-icon-state/index.js

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

package/eds-icon-state/index.js.map

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

package/eds-link/eds-link.css

@@ -0,0 +1,83 @@
+/* Pure-React port of eds-link.scss — attribute-scoped light-DOM CSS. */
+
+.eds-link {
+    color: var(--eds-c-link);
+    text-decoration: none;
+    cursor: pointer;
+    font: inherit;
+    transition: color 0.15s ease;
+}
+
+.eds-link:hover {
+    color: var(--eds-c-link--hover);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 2px;
+}
+
+.eds-link:active {
+    color: var(--eds-c-link--pressed);
+}
+
+.eds-link:focus-visible {
+    outline: var(--eds-bw-s) solid var(--eds-c-focus);
+    outline-offset: 2px;
+    border-radius: var(--eds-br-xs);
+}
+
+.eds-link:visited {
+    color: var(--eds-c-link--visited);
+}
+
+/* Underline variant — explicitly opt in to underline */
+.eds-link[data-underline] {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.eds-link[data-underline]:hover {
+    text-decoration-thickness: 2px;
+}
+
+/* External link — adds arrow-square-out icon after content */
+.eds-link[data-external]::after {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-inline-start: var(--eds-sp-3xs);
+    background-color: currentColor;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z'/%3E%3C/svg%3E");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    vertical-align: middle;
+    position: relative;
+    top: -3px;
+}
+
+/* Contrast — dark foreground color for high-contrast contexts */
+.eds-link[data-contrast] {
+    color: var(--eds-c-link-contrast);
+}
+
+.eds-link[data-contrast]:hover {
+    color: var(--eds-c-link-contrast--hover);
+}
+
+.eds-link[data-contrast]:active {
+    color: var(--eds-c-link-contrast--pressed);
+}
+
+.eds-link[data-contrast]:visited {
+    color: var(--eds-c-link-contrast--visited);
+}
+
+/* Inherit — takes parent color, only shows link behavior on hover */
+.eds-link[data-inherit] {
+    color: inherit;
+}
+
+.eds-link[data-inherit]:hover {
+    color: var(--eds-c-link);
+    text-decoration: underline;
+}