@eui/eds-react 22.0.0-alpha.8

package/eds-link/eds-link.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface EdsLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'rel'> {
+    /** Data attribute for e2e testing. @default 'eds-link' */
+    e2eAttr?: string;
+    /**
+     * When true, styles the link as an external link (adds the arrow-square-out icon and sets
+     * `target="_blank"` + `rel="noopener noreferrer"`). @default false
+     */
+    external?: boolean;
+    /** When true, applies a contrast style (dark foreground color). @default false */
+    contrast?: boolean;
+    /**
+     * When true, adds an underline to the link. By default, links have no underline — use this
+     * to explicitly opt in. @default false
+     */
+    underline?: boolean;
+    /** When true, makes the link inherit the parent color. @default false */
+    inherit?: boolean;
+    /** Projected content rendered inside the anchor (matches Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsLink` — pure React port of the Angular `a[edsLink]` directive.
+ *
+ * Renders a native `<a className="eds-link">` styled as an EDS link. Consumers pass `href`,
+ * `onClick`, etc. through `...rest`. When `external` is set the anchor gets `target="_blank"`
+ * + `rel="noopener noreferrer"` and an arrow-square-out icon after the content (via CSS). The
+ * rendered anchor IS the component (no wrapper). Requires `@eui/eds-styles` + the `eui-21` class
+ * on an ancestor for the `--eds-*` tokens to cascade in.
+ */
+export declare const EdsLink: React.ForwardRefExoticComponent<EdsLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=eds-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-link.d.ts","sourceRoot":"","sources":["../../src/eds-link/eds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACvG,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,wFA6BlB,CAAC"}

package/eds-link/eds-link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsLink` — pure React port of the Angular `a[edsLink]` directive.
+ *
+ * Renders a native `<a className="eds-link">` styled as an EDS link. Consumers pass `href`,
+ * `onClick`, etc. through `...rest`. When `external` is set the anchor gets `target="_blank"`
+ * + `rel="noopener noreferrer"` and an arrow-square-out icon after the content (via CSS). The
+ * rendered anchor IS the component (no wrapper). Requires `@eui/eds-styles` + the `eui-21` class
+ * on an ancestor for the `--eds-*` tokens to cascade in.
+ */
+export const EdsLink = React.forwardRef(function EdsLink({ e2eAttr = 'eds-link', external = false, contrast = false, underline = false, inherit = false, children, className, ...rest }, ref) {
+    return (_jsx("a", { ref: ref, className: className ? `eds-link ${className}` : 'eds-link', "data-e2e": e2eAttr, "data-external": external ? '' : undefined, "data-contrast": contrast ? '' : undefined, "data-underline": underline ? '' : undefined, "data-inherit": inherit ? '' : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-link.js.map

package/eds-link/eds-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-link.js","sourceRoot":"","sources":["../../src/eds-link/eds-link.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,OAAO,CACrF,EACI,OAAO,GAAG,UAAU,EACpB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,OAAO,CACH,YACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,cACjD,OAAO,mBACF,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBACzB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAC5B,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACtC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,KAC7C,IAAI,YAEP,QAAQ,GACT,CACP,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-link/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsLink } from './eds-link.js';
+export type { EdsLinkProps } from './eds-link.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-link/index.js

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

package/eds-link/index.js.map

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

package/eds-menu/eds-menu-item-view.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { EdsMenuItem } from './eds-menu-item.model.js';
+export interface EdsMenuItemViewProps {
+    item: EdsMenuItem;
+    hasIcon?: boolean;
+    hasIconLabel?: boolean;
+    hasTooltip?: boolean;
+    hasTooltipOnExpanded?: boolean;
+    isCollapsed?: boolean;
+    hasCollapsedInitials?: boolean;
+    hasBoldRootLevel?: boolean;
+    hasExpandIcon?: boolean;
+    /** Focus ref target (host <li>-equivalent) for roving-tabindex keyboard nav. */
+    itemRef?: (el: HTMLDivElement | null) => void;
+    onItemClick?: (item: EdsMenuItem) => void;
+    onExpandToggle?: (item: EdsMenuItem) => void;
+    /** Projected child list (rendered inside the item), matching Angular `<ng-content/>`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsMenuItemView` — pure React port of the Angular `eds-menu-item` component (internal to
+ * `EdsMenu`). Reproduces the label / navigable branches, the link content (badges, action &
+ * expand buttons) and the icon block (icon / marker / initials / icon-label), plus the
+ * `hostClasses()` BEM modifier classes and the tree ARIA host attributes.
+ *
+ * The Angular source predates the String-Props model and styles off BEM modifier classes
+ * (`eds-menu-item--icon-label`, `--bold`), so the React port keeps those classes (not
+ * `data-*`) to match the ported CSS 1:1.
+ */
+export declare function EdsMenuItemView({ item, hasIcon, hasIconLabel, hasTooltip, hasTooltipOnExpanded, isCollapsed, hasCollapsedInitials, hasBoldRootLevel, hasExpandIcon, itemRef, onItemClick, onExpandToggle, children, }: EdsMenuItemViewProps): React.JSX.Element;
+//# sourceMappingURL=eds-menu-item-view.d.ts.map

package/eds-menu/eds-menu-item-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-menu-item-view.d.ts","sourceRoot":"","sources":["../../src/eds-menu/eds-menu-item-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC5B,IAAI,EACJ,OAAe,EACf,YAAoB,EACpB,UAAkB,EAClB,oBAA4B,EAC5B,WAAmB,EACnB,oBAA4B,EAC5B,gBAAwB,EACxB,aAAoB,EACpB,OAAO,EACP,WAAW,EACX,cAAc,EACd,QAAQ,GACX,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoK1C"}

package/eds-menu/eds-menu-item-view.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+import { EdsBadge } from '../eds-badge/eds-badge.js';
+/**
+ * `EdsMenuItemView` — pure React port of the Angular `eds-menu-item` component (internal to
+ * `EdsMenu`). Reproduces the label / navigable branches, the link content (badges, action &
+ * expand buttons) and the icon block (icon / marker / initials / icon-label), plus the
+ * `hostClasses()` BEM modifier classes and the tree ARIA host attributes.
+ *
+ * The Angular source predates the String-Props model and styles off BEM modifier classes
+ * (`eds-menu-item--icon-label`, `--bold`), so the React port keeps those classes (not
+ * `data-*`) to match the ported CSS 1:1.
+ */
+export function EdsMenuItemView({ item, hasIcon = false, hasIconLabel = false, hasTooltip = false, hasTooltipOnExpanded = false, isCollapsed = false, hasCollapsedInitials = false, hasBoldRootLevel = false, hasExpandIcon = true, itemRef, onItemClick, onExpandToggle, children, }) {
+    // Label-only (non-navigable) items render a category row; everything else renders an
+    // anchor (url / external / command / expandable / link), matching the Angular branches.
+    const isLabelItem = !item.url && !item.urlExternal && !item.command && !item.children && !item.link;
+    const tooltipText = (() => {
+        if (!hasTooltip)
+            return undefined;
+        if (isCollapsed)
+            return item.tooltip || item.label || undefined;
+        if (hasTooltipOnExpanded)
+            return item.tooltip || item.label || undefined;
+        return undefined;
+    })();
+    const hostClass = [
+        'eds-menu-item',
+        isCollapsed && hasIconLabel ? 'eds-menu-item--icon-label' : '',
+        !item.parent && hasBoldRootLevel ? 'eds-menu-item--bold' : '',
+    ].join(' ').trim();
+    const onClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onItemClick?.(item);
+    };
+    const onExpandToggleClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onExpandToggle?.(item);
+    };
+    const onActionIconClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        item.actionIcon?.action?.(event);
+    };
+    const markerColor = (mc) => ({
+        color: `var(--eds-c-foreground-${mc || 'primary'})`,
+    });
+    const iconBlock = (_jsx(_Fragment, { children: !isCollapsed ? (hasIcon ? (item.icon ? (_jsx(EdsIcon, { className: "eds-menu-item__icon", icon: item.icon, size: "s" })) : item.hasMarker ? (_jsx(EdsIcon, { className: "eds-menu-item__marker", icon: "dot:core", size: "xs", style: markerColor(item.markerTypeClass) })) : null) : item.hasMarker ? (_jsx(EdsIcon, { className: "eds-menu-item__marker", icon: "dot:core", size: "xs", style: markerColor(item.markerTypeClass) })) : null) : (_jsxs(_Fragment, { children: [hasCollapsedInitials && item.initials ? (_jsx("span", { className: "eds-menu-item__initials", children: item.initials })) : hasIcon && item.icon ? (_jsx(EdsIcon, { className: "eds-menu-item__icon", icon: item.icon, size: "s" })) : item.hasMarker ? (_jsx(EdsIcon, { className: "eds-menu-item__marker", icon: "dot:core", size: "xs", style: markerColor(item.markerTypeClass) })) : (_jsx("span", { className: "eds-menu-item__initials", children: item.label?.charAt(0) })), hasIconLabel ? _jsx("span", { className: "eds-menu-item__icon-label", children: item.label }) : null] })) }));
+    const linkContent = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "eds-menu-item__link-start-block", children: [iconBlock, isCollapsed && item.tagLabel ? (_jsx(EdsBadge, { className: "eds-menu-item__badge--dot", color: (item.tagTypeClass || ''), iconOnly: true })) : null] }), _jsxs("span", { className: "eds-menu-item__link-content-block", children: [_jsx("span", { className: "eds-menu-item__link-label", children: item.label }), item.urlExternal && item.urlExternalTarget === '_blank' ? (_jsx(EdsIcon, { className: "eds-menu-item__link-external-icon", icon: "arrow-square-out:core", size: "xs" })) : null] }), _jsxs("span", { className: "eds-menu-item__link-end-block", children: [item.tagLabel && !isCollapsed ? (_jsx(EdsBadge, { color: (item.tagTypeClass || ''), size: "s", children: item.tagLabel })) : null, item.actionIcon ? (_jsx(EdsIconButton, { className: "eds-menu-item__action-icon", icon: item.actionIcon.icon, ariaLabel: item.actionIcon.label || 'Action', size: "xs", onButtonClick: onActionIconClick })) : null, hasExpandIcon && item.children?.length ? (_jsx(EdsIconButton, { className: "eds-menu-item__expand-toggle", icon: item.expanded ? 'caret-up' : 'caret-down', ariaLabel: item.expanded ? 'Collapse' : 'Expand', size: "xs", rounded: true, onButtonClick: onExpandToggleClick })) : null] })] }));
+    return (_jsx("div", { ref: itemRef, className: hostClass, "data-e2e": item.e2eAttr || 'eds-menu-item', role: "treeitem", tabIndex: -1, "aria-haspopup": item.children?.length ? true : undefined, "aria-expanded": item.children ? !!item.expanded : undefined, "aria-disabled": item.disabled || undefined, children: isLabelItem ? (_jsx("li", { role: "none", className: `eds-menu-item__content eds-menu-item__content--category${item.disabled ? ' eds-menu-item--disabled' : ''}`, title: tooltipText, children: _jsxs("span", { className: "eds-menu-item__link eds-menu-item__link--category", onClick: onClick, children: [_jsx("span", { className: "eds-menu-item__link-start-block", children: iconBlock }), _jsx("span", { className: "eds-menu-item__link-content-block", children: _jsx("span", { className: "eds-menu-item__link-label eds-menu-item__link-label--category", children: item.label }) })] }) })) : (_jsxs("li", { role: "none", className: [
+                'eds-menu-item__content',
+                item.disabled ? 'eds-menu-item--disabled' : '',
+                item.expanded ? 'eds-menu-item--expanded' : '',
+                item.active ? 'eds-menu-item--active' : '',
+            ].join(' ').trim(), children: [_jsx("a", { className: [
+                        'eds-menu-item__link',
+                        item.active ? 'eds-menu-item__link--active' : '',
+                        item.disabled ? 'eds-menu-item__link--disabled' : '',
+                        item.children?.length ? 'eds-menu-item__link--has-sub' : '',
+                    ].join(' ').trim(), href: item.url && !item.urlExternal ? item.url : 'javascript:void(0)', title: tooltipText, onClick: onClick, children: linkContent }), children] })) }));
+}
+//# sourceMappingURL=eds-menu-item-view.js.map

package/eds-menu/eds-menu-item-view.js.map

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

package/eds-menu/eds-menu-item.css

@@ -0,0 +1,221 @@
+/*
+ * eds-menu-item — pure React port of eds-menu-item.scss.
+ * :host -> .eds-menu-item ; :host.MODIFIER -> .eds-menu-item.MODIFIER ;
+ * `.eds-menu--collapsed { :host { … } }` -> `.eds-menu--collapsed .eds-menu-item { … }`.
+ * base.eds-focus-visible() inlined.
+ */
+
+.eds-menu-item {
+    display: block;
+    width: 100%;
+}
+.eds-menu-item: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-menu-item .eds-menu-item__content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+}
+
+/* Link base */
+.eds-menu-item .eds-menu-item__link {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    padding: var(--eds-sp-xs) var(--eds-sp-l);
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-default);
+    text-decoration: none;
+    cursor: pointer;
+    border: none;
+    background: none;
+    width: 100%;
+    min-height: 40px;
+    border-left: 3px solid transparent;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.eds-menu-item .eds-menu-item__link:hover:not(.eds-menu-item__link--disabled):not(.eds-menu-item__link--category) {
+    background: var(--eds-c-surface-elevation-sunken);
+    color: var(--eds-c-foreground-primary);
+}
+.eds-menu-item .eds-menu-item__link--active:not(.eds-menu-item--disabled) {
+    background: var(--eds-c-surface-primary-subtle);
+    color: var(--eds-c-foreground-primary);
+    font-weight: var(--eds-f-w-semi-bold);
+    border-left-color: var(--eds-c-border-primary);
+}
+.eds-menu-item .eds-menu-item__link--disabled {
+    opacity: var(--eds-op-40);
+    pointer-events: none;
+}
+.eds-menu-item .eds-menu-item__link--category {
+    cursor: default;
+    font: var(--eds-f-label-s-semi-bold);
+    color: var(--eds-c-foreground-subtler);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    padding: var(--eds-sp-m) var(--eds-sp-l) var(--eds-sp-xs);
+    min-height: auto;
+    border-left-color: transparent;
+}
+.eds-menu-item .eds-menu-item__link--category:hover {
+    background: none;
+}
+
+/* Sub-blocks */
+.eds-menu-item .eds-menu-item__link-start-block {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+    position: relative;
+}
+.eds-menu-item .eds-menu-item__link-start-block:empty {
+    display: none;
+}
+.eds-menu-item .eds-menu-item__link-content-block {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex: 1;
+    min-width: 0;
+}
+.eds-menu-item .eds-menu-item__link-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.eds-menu-item .eds-menu-item__link-label--category {
+    font: var(--eds-f-label-s-semi-bold);
+    color: var(--eds-c-foreground-subtler);
+}
+.eds-menu-item .eds-menu-item__link-end-block {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+    margin-left: auto;
+}
+.eds-menu-item .eds-menu-item__link-external-icon {
+    flex-shrink: 0;
+    color: var(--eds-c-foreground-subtler);
+}
+
+/* Icon / marker */
+.eds-menu-item .eds-menu-item__icon {
+    flex-shrink: 0;
+}
+.eds-menu-item .eds-menu-item__marker {
+    flex-shrink: 0;
+}
+
+/* Initials */
+.eds-menu-item .eds-menu-item__initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--eds-f-label-m-semi-bold);
+    width: 32px;
+    height: 32px;
+    border-radius: var(--eds-br-s);
+    background: var(--eds-c-surface-elevation-sunken);
+    border: 1px solid var(--eds-c-border-divider);
+    flex-shrink: 0;
+}
+
+/* Icon label (collapsed mode with labels) */
+.eds-menu-item .eds-menu-item__icon-label {
+    font: var(--eds-f-microcopy-2xs);
+    color: var(--eds-c-foreground-subtler);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    text-align: center;
+}
+
+/* Badge dot in collapsed mode */
+.eds-menu-item .eds-menu-item__badge--dot {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    pointer-events: none;
+}
+
+/* Action icon button */
+.eds-menu-item .eds-menu-item__action-icon {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+.eds-menu-item .eds-menu-item__content:hover .eds-menu-item__action-icon {
+    opacity: 1;
+}
+
+/* Expand toggle */
+.eds-menu-item .eds-menu-item__expand-toggle {
+    flex-shrink: 0;
+}
+
+/* Disabled state */
+.eds-menu-item .eds-menu-item--disabled {
+    opacity: var(--eds-op-40);
+    pointer-events: none;
+}
+
+/* Expanded state */
+.eds-menu-item .eds-menu-item--expanded > .eds-menu-item__link {
+    font-weight: var(--eds-f-w-medium);
+}
+
+/* Active state */
+.eds-menu-item .eds-menu-item--active > .eds-menu-item__link {
+    background: var(--eds-c-surface-primary-subtle);
+    color: var(--eds-c-foreground-primary);
+    font-weight: var(--eds-f-w-semi-bold);
+    border-left-color: var(--eds-c-border-primary);
+}
+
+/* Bold root level */
+.eds-menu-item.eds-menu-item--bold > .eds-menu-item__content > .eds-menu-item__link {
+    font-weight: var(--eds-f-w-semi-bold);
+}
+
+/* Icon-label mode (collapsed with labels under icons) */
+.eds-menu-item.eds-menu-item--icon-label .eds-menu-item__link {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--eds-sp-xs);
+    gap: var(--eds-sp-4xs);
+    border-left: none;
+    border-radius: var(--eds-br-s);
+}
+.eds-menu-item.eds-menu-item--icon-label .eds-menu-item__link-content-block {
+    display: none;
+}
+.eds-menu-item.eds-menu-item--icon-label .eds-menu-item__link-end-block {
+    display: none;
+}
+
+/* Collapsed host-level adjustments (parent .eds-menu--collapsed) */
+.eds-menu--collapsed .eds-menu-item .eds-menu-item__content {
+    position: relative;
+}
+.eds-menu--collapsed .eds-menu-item .eds-menu-item__link {
+    justify-content: center;
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    border-left: none;
+    border-radius: var(--eds-br-s);
+    margin: var(--eds-sp-4xs) 0;
+}
+.eds-menu--collapsed .eds-menu-item .eds-menu-item__link-content-block {
+    display: none;
+}
+.eds-menu--collapsed .eds-menu-item .eds-menu-item__link-end-block {
+    display: none;
+}

package/eds-menu/eds-menu-item.model.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Represents a single menu item in the EDS navigation menu (ported 1:1 from the Angular
+ * `EdsMenuItem` model). Supports hierarchical navigation, external links, icons, badges,
+ * markers, and action icons.
+ */
+export interface EdsMenuItem<METADATA = unknown> {
+    /** Unique identifier for the menu item. Auto-generated if not provided. */
+    id?: string;
+    /** Data-e2e attribute for testing selectors. */
+    e2eAttr?: string;
+    /** Display label for the menu item. */
+    label?: string;
+    /** Computed initials from label (used in collapsed-initials mode). Managed internally. */
+    initials?: string;
+    /** Internal route URL for navigation. */
+    url?: string;
+    /** Query params for navigation. */
+    queryParams?: Record<string, string>;
+    /** External URL that opens in a new window/tab. */
+    urlExternal?: string;
+    /** Target for external URL navigation. Defaults to '_blank'. */
+    urlExternalTarget?: string;
+    /** When true, the item uses link mode (active state managed manually). */
+    link?: boolean;
+    /** Icon name (EDS icon identifier). */
+    icon?: string;
+    /** Color variant class for the icon. */
+    iconTypeClass?: string;
+    /** ARIA label for the icon (used in collapsed mode). */
+    iconLabel?: string;
+    /** Whether this item is currently expanded (for parent items with children). */
+    expanded?: boolean;
+    /** Whether this item is currently active/selected. */
+    active?: boolean;
+    /** Child menu items for hierarchical navigation. */
+    children?: EdsMenuItem[];
+    /** Reference to parent item. Managed internally. */
+    parent?: EdsMenuItem;
+    /** Whether the item is visible. */
+    visible?: boolean;
+    /** Badge label text displayed on the item. */
+    tagLabel?: string;
+    /** Badge color variant. */
+    tagTypeClass?: string;
+    /** Custom tooltip text. If not provided, tooltip is derived from label. */
+    tooltip?: string;
+    /** Whether to show a colored marker dot instead of an icon. */
+    hasMarker?: boolean;
+    /** Color variant for the marker dot. */
+    markerTypeClass?: string;
+    /** Grouping category for the menu item. */
+    category?: string;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+    /** Whether the item matches the current filter. Managed internally. */
+    filtered?: boolean;
+    /** Action icon configuration for an additional action button on the item. */
+    actionIcon?: {
+        icon: string;
+        color?: string;
+        label?: string;
+        action?: (event: unknown) => void;
+    };
+    /** Callback executed on item click (instead of navigation). */
+    command?: (...params: unknown[]) => void;
+    /** Generic typed metadata for custom data. */
+    metadata?: METADATA;
+}
+//# sourceMappingURL=eds-menu-item.model.d.ts.map

package/eds-menu/eds-menu-item.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-menu-item.model.d.ts","sourceRoot":"","sources":["../../src/eds-menu/eds-menu-item.model.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,WAAW,CAAC,QAAQ,GAAG,OAAO;IAC3C,2EAA2E;IAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,oDAAoD;IACpD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,UAAU,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;KACrC,CAAC;IACF,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACzC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACvB"}

package/eds-menu/eds-menu-item.model.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=eds-menu-item.model.js.map

package/eds-menu/eds-menu-item.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-menu-item.model.js","sourceRoot":"","sources":["../../src/eds-menu/eds-menu-item.model.ts"],"names":[],"mappings":""}

package/eds-menu/eds-menu.css

@@ -0,0 +1,83 @@
+/*
+ * eds-menu — pure React port of eds-menu.scss.
+ * :host -> .eds-menu ; :host.MODIFIER -> .eds-menu.MODIFIER (BEM modifier classes kept, as the
+ * Angular source predates the String-Props model). base.eds-focus-visible() inlined.
+ */
+
+.eds-menu {
+    display: block;
+    width: 100%;
+}
+
+.eds-menu .eds-menu__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+.eds-menu .eds-menu__list: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-menu .eds-menu__sublist {
+    padding-left: var(--eds-sp-m);
+}
+
+/* Filter */
+.eds-menu .eds-menu-filter {
+    display: flex;
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+    width: 100%;
+}
+.eds-menu .eds-menu-filter--collapsed {
+    padding: 0;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+}
+.eds-menu .eds-menu-filter__input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    width: 100%;
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    border: 1px solid var(--eds-c-border-divider);
+    border-radius: var(--eds-br-s);
+    background: var(--eds-c-surface-default);
+}
+.eds-menu .eds-menu-filter__icon {
+    flex-shrink: 0;
+    color: var(--eds-c-foreground-subtler);
+}
+.eds-menu .eds-menu-filter__input {
+    border: none;
+    outline: none;
+    background: transparent;
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-default);
+    width: 100%;
+}
+.eds-menu .eds-menu-filter__input::placeholder {
+    color: var(--eds-c-foreground-subtler);
+}
+
+/* Collapsed state modifiers */
+.eds-menu.eds-menu--collapsed .eds-menu-filter {
+    padding: 0;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+}
+.eds-menu.eds-menu--collapsed .eds-menu__sublist {
+    padding-left: var(--eds-sp-xs);
+}
+
+/* Flat mode — remove sub-menu indentation */
+.eds-menu.eds-menu--flat .eds-menu__sublist {
+    padding-left: 0;
+}

package/eds-menu/eds-menu.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { EdsMenuItem } from './eds-menu-item.model.js';
+export interface EdsMenuProps {
+    /** Hierarchical array of menu items to display. */
+    items?: EdsMenuItem[];
+    /** Label for the search filter input. @default 'Search filter' */
+    searchFilterLabel?: string;
+    /** Current filter value (controlled filtering). @default '' */
+    filterValue?: string;
+    /** Collapses the menu to icon-only state. @default false */
+    isCollapsed?: boolean;
+    /** Shows initials when collapsed (instead of icons). @default false */
+    hasCollapsedInitials?: boolean;
+    /** Enables the search filter input. @default false */
+    hasFilter?: boolean;
+    /** Shows icons for menu items. @default false */
+    hasIcons?: boolean;
+    /** Shows labels underneath icons in collapsed mode. @default false */
+    hasIconsLabels?: boolean;
+    /** Alias for hasIconsLabels. @default false */
+    hasCollapsedLabels?: boolean;
+    /** Enables tooltips on menu items (shown in collapsed mode). @default true */
+    hasTooltip?: boolean;
+    /** Shows tooltips even when menu is expanded. @default false */
+    hasTooltipOnExpanded?: boolean;
+    /** Expands all items that do not have an explicit expanded property. @default false */
+    expandAllItems?: boolean;
+    /** Applies flat styling without hierarchical indentation. @default false */
+    isFlat?: boolean;
+    /** Applies bold font weight to root-level menu items. @default false */
+    hasBoldRootLevel?: boolean;
+    /** Emits true when any menu item is clicked. */
+    onIsClick?: (clicked: boolean) => void;
+    /** Emits the clicked menu item. */
+    onItemClick?: (item: EdsMenuItem) => void;
+    /** Emits when a menu item's expand state is toggled. */
+    onExpandToggle?: (item: EdsMenuItem) => void;
+}
+/**
+ * `EdsMenu` — pure React port of the Angular `eds-menu`.
+ *
+ * Renders a hierarchical navigation tree of `EdsMenuItem`s with optional icons, collapsed
+ * mode, a search filter, badges and expand/collapse. Behavior is reimplemented with hooks:
+ * items are configured immutably (no prop mutation), expansion is tracked in local state
+ * (seeded from `item.expanded` + `expandAllItems`), filtering derives a flagged copy, and
+ * keyboard navigation (Arrow/Home/End/Enter/Space, Right/Left to expand/collapse) uses a
+ * roving-tabindex over the visible items. Navigation uses plain anchors + the `onItemClick`
+ * callback (no router dependency). Styling keeps the Angular BEM host classes
+ * (`eds-menu--collapsed/--no-icons/--flat`) to match the ported CSS.
+ */
+export declare function EdsMenu({ items, searchFilterLabel, filterValue, isCollapsed, hasCollapsedInitials, hasFilter, hasIcons, hasIconsLabels, hasCollapsedLabels, hasTooltip, hasTooltipOnExpanded, expandAllItems, isFlat, hasBoldRootLevel, onIsClick, onItemClick, onExpandToggle, }: EdsMenuProps): React.JSX.Element;
+//# sourceMappingURL=eds-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-menu.d.ts","sourceRoot":"","sources":["../../src/eds-menu/eds-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,WAAW,YAAY;IACzB,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uFAAuF;IACvF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wDAAwD;IACxD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD;AA+CD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACpB,KAAU,EACV,iBAAmC,EACnC,WAAgB,EAChB,WAAmB,EACnB,oBAA4B,EAC5B,SAAiB,EACjB,QAAgB,EAChB,cAAsB,EACtB,kBAA0B,EAC1B,UAAiB,EACjB,oBAA4B,EAC5B,cAAsB,EACtB,MAAc,EACd,gBAAwB,EACxB,SAAS,EACT,WAAW,EACX,cAAc,GACjB,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0IlC"}