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

package/eds-growl/eds-growl.css

@@ -0,0 +1,200 @@
+/*
+ * eds-growl — pure React port of eds-growl.scss.
+ * :host -> .eds-growl ; &.eds-growl--<pos> -> .eds-growl.eds-growl--<pos> (position kept as a
+ * class, matching the Angular hostClasses() BEM string, not a reflected attribute).
+ * base.media(base.$eds-bkp-mobile) -> @media (max-width: 767px) (mobile is < 768px).
+ * The .eui-21 wrapper is dropped (share-ready, per Part 2). Tokens/privates copied verbatim.
+ */
+
+.eds-growl {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: 22rem;
+    z-index: 9000;
+    gap: var(--eds-sp-xs);
+    pointer-events: none;
+}
+
+/* Position variants */
+.eds-growl.eds-growl--bottom-left {
+    bottom: var(--eds-sp-l);
+    left: var(--eds-sp-l);
+}
+
+.eds-growl.eds-growl--bottom-center {
+    bottom: var(--eds-sp-l);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.eds-growl.eds-growl--bottom-right {
+    bottom: var(--eds-sp-l);
+    right: var(--eds-sp-l);
+}
+
+.eds-growl.eds-growl--top-left {
+    top: var(--eds-sp-l);
+    left: var(--eds-sp-l);
+}
+
+.eds-growl.eds-growl--top-center {
+    top: var(--eds-sp-l);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.eds-growl.eds-growl--top-right {
+    top: var(--eds-sp-l);
+    right: var(--eds-sp-l);
+}
+
+/* Item base */
+.eds-growl .eds-growl__item {
+    --_eds-growl-surface: var(--eds-c-surface-info-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-info-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-info);
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--eds-sp-m);
+    background-color: var(--_eds-growl-surface);
+    color: var(--_eds-growl-on-surface);
+    border-left: var(--eds-bw-m) solid var(--_eds-growl-border-color);
+    border-radius: var(--eds-br-s);
+    box-shadow: var(--eds-sh-3);
+    pointer-events: auto;
+    animation: eds-growl-fade-in 0.2s ease-out;
+}
+
+/* Severity color variants */
+.eds-growl .eds-growl__item--info {
+    --_eds-growl-surface: var(--eds-c-surface-info-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-info-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-info);
+}
+
+.eds-growl .eds-growl__item--success {
+    --_eds-growl-surface: var(--eds-c-surface-success-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-success-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-success);
+}
+
+.eds-growl .eds-growl__item--warning {
+    --_eds-growl-surface: var(--eds-c-surface-warning-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-warning-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-warning);
+}
+
+.eds-growl .eds-growl__item--critical {
+    --_eds-growl-surface: var(--eds-c-surface-critical-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-critical-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-critical);
+}
+
+.eds-growl .eds-growl__item--dismiss-all {
+    --_eds-growl-surface: var(--eds-c-surface-neutral-subtler);
+    --_eds-growl-on-surface: var(--eds-c-foreground-default);
+    --_eds-growl-border-color: var(--eds-c-border-divider);
+}
+
+/* Slide animations */
+.eds-growl .eds-growl__item--slide-up {
+    animation-name: eds-growl-slide-up;
+}
+
+.eds-growl .eds-growl__item--slide-down {
+    animation-name: eds-growl-slide-down;
+}
+
+/* Header row */
+.eds-growl .eds-growl__header {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    padding-right: var(--eds-sp-xl);
+}
+
+/* Title */
+.eds-growl .eds-growl__title {
+    font: var(--eds-f-label-m-semi-bold);
+    color: var(--_eds-growl-on-surface);
+}
+
+/* Content / detail area */
+.eds-growl .eds-growl__content {
+    margin-top: var(--eds-sp-2xs);
+    padding-left: calc(var(--eds-sp-xs) + 1.25rem);
+    font: var(--eds-f-paragraph-s);
+    color: var(--_eds-growl-on-surface);
+    max-height: 60vh;
+    overflow-y: auto;
+    overflow-wrap: break-word;
+}
+
+.eds-growl .eds-growl__content a {
+    text-decoration: underline;
+}
+
+/* Close button */
+.eds-growl .eds-growl__close {
+    position: absolute;
+    top: var(--eds-sp-xs);
+    right: var(--eds-sp-xs);
+}
+
+@keyframes eds-growl-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes eds-growl-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes eds-growl-slide-down {
+    from {
+        opacity: 0;
+        transform: translateY(-1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 767px) {
+    .eds-growl {
+        width: calc(100vw - 2 * var(--eds-sp-m));
+    }
+
+    .eds-growl.eds-growl--bottom-left,
+    .eds-growl.eds-growl--bottom-center,
+    .eds-growl.eds-growl--bottom-right {
+        bottom: var(--eds-sp-m);
+        left: var(--eds-sp-m);
+        right: var(--eds-sp-m);
+        transform: none;
+    }
+
+    .eds-growl.eds-growl--top-left,
+    .eds-growl.eds-growl--top-center,
+    .eds-growl.eds-growl--top-right {
+        top: var(--eds-sp-m);
+        left: var(--eds-sp-m);
+        right: var(--eds-sp-m);
+        transform: none;
+    }
+}

package/eds-growl/eds-growl.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+/** Supported severity levels for growl messages (ported 1:1 from Angular `EdsGrowlSeverity`). */
+export type EdsGrowlSeverity = 'success' | 'warning' | 'info' | 'critical';
+/** Screen position where growl messages appear (ported from Angular `EdsGrowlPosition`). */
+export type EdsGrowlPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** ARIA live region politeness levels. */
+export type EdsGrowlAriaLive = 'off' | 'polite' | 'assertive';
+/**
+ * Defines the structure of a growl notification message (ported 1:1 from the Angular
+ * `EdsGrowlMessage` model). The Angular `timeout` / `dismissed` fields were component-internal
+ * bookkeeping; in React the auto-dismiss timers are managed by the component's hooks keyed off
+ * the message's identity, so those internal fields are dropped.
+ */
+export interface EdsGrowlMessage {
+    /** Visual severity / color variant of the message. */
+    severity: EdsGrowlSeverity;
+    /** Short title text displayed in bold. */
+    summary: string;
+    /** Detailed message content (supports HTML — rendered via `dangerouslySetInnerHTML`). */
+    detail?: string;
+    /** Duration in milliseconds before auto-dismissal. Overrides the component-level `life`. */
+    life?: number;
+    /** When true, the message persists until manually dismissed by the user. */
+    sticky?: boolean;
+    /** Optional stable identity used as the React key + timer key. Falls back to the index. */
+    id?: string | number;
+}
+export interface EdsGrowlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Data attribute used for end-to-end testing identification. @default 'eds-growl' */
+    e2eAttr?: string;
+    /** ARIA live region politeness level controlling how messages are announced. @default 'polite' */
+    ariaLive?: EdsGrowlAriaLive;
+    /** Prevents automatic dismissal of messages, requiring manual close. @default false */
+    sticky?: boolean;
+    /** Duration in ms before non-sticky messages automatically dismiss. @default 3000 */
+    life?: number;
+    /** Array of message objects to display (controlled — the host owns the list). @default [] */
+    value?: EdsGrowlMessage[];
+    /** Enables a dismiss-all button when more than two sticky messages are present. @default false */
+    closeAllSticky?: boolean;
+    /** Screen position where growl messages appear. @default 'bottom-right' */
+    position?: EdsGrowlPosition;
+    /** Optional callback executed when the growl container is clicked. @default null */
+    callback?: (() => void) | null;
+    /** Emitted when a growl message is clicked by the user (Angular `growlClick`). */
+    onGrowlClick?: () => void;
+    /**
+     * Emitted when a message should be removed (a single message dismissed via its close
+     * button, or auto-dismissed after its life expires). The host owns the `value` list and
+     * removes the given message. Maps to the Angular internal `remove()` + `growlClose` output.
+     */
+    onGrowlClose?: (message: EdsGrowlMessage) => void;
+    /**
+     * Emitted when all messages should be removed (the dismiss-all button). The host owns the
+     * `value` list and clears it. Maps to the Angular internal `removeAll()`.
+     */
+    onGrowlCloseAll?: () => void;
+}
+/**
+ * `EdsGrowl` — pure React port of the Angular `eds-growl`.
+ *
+ * A notification/toast container that displays temporary or persistent messages with severity
+ * variants (info / success / warning / critical), positioned in one of six screen locations,
+ * with automatic dismissal or sticky behavior and an optional dismiss-all control.
+ *
+ * ### Service-agnostic React API (Angular `EdsGrowlService` dropped)
+ * The Angular component was optionally driven by an injectable `EdsGrowlService` (imperative
+ * `growl*()` methods holding a signal-based message queue). React has no DI service, so that
+ * imperative layer is **not** ported — the growl is a **controlled** component: the host owns
+ * the `value` array and reacts to `onGrowlClose(message)` / `onGrowlCloseAll()` to mutate it.
+ * The `severityTo*` service helpers (`growlSuccess`, etc.) are a trivial host-side concern
+ * (`setValue([...value, { severity: 'success', summary: 'Success', detail }])`).
+ *
+ * Auto-dismiss timers are reimplemented with `useEffect` + `setTimeout` keyed off each
+ * message's identity: a non-sticky message schedules its removal after `message.life ?? life`
+ * and calls `onGrowlClose(message)`; removing a message clears its timer.
+ */
+export declare const EdsGrowl: React.ForwardRefExoticComponent<EdsGrowlProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-growl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-growl.d.ts","sourceRoot":"","sources":["../../src/eds-growl/eds-growl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,iGAAiG;AACjG,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3E,4FAA4F;AAC5F,MAAM,MAAM,gBAAgB,GACtB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAErB,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC5B,sDAAsD;IACtD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACxF,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,kGAAkG;IAClG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,sFAqJnB,CAAC"}

package/eds-growl/eds-growl.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+import { EdsIconState } from '../eds-icon-state/eds-icon-state.js';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+/**
+ * `EdsGrowl` — pure React port of the Angular `eds-growl`.
+ *
+ * A notification/toast container that displays temporary or persistent messages with severity
+ * variants (info / success / warning / critical), positioned in one of six screen locations,
+ * with automatic dismissal or sticky behavior and an optional dismiss-all control.
+ *
+ * ### Service-agnostic React API (Angular `EdsGrowlService` dropped)
+ * The Angular component was optionally driven by an injectable `EdsGrowlService` (imperative
+ * `growl*()` methods holding a signal-based message queue). React has no DI service, so that
+ * imperative layer is **not** ported — the growl is a **controlled** component: the host owns
+ * the `value` array and reacts to `onGrowlClose(message)` / `onGrowlCloseAll()` to mutate it.
+ * The `severityTo*` service helpers (`growlSuccess`, etc.) are a trivial host-side concern
+ * (`setValue([...value, { severity: 'success', summary: 'Success', detail }])`).
+ *
+ * Auto-dismiss timers are reimplemented with `useEffect` + `setTimeout` keyed off each
+ * message's identity: a non-sticky message schedules its removal after `message.life ?? life`
+ * and calls `onGrowlClose(message)`; removing a message clears its timer.
+ */
+export const EdsGrowl = React.forwardRef(function EdsGrowl({ e2eAttr = 'eds-growl', ariaLive = 'polite', sticky = false, life = 3000, value = [], closeAllSticky = false, position = 'bottom-right', callback = null, onGrowlClick, onGrowlClose, onGrowlCloseAll, className, ...rest }, ref) {
+    // Stable ids for the ARIA labelledby/describedby wiring.
+    const idsRef = useRef(null);
+    if (idsRef.current === null) {
+        const suffix = Math.random().toString(36).slice(2, 10);
+        idsRef.current = {
+            titleId: `eds-growl-title-${suffix}`,
+            contentId: `eds-growl-detail-${suffix}`,
+        };
+    }
+    const { titleId, contentId } = idsRef.current;
+    // role: 'alert' for assertive announcements (critical/urgent), 'status' otherwise
+    // (matches the Angular hostRole computed).
+    const hostRole = ariaLive === 'assertive' ? 'alert' : 'status';
+    // Slide direction based on position (top-* slide down, bottom-* slide up) — mirrors the
+    // Angular template class bindings.
+    const isBottom = position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right';
+    const isTop = position === 'top-left' || position === 'top-center' || position === 'top-right';
+    // Auto-dismiss timers — one per (non-sticky) message, keyed by identity. Mirrors the
+    // Angular effect() that set/cleared setTimeout for added/removed messages.
+    const keyOf = (msg, index) => msg.id ?? index;
+    const onCloseRef = useRef(onGrowlClose);
+    onCloseRef.current = onGrowlClose;
+    useEffect(() => {
+        const timers = [];
+        value.forEach((msg) => {
+            if (!sticky && !msg.sticky) {
+                const duration = msg.life ?? life;
+                timers.push(setTimeout(() => {
+                    onCloseRef.current?.(msg);
+                }, duration));
+            }
+        });
+        return () => {
+            timers.forEach((t) => clearTimeout(t));
+        };
+        // Re-arm when the message list, sticky flag or life changes.
+    }, [value, sticky, life]);
+    // Maps severity to the EDS color variant for the icon-state component (critical stays
+    // critical; the others map straight across) — mirrors the Angular severityToColor.
+    const severityToColor = (severity) => severity === 'critical' ? 'critical' : severity;
+    // Whether more than two sticky messages are present (triggers the dismiss-all button).
+    const isMoreThanTwo = value.filter((m) => m.sticky).length > 2;
+    const onContainerClick = () => {
+        callback?.();
+        onGrowlClick?.();
+    };
+    const hasMessages = value.length > 0;
+    return (_jsxs("div", { ref: ref, className: className ? `eds-growl eds-growl--${position} ${className}` : `eds-growl eds-growl--${position}`, "data-e2e": e2eAttr, role: hostRole, "aria-live": ariaLive, "aria-atomic": "true", "aria-labelledby": hasMessages ? titleId : undefined, "aria-describedby": hasMessages ? contentId : undefined, onClick: onContainerClick, ...rest, children: [value.map((msg, index) => (_jsxs("div", { className: [
+                    'eds-growl__item',
+                    `eds-growl__item--${msg.severity}`,
+                    isBottom ? 'eds-growl__item--slide-up' : '',
+                    isTop ? 'eds-growl__item--slide-down' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: [_jsxs("div", { className: "eds-growl__header", children: [_jsx(EdsIconState, { color: severityToColor(msg.severity), size: "s", ariaLabel: msg.severity }), _jsx("span", { id: titleId, className: "eds-growl__title", children: msg.summary })] }), msg.detail && (_jsx("div", { id: contentId, className: "eds-growl__content", dangerouslySetInnerHTML: { __html: msg.detail } })), _jsx(EdsIconButton, { className: "eds-growl__close", icon: "x", color: "neutral", size: "xs", rounded: true, ariaLabel: "Dismiss notification", onButtonClick: () => onGrowlClose?.(msg) })] }, keyOf(msg, index)))), closeAllSticky && isMoreThanTwo && (_jsxs("div", { className: "eds-growl__item eds-growl__item--dismiss-all", children: [_jsxs("div", { className: "eds-growl__header", children: [_jsx(EdsIcon, { icon: "checks" }), _jsx("span", { className: "eds-growl__title", children: "Dismiss all" })] }), _jsx(EdsIconButton, { className: "eds-growl__close", icon: "x", color: "neutral", size: "xs", rounded: true, ariaLabel: "Dismiss all notifications", onButtonClick: () => onGrowlCloseAll?.() })] }))] }));
+});
+//# sourceMappingURL=eds-growl.js.map

package/eds-growl/eds-growl.js.map

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

package/eds-growl/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsGrowl } from './eds-growl.js';
+export type { EdsGrowlProps, EdsGrowlMessage, EdsGrowlSeverity, EdsGrowlPosition, EdsGrowlAriaLive, } from './eds-growl.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-growl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EACR,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GACnB,MAAM,gBAAgB,CAAC"}

package/eds-growl/index.js

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

package/eds-growl/index.js.map

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

package/eds-icon/eds-icon.css

@@ -17,6 +17,11 @@
 }
 
 .eds-icon .eds-icon-svg {
+    /* display:block removes the inline-svg baseline descender gap. In Angular's emulated
+       encapsulation the icon sits in its own layout so the gap is masked, but in light-DOM
+       React an inline <svg> makes the .eds-icon flex box a few px taller than wide, which
+       renders a rounded icon button (border-radius:full) as a slight oval. */
+    display: block;
     height: var(--_eds-icon-size);
     width: var(--_eds-icon-size);
     fill: var(--_eds-icon-color);

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

@@ -30,15 +30,5 @@ export interface EdsIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
     /** Optional projected content rendered after the icon svg (matches Angular `<ng-content/>`). */
     children?: React.ReactNode;
 }
-/**
- * `EdsIcon` — pure React port of the Angular `eds-icon`.
- *
- * Displays a scalable vector icon from a sprite set via `<use href>`, with semantic color
- * and size (reflected as `data-*` attributes), an optional circular clip, and a loading
- * spinner. No Web Component / `@lit/react` dependency. The `.eds-icon` root class is kept
- * (not just a data attribute) because other components (e.g. `eds-badge`) position
- * themselves against an `.eds-icon` ancestor. Requires `@eui/eds-styles` + the `eui-21`
- * class on an ancestor, and the sprite assets served under `assetsBaseUrl`.
- */
 export declare const EdsIcon: React.ForwardRefExoticComponent<EdsIconProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=eds-icon.d.ts.map

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

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

package/eds-icon/eds-icon.js

@@ -18,7 +18,17 @@ function resolveIcon(icon, set) {
  * themselves against an `.eds-icon` ancestor. Requires `@eui/eds-styles` + the `eui-21`
  * class on an ancestor, and the sprite assets served under `assetsBaseUrl`.
  */
-export const EdsIcon = React.forwardRef(function EdsIcon({ icon = '', set = 'regular', color = 'neutral', size = 'm', ariaLabel = '', ariaHidden = true, rounded = false, isLoading = false, assetsBaseUrl = 'assets', children, className, ...rest }, ref) {
+/**
+ * Default base URL under which the sprite assets live. A host deployed under a sub-path
+ * (e.g. `/eui-showcase-react-22.x/`) can set `globalThis.__EDS_ASSETS_BASE__` to an absolute
+ * base so sprite `<use href>`s resolve regardless of the page URL's trailing slash; otherwise
+ * it falls back to the relative `'assets'` (resolves against the current directory).
+ */
+function defaultAssetsBaseUrl() {
+    const g = globalThis;
+    return g.__EDS_ASSETS_BASE__ ?? 'assets';
+}
+export const EdsIcon = React.forwardRef(function EdsIcon({ icon = '', set = 'regular', color = 'neutral', size = 'm', ariaLabel = '', ariaHidden = true, rounded = false, isLoading = false, assetsBaseUrl = defaultAssetsBaseUrl(), children, className, ...rest }, ref) {
     const { iconName, resolvedSet } = resolveIcon(icon, set);
     const rootClass = className ? `eds-icon ${className}` : 'eds-icon';
     return (_jsxs("span", { ref: ref, className: rootClass, "data-color": color, "data-size": size, "data-rounded": rounded ? '' : undefined, "data-loading": isLoading ? '' : undefined, role: ariaHidden ? undefined : 'img', "aria-label": ariaLabel || undefined, "aria-hidden": ariaHidden || undefined, ...rest, children: [isLoading ? (_jsx("span", { className: "eds-icon-spinner", "aria-hidden": "true" })) : (_jsx("svg", { className: `eds-icon-svg eds-sprite-${iconName} eds-icon-set-${resolvedSet}`, "aria-hidden": "true", children: _jsx("use", { href: `${assetsBaseUrl}/eds/icons/sprites/${resolvedSet}.svg#${iconName}` }) })), children] }));

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

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

package/eds-icon-toggle/eds-icon-toggle.css

@@ -0,0 +1,39 @@
+/*
+ * eds-icon-toggle.css — 1:1 port of eds-icon-toggle.scss (pure-React light-DOM CSS).
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host.eds-icon-toggle             -> .eds-icon-toggle (root class on the rendered element)
+ *   :host.eds-icon-toggle--on         -> .eds-icon-toggle.eds-icon-toggle--on
+ *   :host.eds-icon-toggle--readonly   -> .eds-icon-toggle.eds-icon-toggle--readonly
+ *   :host:hover + base.eds-focus-visible-ring-rounded() -> inlined below
+ * The component is class-based (BEM modifiers), so selectors keep `.eds-icon-toggle--*`
+ * (guide rule 9). The `.eui-21` wrapper is dropped (share-ready); the --eds-* tokens are verbatim.
+ */
+
+.eds-icon-toggle {
+    display: inline-flex;
+    position: relative;
+    cursor: pointer;
+    padding: var(--eds-sp-2xs);
+    border-radius: var(--eds-br-full);
+}
+
+/* base.eds-focus-visible-ring-rounded() inlined (:host:focus-visible → .eds-icon-toggle:focus-visible) */
+.eds-icon-toggle:focus-visible {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-full) !important;
+}
+
+.eds-icon-toggle:not(.eds-icon-toggle--readonly):hover {
+    background-color: var(--eds-c-surface-neutral-subtle);
+}
+
+.eds-icon-toggle.eds-icon-toggle--on {
+    color: var(--eds-c-foreground-primary);
+}
+
+.eds-icon-toggle.eds-icon-toggle--readonly {
+    cursor: default;
+    pointer-events: none;
+}

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+/**
+ * Local narrowed color union — the icon-toggle's color contract (ported 1:1 from the Angular
+ * `eds-icon-toggle`, whose `colorOn`/`colorOff` are typed with the shared `EdsColorToken`). Kept as
+ * the full legal-color union so both the ON and OFF colors accept any EDS semantic color, matching
+ * the Angular source.
+ */
+export type EdsIconToggleColor = 'neutral' | 'neutral-subtle' | 'neutral-subtler' | 'primary' | 'highlight' | 'info' | 'success' | 'warning' | 'critical' | 'brand' | 'disabled';
+/**
+ * `EdsIconToggle` — pure React port of the Angular `eds-icon-toggle`.
+ *
+ * The Angular source renders the **host element itself** as the switch (`host: { role: 'switch' }`)
+ * containing a single `eds-icon` whose name/color swap with the checked state. So the rendered
+ * **root element IS a `<span role="switch">`** — no extra wrapper (mirrors "the host element IS the
+ * component").
+ *
+ * The Angular component is **class-based** (`host: { '[class]': 'hostClasses()' }` composing
+ * `eds-icon-toggle`, `eds-icon-toggle--on`/`--off`, `eds-icon-toggle--readonly`), so per the
+ * pure-React guide rule 9 the BEM classes are reproduced verbatim on the root `className` and the
+ * ported CSS keeps those class selectors — NOT `data-*`.
+ *
+ * It is NOT a `ControlValueAccessor`: the Angular component uses `input(isChecked)` + `effect()` +
+ * an internal `signal()` and exposes a two-way `isChecked` / `isCheckedChange` binding. React has no
+ * two-way binding, so this exposes the standard React form idiom — **controlled** via `isChecked` +
+ * `onCheckedChange`, or **uncontrolled** via `defaultChecked`.
+ *
+ * ARIA mirrors the Angular host bindings: `role="switch"`, `aria-checked`, `aria-label` (falls back
+ * to the current icon name when no label is provided), `readonly` attribute, `tabindex` (the
+ * `tabindex` prop normally, `-1` when read-only). Keyboard: Enter/Space toggle (matching the Angular
+ * `onKeydown` `Enter`/`Space` handling, with `preventDefault` + `stopPropagation`).
+ *
+ * @example Controlled
+ * ```tsx
+ * const [fav, setFav] = React.useState(false);
+ * <EdsIconToggle isChecked={fav} onCheckedChange={setFav} iconOn="star-fill" iconOff="star" />
+ * ```
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <EdsIconToggle defaultChecked iconOn="star-fill" iconOff="star" />
+ * ```
+ */
+export interface EdsIconToggleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange' | 'id' | 'onToggle'> {
+    /** Controlled checked/on state. When provided the toggle is controlled (React semantics). */
+    isChecked?: boolean;
+    /** Initial checked/on state for an uncontrolled toggle. @default false */
+    defaultChecked?: boolean;
+    /** Whether the toggle is read-only (cannot be interacted with). @default false */
+    isReadOnly?: boolean;
+    /** Data attribute value for end-to-end testing. Applied as `data-e2e`. @default 'eds-icon-toggle' */
+    e2eAttr?: string;
+    /** Unique identifier for the component. Applied as the element `id`. */
+    id?: string;
+    /** Tab order value for keyboard navigation (ignored when read-only → `-1`). @default '0' */
+    tabindex?: string;
+    /**
+     * Accessible label for screen readers. When empty, falls back to the current icon name (mirrors
+     * the Angular `computedAriaLabel`). @default 'Toggle icon'
+     */
+    ariaLabel?: string;
+    /** Icon to display when the toggle is in the ON state. @default '' */
+    iconOn?: string;
+    /** Icon to display when the toggle is in the OFF state. @default '' */
+    iconOff?: string;
+    /** EDS color variant for the ON-state icon. @default 'primary' */
+    colorOn?: EdsIconToggleColor;
+    /** EDS color variant for the OFF-state icon. @default 'neutral' */
+    colorOff?: EdsIconToggleColor;
+    /**
+     * Fired when the checked state changes (mirrors the Angular `isCheckedChange` two-way output).
+     * Payload is the new checked state.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Fired when the toggle state changes (mirrors the Angular `toggle` output). Payload is the new
+     * checked state.
+     */
+    onToggle?: (checked: boolean) => void;
+}
+export declare const EdsIconToggle: React.ForwardRefExoticComponent<EdsIconToggleProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-icon-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-icon-toggle.d.ts","sourceRoot":"","sources":["../../src/eds-icon-toggle/eds-icon-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GACxB,SAAS,GACT,gBAAgB,GAChB,iBAAiB,GACjB,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,kBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,UAAU,CAAC;IACnF,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAID,eAAO,MAAM,aAAa,4FAgGxB,CAAC"}

package/eds-icon-toggle/eds-icon-toggle.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useState } from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+let nextId = 0;
+export const EdsIconToggle = React.forwardRef(function EdsIconToggle({ isChecked, defaultChecked = false, isReadOnly = false, e2eAttr = 'eds-icon-toggle', id, tabindex = '0', ariaLabel = 'Toggle icon', iconOn = '', iconOff = '', colorOn = 'primary', colorOff = 'neutral', onCheckedChange, onToggle, onKeyDown, className, ...rest }, ref) {
+    const isControlled = isChecked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const checkedState = isControlled ? isChecked : internalChecked;
+    // A stable auto-generated id when the consumer does not provide one (mirrors the Angular
+    // `input(`eds-icon-toggle-${nextId++}`)` default).
+    const [autoId] = useState(() => `eds-icon-toggle-${nextId++}`);
+    const resolvedId = id ?? autoId;
+    // Mirrors the Angular `currentIcon`/`currentColor` computed signals.
+    const currentIcon = checkedState ? iconOn : iconOff;
+    const currentColor = checkedState ? colorOn : colorOff;
+    // Mirrors the Angular `computedAriaLabel`: fall back to the current icon name when no label.
+    const computedAriaLabel = !ariaLabel || ariaLabel === '' ? currentIcon || '' : ariaLabel;
+    // Mirrors the Angular `computedTabindex`: `-1` when read-only, otherwise the `tabindex` input.
+    const computedTabindex = isReadOnly ? -1 : Number(tabindex);
+    // Mirrors the Angular `onToggle()` host method: flip the state unless read-only, emit the change
+    // callbacks, and (for uncontrolled) update the internal state.
+    const toggle = useCallback(() => {
+        if (isReadOnly) {
+            return;
+        }
+        const newValue = !checkedState;
+        if (!isControlled) {
+            setInternalChecked(newValue);
+        }
+        onCheckedChange?.(newValue);
+        onToggle?.(newValue);
+    }, [isReadOnly, checkedState, isControlled, onCheckedChange, onToggle]);
+    // Mirrors the Angular `onKeydown`: Enter/Space toggle with preventDefault + stopPropagation.
+    const handleKeyDown = useCallback((event) => {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            event.stopPropagation();
+            toggle();
+        }
+        onKeyDown?.(event);
+    }, [toggle, onKeyDown]);
+    // Mirrors the Angular `hostClasses()` computed: root class + on/off + readonly modifiers.
+    const hostClasses = [
+        'eds-icon-toggle',
+        checkedState ? 'eds-icon-toggle--on' : 'eds-icon-toggle--off',
+        isReadOnly ? 'eds-icon-toggle--readonly' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("span", { ref: ref, className: hostClasses, role: "switch", id: resolvedId, "aria-checked": checkedState, "aria-label": computedAriaLabel, "data-e2e": e2eAttr, ...(isReadOnly ? { readonly: '' } : {}), tabIndex: computedTabindex, onClick: toggle, onKeyDown: handleKeyDown, ...rest, children: _jsx(EdsIcon, { icon: currentIcon, color: currentColor }) }));
+});
+//# sourceMappingURL=eds-icon-toggle.js.map