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

package/eds-card/eds-card-media.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface EdsCardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Media content — typically an `<img>` (or `<picture>`/`<video>`) rendered edge-to-edge at
+     * the top of the card (or on the left in horizontal layout).
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsCardMedia` — pure React port of the Angular `eds-card-media`.
+ *
+ * Media block for card layouts. Projects an image (or picture/video) at the top of the card,
+ * edge-to-edge; constrained on the left in horizontal card layout. Carries the
+ * `.eds-card-media` class.
+ */
+export declare const EdsCardMedia: React.ForwardRefExoticComponent<EdsCardMediaProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-card-media.d.ts.map

package/eds-card/eds-card-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-media.d.ts","sourceRoot":"","sources":["../../src/eds-card/eds-card-media.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,0FAavB,CAAC"}

package/eds-card/eds-card-media.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsCardMedia` — pure React port of the Angular `eds-card-media`.
+ *
+ * Media block for card layouts. Projects an image (or picture/video) at the top of the card,
+ * edge-to-edge; constrained on the left in horizontal card layout. Carries the
+ * `.eds-card-media` class.
+ */
+export const EdsCardMedia = React.forwardRef(function EdsCardMedia({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-card-media ${className}` : 'eds-card-media', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-card-media.js.map

package/eds-card/eds-card-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-media.js","sourceRoot":"","sources":["../../src/eds-card/eds-card-media.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAoC,SAAS,YAAY,CACjG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChC,GAAG;IAEH,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC,CAAC,gBAAgB,KACnE,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-card/eds-card-metadata.css

@@ -0,0 +1,5 @@
+.eds-card-metadata {
+    display: block;
+    font: var(--eds-f-paragraph-xs);
+    color: var(--eds-c-foreground-subtler);
+}

package/eds-card/eds-card-metadata.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsCardMetadataProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Supplementary info (date, author, category, etc.) shown below the label/sublabel. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsCardMetadata` — pure React port of the Angular `eds-card-metadata`.
+ *
+ * Metadata sub-component for the card header. Displays supplementary info (date, author,
+ * category, etc.) below the label/sublabel. Carries the `.eds-card-metadata` class.
+ */
+export declare const EdsCardMetadata: React.ForwardRefExoticComponent<EdsCardMetadataProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-card-metadata.d.ts.map

package/eds-card/eds-card-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-metadata.d.ts","sourceRoot":"","sources":["../../src/eds-card/eds-card-metadata.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wFAAwF;IACxF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,6FAY3B,CAAC"}

package/eds-card/eds-card-metadata.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsCardMetadata` — pure React port of the Angular `eds-card-metadata`.
+ *
+ * Metadata sub-component for the card header. Displays supplementary info (date, author,
+ * category, etc.) below the label/sublabel. Carries the `.eds-card-metadata` class.
+ */
+export const EdsCardMetadata = React.forwardRef(function EdsCardMetadata({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-card-metadata ${className}` : 'eds-card-metadata', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-card-metadata.js.map

package/eds-card/eds-card-metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-metadata.js","sourceRoot":"","sources":["../../src/eds-card/eds-card-metadata.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC3C,SAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC1D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,SAAS,EAAE,CAAC,CAAC,CAAC,mBAAmB,KACzE,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-card/eds-card-start.css

@@ -0,0 +1,8 @@
+.eds-card-start {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: var(--eds-sp-m);
+    border-right: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    margin-right: var(--eds-sp-m);
+}

package/eds-card/eds-card-start.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsCardStartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Start-block content — an icon, avatar, or image on the left side of the card. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsCardStart` — pure React port of the Angular `eds-card-start`.
+ *
+ * Start block for horizontal card layout. Projects an icon, avatar, or image on the left side
+ * of the card, separated by a divider. Carries the `.eds-card-start` class.
+ */
+export declare const EdsCardStart: React.ForwardRefExoticComponent<EdsCardStartProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-card-start.d.ts.map

package/eds-card/eds-card-start.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-start.d.ts","sourceRoot":"","sources":["../../src/eds-card/eds-card-start.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,oFAAoF;IACpF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,0FAavB,CAAC"}

package/eds-card/eds-card-start.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsCardStart` — pure React port of the Angular `eds-card-start`.
+ *
+ * Start block for horizontal card layout. Projects an icon, avatar, or image on the left side
+ * of the card, separated by a divider. Carries the `.eds-card-start` class.
+ */
+export const EdsCardStart = React.forwardRef(function EdsCardStart({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-card-start ${className}` : 'eds-card-start', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-card-start.js.map

package/eds-card/eds-card-start.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-start.js","sourceRoot":"","sources":["../../src/eds-card/eds-card-start.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAoC,SAAS,YAAY,CACjG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChC,GAAG;IAEH,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC,CAAC,gBAAgB,KACnE,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-card/eds-card-sublabel.css

@@ -0,0 +1,11 @@
+.eds-card-sublabel {
+    display: block;
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-subtler);
+}
+
+.eds-card-sublabel.eds-card-sublabel--clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}

package/eds-card/eds-card-sublabel.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface EdsCardSublabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum number of lines before truncation (CSS line-clamp). Omit for no truncation. */
+    maxLines?: number;
+    /** Sublabel / subtitle text content. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsCardSublabel` — pure React port of the Angular `eds-card-sublabel`.
+ *
+ * Sublabel/subtitle sub-component for the card. Supports text truncation via `maxLines` (CSS
+ * line-clamp). When `maxLines` is set, the `.eds-card-sublabel--clamped` class is applied and
+ * the `-webkit-line-clamp` / `line-clamp` styles are set inline (mirroring the Angular host
+ * style bindings).
+ */
+export declare const EdsCardSublabel: React.ForwardRefExoticComponent<EdsCardSublabelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-card-sublabel.d.ts.map

package/eds-card/eds-card-sublabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-sublabel.d.ts","sourceRoot":"","sources":["../../src/eds-card/eds-card-sublabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,6FAmB3B,CAAC"}

package/eds-card/eds-card-sublabel.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsCardSublabel` — pure React port of the Angular `eds-card-sublabel`.
+ *
+ * Sublabel/subtitle sub-component for the card. Supports text truncation via `maxLines` (CSS
+ * line-clamp). When `maxLines` is set, the `.eds-card-sublabel--clamped` class is applied and
+ * the `-webkit-line-clamp` / `line-clamp` styles are set inline (mirroring the Angular host
+ * style bindings).
+ */
+export const EdsCardSublabel = React.forwardRef(function EdsCardSublabel({ maxLines, children, className, style, ...rest }, ref) {
+    const clamped = !!maxLines;
+    const base = clamped ? 'eds-card-sublabel eds-card-sublabel--clamped' : 'eds-card-sublabel';
+    const clampStyle = clamped
+        ? { WebkitLineClamp: maxLines, lineClamp: maxLines }
+        : {};
+    return (_jsx("div", { ref: ref, className: className ? `${base} ${className}` : base, style: { ...clampStyle, ...style }, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-card-sublabel.js.map

package/eds-card/eds-card-sublabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card-sublabel.js","sourceRoot":"","sources":["../../src/eds-card/eds-card-sublabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC3C,SAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC3E,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC;IAC3B,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAC5F,MAAM,UAAU,GAAwB,OAAO;QAC3C,CAAC,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,QAA6B,EAAE;QACzE,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,EACpD,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,EAAE,KAC9B,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-card/eds-card.css

@@ -0,0 +1,92 @@
+.eds-card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: var(--eds-c-surface-elevation);
+    border-radius: var(--eds-br-m);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    box-shadow: var(--eds-sh-1);
+    padding: var(--eds-sp-s);
+    position: relative;
+    font: var(--eds-f-paragraph-m);
+}
+
+.eds-card .eds-card__content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--eds-sp-3xs);
+}
+
+.eds-card .eds-card__header-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.eds-card .eds-card__selection {
+    display: flex;
+    align-items: center;
+    margin-right: var(--eds-sp-s);
+}
+
+.eds-card .eds-card__collapse-toggle {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}
+
+/* Centered layout (applied via utility class on host) */
+.eds-card.eds-u-align-items-center .eds-card__content {
+    align-items: center;
+    text-align: center;
+}
+
+/* Horizontal layout */
+.eds-card.eds-card--horizontal {
+    flex-direction: row;
+    align-items: center;
+}
+
+.eds-card.eds-card--horizontal .eds-card__selection {
+    margin-right: var(--eds-sp-m);
+}
+
+.eds-card.eds-card--horizontal .eds-card__content {
+    flex: 1;
+}
+
+/* Full height — fills container and body grows */
+.eds-card.eds-card--full-height {
+    height: 100%;
+}
+
+.eds-card.eds-card--full-height .eds-card__content {
+    flex: 1;
+}
+
+/* Selected state */
+.eds-card.eds-card--selected {
+    border-color: var(--eds-c-border-primary);
+}
+
+/* Interactive (link directive applied) */
+.eds-card.eds-card--link:not(.eds-card--disabled) {
+    cursor: pointer;
+}
+
+.eds-card.eds-card--link:not(.eds-card--disabled):hover,
+.eds-card.eds-card--link:not(.eds-card--disabled):active {
+    box-shadow: var(--eds-sh-2);
+}
+
+.eds-card.eds-card--link:not(.eds-card--disabled):focus-visible {
+    outline: 2px solid var(--eds-c-border-primary);
+    outline-offset: 2px;
+}
+
+/* Disabled */
+.eds-card.eds-card--disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}

package/eds-card/eds-card.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+export interface EdsCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible label for the card. */
+    ariaLabel?: string | null;
+    /** Whether the card is disabled. @default false */
+    disabled?: boolean;
+    /** Whether to use horizontal layout (start block on the left, content on the right). @default false */
+    isHorizontal?: boolean;
+    /** Whether the card should fill its container height (for grid layouts). @default false */
+    isFullHeight?: boolean;
+    /** Whether to show a selection checkbox. @default false */
+    isSelectable?: boolean;
+    /**
+     * Controlled selected state. When provided, the card is controlled — use `onCardSelect`
+     * to react to changes. Omit for uncontrolled (see `defaultSelected`).
+     */
+    isSelected?: boolean;
+    /** Initial selected state for the uncontrolled case. @default false */
+    defaultSelected?: boolean;
+    /** Fired when the selection state changes (Angular `cardSelect`). */
+    onCardSelect?: (selected: boolean) => void;
+    /** Whether the card body can be collapsed. @default false */
+    isCollapsible?: boolean;
+    /**
+     * Controlled collapsed state. When provided, the card is controlled — use `onCardCollapse`
+     * to react to changes. Omit for uncontrolled (see `defaultCollapsed`).
+     */
+    isCollapsed?: boolean;
+    /** Initial collapsed state for the uncontrolled case. @default false */
+    defaultCollapsed?: boolean;
+    /** Fired when the collapsed state changes (Angular `cardCollapse`). */
+    onCardCollapse?: (collapsed: boolean) => void;
+    /**
+     * Makes the card interactive (clickable / link) — the React equivalent of applying the
+     * Angular `edsCardLink` directive. Adds the `.eds-card--link` class, focusability, pointer
+     * cursor, hover/focus styling, and click / Enter / Space activation. @default false
+     */
+    interactive?: boolean;
+    /** Internal navigation URL — rendered/activated as an internal link (via `onCardClick`). */
+    url?: string;
+    /** External URL — opens via `window.open`. */
+    urlExternal?: string;
+    /** Target for the external URL. @default '_blank' */
+    urlExternalTarget?: string;
+    /** Fired when an interactive card is activated (click, Enter, Space) — Angular `cardClick`. */
+    onCardClick?: (event: React.SyntheticEvent) => void;
+    /** ARIA label for the selection checkbox. @default 'Select card' */
+    selectAriaLabel?: string;
+    /** ARIA label for the collapse toggle button. @default 'Toggle card content' */
+    collapseAriaLabel?: string;
+    /** Media slot — rendered first (Angular `<ng-content select="eds-card-media"/>`). */
+    media?: React.ReactNode;
+    /** Start slot — rendered before the content column (Angular `<ng-content select="eds-card-start"/>`). */
+    start?: React.ReactNode;
+    /** Header slot — rendered in the header row (Angular `<ng-content select="eds-card-header"/>`). */
+    header?: React.ReactNode;
+    /** Body slot — rendered after `children` (Angular `<ng-content select="eds-card-body"/>`). */
+    body?: React.ReactNode;
+    /** Footer slot — rendered last in the content column (Angular `<ng-content select="eds-card-footer"/>`). */
+    footer?: React.ReactNode;
+    /** Bare content — rendered in the content column between the header row and the body slot. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsCard` — pure React port of the Angular `eds-card` (plus the `edsCardLink` directive,
+ * folded in via the `interactive`/`url`/`urlExternal` props).
+ *
+ * A card surface component: a consistent surface (background, border-radius, shadow, padding)
+ * projecting content via named slots (`media`, `start`, `header`, `body`, `footer`) plus bare
+ * `children`. Supports horizontal layout, full height, a selection checkbox, a collapsible
+ * body, and (via `interactive`) link/button behavior. Selection and collapse each support
+ * controlled (`isSelected`/`isCollapsed` + `on*`) and uncontrolled (`defaultSelected`/
+ * `defaultCollapsed`) use.
+ *
+ * Reproduces the Angular `hostClasses()` BEM string on the root, publishes the collapse state
+ * to descendants via `EdsCardContext` (mirroring the Angular `EDS_CARD_REF`), and reflects
+ * `role`, `aria-label`, `aria-disabled`, and `data-e2e` on the host.
+ */
+export declare const EdsCard: React.ForwardRefExoticComponent<EdsCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-card.d.ts","sourceRoot":"","sources":["../../src/eds-card/eds-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uGAAuG;IACvG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE9C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4FAA4F;IAC5F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAEpD,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,qFAAqF;IACrF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mGAAmG;IACnG,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8FAA8F;IAC9F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4GAA4G;IAC5G,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,OAAO,qFAqKlB,CAAC"}

package/eds-card/eds-card.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState } from 'react';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+import { EdsCardContext } from './eds-card-context.js';
+/**
+ * `EdsCard` — pure React port of the Angular `eds-card` (plus the `edsCardLink` directive,
+ * folded in via the `interactive`/`url`/`urlExternal` props).
+ *
+ * A card surface component: a consistent surface (background, border-radius, shadow, padding)
+ * projecting content via named slots (`media`, `start`, `header`, `body`, `footer`) plus bare
+ * `children`. Supports horizontal layout, full height, a selection checkbox, a collapsible
+ * body, and (via `interactive`) link/button behavior. Selection and collapse each support
+ * controlled (`isSelected`/`isCollapsed` + `on*`) and uncontrolled (`defaultSelected`/
+ * `defaultCollapsed`) use.
+ *
+ * Reproduces the Angular `hostClasses()` BEM string on the root, publishes the collapse state
+ * to descendants via `EdsCardContext` (mirroring the Angular `EDS_CARD_REF`), and reflects
+ * `role`, `aria-label`, `aria-disabled`, and `data-e2e` on the host.
+ */
+export const EdsCard = React.forwardRef(function EdsCard({ ariaLabel, disabled = false, isHorizontal = false, isFullHeight = false, isSelectable = false, isSelected, defaultSelected = false, onCardSelect, isCollapsible = false, isCollapsed, defaultCollapsed = false, onCardCollapse, interactive = false, url, urlExternal, urlExternalTarget = '_blank', onCardClick, selectAriaLabel = 'Select card', collapseAriaLabel = 'Toggle card content', media, start, header, body, footer, children, className, onClick, onKeyDown, ...rest }, ref) {
+    const selectControlled = isSelected !== undefined;
+    const [internalSelected, setInternalSelected] = useState(defaultSelected);
+    const selected = selectControlled ? isSelected : internalSelected;
+    const collapseControlled = isCollapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const collapsed = collapseControlled ? isCollapsed : internalCollapsed;
+    const caretIcon = collapsed ? 'caret-down' : 'caret-up';
+    // Angular hostClasses(): base + horizontal/full-height/selected/disabled, plus the
+    // eds-card--link class applied by the edsCardLink directive.
+    const classes = [
+        'eds-card',
+        isHorizontal ? 'eds-card--horizontal' : '',
+        isFullHeight ? 'eds-card--full-height' : '',
+        selected ? 'eds-card--selected' : '',
+        disabled ? 'eds-card--disabled' : '',
+        interactive ? 'eds-card--link' : '',
+    ]
+        .join(' ')
+        .trim();
+    const onCheckboxChange = (event) => {
+        event.stopPropagation();
+        const next = !selected;
+        if (!selectControlled)
+            setInternalSelected(next);
+        onCardSelect?.(next);
+    };
+    const toggleCollapse = () => {
+        const next = !collapsed;
+        if (!collapseControlled)
+            setInternalCollapsed(next);
+        onCardCollapse?.(next);
+    };
+    // edsCardLink directive behavior (only when interactive).
+    const activate = (event) => {
+        if (urlExternal) {
+            window.open(urlExternal, urlExternalTarget, 'noopener,noreferrer');
+        }
+        else if (url) {
+            // Router-agnostic: navigation is delegated to the consumer via onCardClick.
+        }
+        onCardClick?.(event);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (interactive && !disabled)
+            activate(event);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            activate(event);
+        }
+    };
+    // Host role: 'link'/'button' when interactive (edsCardLink hostRole), else 'article'.
+    const hostRole = interactive ? (url || urlExternal ? 'link' : 'button') : 'article';
+    const tabIndex = interactive ? (disabled ? -1 : 0) : undefined;
+    return (_jsx(EdsCardContext.Provider, { value: { isCollapsed: collapsed }, children: _jsxs("div", { ref: ref, className: className ? `${classes} ${className}` : classes, role: hostRole, "data-e2e": "eds-card", "aria-label": ariaLabel ?? undefined, "aria-disabled": disabled || undefined, tabIndex: tabIndex, style: interactive ? { cursor: 'pointer' } : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [media, isSelectable && isHorizontal && (_jsx("div", { className: "eds-card__selection", children: _jsx("input", { type: "checkbox", className: "eds-input-checkbox", checked: selected, onChange: onCheckboxChange, "aria-label": selectAriaLabel }) })), start, _jsxs("div", { className: "eds-card__content", children: [_jsxs("div", { className: "eds-card__header-row", children: [isSelectable && !isHorizontal && (_jsx("div", { className: "eds-card__selection", children: _jsx("input", { type: "checkbox", className: "eds-input-checkbox", checked: selected, onChange: onCheckboxChange, "aria-label": selectAriaLabel }) })), header, isCollapsible && (_jsx("div", { className: "eds-card__collapse-toggle", children: _jsx(EdsIconButton, { icon: caretIcon, "aria-expanded": !collapsed, ariaLabel: collapseAriaLabel, rounded: true, size: "s", onButtonClick: toggleCollapse }) }))] }), children, body, footer] })] }) }));
+});
+//# sourceMappingURL=eds-card.js.map

package/eds-card/eds-card.js.map

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

package/eds-card/index.d.ts

@@ -0,0 +1,23 @@
+export { EdsCard } from './eds-card.js';
+export type { EdsCardProps } from './eds-card.js';
+export { EdsCardContext, useEdsCard } from './eds-card-context.js';
+export type { EdsCardContextValue } from './eds-card-context.js';
+export { EdsCardHeader } from './eds-card-header.js';
+export type { EdsCardHeaderProps } from './eds-card-header.js';
+export { EdsCardHeaderEnd } from './eds-card-header-end.js';
+export type { EdsCardHeaderEndProps } from './eds-card-header-end.js';
+export { EdsCardStart } from './eds-card-start.js';
+export type { EdsCardStartProps } from './eds-card-start.js';
+export { EdsCardMedia } from './eds-card-media.js';
+export type { EdsCardMediaProps } from './eds-card-media.js';
+export { EdsCardLabel } from './eds-card-label.js';
+export type { EdsCardLabelProps } from './eds-card-label.js';
+export { EdsCardSublabel } from './eds-card-sublabel.js';
+export type { EdsCardSublabelProps } from './eds-card-sublabel.js';
+export { EdsCardMetadata } from './eds-card-metadata.js';
+export type { EdsCardMetadataProps } from './eds-card-metadata.js';
+export { EdsCardBody } from './eds-card-body.js';
+export type { EdsCardBodyProps } from './eds-card-body.js';
+export { EdsCardFooter } from './eds-card-footer.js';
+export type { EdsCardFooterProps } from './eds-card-footer.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-card/index.js

@@ -0,0 +1,12 @@
+export { EdsCard } from './eds-card.js';
+export { EdsCardContext, useEdsCard } from './eds-card-context.js';
+export { EdsCardHeader } from './eds-card-header.js';
+export { EdsCardHeaderEnd } from './eds-card-header-end.js';
+export { EdsCardStart } from './eds-card-start.js';
+export { EdsCardMedia } from './eds-card-media.js';
+export { EdsCardLabel } from './eds-card-label.js';
+export { EdsCardSublabel } from './eds-card-sublabel.js';
+export { EdsCardMetadata } from './eds-card-metadata.js';
+export { EdsCardBody } from './eds-card-body.js';
+export { EdsCardFooter } from './eds-card-footer.js';
+//# sourceMappingURL=index.js.map

package/eds-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-date-block/eds-date-block.css

@@ -0,0 +1,83 @@
+/*
+ * eds-date-block — pure React port of eds-date-block.scss.
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host                          -> .eds-date-block (root class on the rendered element)
+ *   :host.eds-date-block--neutral  -> .eds-date-block.eds-date-block--neutral
+ *   nested child classes           -> .eds-date-block .<child> (descendant selectors)
+ * The .eui-21 wrapper is dropped (share-ready). The --_* privates and --eds-* tokens are
+ * copied verbatim; tokens cascade in from the .eui-21 context (required on an ancestor),
+ * exactly like the Angular component.
+ */
+
+.eds-date-block {
+    --_day-font: var(--eds-f-label-l-semi-bold);
+    --_month-font: var(--eds-f-paragraph-s);
+    --_year-font: var(--eds-f-label-s-semi-bold);
+    --_top-bg: var(--eds-c-surface-primary-subtler);
+    --_bottom-bg: var(--eds-c-surface-primary);
+    --_bottom-color: var(--eds-c-on-surface-primary);
+
+    display: inline-flex;
+    position: relative;
+}
+
+.eds-date-block .wrapper::before,
+.eds-date-block .wrapper::after {
+    background-color: var(--eds-c-surface-default);
+    border-radius: 50%;
+    content: "";
+    display: block;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    top: -5px;
+}
+
+.eds-date-block .wrapper::before {
+    left: var(--eds-sp-m);
+}
+
+.eds-date-block .wrapper::after {
+    right: var(--eds-sp-m);
+}
+
+.eds-date-block .wrapper,
+.eds-date-block .day-month {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.eds-date-block .day-month {
+    background-color: var(--_top-bg);
+    padding: var(--eds-sp-xs) var(--eds-sp-l) var(--eds-sp-4xs) var(--eds-sp-l);
+    border-top-left-radius: var(--eds-br-s);
+    border-top-right-radius: var(--eds-br-s);
+    min-width: 72px;
+}
+
+.eds-date-block .day {
+    font: var(--_day-font);
+}
+
+.eds-date-block .month {
+    font: var(--_month-font);
+    text-transform: uppercase;
+}
+
+.eds-date-block .year {
+    background-color: var(--_bottom-bg);
+    color: var(--_bottom-color);
+    font: var(--_year-font);
+    padding: var(--eds-sp-4xs) var(--eds-sp-l);
+    border-bottom-left-radius: var(--eds-br-s);
+    border-bottom-right-radius: var(--eds-br-s);
+    text-align: center;
+}
+
+.eds-date-block.eds-date-block--neutral {
+    --_top-bg: var(--eds-c-surface-neutral-subtler);
+    --_bottom-bg: var(--eds-c-surface-neutral);
+    --_bottom-color: var(--eds-c-on-surface-neutral);
+}

package/eds-date-block/eds-date-block.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+/**
+ * Local narrowed union — the date-block's color contract.
+ *
+ * The Angular `eds-date-block` uses the legacy `EdsColorDirective` (pre-String-Props),
+ * exposing `edsPrimary` / `edsNeutral` boolean host-directive inputs and computing a BEM
+ * class (`eds-date-block--primary` / `eds-date-block--neutral`) via `hostClasses()`. That
+ * class logic is reproduced here (Part 1 rule 9: class-based source keeps the BEM class,
+ * not `data-*`), collapsed onto a single `color` prop with two values.
+ */
+export type EdsDateBlockColor = 'primary' | 'neutral';
+export interface EdsDateBlockProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+    /** The date to display in the block. @default undefined */
+    blockDate?: Date;
+    /**
+     * Color variant. `primary` maps to the legacy `edsPrimary` (default),
+     * `neutral` to `edsNeutral`. @default 'primary'
+     */
+    color?: EdsDateBlockColor;
+    /** Locale identifier for date formatting (e.g. `'en'`, `'fr'`). @default 'en' */
+    locale?: string;
+    /** Data attribute value for end-to-end testing identification. @default 'eds-date-block' */
+    e2eAttr?: string;
+}
+/**
+ * `EdsDateBlock` — pure React port of the Angular `eds-date-block`.
+ *
+ * A presentational date display that renders a date in a calendar-block layout
+ * (day, month, year). Useful for event listings, timelines, and date-centric interfaces.
+ *
+ * Date formatting is reimplemented with `Intl.DateTimeFormat` (the Angular component
+ * used `DatePipe` + `Intl`); the `locale` prop drives the day / month / year output and
+ * the accessible name, falling back to `'en'` on an invalid locale. No Web Component /
+ * `@lit/react` dependency. Styling is ported to `eds-date-block.css` (`--eds-*` tokens);
+ * requires `@eui/eds-styles` + the `eui-21` class on an ancestor, like the Angular
+ * component.
+ */
+export declare const EdsDateBlock: React.ForwardRefExoticComponent<EdsDateBlockProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=eds-date-block.d.ts.map

package/eds-date-block/eds-date-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-date-block.d.ts","sourceRoot":"","sources":["../../src/eds-date-block/eds-date-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,2DAA2D;IAC3D,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA8CD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,uFAuCvB,CAAC"}