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

package/eds-overlay/use-eds-focus-trap.js

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+/**
+ * `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 function useEdsFocusTrap(containerRef, active) {
+    const previouslyFocused = useRef(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!active || !container) {
+            return;
+        }
+        previouslyFocused.current = document.activeElement;
+        const getFocusable = () => Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((el) => el.offsetParent !== null || el === document.activeElement);
+        // Auto-capture: focus the first focusable element inside the panel.
+        const focusables = getFocusable();
+        if (focusables.length > 0) {
+            focusables[0].focus();
+        }
+        else {
+            container.focus();
+        }
+        const onKeyDown = (event) => {
+            if (event.key !== 'Tab') {
+                return;
+            }
+            const items = getFocusable();
+            if (items.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const activeEl = document.activeElement;
+            if (event.shiftKey) {
+                if (activeEl === first || !container.contains(activeEl)) {
+                    event.preventDefault();
+                    last.focus();
+                }
+            }
+            else if (activeEl === last || !container.contains(activeEl)) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        container.addEventListener('keydown', onKeyDown);
+        return () => {
+            container.removeEventListener('keydown', onKeyDown);
+            // Restore focus to the element focused before the trap engaged.
+            previouslyFocused.current?.focus?.();
+        };
+    }, [active, containerRef]);
+}
+//# sourceMappingURL=use-eds-focus-trap.js.map

package/eds-overlay/use-eds-focus-trap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-eds-focus-trap.js","sourceRoot":"","sources":["../../src/eds-overlay/use-eds-focus-trap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,eAAe,CAC3B,YAAiD,EACjD,MAAe;IAEf,MAAM,iBAAiB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAmC,CAAC;QAEzE,MAAM,YAAY,GAAG,GAAkB,EAAE,CACrC,KAAK,CAAC,IAAI,CACN,SAAS,CAAC,gBAAgB,CACtB,2IAA2I,CAC9I,CACJ,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,KAAK,IAAI,IAAI,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC;QAEhF,oEAAoE;QACpE,MAAM,UAAU,GAAG,YAAY,EAAE,CAAC;QAClC,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,SAAS,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;QAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACtB,OAAO;YACX,CAAC;YACD,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;YAC7B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACX,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACvB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAmC,CAAC;YAE9D,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACjB,IAAI,QAAQ,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACtD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACjB,CAAC;YACL,CAAC;iBAAM,IAAI,QAAQ,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACL,CAAC,CAAC;QAEF,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAEjD,OAAO,GAAG,EAAE;YACR,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACpD,gEAAgE;YAChE,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;QACzC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;AAC/B,CAAC"}

package/eds-page/eds-page-breadcrumb.css

@@ -0,0 +1,7 @@
+.eds-page-breadcrumb {
+    display: flex;
+    position: relative;
+    width: 100%;
+    padding: var(--eds-sp-xs) var(--eds-sp-m);
+    flex-shrink: 0;
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageBreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Breadcrumb navigation content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageBreadcrumb` — pure React port of the Angular `eds-page-breadcrumb`.
+ * Pure content-projection wrapper providing the navigation-trail area above the header.
+ */
+export declare const EdsPageBreadcrumb: React.ForwardRefExoticComponent<EdsPageBreadcrumbProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-breadcrumb.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+FAY7B,CAAC"}

package/eds-page/eds-page-breadcrumb.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsPageBreadcrumb` — pure React port of the Angular `eds-page-breadcrumb`.
+ * Pure content-projection wrapper providing the navigation-trail area above the header.
+ */
+export const EdsPageBreadcrumb = React.forwardRef(function EdsPageBreadcrumb({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-page-breadcrumb ${className}` : 'eds-page-breadcrumb', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-page-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-breadcrumb.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC7C,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC5D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAuB,SAAS,EAAE,CAAC,CAAC,CAAC,qBAAqB,KAC7E,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column-body.css

@@ -0,0 +1,9 @@
+.eds-page-column-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    padding: var(--eds-sp-m);
+    overflow-y: auto;
+    overflow-x: hidden;
+}

package/eds-page/eds-page-column-body.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageColumnBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column body content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumnBody` — pure React port of the Angular `eds-page-column-body`.
+ * Pure content-projection wrapper for the scrollable column body.
+ */
+export declare const EdsPageColumnBody: React.ForwardRefExoticComponent<EdsPageColumnBodyProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column-body.d.ts.map

package/eds-page/eds-page-column-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-body.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+FAY7B,CAAC"}

package/eds-page/eds-page-column-body.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsPageColumnBody` — pure React port of the Angular `eds-page-column-body`.
+ * Pure content-projection wrapper for the scrollable column body.
+ */
+export const EdsPageColumnBody = React.forwardRef(function EdsPageColumnBody({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-page-column-body ${className}` : 'eds-page-column-body', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-page-column-body.js.map

package/eds-page/eds-page-column-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-body.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-body.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC7C,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC5D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,wBAAwB,SAAS,EAAE,CAAC,CAAC,CAAC,sBAAsB,KAC/E,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column-context.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Context published by `EdsPageColumn` so its projected `EdsPageColumnHeader` can read the
+ * column's collapsed/collapsible state and drive the collapse toggle — the React analog of the
+ * Angular `EDS_PAGE_COLUMN` injection token that `eds-page-column-header` injects to reach its
+ * parent `eds-page-column`.
+ */
+export interface EdsPageColumnContextValue {
+    /** Whether the column is currently collapsed. */
+    collapsed: boolean;
+    /** Whether the column exposes a collapse toggle. */
+    isCollapsible: boolean;
+    /** Accessible label for the collapse toggle button. */
+    collapseAriaLabel: string;
+    /** Toggle the column's collapsed state (fires the column's `onCollapse`). */
+    onToggle: () => void;
+}
+export declare const EdsPageColumnContext: import("react").Context<EdsPageColumnContextValue | null>;
+/** Access the enclosing `EdsPageColumn`'s collapse controls. Returns null outside a column. */
+export declare function useEdsPageColumn(): EdsPageColumnContextValue | null;
+/**
+ * Context published by `EdsPageColumns` so descendant columns can subscribe to container-width
+ * changes (the React analog of the Angular `EdsPageColumns.width` RxJS `Subject` that
+ * `eds-page-column` subscribes to for `isAutocloseOnContainerResize`).
+ */
+export interface EdsPageColumnsContextValue {
+    /**
+     * Subscribe to debounced container-width changes. Returns an unsubscribe function.
+     */
+    subscribeWidth: (listener: (width: number) => void) => () => void;
+}
+export declare const EdsPageColumnsContext: import("react").Context<EdsPageColumnsContextValue | null>;
+/** Access the enclosing `EdsPageColumns` width feed. Returns null outside a columns container. */
+export declare function useEdsPageColumns(): EdsPageColumnsContextValue | null;
+//# sourceMappingURL=eds-page-column-context.d.ts.map

package/eds-page/eds-page-column-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-context.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-context.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACtC,iDAAiD;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,aAAa,EAAE,OAAO,CAAC;IACvB,uDAAuD;IACvD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,2DAAwD,CAAC;AAE1F,+FAA+F;AAC/F,wBAAgB,gBAAgB,IAAI,yBAAyB,GAAG,IAAI,CAEnE;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA0B;IACvC;;OAEG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AAE5F,kGAAkG;AAClG,wBAAgB,iBAAiB,IAAI,0BAA0B,GAAG,IAAI,CAErE"}

package/eds-page/eds-page-column-context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+export const EdsPageColumnContext = createContext(null);
+/** Access the enclosing `EdsPageColumn`'s collapse controls. Returns null outside a column. */
+export function useEdsPageColumn() {
+    return useContext(EdsPageColumnContext);
+}
+export const EdsPageColumnsContext = createContext(null);
+/** Access the enclosing `EdsPageColumns` width feed. Returns null outside a columns container. */
+export function useEdsPageColumns() {
+    return useContext(EdsPageColumnsContext);
+}
+//# sourceMappingURL=eds-page-column-context.js.map

package/eds-page/eds-page-column-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-context.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAmBlD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAmC,IAAI,CAAC,CAAC;AAE1F,+FAA+F;AAC/F,MAAM,UAAU,gBAAgB;IAC5B,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC5C,CAAC;AAcD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAoC,IAAI,CAAC,CAAC;AAE5F,kGAAkG;AAClG,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC7C,CAAC"}

package/eds-page/eds-page-column-footer.css

@@ -0,0 +1,8 @@
+.eds-page-column-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}

package/eds-page/eds-page-column-footer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageColumnFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column footer content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumnFooter` — pure React port of the Angular `eds-page-column-footer`.
+ * Pure content-projection wrapper for the column footer.
+ */
+export declare const EdsPageColumnFooter: React.ForwardRefExoticComponent<EdsPageColumnFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column-footer.d.ts.map

package/eds-page/eds-page-column-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-footer.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGAY/B,CAAC"}

package/eds-page/eds-page-column-footer.js

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

package/eds-page/eds-page-column-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-footer.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC/C,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC9D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,0BAA0B,SAAS,EAAE,CAAC,CAAC,CAAC,wBAAwB,KACnF,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column-header-action-items.css

@@ -0,0 +1,5 @@
+.eds-page-column-header-action-items {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-2xs);
+}

package/eds-page/eds-page-column-header-action-items.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageColumnHeaderActionItemsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column header action items content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumnHeaderActionItems` — pure React port of the Angular `eds-page-column-header-action-items`.
+ * Pure content-projection wrapper for the column header's action controls.
+ */
+export declare const EdsPageColumnHeaderActionItems: React.ForwardRefExoticComponent<EdsPageColumnHeaderActionItemsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column-header-action-items.d.ts.map

package/eds-page/eds-page-column-header-action-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header-action-items.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header-action-items.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mCAAoC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7F,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,8BAA8B,4GAY1C,CAAC"}

package/eds-page/eds-page-column-header-action-items.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsPageColumnHeaderActionItems` — pure React port of the Angular `eds-page-column-header-action-items`.
+ * Pure content-projection wrapper for the column header's action controls.
+ */
+export const EdsPageColumnHeaderActionItems = React.forwardRef(function EdsPageColumnHeaderActionItems({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-page-column-header-action-items ${className}` : 'eds-page-column-header-action-items', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-page-column-header-action-items.js.map

package/eds-page/eds-page-column-header-action-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header-action-items.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header-action-items.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,KAAK,CAAC,UAAU,CAC1D,SAAS,8BAA8B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACzE,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uCAAuC,SAAS,EAAE,CAAC,CAAC,CAAC,qCAAqC,KAC7G,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column-header-label.css

@@ -0,0 +1,5 @@
+.eds-page-column-header-label {
+    display: block;
+    font: var(--eds-f-label-m-semi-bold);
+    color: var(--eds-c-foreground);
+}

package/eds-page/eds-page-column-header-label.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageColumnHeaderLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column header title content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumnHeaderLabel` — pure React port of the Angular `eds-page-column-header-label`.
+ * Pure content-projection wrapper for the column header's primary title.
+ */
+export declare const EdsPageColumnHeaderLabel: React.ForwardRefExoticComponent<EdsPageColumnHeaderLabelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column-header-label.d.ts.map

package/eds-page/eds-page-column-header-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header-label.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvF,mCAAmC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,sGAYpC,CAAC"}

package/eds-page/eds-page-column-header-label.js

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

package/eds-page/eds-page-column-header-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header-label.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header-label.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CACpD,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACnE,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,gCAAgC,SAAS,EAAE,CAAC,CAAC,CAAC,8BAA8B,KAC/F,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column-header-sublabel.css

@@ -0,0 +1,5 @@
+.eds-page-column-header-sublabel {
+    display: block;
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-subtler);
+}

package/eds-page/eds-page-column-header-sublabel.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageColumnHeaderSublabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column header subtitle content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumnHeaderSublabel` — pure React port of the Angular `eds-page-column-header-sublabel`.
+ * Pure content-projection wrapper for the column header's secondary text.
+ */
+export declare const EdsPageColumnHeaderSublabel: React.ForwardRefExoticComponent<EdsPageColumnHeaderSublabelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column-header-sublabel.d.ts.map

package/eds-page/eds-page-column-header-sublabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header-sublabel.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header-sublabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gCAAiC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1F,sCAAsC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,yGAYvC,CAAC"}

package/eds-page/eds-page-column-header-sublabel.js

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

package/eds-page/eds-page-column-header-sublabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header-sublabel.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header-sublabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,KAAK,CAAC,UAAU,CACvD,SAAS,2BAA2B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACtE,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mCAAmC,SAAS,EAAE,CAAC,CAAC,CAAC,iCAAiC,KACrG,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column-header.css

@@ -0,0 +1,49 @@
+.eds-page-column-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--eds-sp-xs);
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+}
+
+.eds-page-column-header .eds-page-column-header__left {
+    display: flex;
+    flex-direction: column;
+    gap: var(--eds-sp-3xs);
+    min-width: 0;
+    overflow: hidden;
+    flex: 1;
+}
+
+.eds-page-column-header .eds-page-column-header__right {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+/* When parent column is collapsed */
+.eds-page-column--collapsed .eds-page-column-header {
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--eds-sp-m);
+    padding: var(--eds-sp-s) var(--eds-sp-xs);
+    border-bottom: none;
+}
+
+.eds-page-column--collapsed .eds-page-column-header .eds-page-column-header__right {
+    order: -1;
+    margin-left: 0;
+}
+
+.eds-page-column--collapsed .eds-page-column-header .eds-page-column-header__left {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    overflow: visible;
+    flex: 0;
+    white-space: nowrap;
+}

package/eds-page/eds-page-column-header.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export interface EdsPageColumnHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Column header title slot (`eds-page-column-header-label`). */
+    label?: React.ReactNode;
+    /** Column header subtitle slot (`eds-page-column-header-sublabel`). */
+    sublabel?: React.ReactNode;
+    /** Column header action-items slot (`eds-page-column-header-action-items`). */
+    actionItems?: React.ReactNode;
+    /** Additional default-slot content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumnHeader` — pure React port of the Angular `eds-page-column-header`.
+ *
+ * Header row for an `EdsPageColumn`. Reads the enclosing column's collapsed/collapsible state
+ * from `EdsPageColumnContext` (the React analog of the Angular `EDS_PAGE_COLUMN` injection
+ * token). The sublabel and action-items slots hide when the column is collapsed, and the
+ * collapse toggle (an `EdsIconButton`, `caret-right`/`caret-left`) renders when the column is
+ * collapsible, firing the column's toggle.
+ */
+export declare const EdsPageColumnHeader: React.ForwardRefExoticComponent<EdsPageColumnHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column-header.d.ts.map

package/eds-page/eds-page-column-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,iGAgC/B,CAAC"}

package/eds-page/eds-page-column-header.js

@@ -0,0 +1,19 @@
+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';
+import { useEdsPageColumn } from './eds-page-column-context.js';
+/**
+ * `EdsPageColumnHeader` — pure React port of the Angular `eds-page-column-header`.
+ *
+ * Header row for an `EdsPageColumn`. Reads the enclosing column's collapsed/collapsible state
+ * from `EdsPageColumnContext` (the React analog of the Angular `EDS_PAGE_COLUMN` injection
+ * token). The sublabel and action-items slots hide when the column is collapsed, and the
+ * collapse toggle (an `EdsIconButton`, `caret-right`/`caret-left`) renders when the column is
+ * collapsible, firing the column's toggle.
+ */
+export const EdsPageColumnHeader = React.forwardRef(function EdsPageColumnHeader({ label, sublabel, actionItems, children, className, ...rest }, ref) {
+    const column = useEdsPageColumn();
+    const collapsed = column?.collapsed ?? false;
+    return (_jsxs("div", { ref: ref, className: className ? `eds-page-column-header ${className}` : 'eds-page-column-header', ...rest, children: [_jsxs("div", { className: "eds-page-column-header__left", children: [label, !collapsed ? sublabel : null] }), _jsxs("div", { className: "eds-page-column-header__right", children: [!collapsed ? actionItems : null, column?.isCollapsible ? (_jsx(EdsIconButton, { size: "s", icon: collapsed ? 'caret-right' : 'caret-left', ariaLabel: column.collapseAriaLabel, onButtonClick: column.onToggle })) : null] }), children] }));
+});
+//# sourceMappingURL=eds-page-column-header.js.map

package/eds-page/eds-page-column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column-header.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column-header.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAahE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC/C,SAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC5F,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,MAAM,EAAE,SAAS,IAAI,KAAK,CAAC;IAE7C,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,0BAA0B,SAAS,EAAE,CAAC,CAAC,CAAC,wBAAwB,KACnF,IAAI,aAER,eAAK,SAAS,EAAC,8BAA8B,aACxC,KAAK,EACL,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAC3B,EAEN,eAAK,SAAS,EAAC,+BAA+B,aACzC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAC/B,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,IACV,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAC9C,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACnC,aAAa,EAAE,MAAM,CAAC,QAAQ,GAChC,CACL,CAAC,CAAC,CAAC,IAAI,IACN,EAEL,QAAQ,IACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-page/eds-page-column.css

@@ -0,0 +1,30 @@
+.eds-page-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+    border-right: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-page-column:last-child {
+    border-right: none;
+}
+
+/* Size variants (from EdsSizeDirective) */
+.eds-page-column.eds-page-column--size-s { flex: 0 0 200px; }
+.eds-page-column.eds-page-column--size-m { flex: 0 0 240px; }
+.eds-page-column.eds-page-column--size-l { flex: 0 0 280px; }
+.eds-page-column.eds-page-column--size-xl { flex: 0 0 320px; }
+.eds-page-column.eds-page-column--size-2xl { flex: 0 0 360px; }
+.eds-page-column.eds-page-column--size-3xl { flex: 0 0 420px; }
+.eds-page-column.eds-page-column--size-4xl { flex: 0 0 480px; }
+
+/* Collapsed state */
+.eds-page-column.eds-page-column--collapsed {
+    flex: 0 0 auto;
+    width: auto;
+    min-width: 48px;
+}

package/eds-page/eds-page-column.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+/**
+ * Local narrowed size union — the column's size contract. Mirrors the Angular
+ * `EdsSizeDirective` shorthands (`edsSizeS`…`edsSize4XL`) applied to `eds-page-column`.
+ */
+export type EdsPageColumnSize = 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface EdsPageColumnProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Size variant controlling the column's fixed width. */
+    size?: EdsPageColumnSize;
+    /** Enables expand/collapse functionality for the column. @default false */
+    isCollapsible?: boolean;
+    /** Controls the initial collapsed state of the column. @default false */
+    isCollapsed?: boolean;
+    /** Accessible label for the collapse toggle button. @default 'Toggle column' */
+    collapseAriaLabel?: string;
+    /** Enables automatic column collapse when the container width drops below the threshold. @default false */
+    isAutocloseOnContainerResize?: boolean;
+    /** Container width threshold in pixels for automatic collapse. */
+    autocloseContainerWidth?: number | null;
+    /** Emitted when the column's collapsed state changes. */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Column header slot (`eds-page-column-header`). */
+    header?: React.ReactNode;
+    /** Column body slot (`eds-page-column-body`). */
+    body?: React.ReactNode;
+    /** Column footer slot (`eds-page-column-footer`). */
+    footer?: React.ReactNode;
+    /** Additional default-slot content (rendered when not collapsed). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumn` — pure React port of the Angular `eds-page-column`.
+ *
+ * Individual column in a multi-column page layout. Reproduces the Angular `hostClasses()` BEM
+ * output verbatim (class-based source, guide rule 9): `eds-page-column`, the size class
+ * `eds-page-column--size-{s..4xl}` (from the `EdsSizeDirective` shorthands), and
+ * `eds-page-column--collapsed`. Collapse behavior ports the Angular signals/RxJS: `isCollapsed`
+ * seeds the local state, and when `isAutocloseOnContainerResize` + `autocloseContainerWidth`
+ * are set it subscribes to the enclosing `EdsPageColumns` width feed and auto-collapses. The
+ * header slot is always rendered; body/footer/children only when not collapsed (matching the
+ * Angular `@if (!collapsed())` template). Publishes `EdsPageColumnContext` so its
+ * `EdsPageColumnHeader` can read the collapsed/collapsible state and drive the toggle.
+ */
+export declare const EdsPageColumn: React.ForwardRefExoticComponent<EdsPageColumnProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-column.d.ts.map

package/eds-page/eds-page-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/E,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,yDAAyD;IACzD,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2GAA2G;IAC3G,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,qDAAqD;IACrD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iDAAiD;IACjD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,2FA4ExB,CAAC"}