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

package/eds-empty-state/index.js

@@ -0,0 +1,6 @@
+export { EdsEmptyState } from './eds-empty-state.js';
+export { EdsEmptyStateIcon } from './eds-empty-state-icon.js';
+export { EdsEmptyStateTitle } from './eds-empty-state-title.js';
+export { EdsEmptyStateDescription } from './eds-empty-state-description.js';
+export { EdsEmptyStateActions } from './eds-empty-state-actions.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAE5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC"}

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

@@ -0,0 +1,35 @@
+/* Pure-React CSS port of eds-fab-button-item.scss (1:1). Private --_action-* vars cascade
+   from the parent .eds-fab-button in the light DOM. */
+
+.eds-fab-button-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_action-size, 40px);
+    height: var(--_action-size, 40px);
+    border-radius: var(--eds-br-full);
+    border: none;
+    background-color: var(--_action-surface, var(--eds-c-surface-elevation));
+    color: var(--_action-on-surface, var(--eds-c-foreground-default));
+    cursor: pointer;
+    box-shadow: var(--_action-shadow, var(--eds-sh-2));
+    transition: background-color 200ms ease, transform 150ms ease;
+    position: relative;
+}
+
+.eds-fab-button-item:hover:not([aria-disabled='true']) {
+    background-color: var(--_action-surface-hover, var(--eds-c-surface-neutral-subtle--hover));
+    transform: scale(1.1);
+}
+
+.eds-fab-button-item[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+/* inlined base.eds-focus-visible-ring-rounded() (default $offset: 1px) */
+.eds-fab-button-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-full) !important;
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface EdsFabButtonItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Icon name from the EDS icon library (required). */
+    icon: string;
+    /** Label used for tooltip and aria-label. @default '' */
+    label?: string;
+    /** Custom aria-label override. @default '' */
+    ariaLabel?: string;
+    /** Whether the action item is disabled. @default false */
+    disabled?: boolean;
+    /** Emitted when the item is activated (native click event). */
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Optional projected content rendered after the icon (matches Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsFabButtonItem` — pure React port of the Angular `eds-fab-button-item`.
+ *
+ * A single speed-dial action rendered as a `role="menuitem"` element containing an
+ * `EdsIcon` (size `s`, neutral color) plus optional projected `children`. The click is
+ * suppressed while `disabled`. Positioning, roving `tabindex`, and open/close transforms
+ * are driven by the parent `EdsFabButton` via the spread `...rest` (style/tabIndex/ref),
+ * matching the Angular parent's imperative `nativeElement` manipulation.
+ */
+export declare const EdsFabButtonItem: React.ForwardRefExoticComponent<EdsFabButtonItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-fab-button-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-fab-button-item.d.ts","sourceRoot":"","sources":["../../src/eds-fab-button/eds-fab-button-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,qBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC7D,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FA2B5B,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/**
+ * `EdsFabButtonItem` — pure React port of the Angular `eds-fab-button-item`.
+ *
+ * A single speed-dial action rendered as a `role="menuitem"` element containing an
+ * `EdsIcon` (size `s`, neutral color) plus optional projected `children`. The click is
+ * suppressed while `disabled`. Positioning, roving `tabindex`, and open/close transforms
+ * are driven by the parent `EdsFabButton` via the spread `...rest` (style/tabIndex/ref),
+ * matching the Angular parent's imperative `nativeElement` manipulation.
+ */
+export const EdsFabButtonItem = React.forwardRef(function EdsFabButtonItem({ icon, label = '', ariaLabel = '', disabled = false, onItemClick, children, className, ...rest }, ref) {
+    const onClick = (event) => {
+        if (!disabled) {
+            onItemClick?.(event);
+        }
+    };
+    return (_jsxs("div", { ref: ref, className: className ? `eds-fab-button-item ${className}` : 'eds-fab-button-item', role: "menuitem", "aria-label": ariaLabel || label || undefined, "aria-disabled": disabled || undefined, tabIndex: -1, onClick: onClick, ...rest, children: [_jsx(EdsIcon, { icon: icon, size: "s", color: "neutral" }), children] }));
+});
+//# sourceMappingURL=eds-fab-button-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-fab-button-item.js","sourceRoot":"","sources":["../../src/eds-fab-button/eds-fab-button-item.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAkBlD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,gBAAgB,CACrB,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACjG,GAAG;IAEH,MAAM,OAAO,GAAG,CAAC,KAAuC,EAAQ,EAAE;QAC9D,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAuB,SAAS,EAAE,CAAC,CAAC,CAAC,qBAAqB,EACjF,IAAI,EAAC,UAAU,gBACH,SAAS,IAAI,KAAK,IAAI,SAAS,mBAC5B,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,OAAO,KACZ,IAAI,aAER,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,GAAG,EAC/C,QAAQ,IACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-fab-button/eds-fab-button.css

@@ -0,0 +1,164 @@
+/* Pure-React CSS port of eds-fab-button.scss (1:1). Class-based (pre String-Props) — the
+   host BEM classes are reproduced verbatim from the Angular hostClasses() output. */
+
+.eds-fab-button {
+    --_size: 56px;
+    --_action-size: 40px;
+    --_surface: var(--eds-c-surface-brand);
+    --_on-surface: var(--eds-c-on-surface-brand);
+    --_surface-hover: var(--eds-c-surface-brand--hover);
+    --_shadow: var(--eds-sh-3);
+    --_action-surface: var(--eds-c-surface-elevation);
+    --_action-on-surface: var(--eds-c-foreground-default);
+    --_action-surface-hover: var(--eds-c-surface-neutral-subtle--hover);
+    --_action-shadow: var(--eds-sh-2);
+    --_tooltip-surface: var(--eds-c-surface-inverse);
+    --_tooltip-on-surface: var(--eds-c-on-surface-inverse);
+
+    display: inline-block;
+    position: relative;
+}
+
+.eds-fab-button.eds-fab-button--primary {
+    --_surface: var(--eds-c-surface-primary);
+    --_on-surface: var(--eds-c-on-surface-primary);
+    --_surface-hover: var(--eds-c-surface-primary--hover);
+}
+
+.eds-fab-button.eds-fab-button--neutral {
+    --_surface: var(--eds-c-surface-neutral-subtle);
+    --_on-surface: var(--eds-c-on-surface-neutral-subtle);
+    --_surface-hover: var(--eds-c-surface-neutral-subtle--hover);
+}
+
+.eds-fab-button.eds-fab-button--disabled {
+    --_surface: var(--eds-c-surface-disabled);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-disabled);
+}
+
+.eds-fab-button .eds-fab-button__mask {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 998;
+    animation: eds-fab-mask-fade-in 200ms ease-out;
+}
+
+.eds-fab-button .eds-fab-button__container {
+    position: relative;
+    z-index: 999;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.eds-fab-button .eds-fab-button__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_size);
+    height: var(--_size);
+    border-radius: var(--eds-br-full);
+    border: none;
+    background-color: var(--_surface);
+    color: var(--_on-surface);
+    cursor: pointer;
+    box-shadow: var(--_shadow);
+    transition: background-color 200ms ease, transform 200ms ease;
+    position: relative;
+    z-index: 2;
+}
+
+.eds-fab-button .eds-fab-button__trigger:hover:not(:disabled) {
+    background-color: var(--_surface-hover);
+}
+
+.eds-fab-button .eds-fab-button__trigger:disabled {
+    cursor: not-allowed;
+}
+
+/* inlined base.eds-focus-visible-ring-rounded() (default $offset: 1px) */
+.eds-fab-button .eds-fab-button__trigger:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-full) !important;
+}
+
+.eds-fab-button .eds-fab-button__trigger eds-icon,
+.eds-fab-button .eds-fab-button__trigger .eds-icon {
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.eds-fab-button.eds-fab-button--open .eds-fab-button__trigger eds-icon,
+.eds-fab-button.eds-fab-button--open .eds-fab-button__trigger .eds-icon {
+    transform: rotate(0deg);
+}
+
+.eds-fab-button .eds-fab-button__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: calc(var(--_action-size) / -2);
+    margin-left: calc(var(--_action-size) / -2);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.eds-fab-button.eds-fab-button--open .eds-fab-button__list {
+    pointer-events: auto;
+}
+
+.eds-fab-button .eds-fab-button-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 200ms ease;
+}
+
+.eds-fab-button .eds-fab-button__tooltip {
+    position: absolute;
+    white-space: nowrap;
+    background-color: var(--_tooltip-surface);
+    color: var(--_tooltip-on-surface);
+    font: var(--eds-f-paragraph-xs);
+    padding: var(--eds-sp-3xs) var(--eds-sp-xs);
+    border-radius: var(--eds-br-s);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease;
+    z-index: 10;
+}
+
+.eds-fab-button .eds-fab-button-item:hover .eds-fab-button__tooltip,
+.eds-fab-button .eds-fab-button-item:focus-visible .eds-fab-button__tooltip {
+    opacity: 1;
+}
+
+/* Tooltip positioning based on direction */
+.eds-fab-button.eds-fab-button--up .eds-fab-button__tooltip,
+.eds-fab-button.eds-fab-button--down .eds-fab-button__tooltip {
+    right: calc(100% + var(--eds-sp-xs));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.eds-fab-button.eds-fab-button--left .eds-fab-button__tooltip,
+.eds-fab-button.eds-fab-button--right .eds-fab-button__tooltip {
+    bottom: calc(100% + var(--eds-sp-xs));
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+@keyframes eds-fab-mask-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import type { EdsFabButtonColor } from './eds-fab-button.model.js';
+export type { EdsFabButtonColor, EdsFabDirection, EdsFabType } from './eds-fab-button.model.js';
+export interface EdsFabButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * Semantic color of the FAB trigger. Ported from the Angular `EdsColorDirective`
+     * (`edsPrimary` / `edsNeutral`); defaults to `primary`. @default 'primary'
+     */
+    color?: EdsFabButtonColor;
+    /** Data attribute value for e2e testing. @default 'eds-fab-button' */
+    e2eAttr?: string;
+    /** Icon displayed on the main FAB trigger button. @default 'plus' */
+    icon?: string;
+    /** Icon displayed on the trigger when the speed dial is open. @default 'x' */
+    activeIcon?: string;
+    /** Accessible label for the main FAB button. @default 'Actions' */
+    ariaLabel?: string;
+    /** Expands items upward (default direction). @default false */
+    isDirectionUp?: boolean;
+    /** Expands items downward. @default false */
+    isDirectionDown?: boolean;
+    /** Expands items to the left. @default false */
+    isDirectionLeft?: boolean;
+    /** Expands items to the right. @default false */
+    isDirectionRight?: boolean;
+    /** Arranges items in a straight line (default type). @default false */
+    isLinear?: boolean;
+    /** Arranges items in a full circle around the FAB. @default false */
+    isCircle?: boolean;
+    /** Arranges items in a semi-circle. @default false */
+    isSemiCircle?: boolean;
+    /** Radius (in pixels) for circle and semi-circle layouts. @default 80 */
+    radius?: number;
+    /** Delay between each action item animation (in milliseconds). @default 30 */
+    transitionDelay?: number;
+    /** Whether the FAB trigger button is disabled. @default false */
+    disabled?: boolean;
+    /** Whether to show a mask/backdrop overlay when the speed dial is open. @default false */
+    hasMask?: boolean;
+    /** Emitted when the speed dial menu is opened. */
+    onOpened?: () => void;
+    /** Emitted when the speed dial menu is closed. */
+    onClosed?: () => void;
+    /** Emitted when the main FAB button is clicked (when no action items are projected). */
+    onFabClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Projected action items — `<EdsFabButtonItem>` elements. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsFabButton` — pure React port of the Angular `eds-fab-button`.
+ *
+ * A Floating Action Button with an optional speed-dial menu following the WAI-ARIA APG
+ * Menu Button pattern. The trigger is a `<button.eds-fab-button__trigger>` with
+ * `aria-haspopup`/`aria-expanded`/`aria-controls`; projected `<EdsFabButtonItem>` children
+ * are laid out (linear / circle / semi-circle) around the trigger with roving `tabindex`
+ * and full keyboard navigation. The color is reflected as a BEM class
+ * (`eds-fab-button--{color}`, matching the Angular `hostClasses()` output — the pre
+ * String-Props class exception), as are the direction/type/open/disabled state classes.
+ */
+export declare const EdsFabButton: React.ForwardRefExoticComponent<EdsFabButtonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-fab-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-fab-button.d.ts","sourceRoot":"","sources":["../../src/eds-fab-button/eds-fab-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,2BAA2B,CAAC;AAEhG,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEhG,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wFAAwF;IACxF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAkED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,0FAiVvB,CAAC"}

package/eds-fab-button/eds-fab-button.js

@@ -0,0 +1,332 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+// --- Position math (ported 1:1 from the Angular component's private helpers) ---
+function calculateLinearPosition(index, direction) {
+    const spacing = 56;
+    const offset = (index + 1) * spacing;
+    switch (direction) {
+        case 'up': return { x: 0, y: -offset };
+        case 'down': return { x: 0, y: offset };
+        case 'left': return { x: -offset, y: 0 };
+        case 'right': return { x: offset, y: 0 };
+    }
+}
+function calculateCirclePosition(index, totalItems, radius) {
+    const angle = ((2 * Math.PI) / totalItems) * index - Math.PI / 2;
+    return {
+        x: Math.round(radius * Math.cos(angle)),
+        y: Math.round(radius * Math.sin(angle)),
+    };
+}
+function calculateSemiCirclePosition(index, totalItems, direction, radius) {
+    const angleStep = Math.PI / (totalItems - 1);
+    let startAngle;
+    switch (direction) {
+        case 'up':
+            startAngle = Math.PI;
+            break;
+        case 'down':
+            startAngle = 0;
+            break;
+        case 'left':
+            startAngle = -Math.PI / 2;
+            break;
+        case 'right':
+            startAngle = Math.PI / 2;
+            break;
+    }
+    const angle = startAngle + angleStep * index;
+    return {
+        x: Math.round(radius * Math.cos(angle)),
+        y: Math.round(radius * Math.sin(angle)),
+    };
+}
+function calculatePosition(index, totalItems, direction, layoutType, radius) {
+    if (layoutType === 'linear')
+        return calculateLinearPosition(index, direction);
+    if (layoutType === 'circle')
+        return calculateCirclePosition(index, totalItems, radius);
+    if (layoutType === 'semi-circle')
+        return calculateSemiCirclePosition(index, totalItems, direction, radius);
+    return { x: 0, y: 0 };
+}
+function wrapIndex(index, total) {
+    return ((index % total) + total) % total;
+}
+/**
+ * `EdsFabButton` — pure React port of the Angular `eds-fab-button`.
+ *
+ * A Floating Action Button with an optional speed-dial menu following the WAI-ARIA APG
+ * Menu Button pattern. The trigger is a `<button.eds-fab-button__trigger>` with
+ * `aria-haspopup`/`aria-expanded`/`aria-controls`; projected `<EdsFabButtonItem>` children
+ * are laid out (linear / circle / semi-circle) around the trigger with roving `tabindex`
+ * and full keyboard navigation. The color is reflected as a BEM class
+ * (`eds-fab-button--{color}`, matching the Angular `hostClasses()` output — the pre
+ * String-Props class exception), as are the direction/type/open/disabled state classes.
+ */
+export const EdsFabButton = React.forwardRef(function EdsFabButton({ color = 'primary', e2eAttr = 'eds-fab-button', icon = 'plus', activeIcon = 'x', ariaLabel = 'Actions', isDirectionUp: _isDirectionUp = false, isDirectionDown = false, isDirectionLeft = false, isDirectionRight = false, isLinear: _isLinear = false, isCircle = false, isSemiCircle = false, radius = 80, transitionDelay = 30, disabled = false, hasMask = false, onOpened, onClosed, onFabClick, children, className, ...rest }, ref) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const reactId = useId().replace(/:/g, '');
+    const menuId = `eds-fab-menu-${reactId}`;
+    const triggerId = `eds-fab-trigger-${reactId}`;
+    // Resolved direction from boolean props. Defaults to 'up'. (Ported from resolvedDirection computed.)
+    const resolvedDirection = useMemo(() => {
+        if (isDirectionDown)
+            return 'down';
+        if (isDirectionLeft)
+            return 'left';
+        if (isDirectionRight)
+            return 'right';
+        return 'up';
+    }, [isDirectionDown, isDirectionLeft, isDirectionRight]);
+    // Resolved layout type from boolean props. Defaults to 'linear'. (Ported from resolvedType computed.)
+    const resolvedType = useMemo(() => {
+        if (isCircle)
+            return 'circle';
+        if (isSemiCircle)
+            return 'semi-circle';
+        return 'linear';
+    }, [isCircle, isSemiCircle]);
+    // Normalize projected item children to an array so we can count / position them.
+    const itemChildren = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
+    const itemCount = itemChildren.length;
+    const hasItems = itemCount > 0;
+    const currentIcon = isOpen ? activeIcon : icon;
+    // --- forward the root ref to the caller while keeping our internal rootRef ---
+    const setRootRef = useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const focusTrigger = useCallback(() => {
+        triggerRef.current?.focus();
+    }, []);
+    const focusItem = useCallback((index) => {
+        if (index < 0 || index >= itemRefs.current.length)
+            return;
+        setFocusedIndex(index);
+        // Roving tabindex: focused item gets 0, others -1.
+        itemRefs.current.forEach((el, i) => {
+            el?.setAttribute('tabindex', i === index ? '0' : '-1');
+        });
+        itemRefs.current[index]?.focus();
+    }, []);
+    const open = useCallback(() => {
+        setIsOpen(true);
+        onOpened?.();
+    }, [onOpened]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        // Reset all items to tabindex -1.
+        itemRefs.current.forEach((el) => el?.setAttribute('tabindex', '-1'));
+        onClosed?.();
+    }, [onClosed]);
+    // Outside-click listener (ported from addOutsideClickListener/setTimeout guard).
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const listener = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target)) {
+                close();
+            }
+        };
+        const timer = setTimeout(() => {
+            document.addEventListener('click', listener);
+        });
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener('click', listener);
+        };
+    }, [isOpen, close]);
+    // Reposition items whenever open state or layout params change (ported from the effect()).
+    useEffect(() => {
+        itemRefs.current.forEach((el, index) => {
+            if (!el)
+                return;
+            if (!isOpen) {
+                el.style.transform = 'scale(0)';
+                el.style.opacity = '0';
+                el.style.transitionDelay = '0ms';
+                el.style.pointerEvents = 'none';
+            }
+            else {
+                const pos = calculatePosition(index, itemCount, resolvedDirection, resolvedType, radius);
+                el.style.transform = `translate(${pos.x}px, ${pos.y}px) scale(1)`;
+                el.style.opacity = '1';
+                el.style.transitionDelay = `${index * transitionDelay}ms`;
+                el.style.pointerEvents = 'auto';
+            }
+        });
+    }, [isOpen, itemCount, resolvedDirection, resolvedType, radius, transitionDelay]);
+    // Toggle the speed dial open/closed (ported from toggle()).
+    const onTriggerClick = (event) => {
+        event.stopPropagation();
+        if (disabled)
+            return;
+        if (!hasItems) {
+            onFabClick?.(event);
+            return;
+        }
+        if (isOpen) {
+            close();
+            focusTrigger();
+        }
+        else {
+            open();
+            // Defer focus until items are rendered/visible.
+            requestAnimationFrame(() => focusItem(0));
+        }
+    };
+    // Keyboard on the trigger button (APG Menu Button pattern — ported from onTriggerKeydown).
+    const onTriggerKeydown = (event) => {
+        if (disabled || !hasItems)
+            return;
+        const dir = resolvedDirection;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (isOpen) {
+                    close();
+                }
+                else {
+                    open();
+                    requestAnimationFrame(() => focusItem(0));
+                }
+                break;
+            case 'ArrowDown':
+                if (dir === 'up' || dir === 'down') {
+                    event.preventDefault();
+                    if (!isOpen)
+                        open();
+                    requestAnimationFrame(() => focusItem(0));
+                }
+                break;
+            case 'ArrowUp':
+                if (dir === 'up' || dir === 'down') {
+                    event.preventDefault();
+                    if (!isOpen)
+                        open();
+                    requestAnimationFrame(() => focusItem(itemCount - 1));
+                }
+                break;
+            case 'ArrowRight':
+                if (dir === 'left' || dir === 'right') {
+                    event.preventDefault();
+                    if (!isOpen)
+                        open();
+                    requestAnimationFrame(() => focusItem(0));
+                }
+                break;
+            case 'ArrowLeft':
+                if (dir === 'left' || dir === 'right') {
+                    event.preventDefault();
+                    if (!isOpen)
+                        open();
+                    requestAnimationFrame(() => focusItem(itemCount - 1));
+                }
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault();
+                    close();
+                    focusTrigger();
+                }
+                break;
+        }
+    };
+    // Host-level keydown to intercept keys while focus is on a menu item (ported from onHostKeydown).
+    const onHostKeydown = (event) => {
+        if (!isOpen)
+            return;
+        // Only handle keys when focus is inside the menu (not on the trigger).
+        if (event.target === triggerRef.current)
+            return;
+        if (itemCount === 0)
+            return;
+        const dir = resolvedDirection;
+        const currentIndex = focusedIndex;
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                close();
+                focusTrigger();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (currentIndex >= 0) {
+                    itemRefs.current[currentIndex]?.click();
+                }
+                close();
+                focusTrigger();
+                break;
+            case 'Tab':
+                // Close menu on Tab per APG, allow default tab behavior.
+                close();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (dir === 'up' || dir === 'down')
+                    focusItem(wrapIndex(currentIndex + 1, itemCount));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (dir === 'up' || dir === 'down')
+                    focusItem(wrapIndex(currentIndex - 1, itemCount));
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (dir === 'left' || dir === 'right')
+                    focusItem(wrapIndex(currentIndex + 1, itemCount));
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (dir === 'left' || dir === 'right')
+                    focusItem(wrapIndex(currentIndex - 1, itemCount));
+                break;
+            case 'Home':
+                event.preventDefault();
+                focusItem(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                focusItem(itemCount - 1);
+                break;
+        }
+    };
+    const onMaskClick = () => {
+        close();
+        focusTrigger();
+    };
+    // Host class string (ported 1:1 from hostClasses() — the pre String-Props BEM exception, rule 9).
+    const hostClasses = [
+        'eds-fab-button',
+        `eds-fab-button--${color}`,
+        `eds-fab-button--${resolvedDirection}`,
+        `eds-fab-button--${resolvedType}`,
+        isOpen ? 'eds-fab-button--open' : '',
+        disabled ? 'eds-fab-button--disabled' : '',
+        className ?? '',
+    ]
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    const orientation = resolvedDirection === 'left' || resolvedDirection === 'right' ? 'horizontal' : 'vertical';
+    return (_jsxs("div", { ref: setRootRef, className: hostClasses, "data-e2e": e2eAttr, onKeyDown: onHostKeydown, ...rest, children: [hasMask && isOpen && (_jsx("div", { className: "eds-fab-button__mask", role: "presentation", onClick: onMaskClick })), _jsxs("div", { className: "eds-fab-button__container", children: [_jsx("ul", { className: "eds-fab-button__list", id: menuId, role: "menu", "aria-labelledby": triggerId, "aria-orientation": orientation, children: itemChildren.map((child, index) => React.cloneElement(child, {
+                            key: child.key ?? index,
+                            ref: (node) => {
+                                itemRefs.current[index] = node;
+                            },
+                        })) }), _jsx("button", { ref: triggerRef, id: triggerId, className: "eds-fab-button__trigger", type: "button", "aria-label": ariaLabel, "aria-haspopup": hasItems ? 'menu' : undefined, "aria-expanded": hasItems ? isOpen : undefined, "aria-controls": hasItems ? menuId : undefined, disabled: disabled || undefined, onClick: onTriggerClick, onKeyDown: onTriggerKeydown, children: _jsx(EdsIcon, { icon: currentIcon, size: "m" }) })] })] }));
+});
+//# sourceMappingURL=eds-fab-button.js.map