@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-list/eds-list-item-content.css

@@ -0,0 +1,11 @@
+/*
+ * eds-list-item-content — pure React port of eds-list-item-content.scss.
+ * :host -> .eds-list-item-content. .eui-21 wrapper dropped (share-ready).
+ */
+
+.eds-list-item-content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+}

package/eds-list/eds-list-item-content.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsListItemContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Generic content between the label and end slots (progress bars, descriptions, badges). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsListItemContent` — pure React port of the Angular `eds-list-item-content`.
+ *
+ * Generic content slot for a list item. Pure content-projection wrapper carrying the
+ * `.eds-list-item-content` class.
+ */
+export declare const EdsListItemContent: React.ForwardRefExoticComponent<EdsListItemContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-list-item-content.d.ts.map

package/eds-list/eds-list-item-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-content.d.ts","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,gGAY9B,CAAC"}

package/eds-list/eds-list-item-content.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsListItemContent` — pure React port of the Angular `eds-list-item-content`.
+ *
+ * Generic content slot for a list item. Pure content-projection wrapper carrying the
+ * `.eds-list-item-content` class.
+ */
+export const EdsListItemContent = React.forwardRef(function EdsListItemContent({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-list-item-content ${className}` : 'eds-list-item-content', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-list-item-content.js.map

package/eds-list/eds-list-item-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-content.js","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-content.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAC9C,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC7D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,yBAAyB,SAAS,EAAE,CAAC,CAAC,CAAC,uBAAuB,KACjF,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-list/eds-list-item-end.css

@@ -0,0 +1,13 @@
+/*
+ * eds-list-item-end — pure React port of eds-list-item-end.scss.
+ * :host -> .eds-list-item-end. .eui-21 wrapper dropped (share-ready).
+ */
+
+.eds-list-item-end {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    font: var(--eds-f-label-s-semi-bold);
+    color: var(--eds-c-foreground-default);
+    white-space: nowrap;
+}

package/eds-list/eds-list-item-end.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsListItemEndProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Trailing content — typically a value, badge, or action button. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsListItemEnd` — pure React port of the Angular `eds-list-item-end`.
+ *
+ * Trailing slot for a list item. Pure content-projection wrapper carrying the
+ * `.eds-list-item-end` class.
+ */
+export declare const EdsListItemEnd: React.ForwardRefExoticComponent<EdsListItemEndProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-list-item-end.d.ts.map

package/eds-list/eds-list-item-end.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-end.d.ts","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-end.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,4FAY1B,CAAC"}

package/eds-list/eds-list-item-end.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsListItemEnd` — pure React port of the Angular `eds-list-item-end`.
+ *
+ * Trailing slot for a list item. Pure content-projection wrapper carrying the
+ * `.eds-list-item-end` class.
+ */
+export const EdsListItemEnd = React.forwardRef(function EdsListItemEnd({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-list-item-end ${className}` : 'eds-list-item-end', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-list-item-end.js.map

package/eds-list/eds-list-item-end.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-end.js","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-end.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACzD,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,SAAS,EAAE,CAAC,CAAC,CAAC,mBAAmB,KACzE,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-list/eds-list-item-label.css

@@ -0,0 +1,13 @@
+/*
+ * eds-list-item-label — pure React port of eds-list-item-label.scss.
+ * :host -> .eds-list-item-label. .eui-21 wrapper dropped (share-ready).
+ */
+
+.eds-list-item-label {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-default);
+}

package/eds-list/eds-list-item-label.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsListItemLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Primary label content — the main text of the list item. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsListItemLabel` — pure React port of the Angular `eds-list-item-label`.
+ *
+ * Primary label slot for a list item (flex: 1, truncatable). Pure content-projection wrapper
+ * carrying the `.eds-list-item-label` class.
+ */
+export declare const EdsListItemLabel: React.ForwardRefExoticComponent<EdsListItemLabelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-list-item-label.d.ts.map

package/eds-list/eds-list-item-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-label.d.ts","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,8FAY5B,CAAC"}

package/eds-list/eds-list-item-label.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsListItemLabel` — pure React port of the Angular `eds-list-item-label`.
+ *
+ * Primary label slot for a list item (flex: 1, truncatable). Pure content-projection wrapper
+ * carrying the `.eds-list-item-label` class.
+ */
+export const EdsListItemLabel = React.forwardRef(function EdsListItemLabel({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-list-item-label ${className}` : 'eds-list-item-label', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-list-item-label.js.map

package/eds-list/eds-list-item-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-label.js","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-label.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC3D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAuB,SAAS,EAAE,CAAC,CAAC,CAAC,qBAAqB,KAC7E,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-list/eds-list-item-start.css

@@ -0,0 +1,11 @@
+/*
+ * eds-list-item-start — pure React port of eds-list-item-start.scss.
+ * :host -> .eds-list-item-start. .eui-21 wrapper dropped (share-ready).
+ */
+
+.eds-list-item-start {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}

package/eds-list/eds-list-item-start.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsListItemStartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Leading content — typically an icon, avatar, or checkbox. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsListItemStart` — pure React port of the Angular `eds-list-item-start`.
+ *
+ * Leading slot for a list item. Pure content-projection wrapper carrying the
+ * `.eds-list-item-start` class.
+ */
+export declare const EdsListItemStart: React.ForwardRefExoticComponent<EdsListItemStartProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-list-item-start.d.ts.map

package/eds-list/eds-list-item-start.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-start.d.ts","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-start.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,8FAY5B,CAAC"}

package/eds-list/eds-list-item-start.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsListItemStart` — pure React port of the Angular `eds-list-item-start`.
+ *
+ * Leading slot for a list item. Pure content-projection wrapper carrying the
+ * `.eds-list-item-start` class.
+ */
+export const EdsListItemStart = React.forwardRef(function EdsListItemStart({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-list-item-start ${className}` : 'eds-list-item-start', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-list-item-start.js.map

package/eds-list/eds-list-item-start.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item-start.js","sourceRoot":"","sources":["../../src/eds-list/eds-list-item-start.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC3D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAuB,SAAS,EAAE,CAAC,CAAC,CAAC,qBAAqB,KAC7E,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-list/eds-list-item.css

@@ -0,0 +1,82 @@
+/*
+ * eds-list-item — pure React port of eds-list-item.scss.
+ * :host -> .eds-list-item ; :host(.eds-list-item--interactive) -> .eds-list-item.eds-list-item--interactive
+ * (BEM modifier classes kept, as the Angular source predates the String-Props model).
+ * Bare private --_color renamed to --_eds-list-item-color (component-prefixed private).
+ * .eui-21 wrapper dropped (share-ready).
+ */
+
+/* Presentational mode (default) */
+.eds-list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-s);
+    padding: var(--eds-sp-s) 0;
+    border-bottom: 1px solid var(--eds-c-border-divider);
+}
+
+.eds-list-item:last-child {
+    border-bottom: none;
+}
+
+/* Interactive mode — overrides presentational styles */
+.eds-list-item.eds-list-item--interactive {
+    --_eds-list-item-color: var(--eds-c-foreground);
+
+    background: none;
+    border: var(--eds-bw-none);
+    border-bottom: none;
+    box-shadow: none;
+    color: var(--_eds-list-item-color);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    max-width: 100%;
+    outline: none;
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
+    text-align: left;
+    text-decoration: none;
+    user-select: none;
+    width: 100%;
+    list-style: none;
+}
+
+.eds-list-item.eds-list-item--interactive.eds-list-item--neutral {
+    --_eds-list-item-color: var(--eds-c-foreground-subtle);
+}
+.eds-list-item.eds-list-item--interactive.eds-list-item--info {
+    --_eds-list-item-color: var(--eds-c-foreground-info);
+}
+.eds-list-item.eds-list-item--interactive.eds-list-item--success {
+    --_eds-list-item-color: var(--eds-c-foreground-success);
+}
+.eds-list-item.eds-list-item--interactive.eds-list-item--warning {
+    --_eds-list-item-color: var(--eds-c-foreground-warning);
+}
+.eds-list-item.eds-list-item--interactive.eds-list-item--critical {
+    --_eds-list-item-color: var(--eds-c-foreground-critical);
+}
+
+.eds-list-item.eds-list-item--interactive:focus-visible {
+    outline: var(--eds-bw-xs) solid var(--eds-c-border-focus);
+    outline-offset: calc(-1 * var(--eds-sp-4xs));
+    border-radius: var(--eds-br-xs);
+}
+
+.eds-list-item.eds-list-item--interactive:hover {
+    background-color: var(--eds-c-surface-elevation-sunken);
+}
+
+.eds-list-item.eds-list-item--interactive:active,
+.eds-list-item.eds-list-item--interactive.eds-list-item--active {
+    background-color: var(--eds-c-surface-primary-subtle);
+}
+
+.eds-list-item.eds-list-item--interactive.eds-list-item--disabled {
+    pointer-events: none;
+    opacity: var(--eds-op-40);
+}

package/eds-list/eds-list-item.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+/**
+ * Semantic color variant for an interactive list item. Mirrors the Angular `EdsColorDirective`
+ * host-directive inputs (`edsNeutral`/`edsInfo`/…) folded into a single `color` prop; produces
+ * the `eds-list-item--{color}` class the ported CSS targets. Only meaningful in interactive mode.
+ */
+export type EdsListItemColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+export interface EdsListItemProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Whether the item is visually marked active/selected. In interactive mode this is the
+     * initial active state; the parent list's keyboard manager may override it (roving focus).
+     * @default false
+     */
+    isActive?: boolean;
+    /** Whether the item is disabled. @default false */
+    edsDisabled?: boolean;
+    /** Semantic color variant (interactive mode only). Omit for the default foreground color. */
+    color?: EdsListItemColor;
+    /**
+     * Internal navigation URL. When set (and no `urlExternal`), the item renders as an `<a href>`;
+     * the component stays router-agnostic — navigation is delegated to the consumer via `onClick`.
+     */
+    url?: string;
+    /** External navigation URL. When set, the item renders as an `<a href>` opened by the browser. */
+    urlExternal?: string;
+    /** Target for the external URL. @default '_blank' */
+    urlExternalTarget?: string;
+    /** Slot content — the item's start/label/content/end sub-components and/or bare text. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsListItem` — pure React port of the Angular `eds-list-item`.
+ *
+ * A single row in an `EdsList`. In presentational mode (parent `EdsList` has no `role`) it is a
+ * `<div>` projecting its start/label/content/end sub-components. In interactive mode (parent sets
+ * `role`) it gains the `eds-list-item--interactive` class, a computed ARIA role
+ * (`option`/`menuitem`/`listitem`), `aria-selected` for listbox options, `aria-disabled`, a
+ * roving `tabindex` (managed by the parent's keyboard manager), and color variants. Active state
+ * is seeded from `isActive` and can be overridden by the parent key manager (mirrors the Angular
+ * `linkedSignal` + `setActiveStyles()`). Router-agnostic: a `url`/`urlExternal` item renders an
+ * `<a href>` and delegates navigation to the consumer.
+ */
+export declare const EdsListItem: React.ForwardRefExoticComponent<EdsListItemProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=eds-list-item.d.ts.map

package/eds-list/eds-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list-item.d.ts","sourceRoot":"","sources":["../../src/eds-list/eds-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6FAA6F;IAC7F,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,sFAqHtB,CAAC"}

package/eds-list/eds-list-item.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEdsList } from './eds-list-context.js';
+/**
+ * `EdsListItem` — pure React port of the Angular `eds-list-item`.
+ *
+ * A single row in an `EdsList`. In presentational mode (parent `EdsList` has no `role`) it is a
+ * `<div>` projecting its start/label/content/end sub-components. In interactive mode (parent sets
+ * `role`) it gains the `eds-list-item--interactive` class, a computed ARIA role
+ * (`option`/`menuitem`/`listitem`), `aria-selected` for listbox options, `aria-disabled`, a
+ * roving `tabindex` (managed by the parent's keyboard manager), and color variants. Active state
+ * is seeded from `isActive` and can be overridden by the parent key manager (mirrors the Angular
+ * `linkedSignal` + `setActiveStyles()`). Router-agnostic: a `url`/`urlExternal` item renders an
+ * `<a href>` and delegates navigation to the consumer.
+ */
+export const EdsListItem = React.forwardRef(function EdsListItem({ isActive = false, edsDisabled = false, color, url, urlExternal, urlExternalTarget = '_blank', children, className, ...rest }, ref) {
+    const list = useEdsList();
+    const isInteractive = list?.isInteractive ?? false;
+    const parentRole = list?.role;
+    const elementRef = useRef(null);
+    React.useImperativeHandle(ref, () => elementRef.current);
+    // Active state: seeded from the isActive input, overridable by the parent key manager
+    // (Angular linkedSignal(() => isActive()) + setActiveStyles/setInactiveStyles).
+    const [activeState, setActiveState] = useState(isActive);
+    useEffect(() => {
+        setActiveState(isActive);
+    }, [isActive]);
+    // Derive the ARIA role from the parent list's role (Angular itemRole()).
+    let itemRole;
+    switch (parentRole) {
+        case 'listbox':
+            itemRole = 'option';
+            break;
+        case 'menu':
+            itemRole = 'menuitem';
+            break;
+        case 'list':
+            itemRole = 'listitem';
+            break;
+        default:
+            itemRole = undefined;
+    }
+    // aria-selected only for listbox options (APG requires 'false', not absent, on non-selected).
+    const ariaSelected = itemRole === 'option' ? String(activeState) : undefined;
+    // Tabindex: -1 in interactive mode (managed by the parent key manager), unset otherwise.
+    const tabIndex = isInteractive ? -1 : undefined;
+    // Angular hostClasses(): base + color + interactive/active/disabled modifiers.
+    const classes = [
+        'eds-list-item',
+        color ? `eds-list-item--${color}` : '',
+        isInteractive ? 'eds-list-item--interactive' : '',
+        activeState ? 'eds-list-item--active' : '',
+        edsDisabled ? 'eds-list-item--disabled' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const getFocusableElements = useCallback(() => {
+        const el = elementRef.current;
+        if (!el)
+            return [];
+        return Array.from(el.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])'));
+    }, []);
+    // Register this item with the parent list's roving-tabindex key manager.
+    const registerFn = list?.register;
+    useEffect(() => {
+        if (!isInteractive || !registerFn)
+            return undefined;
+        return registerFn({
+            getElement: () => elementRef.current,
+            isDisabled: () => edsDisabled,
+            getLabel: () => elementRef.current?.textContent?.trim() ?? '',
+            focus: () => elementRef.current?.focus(),
+            click: () => elementRef.current?.click(),
+            getFocusableElements,
+            isActive: () => activeState,
+        });
+    }, [isInteractive, registerFn, edsDisabled, getFocusableElements, activeState]);
+    const isLink = !!(url || urlExternal);
+    const commonProps = {
+        className: className ? `${classes} ${className}` : classes,
+        role: itemRole,
+        'aria-selected': ariaSelected,
+        'aria-disabled': edsDisabled || undefined,
+        'data-e2e': 'eds-list-item',
+        tabIndex,
+        ...rest,
+    };
+    if (isLink) {
+        return (_jsx("a", { ref: elementRef, href: urlExternal || url, target: urlExternal ? urlExternalTarget : undefined, rel: urlExternal ? 'noopener noreferrer' : undefined, ...commonProps, children: children }));
+    }
+    return (_jsx("div", { ref: elementRef, ...commonProps, children: children }));
+});
+//# sourceMappingURL=eds-list-item.js.map

package/eds-list/eds-list-item.js.map

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

package/eds-list/eds-list.css

@@ -0,0 +1,27 @@
+/*
+ * eds-list — pure React port of eds-list.scss.
+ * :host -> .eds-list ; :host(.eds-list--interactive) -> .eds-list.eds-list--interactive
+ * (BEM modifier classes kept, as the Angular source predates the String-Props model).
+ * :focus-visible kept verbatim. .eui-21 wrapper dropped (share-ready).
+ */
+
+.eds-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.eds-list.eds-list--interactive {
+    display: block;
+    height: auto;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.eds-list.eds-list--interactive:focus-visible {
+    outline: var(--eds-bw-xs) solid var(--eds-c-border-focus);
+    outline-offset: var(--eds-sp-4xs);
+    border-radius: var(--eds-br-xs);
+}

package/eds-list/eds-list.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+/** Supported ARIA roles for interactive list mode. */
+export type EdsListRole = 'listbox' | 'menu' | 'list';
+export interface EdsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * ARIA role for the list container. When set, enables interactive mode with keyboard
+     * navigation and focus management.
+     * - `listbox`: interactive list with selectable options
+     * - `menu`: action menu with menu items
+     * - `list`: static semantic list (no keyboard navigation)
+     * - undefined (default): presentational mode, no ARIA role
+     */
+    edsRole?: EdsListRole;
+    /** Accessible label for the list (used in interactive mode). */
+    ariaLabel?: string;
+    /** Whether the list is in interactive mode (has keyboard navigation). @default false */
+    isInteractive?: boolean;
+    /** The list items (`EdsListItem`) and any dividers. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsList` — pure React port of the Angular `eds-list`.
+ *
+ * Vertical list container of `EdsListItem` rows separated by dividers. Two modes:
+ * - **Presentational** (default): a visual list layout, no ARIA roles or keyboard navigation.
+ * - **Interactive** (when `edsRole` is set, or `isInteractive`): adds WAI-ARIA list semantics
+ *   and roving-tabindex keyboard navigation, reimplementing the Angular `FocusKeyManager`
+ *   (Arrow Up/Down with wrap + type-ahead, Home/End, Enter/Space to activate, Arrow Left/Right
+ *   to traverse focusable rich content within the active item). Items register an imperative
+ *   handle via context (the React analog of Angular `contentChildren`).
+ *
+ * The list is router-agnostic — a `url` item renders as an anchor and delegates navigation to
+ * the consumer (see `EdsListItem`).
+ */
+export declare const EdsList: React.ForwardRefExoticComponent<EdsListProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list.d.ts","sourceRoot":"","sources":["../../src/eds-list/eds-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,sDAAsD;AACtD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,qFAsNlB,CAAC"}