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

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface EdsBreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Text label for the breadcrumb item. @default '' */
+    label?: string;
+    /** Icon name (EDS icon) displayed instead of or alongside the label. @default '' */
+    icon?: string;
+    /** ARIA label for accessibility (especially useful for icon-only items). @default 'Breadcrumb item' */
+    ariaLabel?: string;
+    /**
+     * Navigation target URL. When set, the item becomes clickable and renders as a link.
+     * Router-agnostic: navigation is delegated to the consumer via `onItemClick` — the item
+     * does not perform navigation itself. Undefined makes the item non-clickable.
+     */
+    link?: string;
+    /** Emits the clicked item's `link` when a clickable item is activated (click or Enter). */
+    onItemClick?: (link: string) => void;
+    /** @internal Set by parent `EdsBreadcrumb`. First item in the list. */
+    _isFirst?: boolean;
+    /** @internal Set by parent `EdsBreadcrumb`. Last item in the list (current page). */
+    _isLast?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBreadcrumbItem` — pure React port of the Angular `eds-breadcrumb-item`.
+ *
+ * A single segment of the breadcrumb path. Renders a leading separator icon (except for the
+ * first item), an optional icon, and an optional text label. When `link` is set the item is
+ * clickable (unless it is the last/current item) and delegates navigation to the consumer via
+ * `onItemClick` — it is router-agnostic (no `@angular/router` equivalent). The last item is
+ * marked `aria-current="page"`. `_isFirst` / `_isLast` are injected by the parent `EdsBreadcrumb`.
+ */
+export declare const EdsBreadcrumbItem: React.ForwardRefExoticComponent<EdsBreadcrumbItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-breadcrumb-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-breadcrumb-item.d.ts","sourceRoot":"","sources":["../../src/eds-breadcrumb/eds-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,+FA2D7B,CAAC"}

package/eds-breadcrumb/eds-breadcrumb-item.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/**
+ * `EdsBreadcrumbItem` — pure React port of the Angular `eds-breadcrumb-item`.
+ *
+ * A single segment of the breadcrumb path. Renders a leading separator icon (except for the
+ * first item), an optional icon, and an optional text label. When `link` is set the item is
+ * clickable (unless it is the last/current item) and delegates navigation to the consumer via
+ * `onItemClick` — it is router-agnostic (no `@angular/router` equivalent). The last item is
+ * marked `aria-current="page"`. `_isFirst` / `_isLast` are injected by the parent `EdsBreadcrumb`.
+ */
+export const EdsBreadcrumbItem = React.forwardRef(function EdsBreadcrumbItem({ label = '', icon = '', ariaLabel = 'Breadcrumb item', link, onItemClick, _isFirst = false, _isLast = false, children, className, ...rest }, ref) {
+    const isClickable = !!link && !_isLast;
+    const handleClick = () => {
+        if (!link || _isLast)
+            return;
+        onItemClick?.(link);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleClick();
+        }
+    };
+    const classes = ['eds-breadcrumb-item'];
+    if (link)
+        classes.push('eds-breadcrumb-item--clickable');
+    if (_isLast)
+        classes.push('eds-breadcrumb-item--current');
+    if (className)
+        classes.push(className);
+    return (_jsxs("div", { ref: ref, className: classes.join(' '), "aria-current": _isLast ? 'page' : undefined, "aria-label": ariaLabel, tabIndex: isClickable ? 0 : undefined, role: link ? 'link' : undefined, ...rest, onClick: link ? handleClick : rest.onClick, onKeyDown: link ? handleKeyDown : rest.onKeyDown, children: [!_isFirst && (_jsx(EdsIcon, { icon: "caret-right:core", size: "xs", className: "eds-breadcrumb-item__separator" })), icon && _jsx(EdsIcon, { icon: icon, size: "s", ariaLabel: ariaLabel }), label && _jsx("span", { className: "eds-breadcrumb-item__label", children: label }), children] }));
+});
+//# sourceMappingURL=eds-breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-breadcrumb-item.js","sourceRoot":"","sources":["../../src/eds-breadcrumb/eds-breadcrumb-item.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAwBlD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC7C,SAAS,iBAAiB,CACtB,EACI,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,iBAAiB,EAC7B,IAAI,EACJ,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC;IAEvC,MAAM,WAAW,GAAG,GAAS,EAAE;QAC3B,IAAI,CAAC,IAAI,IAAI,OAAO;YAAE,OAAO;QAC7B,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA0C,EAAQ,EAAE;QACvE,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACxB,WAAW,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACxC,IAAI,IAAI;QAAE,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;IACzD,IAAI,OAAO;QAAE,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;IAC1D,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEvC,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,kBACd,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS,EACrB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACrC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KAC3B,IAAI,EACR,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAC1C,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,aAE/C,CAAC,QAAQ,IAAI,CACV,KAAC,OAAO,IACJ,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,gCAAgC,GAC5C,CACL,EACA,IAAI,IAAI,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,SAAS,GAAI,EAC9D,KAAK,IAAI,eAAM,SAAS,EAAC,4BAA4B,YAAE,KAAK,GAAQ,EACpE,QAAQ,IACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-breadcrumb/eds-breadcrumb.css

@@ -0,0 +1,14 @@
+.eds-breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--eds-sp-3xs);
+    font: var(--eds-f-label-m);
+    color: var(--eds-c-foreground-subtler);
+}
+
+@media screen and (max-width: 767px) {
+    .eds-breadcrumb {
+        display: none;
+    }
+}

package/eds-breadcrumb/eds-breadcrumb.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface EdsBreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible label for the breadcrumb navigation landmark. @default 'Breadcrumb' */
+    ariaLabel?: string;
+    /** Data attribute value for end-to-end testing identification. @default 'eds-breadcrumb' */
+    e2eAttr?: string;
+    /**
+     * `EdsBreadcrumbItem` children. The first item renders without a leading separator and the
+     * last item is marked as the current page — the component injects `_isFirst` / `_isLast`
+     * into each child (mirrors the Angular `contentChildren` effect).
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBreadcrumb` — pure React port of the Angular `eds-breadcrumb`.
+ *
+ * Breadcrumb navigation landmark (`role="navigation"`) displaying a hierarchical page location
+ * as linked path segments. It manages separator rendering by flagging the first and last of its
+ * `EdsBreadcrumbItem` children (`_isFirst` / `_isLast`), reproducing the Angular parent effect.
+ * Requires `@eui/eds-styles` + the `eui-21` class on an ancestor.
+ */
+export declare const EdsBreadcrumb: React.ForwardRefExoticComponent<EdsBreadcrumbProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=eds-breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-breadcrumb.d.ts","sourceRoot":"","sources":["../../src/eds-breadcrumb/eds-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,wFAiCxB,CAAC"}

package/eds-breadcrumb/eds-breadcrumb.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsBreadcrumb` — pure React port of the Angular `eds-breadcrumb`.
+ *
+ * Breadcrumb navigation landmark (`role="navigation"`) displaying a hierarchical page location
+ * as linked path segments. It manages separator rendering by flagging the first and last of its
+ * `EdsBreadcrumbItem` children (`_isFirst` / `_isLast`), reproducing the Angular parent effect.
+ * Requires `@eui/eds-styles` + the `eui-21` class on an ancestor.
+ */
+export const EdsBreadcrumb = React.forwardRef(function EdsBreadcrumb({ ariaLabel = 'Breadcrumb', e2eAttr = 'eds-breadcrumb', children, className, ...rest }, ref) {
+    // Only element children participate in first/last flagging (matches contentChildren query).
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    const count = items.length;
+    let index = -1;
+    const flagged = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child))
+            return child;
+        index += 1;
+        const i = index;
+        return React.cloneElement(child, {
+            _isFirst: i === 0,
+            _isLast: i === count - 1,
+        });
+    });
+    const rootClass = className ? `eds-breadcrumb ${className}` : 'eds-breadcrumb';
+    return (_jsx("nav", { ref: ref, className: rootClass, role: "navigation", "aria-label": ariaLabel, "data-e2e": e2eAttr, ...rest, children: flagged }));
+});
+//# sourceMappingURL=eds-breadcrumb.js.map

package/eds-breadcrumb/eds-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-breadcrumb.js","sourceRoot":"","sources":["../../src/eds-breadcrumb/eds-breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,aAAa,CACjG,EAAE,SAAS,GAAG,YAAY,EAAE,OAAO,GAAG,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACtF,GAAG;IAEH,4FAA4F;IAC5F,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC/C,KAAK,IAAI,CAAC,CAAC;QACX,MAAM,CAAC,GAAG,KAAK,CAAC;QAChB,OAAO,KAAK,CAAC,YAAY,CAAC,KAAmD,EAAE;YAC3E,QAAQ,EAAE,CAAC,KAAK,CAAC;YACjB,OAAO,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC;SAC3B,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAE/E,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,YAAY,gBACL,SAAS,cACX,OAAO,KACb,IAAI,YAEP,OAAO,GACN,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-breadcrumb/index.d.ts

@@ -0,0 +1,5 @@
+export { EdsBreadcrumb } from './eds-breadcrumb.js';
+export type { EdsBreadcrumbProps } from './eds-breadcrumb.js';
+export { EdsBreadcrumbItem } from './eds-breadcrumb-item.js';
+export type { EdsBreadcrumbItemProps } from './eds-breadcrumb-item.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-breadcrumb/index.js

@@ -0,0 +1,3 @@
+export { EdsBreadcrumb } from './eds-breadcrumb.js';
+export { EdsBreadcrumbItem } from './eds-breadcrumb-item.js';
+//# sourceMappingURL=index.js.map

package/eds-breadcrumb/index.js.map

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

package/eds-button/eds-button.css

@@ -165,6 +165,7 @@
 
 .eds-button {
     align-items: center;
+    align-self: center; /* don't vertically stretch inside a flex row (would break the round shape) */
     background-image: none;
     border-radius: var(--eds-br-s);
     box-sizing: border-box;
@@ -222,6 +223,20 @@
 
 /* ---------- other states ---------- */
 
+/* ICON-ONLY — square proportions (width == height == --_size), no horizontal padding, so a
+   rounded icon-only button is a perfect circle. The Angular overview documents icon-only as
+   "square proportions"; in light-DOM React the button must not vertically stretch inside a
+   flex row, so pin the box to --_size and center it. */
+.eds-button.eds-button--icon-only {
+    width: var(--_size);
+    height: var(--_size);
+    min-width: var(--_size);
+    min-height: var(--_size);
+    padding: 0;
+    flex-shrink: 0;
+    align-self: center;
+}
+
 .eds-button.eds-button--rounded {
     border-radius: var(--eds-br-full);
 }

package/eds-button-group/eds-button-group-item.css

@@ -0,0 +1,122 @@
+/**
+ * eds-button-group-item.css — pure-React 1:1 port of eds-button-group-item.scss.
+ *
+ * Angular `:host.eds-button-group-item` → `.eds-button-group-item` (root class); `.eui-21` wrapper
+ * dropped. State modifier classes (`--checked`, `--disabled`, `--connected`, `--fluid`) kept
+ * verbatim from the source. The `button` descendant selectors are re-parented under the root
+ * class. `base.eds-focus-visible-ring()` is inlined. `::ng-deep .eds-icon` → light-DOM descendant
+ * `.eds-icon`. Tokens and `--_` privates copied unchanged.
+ */
+
+.eds-button-group-item {
+    display: inline-flex;
+}
+
+.eds-button-group-item button {
+    padding: var(--_item-padding, var(--eds-sp-xs) var(--eds-sp-s));
+    border-radius: var(--eds-br-s);
+    cursor: pointer;
+    border: var(--eds-bw-xs) solid transparent;
+    background: transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--eds-sp-2xs);
+    font: var(--_item-font, var(--eds-f-label-m));
+    color: var(--eds-c-foreground);
+    transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, color 150ms ease-in-out;
+    white-space: nowrap;
+}
+
+/* base.eds-focus-visible-ring() inlined */
+.eds-button-group-item 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-group-item button:hover:not(:disabled) {
+    background-color: var(--eds-c-surface-neutral-subtle);
+}
+
+.eds-button-group-item button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.eds-button-group-item--checked button {
+    background-color: var(--_item-checked-bg, var(--eds-c-surface-elevation));
+    border-color: var(--_item-checked-border, var(--eds-c-border-divider));
+    color: var(--_item-checked-color, var(--eds-c-foreground-primary));
+    box-shadow: var(--_item-checked-shadow, var(--eds-sh-1));
+}
+
+/* Icon-only (and icon+label) checked items: the icon must follow the checked button's
+   on-surface color, matching the connected-checked rule below. The EdsIcon's per-`data-color`
+   rules read `--_eds-icon-on-surface` (NOT `--_on-surface`), so override that variable — otherwise
+   a `data-color="neutral"` icon stays `--eds-c-foreground` and ignores the active button color. */
+.eds-button-group-item--checked button .eds-icon {
+    --_eds-icon-on-surface: var(--_item-checked-color, var(--eds-c-foreground-primary));
+}
+
+.eds-button-group-item--disabled button {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+/* Fluid variant: items expand to fill available width */
+.eds-button-group-item--fluid {
+    flex: 1 1 0;
+}
+
+.eds-button-group-item--fluid button {
+    width: 100%;
+}
+
+/* Connected variant: buttons joined together with shared borders */
+.eds-button-group-item--connected button {
+    border-radius: 0;
+    border: none;
+    border-right: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-button-group-item--connected button:hover:not(:disabled) {
+    background-color: var(--eds-c-surface-neutral-subtle);
+}
+
+.eds-button-group-item--connected:first-child button {
+    border-top-left-radius: var(--eds-br-s);
+    border-bottom-left-radius: var(--eds-br-s);
+}
+
+.eds-button-group-item--connected:last-child button {
+    border-top-right-radius: var(--eds-br-s);
+    border-bottom-right-radius: var(--eds-br-s);
+    border-right: none;
+}
+
+.eds-button-group-item--connected.eds-button-group-item--checked {
+    z-index: 1;
+    position: relative;
+}
+
+.eds-button-group-item--connected.eds-button-group-item--checked button {
+    background-color: var(--eds-c-surface-primary);
+    color: var(--eds-c-on-surface-primary);
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.eds-button-group-item--connected.eds-button-group-item--checked button:hover:not(:disabled) {
+    background-color: var(--eds-c-surface-primary--hover);
+    color: var(--eds-c-on-surface-primary--hover);
+}
+
+.eds-button-group-item--connected.eds-button-group-item--checked button:active {
+    background-color: var(--eds-c-surface-primary--pressed);
+    color: var(--eds-c-on-surface-primary--pressed);
+}
+
+.eds-button-group-item--connected.eds-button-group-item--checked button .eds-icon {
+    --_eds-icon-on-surface: var(--eds-c-on-surface-primary);
+}

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface EdsButtonGroupItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * Unique value identifying this item in the group. Used in the selection output and for
+     * tracking state (Angular `value`, required).
+     */
+    value: string;
+    /**
+     * Controls the initial checked/selected state of the item. Managed by the parent group in
+     * single-select mode after mount. @default false
+     */
+    isChecked?: boolean;
+    /** Whether this item is disabled and cannot be interacted with. @default false */
+    disabled?: boolean;
+    /** Projected content (text, icons, or both). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsButtonGroupItem` — pure React port of the Angular `eds-button-group-item`.
+ *
+ * A single selectable button item within `EdsButtonGroup`. Renders a native `<button>` with the
+ * ARIA attributes appropriate to the group's mode: single-select (radio) items use `role="radio"`
+ * + `aria-checked`; multiple-select (toggle) items use `aria-pressed`. Selection, roving tabindex,
+ * and the mode/variant flags (`isConnected`, `isFluid`, `isMultipleMode`) are coordinated by the
+ * enclosing `EdsButtonGroup` via context. Standalone (no group parent) it renders a plain toggle
+ * button managing its own checked state.
+ *
+ * The host element (`eds-button-group-item`) carries the state modifier classes verbatim from the
+ * Angular source (`--checked`, `--disabled`, `--connected`, `--fluid`).
+ */
+export declare const EdsButtonGroupItem: React.ForwardRefExoticComponent<EdsButtonGroupItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-button-group-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-button-group-item.d.ts","sourceRoot":"","sources":["../../src/eds-button-group/eds-button-group-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,uBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC7D;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,gGAgG9B,CAAC"}

package/eds-button-group/eds-button-group-item.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { EdsButtonGroupRegisterRefContext, useEdsButtonGroup, useEdsButtonGroupState, } from './eds-button-group.js';
+/**
+ * `EdsButtonGroupItem` — pure React port of the Angular `eds-button-group-item`.
+ *
+ * A single selectable button item within `EdsButtonGroup`. Renders a native `<button>` with the
+ * ARIA attributes appropriate to the group's mode: single-select (radio) items use `role="radio"`
+ * + `aria-checked`; multiple-select (toggle) items use `aria-pressed`. Selection, roving tabindex,
+ * and the mode/variant flags (`isConnected`, `isFluid`, `isMultipleMode`) are coordinated by the
+ * enclosing `EdsButtonGroup` via context. Standalone (no group parent) it renders a plain toggle
+ * button managing its own checked state.
+ *
+ * The host element (`eds-button-group-item`) carries the state modifier classes verbatim from the
+ * Angular source (`--checked`, `--disabled`, `--connected`, `--fluid`).
+ */
+export const EdsButtonGroupItem = React.forwardRef(function EdsButtonGroupItem({ value, isChecked = false, disabled = false, children, className, ...rest }, ref) {
+    const group = useEdsButtonGroup();
+    const groupState = useEdsButtonGroupState();
+    const registerButtonRef = useContext(EdsButtonGroupRegisterRefContext);
+    const buttonRef = useRef(null);
+    // Standalone fallback state when there is no coordinating group parent.
+    const [localChecked, setLocalChecked] = useState(isChecked);
+    // Register/unregister with the parent group, seeding the initial checked state.
+    const indexRef = useRef(null);
+    useEffect(() => {
+        if (!group)
+            return;
+        const index = group.register(value, disabled, isChecked);
+        indexRef.current = index;
+        registerButtonRef?.(index, buttonRef);
+        return () => {
+            group.unregister(index);
+            indexRef.current = null;
+        };
+        // Register once on mount (matches an item joining the parent group). value/disabled/
+        // isChecked are the initial seed; live prop changes are pushed via update() below.
+    }, [group]);
+    // Push live value/disabled changes to the parent registry after the initial registration.
+    useEffect(() => {
+        if (group && indexRef.current !== null) {
+            group.update(indexRef.current, value, disabled);
+        }
+    }, [group, value, disabled]);
+    const index = indexRef.current;
+    const hasParent = !!group && index !== null;
+    const isMultipleMode = group?.isMultiple ?? false;
+    const isConnected = group?.isConnected ?? false;
+    const isFluid = group?.isFluid ?? false;
+    const checked = hasParent ? groupState.checked.has(index) : localChecked;
+    // Roving tabindex: the focused item owns the single tab stop (0), others are -1.
+    const tabIndex = hasParent ? (groupState.focusedIndex === index ? 0 : -1) : 0;
+    const onButtonClick = () => {
+        if (disabled)
+            return;
+        if (hasParent) {
+            group.handleItemClick(index);
+        }
+        else {
+            setLocalChecked(prev => !prev);
+        }
+    };
+    const onKeyDown = (event) => {
+        if (hasParent) {
+            group.handleKeydown(index, event);
+        }
+    };
+    const hostClass = [
+        'eds-button-group-item',
+        checked ? 'eds-button-group-item--checked' : '',
+        disabled ? 'eds-button-group-item--disabled' : '',
+        isConnected ? 'eds-button-group-item--connected' : '',
+        isFluid ? 'eds-button-group-item--fluid' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // aria-pressed in checkbox/toggle mode; aria-checked + role="radio" in single-select mode.
+    const ariaPressed = isMultipleMode ? checked : undefined;
+    const ariaChecked = !isMultipleMode ? checked : undefined;
+    const buttonRole = !isMultipleMode ? 'radio' : undefined;
+    return (_jsx("div", { ref: ref, className: hostClass, ...rest, children: _jsx("button", { ref: buttonRef, type: "button", role: buttonRole, "aria-pressed": ariaPressed, "aria-checked": ariaChecked, disabled: disabled, tabIndex: tabIndex, onClick: onButtonClick, onKeyDown: onKeyDown, children: children }) }));
+});
+//# sourceMappingURL=eds-button-group-item.js.map

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

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

package/eds-button-group/eds-button-group.css

@@ -0,0 +1,55 @@
+/**
+ * eds-button-group.css — pure-React 1:1 port of eds-button-group.scss.
+ *
+ * Angular `:host.eds-button-group` → `.eds-button-group` (root class); `.eui-21` wrapper dropped
+ * (share-ready, light DOM). Size / connected / fluid variants keep the Angular BEM modifier
+ * classes verbatim (the source is class-based, not attribute-reflected). Tokens and `--_` privates
+ * are copied unchanged.
+ */
+
+.eds-button-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_group-gap, var(--eds-sp-3xs));
+    padding: var(--_group-padding, var(--eds-sp-3xs));
+    border-radius: var(--eds-br-m);
+    background-color: var(--eds-c-surface-neutral-subtler);
+    position: relative;
+    vertical-align: middle;
+}
+
+/* Size variants — set CSS custom properties that items inherit */
+.eds-button-group--size-s {
+    --_group-gap: var(--eds-sp-4xs);
+    --_group-padding: var(--eds-sp-4xs);
+    --_item-padding: var(--eds-sp-2xs) var(--eds-sp-xs);
+    --_item-font: var(--eds-f-label-m);
+
+    border-radius: var(--eds-br-s);
+}
+
+.eds-button-group--size-m {
+    --_group-gap: var(--eds-sp-3xs);
+    --_group-padding: var(--eds-sp-3xs);
+    --_item-padding: var(--eds-sp-xs) var(--eds-sp-s);
+    --_item-font: var(--eds-f-label-m);
+}
+
+.eds-button-group--size-l {
+    --_group-gap: var(--eds-sp-2xs);
+    --_group-padding: var(--eds-sp-2xs);
+    --_item-padding: var(--eds-sp-s) var(--eds-sp-m);
+    --_item-font: var(--eds-f-label-l);
+}
+
+.eds-button-group--connected {
+    gap: 0;
+    padding: 0;
+    border-radius: var(--eds-br-s);
+    background-color: transparent;
+    border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-button-group--fluid {
+    width: 100%;
+}

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

@@ -0,0 +1,97 @@
+import * as React from 'react';
+/**
+ * Local narrowed size union — the button group's size contract. Angular reflects size through
+ * `EdsSizeDirective` as the class `eds-button-group--size-{s|m|l}` (default `m`); the pure-React
+ * port exposes it as a `size` prop producing the same class.
+ */
+export type EdsButtonGroupSize = 's' | 'm' | 'l';
+/**
+ * Stable coordination API published by an `EdsButtonGroup` to its `EdsButtonGroupItem` children —
+ * the React analog of Angular's parent group managing each item's `isChecked` / `tabIndex` and the
+ * mode/variant flags it propagates (`isMultipleMode`, `isConnected`, `isFluid`). Every method is
+ * referentially stable so an item can register once without re-registering on each render. Reactive
+ * per-item reads (checked, focused, values) go through `EdsButtonGroupStateContext` (a separate,
+ * changing value), keeping this API identity constant.
+ */
+export interface EdsButtonGroupContextValue {
+    /** Whether multiple items can be selected simultaneously (Angular `isMultiple`). */
+    isMultiple: boolean;
+    /** Whether the group renders in connected (segmented) visual mode (Angular `isConnected`). */
+    isConnected: boolean;
+    /** Whether items expand to fill available width (Angular `isFluid`). */
+    isFluid: boolean;
+    /** Registers an item, returning its stable index (join order). */
+    register: (value: string, disabled: boolean, initiallyChecked: boolean) => number;
+    /** Unregisters an item (on unmount). */
+    unregister: (index: number) => void;
+    /** Updates an item's registered `value`/`disabled` when its props change. */
+    update: (index: number, value: string, disabled: boolean) => void;
+    /** Whether the item at the given index is currently checked (imperative read). */
+    isChecked: (index: number) => boolean;
+    /** Handles a click on the item at the given index (radio/checkbox selection semantics). */
+    handleItemClick: (index: number) => void;
+    /** Handles a keydown originating from the item at the given index (roving navigation). */
+    handleKeydown: (index: number, event: React.KeyboardEvent) => void;
+}
+/** The stable coordination API (identity never changes for a given group instance). */
+export declare const EdsButtonGroupContext: React.Context<EdsButtonGroupContextValue | undefined>;
+/**
+ * The reactive per-item state — a separate context so its changes (on every selection/focus move)
+ * re-render items WITHOUT recreating the stable API context. An item subscribes to read its own
+ * `isChecked` and `tabIndex`.
+ */
+export interface EdsButtonGroupStateValue {
+    /** Set of currently-checked item indices. */
+    checked: ReadonlySet<number>;
+    /** Index of the item that owns the group's single tab stop (roving tabindex). */
+    focusedIndex: number;
+}
+export declare const EdsButtonGroupStateContext: React.Context<EdsButtonGroupStateValue>;
+/** Hook for an `EdsButtonGroupItem` to consume the enclosing group's coordination API. */
+export declare function useEdsButtonGroup(): EdsButtonGroupContextValue | undefined;
+/** Hook for an `EdsButtonGroupItem` to reactively read the group's checked/focus state. */
+export declare function useEdsButtonGroupState(): EdsButtonGroupStateValue;
+/** Context giving each item a slot to register its button ref for parent-driven focus. */
+export declare const EdsButtonGroupRegisterRefContext: React.Context<((index: number, ref: React.RefObject<HTMLButtonElement | null>) => void) | undefined>;
+export interface EdsButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown'> {
+    /**
+     * Whether multiple items can be selected at the same time. When false (default), exactly one
+     * item is always selected (radio behavior). @default false
+     */
+    isMultiple?: boolean;
+    /**
+     * Renders the group in "connected" mode: no background container, buttons visually joined with
+     * shared borders (segmented control). @default false
+     */
+    isConnected?: boolean;
+    /** Whether items should expand to fill the available width equally. @default false */
+    isFluid?: boolean;
+    /** Size of the group. @default 'm' */
+    size?: EdsButtonGroupSize;
+    /** Accessible label for the group (required for ARIA compliance). */
+    ariaLabel?: string;
+    /** Data attribute value for end-to-end testing identification. @default 'eds-button-group' */
+    e2eAttr?: string;
+    /** Emitted when the selection state changes; payload is the array of selected item values. */
+    onSelectionChange?: (values: string[]) => void;
+    /** Emitted when any item in the group is clicked; payload is the clicked item's value. */
+    onItemClick?: (value: string) => void;
+    /** The `EdsButtonGroupItem` children projected into the group. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsButtonGroup` — pure React port of the Angular `eds-button-group`.
+ *
+ * A styled selection group rendered as a pill-shaped container with selectable button items.
+ * Supports two selection modes — single (radio, default: one item always selected) and multiple
+ * (`isMultiple`: independent toggles) — and two visual variants — default pill and connected
+ * (`isConnected`: joined segmented control). `isFluid` makes items fill the width equally.
+ *
+ * Implements WAI-ARIA patterns: single mode uses `role="radiogroup"` with child `role="radio"` +
+ * `aria-checked`; multiple mode uses `role="toolbar"` with child toggle buttons using
+ * `aria-pressed`. Keyboard navigation follows roving tabindex — Left/Right/Up/Down move focus
+ * between enabled items, Home/End jump to first/last, and in single-select mode arrow keys
+ * auto-select the focused item (APG Radio Group). The rendered element IS the component.
+ */
+export declare const EdsButtonGroup: React.ForwardRefExoticComponent<EdsButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-button-group.d.ts","sourceRoot":"","sources":["../../src/eds-button-group/eds-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjD;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B;IACvC,oFAAoF;IACpF,UAAU,EAAE,OAAO,CAAC;IACpB,8FAA8F;IAC9F,WAAW,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,OAAO,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,KAAK,MAAM,CAAC;IAClF,wCAAwC;IACxC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,6EAA6E;IAC7E,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,kFAAkF;IAClF,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,2FAA2F;IAC3F,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,0FAA0F;IAC1F,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACtE;AAED,uFAAuF;AACvF,eAAO,MAAM,qBAAqB,uDAAmE,CAAC;AAEtG;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACrC,6CAA6C;IAC7C,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,iFAAiF;IACjF,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,0BAA0B,yCAGrC,CAAC;AAEH,0FAA0F;AAC1F,wBAAgB,iBAAiB,IAAI,0BAA0B,GAAG,SAAS,CAE1E;AAED,2FAA2F;AAC3F,wBAAgB,sBAAsB,IAAI,wBAAwB,CAEjE;AAWD,0FAA0F;AAC1F,eAAO,MAAM,gCAAgC,yBAChC,MAAM,OAAO,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,IAAI,cAChE,CAAC;AAEb,MAAM,WAAW,mBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC/D;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,0FAA0F;IAC1F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,4FA6PzB,CAAC"}