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

package/eds-overlay/eds-overlay-footer.css

@@ -0,0 +1,10 @@
+/** eds-overlay-footer.css — 1:1 port of eds-overlay-footer.scss (:host → .eds-overlay-footer). */
+
+.eds-overlay-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    padding: var(--eds-sp-m) var(--eds-sp-l);
+    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    flex-shrink: 0;
+}

package/eds-overlay/eds-overlay-footer.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsOverlayFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Footer content (typically action buttons). Mirrors the Angular `<ng-content/>`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOverlayFooter` — pure React port of the Angular `eds-overlay-footer`.
+ *
+ * The footer region of the overlay panel (`.eds-overlay-footer`). Pure content-projection
+ * wrapper.
+ */
+export declare const EdsOverlayFooter: React.ForwardRefExoticComponent<EdsOverlayFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-overlay-footer.d.ts.map

package/eds-overlay/eds-overlay-footer.d.ts.map

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

package/eds-overlay/eds-overlay-footer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsOverlayFooter` — pure React port of the Angular `eds-overlay-footer`.
+ *
+ * The footer region of the overlay panel (`.eds-overlay-footer`). Pure content-projection
+ * wrapper.
+ */
+export const EdsOverlayFooter = React.forwardRef(function EdsOverlayFooter({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-overlay-footer ${className}` : 'eds-overlay-footer', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-overlay-footer.js.map

package/eds-overlay/eds-overlay-footer.js.map

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

package/eds-overlay/eds-overlay-header-action-items.css

@@ -0,0 +1,8 @@
+/** eds-overlay-header-action-items.css — 1:1 port of eds-overlay-header-action-items.scss. */
+
+.eds-overlay-header-action-items {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+}

package/eds-overlay/eds-overlay-header-action-items.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EdsOverlayHeaderActionItemsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Header action items (e.g. buttons) placed before the built-in close button. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOverlayHeaderActionItems` — pure React port of the Angular
+ * `eds-overlay-header-action-items`.
+ *
+ * A row of custom action items in the overlay header (`.eds-overlay-header-action-items`),
+ * rendered before the header's built-in close button. Pure content-projection wrapper.
+ */
+export declare const EdsOverlayHeaderActionItems: React.ForwardRefExoticComponent<EdsOverlayHeaderActionItemsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-overlay-header-action-items.d.ts.map

package/eds-overlay/eds-overlay-header-action-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header-action-items.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header-action-items.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gCAAiC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1F,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,yGAiBtC,CAAC"}

package/eds-overlay/eds-overlay-header-action-items.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsOverlayHeaderActionItems` — pure React port of the Angular
+ * `eds-overlay-header-action-items`.
+ *
+ * A row of custom action items in the overlay header (`.eds-overlay-header-action-items`),
+ * rendered before the header's built-in close button. Pure content-projection wrapper.
+ */
+export const EdsOverlayHeaderActionItems = React.forwardRef(function EdsOverlayHeaderActionItems({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className
+            ? `eds-overlay-header-action-items ${className}`
+            : 'eds-overlay-header-action-items', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-overlay-header-action-items.js.map

package/eds-overlay/eds-overlay-header-action-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header-action-items.js","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header-action-items.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,KAAK,CAAC,UAAU,CAGzD,SAAS,2BAA2B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACxE,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EACL,SAAS;YACL,CAAC,CAAC,mCAAmC,SAAS,EAAE;YAChD,CAAC,CAAC,iCAAiC,KAEvC,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-overlay/eds-overlay-header-label.css

@@ -0,0 +1,7 @@
+/** eds-overlay-header-label.css — 1:1 port of eds-overlay-header-label.scss. */
+
+.eds-overlay-header-label {
+    display: block;
+    font: var(--eds-f-heading-s);
+    color: var(--eds-c-foreground);
+}

package/eds-overlay/eds-overlay-header-label.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsOverlayHeaderLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Primary header label text. Mirrors the Angular `<ng-content/>`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOverlayHeaderLabel` — pure React port of the Angular `eds-overlay-header-label`.
+ *
+ * The primary (title) label inside the overlay header (`.eds-overlay-header-label`). Pure
+ * content-projection wrapper.
+ */
+export declare const EdsOverlayHeaderLabel: React.ForwardRefExoticComponent<EdsOverlayHeaderLabelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-overlay-header-label.d.ts.map

package/eds-overlay/eds-overlay-header-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header-label.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,mGAcjC,CAAC"}

package/eds-overlay/eds-overlay-header-label.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsOverlayHeaderLabel` — pure React port of the Angular `eds-overlay-header-label`.
+ *
+ * The primary (title) label inside the overlay header (`.eds-overlay-header-label`). Pure
+ * content-projection wrapper.
+ */
+export const EdsOverlayHeaderLabel = React.forwardRef(function EdsOverlayHeaderLabel({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-overlay-header-label ${className}` : 'eds-overlay-header-label', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-overlay-header-label.js.map

package/eds-overlay/eds-overlay-header-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header-label.js","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header-label.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CACjD,SAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAChE,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EACL,SAAS,CAAC,CAAC,CAAC,4BAA4B,SAAS,EAAE,CAAC,CAAC,CAAC,0BAA0B,KAEhF,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-overlay/eds-overlay-header-sublabel.css

@@ -0,0 +1,7 @@
+/** eds-overlay-header-sublabel.css — 1:1 port of eds-overlay-header-sublabel.scss. */
+
+.eds-overlay-header-sublabel {
+    display: block;
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-subtler);
+}

package/eds-overlay/eds-overlay-header-sublabel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsOverlayHeaderSublabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Secondary header label text. Mirrors the Angular `<ng-content/>`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOverlayHeaderSublabel` — pure React port of the Angular `eds-overlay-header-sublabel`.
+ *
+ * The secondary (subtitle) label inside the overlay header (`.eds-overlay-header-sublabel`).
+ * Pure content-projection wrapper.
+ */
+export declare const EdsOverlayHeaderSublabel: React.ForwardRefExoticComponent<EdsOverlayHeaderSublabelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-overlay-header-sublabel.d.ts.map

package/eds-overlay/eds-overlay-header-sublabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header-sublabel.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header-sublabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvF,wEAAwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,sGAiBnC,CAAC"}

package/eds-overlay/eds-overlay-header-sublabel.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsOverlayHeaderSublabel` — pure React port of the Angular `eds-overlay-header-sublabel`.
+ *
+ * The secondary (subtitle) label inside the overlay header (`.eds-overlay-header-sublabel`).
+ * Pure content-projection wrapper.
+ */
+export const EdsOverlayHeaderSublabel = React.forwardRef(function EdsOverlayHeaderSublabel({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className
+            ? `eds-overlay-header-sublabel ${className}`
+            : 'eds-overlay-header-sublabel', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-overlay-header-sublabel.js.map

package/eds-overlay/eds-overlay-header-sublabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header-sublabel.js","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header-sublabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAGtD,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACrE,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EACL,SAAS;YACL,CAAC,CAAC,+BAA+B,SAAS,EAAE;YAC5C,CAAC,CAAC,6BAA6B,KAEnC,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-overlay/eds-overlay-header.css

@@ -0,0 +1,25 @@
+/** eds-overlay-header.css — 1:1 port of eds-overlay-header.scss (:host → .eds-overlay-header). */
+
+.eds-overlay-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--eds-sp-m) var(--eds-sp-l);
+    border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    flex-shrink: 0;
+}
+
+.eds-overlay-header .header-labels {
+    display: flex;
+    flex-direction: column;
+    gap: var(--eds-sp-3xs);
+    min-width: 0;
+    flex: 1;
+}
+
+.eds-overlay-header .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+}

package/eds-overlay/eds-overlay-header.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+export interface EdsOverlayHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label slot — rendered inside `.header-labels` (Angular
+     * `<ng-content select="eds-overlay-header-label"/>`), typically an
+     * `<EdsOverlayHeaderLabel>`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Sublabel slot — rendered inside `.header-labels` after the label (Angular
+     * `<ng-content select="eds-overlay-header-sublabel"/>`), typically an
+     * `<EdsOverlayHeaderSublabel>`.
+     */
+    sublabel?: React.ReactNode;
+    /**
+     * Action-items slot — rendered before the built-in close button (Angular
+     * `<ng-content select="eds-overlay-header-action-items"/>`), typically an
+     * `<EdsOverlayHeaderActionItems>`.
+     */
+    actionItems?: React.ReactNode;
+    /** ARIA label for the built-in close button. @default 'Close overlay' */
+    closeAriaLabel?: string;
+    /** Fired when the built-in close button is clicked (Angular `closeClick` output). */
+    onCloseClick?: () => void;
+    /**
+     * Bare content — rendered inside `.header-labels` alongside label/sublabel. Mirrors the
+     * default projection paths; provided for flexibility (Angular only exposed the three
+     * element-selector slots above).
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOverlayHeader` — pure React port of the Angular `eds-overlay-header`.
+ *
+ * The overlay panel header (`.eds-overlay-header`): a `.header-labels` column holding the
+ * `label` and `sublabel` slots, an optional `actionItems` slot, and a built-in close button
+ * (`EdsIconButton`, icon `x:core`) that fires `onCloseClick` — reproducing the Angular
+ * template and `closeClick` output.
+ */
+export declare const EdsOverlayHeader: React.ForwardRefExoticComponent<EdsOverlayHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-overlay-header.d.ts.map

package/eds-overlay/eds-overlay-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qFAAqF;IACrF,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,8FAyB5B,CAAC"}

package/eds-overlay/eds-overlay-header.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+/**
+ * `EdsOverlayHeader` — pure React port of the Angular `eds-overlay-header`.
+ *
+ * The overlay panel header (`.eds-overlay-header`): a `.header-labels` column holding the
+ * `label` and `sublabel` slots, an optional `actionItems` slot, and a built-in close button
+ * (`EdsIconButton`, icon `x:core`) that fires `onCloseClick` — reproducing the Angular
+ * template and `closeClick` output.
+ */
+export const EdsOverlayHeader = React.forwardRef(function EdsOverlayHeader({ label, sublabel, actionItems, closeAriaLabel = 'Close overlay', onCloseClick, children, className, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, className: className ? `eds-overlay-header ${className}` : 'eds-overlay-header', ...rest, children: [_jsxs("div", { className: "header-labels", children: [label, sublabel, children] }), actionItems, _jsx(EdsIconButton, { icon: "x:core", ariaLabel: closeAriaLabel, onButtonClick: () => onCloseClick?.() })] }));
+});
+//# sourceMappingURL=eds-overlay-header.js.map

package/eds-overlay/eds-overlay-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay-header.js","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay-header.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAiCtE;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,gBAAgB,CACrB,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,GAAG,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAC9G,GAAG;IAEH,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,sBAAsB,SAAS,EAAE,CAAC,CAAC,CAAC,oBAAoB,KAC3E,IAAI,aAER,eAAK,SAAS,EAAC,eAAe,aACzB,KAAK,EACL,QAAQ,EACR,QAAQ,IACP,EACL,WAAW,EACZ,KAAC,aAAa,IACV,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,EACzB,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,GACvC,IACA,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-overlay/eds-overlay.css

@@ -0,0 +1,118 @@
+/**
+ * eds-overlay.css — 1:1 pure-React port of eds-overlay.scss.
+ *
+ * The Angular source authored inside `.eui-21 { :host { … } }`; here the root
+ * `:host` becomes `.eds-overlay` and every variant `:host.eds-overlay--x` becomes
+ * a chained root selector. All --eds-* tokens are copied verbatim.
+ *
+ * NOTE: eds-overlay is an edge-anchored slide-in panel (drawer), NOT a connected
+ * anchor-positioned overlay. `position` selects the viewport edge the panel slides
+ * from (right | left | top | bottom). There is no getBoundingClientRect / flip
+ * logic — see the component docs for the Batch C positioning note.
+ */
+
+.eds-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    pointer-events: none;
+    display: flex;
+}
+
+.eds-overlay.eds-overlay--active {
+    pointer-events: auto;
+}
+
+.eds-overlay.eds-overlay--right {
+    justify-content: flex-end;
+}
+
+.eds-overlay.eds-overlay--left {
+    justify-content: flex-start;
+}
+
+.eds-overlay.eds-overlay--top {
+    align-items: flex-start;
+}
+
+.eds-overlay.eds-overlay--top .eds-overlay-panel {
+    width: 100%;
+    max-height: 80vh;
+    transform: translateY(-100%);
+}
+
+.eds-overlay.eds-overlay--top.eds-overlay--active .eds-overlay-panel {
+    transform: translateY(0);
+}
+
+.eds-overlay.eds-overlay--bottom {
+    align-items: flex-end;
+}
+
+.eds-overlay.eds-overlay--bottom .eds-overlay-panel {
+    width: 100%;
+    max-height: 80vh;
+    transform: translateY(100%);
+}
+
+.eds-overlay.eds-overlay--bottom.eds-overlay--active .eds-overlay-panel {
+    transform: translateY(0);
+}
+
+.eds-overlay:not(.eds-overlay--active) {
+    visibility: hidden;
+}
+
+.eds-overlay:not(.eds-overlay--active) .eds-overlay-panel {
+    transform: translateX(100%);
+}
+
+.eds-overlay:not(.eds-overlay--active).eds-overlay--left .eds-overlay-panel {
+    transform: translateX(-100%);
+}
+
+.eds-overlay.eds-overlay--highlighted .eds-overlay-panel {
+    border-left: 3px solid var(--eds-c-border-primary);
+}
+
+.eds-overlay .eds-overlay-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--eds-c-alpha-backdrop);
+}
+
+.eds-overlay .eds-overlay-panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--eds-c-surface-elevation-overlay);
+    box-shadow: var(--eds-sh-4);
+    overflow: hidden;
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    width: 400px;
+    max-width: 100vw;
+}
+
+/* Width variants */
+.eds-overlay.eds-overlay--width-small .eds-overlay-panel {
+    width: 320px;
+}
+
+.eds-overlay.eds-overlay--width-medium .eds-overlay-panel {
+    width: 480px;
+}
+
+.eds-overlay.eds-overlay--width-large .eds-overlay-panel {
+    width: 640px;
+}
+
+.eds-overlay.eds-overlay--width-xlarge .eds-overlay-panel {
+    width: 800px;
+}

package/eds-overlay/eds-overlay.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+/**
+ * Screen edge the overlay panel slides in from — ported verbatim from the Angular
+ * `EdsOverlayPosition` local union. This is an EDGE anchor (drawer), NOT a connected
+ * anchor-relative position (see the Batch C note in the component doc).
+ */
+export type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';
+export interface EdsOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Controls the visibility and active state of the overlay. @default false */
+    isActive?: boolean;
+    /** Screen edge where the overlay panel slides in from. @default 'right' */
+    position?: EdsOverlayPosition;
+    /**
+     * Responsive width variant for the overlay panel (`'small' | 'medium' | 'large' |
+     * 'xlarge'`, or `''` for the default 400px). Reflected as `eds-overlay--width-<value>`.
+     * @default ''
+     */
+    width?: string;
+    /** Fixed width value (CSS length) that overrides the responsive `width` variant. @default '' */
+    fixedWidth?: string;
+    /** Enables automatic closing when clicking the backdrop (outside the panel). @default false */
+    hasClosedOnClickOutside?: boolean;
+    /** Applies highlighted visual styling (left accent border on the panel). @default false */
+    isHighlighted?: boolean;
+    /**
+     * Emitted when the overlay's active state changes — always `false` (a close request),
+     * matching the Angular `activeState` output. Fired on Escape and on backdrop click when
+     * `hasClosedOnClickOutside` is set. The overlay is CONTROLLED: the consumer owns
+     * `isActive` and should set it to `false` in response.
+     */
+    onActiveStateChange?: (active: boolean) => void;
+    /**
+     * When set, the overlay renders through a portal into this element instead of inline.
+     * Defaults to inline rendering (mirrors the Angular component, which renders in place as
+     * a `position: fixed` full-viewport layer). Pass `document.body` for a body portal.
+     */
+    container?: Element | null;
+    /**
+     * Panel content — an optional `<EdsOverlayHeader>`, `<EdsOverlayContent>` and
+     * `<EdsOverlayFooter>` (in any order) plus any bare content. Mirrors the Angular
+     * `<ng-content>` slots, which all render into the single `.eds-overlay-panel`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOverlay` — pure React port of the Angular `eds-overlay`.
+ *
+ * A controlled slide-in panel (drawer): a full-viewport `position: fixed` layer holding an
+ * optional backdrop and a single `.eds-overlay-panel` that slides in from the edge named by
+ * `position`. The root is the component (`.eds-overlay` + `eds-overlay--<position>` /
+ * `--active` / `--width-*` / `--highlighted` classes), matching the Angular `hostClasses()`.
+ *
+ * Behavior ported from the Angular source:
+ * - `role="dialog"`, `aria-hidden` when inactive, and `inert` when inactive (host bindings).
+ * - Escape (`document:keydown.escape`) fires `onActiveStateChange(false)` while active.
+ * - Backdrop click fires `onActiveStateChange(false)` only when `hasClosedOnClickOutside`.
+ * - Focus is trapped inside the panel while active, with auto-capture + restore
+ *   (`cdkTrapFocus` + `cdkTrapFocusAutoCapture`) via {@link useEdsFocusTrap}.
+ *
+ * ⛔ Batch C positioning note: this is an EDGE-anchored drawer, not a connected
+ * anchor-relative overlay. It does NOT compute a position from an anchor's
+ * getBoundingClientRect and has no flip/fallback logic. Popover / dropdown /
+ * autocomplete / multiselect need connected positioning that this component does not
+ * provide — build a dedicated `useEdsConnectedPosition` hook for those. What IS reusable
+ * here for Batch C is {@link useEdsFocusTrap} (open-layer focus management) and the
+ * controlled `isActive` + `onActiveStateChange(false)` close contract (Escape / outside-click).
+ */
+export declare const EdsOverlay: React.ForwardRefExoticComponent<EdsOverlayProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+FAA+F;IAC/F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2FAA2F;IAC3F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,wFAwErB,CAAC"}

package/eds-overlay/eds-overlay.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useEdsFocusTrap } from './use-eds-focus-trap.js';
+/**
+ * `EdsOverlay` — pure React port of the Angular `eds-overlay`.
+ *
+ * A controlled slide-in panel (drawer): a full-viewport `position: fixed` layer holding an
+ * optional backdrop and a single `.eds-overlay-panel` that slides in from the edge named by
+ * `position`. The root is the component (`.eds-overlay` + `eds-overlay--<position>` /
+ * `--active` / `--width-*` / `--highlighted` classes), matching the Angular `hostClasses()`.
+ *
+ * Behavior ported from the Angular source:
+ * - `role="dialog"`, `aria-hidden` when inactive, and `inert` when inactive (host bindings).
+ * - Escape (`document:keydown.escape`) fires `onActiveStateChange(false)` while active.
+ * - Backdrop click fires `onActiveStateChange(false)` only when `hasClosedOnClickOutside`.
+ * - Focus is trapped inside the panel while active, with auto-capture + restore
+ *   (`cdkTrapFocus` + `cdkTrapFocusAutoCapture`) via {@link useEdsFocusTrap}.
+ *
+ * ⛔ Batch C positioning note: this is an EDGE-anchored drawer, not a connected
+ * anchor-relative overlay. It does NOT compute a position from an anchor's
+ * getBoundingClientRect and has no flip/fallback logic. Popover / dropdown /
+ * autocomplete / multiselect need connected positioning that this component does not
+ * provide — build a dedicated `useEdsConnectedPosition` hook for those. What IS reusable
+ * here for Batch C is {@link useEdsFocusTrap} (open-layer focus management) and the
+ * controlled `isActive` + `onActiveStateChange(false)` close contract (Escape / outside-click).
+ */
+export const EdsOverlay = React.forwardRef(function EdsOverlay({ isActive = false, position = 'right', width = '', fixedWidth = '', hasClosedOnClickOutside = false, isHighlighted = false, onActiveStateChange, container, children, className, ...rest }, ref) {
+    const panelRef = useRef(null);
+    useEdsFocusTrap(panelRef, isActive);
+    // Angular @HostListener('document:keydown.escape') — close request while active.
+    useEffect(() => {
+        if (!isActive) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onActiveStateChange?.(false);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [isActive, onActiveStateChange]);
+    // Angular hostClasses() computed — base + position + active + width + highlighted.
+    const hostClasses = [
+        'eds-overlay',
+        `eds-overlay--${position}`,
+        isActive ? 'eds-overlay--active' : '',
+        width ? `eds-overlay--width-${width}` : '',
+        isHighlighted ? 'eds-overlay--highlighted' : '',
+    ]
+        .join(' ')
+        .trim();
+    const onBackdropClick = () => {
+        if (hasClosedOnClickOutside) {
+            onActiveStateChange?.(false);
+        }
+    };
+    const overlay = (_jsxs("div", { ref: ref, className: className ? `${hostClasses} ${className}` : hostClasses, role: "dialog", "aria-hidden": !isActive, inert: !isActive || undefined, ...rest, children: [isActive && _jsx("div", { className: "eds-overlay-backdrop", onClick: onBackdropClick }), _jsx("div", { ref: panelRef, className: "eds-overlay-panel", style: fixedWidth ? { width: fixedWidth } : undefined, children: children })] }));
+    return container ? createPortal(overlay, container) : overlay;
+});
+//# sourceMappingURL=eds-overlay.js.map

package/eds-overlay/eds-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-overlay.js","sourceRoot":"","sources":["../../src/eds-overlay/eds-overlay.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AA+C1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,UAAU,CAC3F,EACI,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,OAAO,EAClB,KAAK,GAAG,EAAE,EACV,UAAU,GAAG,EAAE,EACf,uBAAuB,GAAG,KAAK,EAC/B,aAAa,GAAG,KAAK,EACrB,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAEpC,iFAAiF;IACjF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,OAAO;QACX,CAAC;QACD,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACzB,mBAAmB,EAAE,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC;QACL,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEpC,mFAAmF;IACnF,MAAM,WAAW,GAAG;QAChB,aAAa;QACb,gBAAgB,QAAQ,EAAE;QAC1B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;QACrC,KAAK,CAAC,CAAC,CAAC,sBAAsB,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,aAAa,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;KAClD;SACI,IAAI,CAAC,GAAG,CAAC;SACT,IAAI,EAAE,CAAC;IAEZ,MAAM,eAAe,GAAG,GAAS,EAAE;QAC/B,IAAI,uBAAuB,EAAE,CAAC;YAC1B,mBAAmB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CACZ,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,EAClE,IAAI,EAAC,QAAQ,iBACA,CAAC,QAAQ,EACtB,KAAK,EAAE,CAAC,QAAQ,IAAI,SAAS,KACzB,IAAI,aAEP,QAAQ,IAAI,cAAK,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAE,eAAe,GAAQ,EAEnF,cACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,YAEpD,QAAQ,GACP,IACJ,CACT,CAAC;IAEF,OAAO,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAClE,CAAC,CAAC,CAAC"}

package/eds-overlay/index.d.ts

@@ -0,0 +1,16 @@
+export { EdsOverlay } from './eds-overlay.js';
+export type { EdsOverlayProps, EdsOverlayPosition } from './eds-overlay.js';
+export { useEdsFocusTrap } from './use-eds-focus-trap.js';
+export { EdsOverlayHeader } from './eds-overlay-header.js';
+export type { EdsOverlayHeaderProps } from './eds-overlay-header.js';
+export { EdsOverlayHeaderLabel } from './eds-overlay-header-label.js';
+export type { EdsOverlayHeaderLabelProps } from './eds-overlay-header-label.js';
+export { EdsOverlayHeaderSublabel } from './eds-overlay-header-sublabel.js';
+export type { EdsOverlayHeaderSublabelProps } from './eds-overlay-header-sublabel.js';
+export { EdsOverlayHeaderActionItems } from './eds-overlay-header-action-items.js';
+export type { EdsOverlayHeaderActionItemsProps } from './eds-overlay-header-action-items.js';
+export { EdsOverlayContent } from './eds-overlay-content.js';
+export type { EdsOverlayContentProps } from './eds-overlay-content.js';
+export { EdsOverlayFooter } from './eds-overlay-footer.js';
+export type { EdsOverlayFooterProps } from './eds-overlay-footer.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,YAAY,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAEhF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,YAAY,EAAE,6BAA6B,EAAE,MAAM,kCAAkC,CAAC;AAEtF,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AACnF,YAAY,EAAE,gCAAgC,EAAE,MAAM,sCAAsC,CAAC;AAE7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/eds-overlay/index.js

@@ -0,0 +1,9 @@
+export { EdsOverlay } from './eds-overlay.js';
+export { useEdsFocusTrap } from './use-eds-focus-trap.js';
+export { EdsOverlayHeader } from './eds-overlay-header.js';
+export { EdsOverlayHeaderLabel } from './eds-overlay-header-label.js';
+export { EdsOverlayHeaderSublabel } from './eds-overlay-header-sublabel.js';
+export { EdsOverlayHeaderActionItems } from './eds-overlay-header-action-items.js';
+export { EdsOverlayContent } from './eds-overlay-content.js';
+export { EdsOverlayFooter } from './eds-overlay-footer.js';
+//# sourceMappingURL=index.js.map

package/eds-overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAG5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAGnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/eds-overlay/use-eds-focus-trap.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `useEdsFocusTrap` — pure-React reimplementation of the Angular CDK
+ * `cdkTrapFocus` + `cdkTrapFocusAutoCapture` behavior used by `eds-overlay`.
+ *
+ * The Angular template bound `[cdkTrapFocus]="isActive()"` (trap enabled while the
+ * panel is active) and `[cdkTrapFocusAutoCapture]="true"` (move focus into the panel
+ * when it activates, restore focus to the previously-focused element when it
+ * deactivates). React has no CDK, so this hook implements the same contract:
+ *
+ * - When `active` becomes `true`: remember `document.activeElement`, then focus the
+ *   first focusable element inside `containerRef` (auto-capture).
+ * - While `active`: `Tab` / `Shift+Tab` cycles focus within the container (the trap).
+ * - When `active` becomes `false`: restore focus to the element that was focused
+ *   before activation.
+ *
+ * Reusable by Batch C (popover / dropdown / autocomplete / multiselect) for the same
+ * "trap focus inside an open floating layer" concern.
+ *
+ * @param containerRef ref to the element whose focusable descendants form the trap.
+ * @param active whether the trap is currently engaged.
+ */
+export declare function useEdsFocusTrap(containerRef: React.RefObject<HTMLElement | null>, active: boolean): void;
+//# sourceMappingURL=use-eds-focus-trap.d.ts.map

package/eds-overlay/use-eds-focus-trap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-eds-focus-trap.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/use-eds-focus-trap.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACjD,MAAM,EAAE,OAAO,GAChB,IAAI,CA0DN"}