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

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"}

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

@@ -0,0 +1,62 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { EdsPageColumnContext, useEdsPageColumns, } from './eds-page-column-context.js';
+/**
+ * `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 const EdsPageColumn = React.forwardRef(function EdsPageColumn({ size, isCollapsible = false, isCollapsed = false, collapseAriaLabel = 'Toggle column', isAutocloseOnContainerResize = false, autocloseContainerWidth = null, onCollapse, header, body, footer, children, className, ...rest }, ref) {
+    const [collapsed, setCollapsed] = useState(isCollapsed);
+    const columns = useEdsPageColumns();
+    // Angular ngOnInit: this.collapsed.set(this.isCollapsed()).
+    useEffect(() => {
+        setCollapsed(isCollapsed);
+    }, [isCollapsed]);
+    // Debounced auto-close on container resize (Angular width Subject + debounceTime(100)).
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (!columns || !isAutocloseOnContainerResize || !autocloseContainerWidth)
+            return;
+        const unsubscribe = columns.subscribeWidth((parentWidth) => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => {
+                if (parentWidth <= autocloseContainerWidth) {
+                    setCollapsed(true);
+                    onCollapse?.(true);
+                }
+            }, 100);
+        });
+        return () => {
+            unsubscribe();
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, [columns, isAutocloseOnContainerResize, autocloseContainerWidth, onCollapse]);
+    const onToggle = () => {
+        setCollapsed((v) => {
+            const next = !v;
+            onCollapse?.(next);
+            return next;
+        });
+    };
+    const rootClass = [
+        'eds-page-column',
+        collapsed ? 'eds-page-column--collapsed' : '',
+        size ? `eds-page-column--size-${size}` : '',
+        className ?? '',
+    ].filter(Boolean).join(' ');
+    const ctx = { collapsed, isCollapsible, collapseAriaLabel, onToggle };
+    return (_jsx(EdsPageColumnContext.Provider, { value: ctx, children: _jsxs("div", { ref: ref, className: rootClass, ...rest, children: [header, !collapsed ? (_jsxs(_Fragment, { children: [body, footer, children] })) : null] }) }));
+});
+//# sourceMappingURL=eds-page-column.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-column.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-column.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EACH,oBAAoB,EAEpB,iBAAiB,GACpB,MAAM,8BAA8B,CAAC;AAiCtC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAqC,SAAS,aAAa,CACpG,EACI,IAAI,EACJ,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,eAAe,EACnC,4BAA4B,GAAG,KAAK,EACpC,uBAAuB,GAAG,IAAI,EAC9B,UAAU,EACV,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IAEpC,4DAA4D;IAC5D,SAAS,CAAC,GAAG,EAAE;QACX,YAAY,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,wFAAwF;IACxF,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACpE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,OAAO,IAAI,CAAC,4BAA4B,IAAI,CAAC,uBAAuB;YAAE,OAAO;QAClF,MAAM,WAAW,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,EAAE;YACvD,IAAI,QAAQ,CAAC,OAAO;gBAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACrD,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC/B,IAAI,WAAW,IAAI,uBAAuB,EAAE,CAAC;oBACzC,YAAY,CAAC,IAAI,CAAC,CAAC;oBACnB,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;YACL,CAAC,EAAE,GAAG,CAAC,CAAC;QACZ,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACR,WAAW,EAAE,CAAC;YACd,IAAI,QAAQ,CAAC,OAAO;gBAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,4BAA4B,EAAE,uBAAuB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjF,MAAM,QAAQ,GAAG,GAAS,EAAE;QACxB,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;YACf,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC;YAChB,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QACd,iBAAiB;QACjB,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;QAC7C,IAAI,CAAC,CAAC,CAAC,yBAAyB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3C,SAAS,IAAI,EAAE;KAClB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,GAAG,GAA8B,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAEjG,OAAO,CACH,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YACrC,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,aACxC,MAAM,EACN,CAAC,SAAS,CAAC,CAAC,CAAC,CACV,8BACK,IAAI,EACJ,MAAM,EACN,QAAQ,IACV,CACN,CAAC,CAAC,CAAC,IAAI,IACN,GACsB,CACnC,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-page/eds-page-columns.css

@@ -0,0 +1,14 @@
+.eds-page-columns {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+@media screen and (max-width: 767px) {
+    .eds-page-columns:not(.eds-page-columns--prevent-mobile-rendering) {
+        flex-direction: column;
+        overflow-y: auto;
+    }
+}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface EdsPageColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Prevents automatic mobile responsive rendering of columns. When true, maintains the
+     * desktop column layout on mobile devices instead of stacking. @default false
+     */
+    hasPreventMobileRendering?: boolean;
+    /** One or more `EdsPageColumn` children. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageColumns` — pure React port of the Angular `eds-page-columns`.
+ *
+ * Container for multi-column page layouts. Reproduces the Angular `hostClasses()` BEM logic
+ * (`eds-page-columns--prevent-mobile-rendering`) and the `ResizeObserver` that publishes the
+ * container width, exposed to descendant columns via `EdsPageColumnsContext` (the React analog
+ * of the Angular `width` RxJS `Subject`) so a column can auto-collapse on resize.
+ */
+export declare const EdsPageColumns: React.ForwardRefExoticComponent<EdsPageColumnsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-columns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-columns.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,4FAmDzB,CAAC"}

package/eds-page/eds-page-columns.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { EdsPageColumnsContext } from './eds-page-column-context.js';
+/**
+ * `EdsPageColumns` — pure React port of the Angular `eds-page-columns`.
+ *
+ * Container for multi-column page layouts. Reproduces the Angular `hostClasses()` BEM logic
+ * (`eds-page-columns--prevent-mobile-rendering`) and the `ResizeObserver` that publishes the
+ * container width, exposed to descendant columns via `EdsPageColumnsContext` (the React analog
+ * of the Angular `width` RxJS `Subject`) so a column can auto-collapse on resize.
+ */
+export const EdsPageColumns = React.forwardRef(function EdsPageColumns({ hasPreventMobileRendering = false, children, className, ...rest }, ref) {
+    const hostRef = useRef(null);
+    const listenersRef = useRef(new Set());
+    const setRefs = useCallback((node) => {
+        hostRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // ResizeObserver → emit width to subscribed columns (Angular width Subject).
+    useEffect(() => {
+        const node = hostRef.current;
+        if (!node || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0].contentRect.width;
+            listenersRef.current.forEach((listener) => listener(width));
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    const ctx = useMemo(() => ({
+        subscribeWidth: (listener) => {
+            listenersRef.current.add(listener);
+            return () => listenersRef.current.delete(listener);
+        },
+    }), []);
+    const rootClass = [
+        'eds-page-columns',
+        hasPreventMobileRendering ? 'eds-page-columns--prevent-mobile-rendering' : '',
+        className ?? '',
+    ].filter(Boolean).join(' ');
+    return (_jsx(EdsPageColumnsContext.Provider, { value: ctx, children: _jsx("div", { ref: setRefs, className: rootClass, ...rest, children: children }) }));
+});
+//# sourceMappingURL=eds-page-columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-columns.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-columns.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAA8B,MAAM,8BAA8B,CAAC;AAYjG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,cAAc,CACvG,EAAE,yBAAyB,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACnE,GAAG;IAEH,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAA+B,IAAI,GAAG,EAAE,CAAC,CAAC;IAErE,MAAM,OAAO,GAAG,WAAW,CACvB,CAAC,IAA2B,EAAE,EAAE;QAC5B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC;aACpC,IAAI,GAAG;YAAG,GAAqD,CAAC,OAAO,GAAG,IAAI,CAAC;IACxF,CAAC,EACD,CAAC,GAAG,CAAC,CACR,CAAC;IAEF,6EAA6E;IAC7E,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAC3D,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YAC5C,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YAC3C,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACvB,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,GAAG,GAAG,OAAO,CACf,GAAG,EAAE,CAAC,CAAC;QACH,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE;YACzB,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACvD,CAAC;KACJ,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,SAAS,GAAG;QACd,kBAAkB;QAClB,yBAAyB,CAAC,CAAC,CAAC,4CAA4C,CAAC,CAAC,CAAC,EAAE;QAC7E,SAAS,IAAI,EAAE;KAClB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACH,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YACtC,cAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,YAC5C,QAAQ,GACP,GACuB,CACpC,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-page/eds-page-content.css

@@ -0,0 +1,14 @@
+.eds-page-content {
+    display: block;
+    flex: 1;
+    min-height: 0;
+    padding: var(--eds-sp-2xs) var(--eds-sp-m) var(--eds-sp-m) var(--eds-sp-m);
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.eds-page-content:has(.eds-page-columns) {
+    padding: 0;
+    overflow: hidden;
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EdsPageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Main page content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageContent` — pure React port of the Angular `eds-page-content`.
+ * Scrollable main content region. Sets the static `role="main"` landmark.
+ */
+export declare const EdsPageContent: React.ForwardRefExoticComponent<EdsPageContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-content.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,4FAa1B,CAAC"}

package/eds-page/eds-page-content.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsPageContent` — pure React port of the Angular `eds-page-content`.
+ * Scrollable main content region. Sets the static `role="main"` landmark.
+ */
+export const EdsPageContent = React.forwardRef(function EdsPageContent({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-page-content ${className}` : 'eds-page-content', role: "main", ...rest, children: children }));
+});
+//# sourceMappingURL=eds-page-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-content.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-content.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACzD,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAoB,SAAS,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAC3E,IAAI,EAAC,MAAM,KACP,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

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

@@ -0,0 +1,15 @@
+.eds-page-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    flex-shrink: 0;
+    padding: var(--eds-sp-m) var(--eds-sp-none);
+    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-page-footer.highlighted {
+    background: var(--eds-c-surface-elevation-raised);
+    padding: var(--eds-sp-m);
+    border-radius: var(--eds-br-s);
+    border-top: none;
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EdsPageFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Adds visual emphasis to the footer. @default false */
+    highlighted?: boolean;
+    /** Footer content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPageFooter` — pure React port of the Angular `eds-page-footer`.
+ * Content-projection wrapper for the page footer. The `highlighted` input maps to the
+ * `highlighted` class the Angular host block toggled (`[class.highlighted]`).
+ */
+export declare const EdsPageFooter: React.ForwardRefExoticComponent<EdsPageFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-page-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-footer.d.ts","sourceRoot":"","sources":["../../src/eds-page/eds-page-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,2FAazB,CAAC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsPageFooter` — pure React port of the Angular `eds-page-footer`.
+ * Content-projection wrapper for the page footer. The `highlighted` input maps to the
+ * `highlighted` class the Angular host block toggled (`[class.highlighted]`).
+ */
+export const EdsPageFooter = React.forwardRef(function EdsPageFooter({ highlighted = false, children, className, ...rest }, ref) {
+    const rootClass = [
+        'eds-page-footer',
+        highlighted ? 'highlighted' : '',
+        className ?? '',
+    ].filter(Boolean).join(' ');
+    return (_jsx("div", { ref: ref, className: rootClass, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-page-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-page-footer.js","sourceRoot":"","sources":["../../src/eds-page/eds-page-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACzC,SAAS,aAAa,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC7E,MAAM,SAAS,GAAG;QACd,iBAAiB;QACjB,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;QAChC,SAAS,IAAI,EAAE;KAClB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,YACxC,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}