ionbase-ui 0.4.0 → 0.6.0

package/README.md

@@ -9,6 +9,8 @@ npm i ionbase-ui
 
 React 18 or 19 is a peer dependency.
 
+**[Browse every component in Storybook →](https://raza-ahmed.github.io/ionbase-design-system/)**
+
 ## Usage
 
 Import the stylesheet once, at your app entry:

package/dist/components/FullCard.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export type FullCardAlignment = 'right' | 'left';
+/**
+ * Which heading element the headline renders as.
+ *
+ * `h1` is deliberately absent: a full card is a section within a page, never
+ * the page's own title.
+ */
+export type FullCardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface FullCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * Which side the media panel sits on. Matches Figma's `Alignment` variant,
+     * whose `Right` / `Left` name the media, not the text.
+     */
+    alignment?: FullCardAlignment;
+    /** Figma's `Eyebrow` slot — a Badge in the design, but any node works. */
+    eyebrow?: React.ReactNode;
+    /** Figma's `Headline`. Required: a card with no headline has no accessible name. */
+    headline: React.ReactNode;
+    /** Figma's `Description`. */
+    description?: React.ReactNode;
+    /** Figma's `Actions` slot — a secondary Button in the design. */
+    actions?: React.ReactNode;
+    /**
+     * Figma's `Media` slot. Rendered inside the framed screen holder, so pass
+     * the screenshot or embed itself, not the frame.
+     */
+    media?: React.ReactNode;
+    /**
+     * Heading element for the headline. Defaults to `h3`, matching the `Type/H3`
+     * text style Figma applies — but the level is a document-outline decision
+     * only the page knows, so it is a prop rather than a constant.
+     */
+    headingLevel?: FullCardHeadingLevel;
+    children?: React.ReactNode;
+}
+/**
+ * Full Card — the full-bleed case study row from Figma `Full Card` (592:857).
+ *
+ * A text column beside a framed media panel, split down the middle, mirrored
+ * by the `Alignment` variant.
+ *
+ * The split holds from 1080 and stacks below it, media above content in BOTH
+ * alignments — `Alignment` names a horizontal side and
+ * stops meaning anything once there is one column, so it does not get to
+ * decide the vertical order too. Size is a media query, not a prop, the same
+ * call Header makes about Device.
+ *
+ * WHY THE `show*` BOOLEANS ARE GONE
+ *
+ * Figma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside
+ * the slots they gate, because a Figma component instance always holds every
+ * layer and needs a switch to hide one. React has no such constraint — an
+ * absent prop is the switch. Badge made the same call with `Show Dot`, and
+ * keeping both would have let `showActions` and `actions` disagree.
+ *
+ * `headline` is required, and it is the only required prop. The heading is
+ * what makes this a section rather than a decorated div, and every other part
+ * of the card is optional in Figma too.
+ *
+ * No `'use client'`: nothing here is stateful or interactive. The interactive
+ * parts arrive through `actions`, and they carry their own boundary.
+ */
+export declare const FullCard: React.ForwardRefExoticComponent<FullCardProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=FullCard.d.ts.map

package/dist/components/FullCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullCard.d.ts","sourceRoot":"","sources":["../../src/components/FullCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,OAAO,CACR;IACC;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iEAAiE;IACjE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,mFAgEpB,CAAC"}

package/dist/components/FullCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Full Card — the full-bleed case study row from Figma `Full Card` (592:857).
+ *
+ * A text column beside a framed media panel, split down the middle, mirrored
+ * by the `Alignment` variant.
+ *
+ * The split holds from 1080 and stacks below it, media above content in BOTH
+ * alignments — `Alignment` names a horizontal side and
+ * stops meaning anything once there is one column, so it does not get to
+ * decide the vertical order too. Size is a media query, not a prop, the same
+ * call Header makes about Device.
+ *
+ * WHY THE `show*` BOOLEANS ARE GONE
+ *
+ * Figma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside
+ * the slots they gate, because a Figma component instance always holds every
+ * layer and needs a switch to hide one. React has no such constraint — an
+ * absent prop is the switch. Badge made the same call with `Show Dot`, and
+ * keeping both would have let `showActions` and `actions` disagree.
+ *
+ * `headline` is required, and it is the only required prop. The heading is
+ * what makes this a section rather than a decorated div, and every other part
+ * of the card is optional in Figma too.
+ *
+ * No `'use client'`: nothing here is stateful or interactive. The interactive
+ * parts arrive through `actions`, and they carry their own boundary.
+ */
+export const FullCard = forwardRef(({ alignment = 'right', eyebrow, headline, description, actions, media, headingLevel = 3, className, children, ...rest }, ref) => {
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("section", { ...rest, ref: ref, className: [
+            'ion-full-card',
+            `ion-full-card--media-${alignment}`,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [_jsx("div", { className: "ion-full-card__content", children: _jsxs("div", { className: "ion-full-card__body", children: [eyebrow && _jsx("div", { className: "ion-full-card__eyebrow", children: eyebrow }), _jsx(Heading, { className: "ion-full-card__headline", children: headline }), description && (_jsx("p", { className: "ion-full-card__description", children: description })), actions && _jsx("div", { className: "ion-full-card__actions", children: actions }), children] }) }), _jsx("div", { className: "ion-full-card__media", children: _jsx("div", { className: "ion-full-card__media-mat", children: _jsx("div", { className: "ion-full-card__media-frame", children: _jsx("div", { className: "ion-full-card__media-screen", children: media }) }) }) })] }));
+});
+FullCard.displayName = 'FullCard';
+//# sourceMappingURL=FullCard.js.map

package/dist/components/FullCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullCard.js","sourceRoot":"","sources":["../../src/components/FullCard.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA2C1C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAE5C,OAAO,CACL,sBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,eAAe;YACf,wBAAwB,SAAS,EAAE;YACnC,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAQZ,cAAK,SAAS,EAAC,wBAAwB,YACrC,eAAK,SAAS,EAAC,qBAAqB,aACjC,OAAO,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,EACnE,KAAC,OAAO,IAAC,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAW,EAChE,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,4BAA4B,YAAE,WAAW,GAAK,CAC5D,EACA,OAAO,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,EAClE,QAAQ,IACL,GACF,EAQN,cAAK,SAAS,EAAC,sBAAsB,YACnC,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,4BAA4B,YACzC,cAAK,SAAS,EAAC,6BAA6B,YAAE,KAAK,GAAO,GACtD,GACF,GACF,IACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Header.d.ts

@@ -1,22 +1,54 @@
 import React from 'react';
-export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
     /** Figma's Logo slot. Rendered at the start, never shrinks. */
     brand?: React.ReactNode;
-    /** Figma's `Center Slot`. Hidden below 1216px, as in the Tablet and Mobile variants. */
+    /** Figma's `Center Slot` — nav items. Inline on Desktop and Tablet; moves
+     *  into the Mobile-Open menu below the mobile breakpoint. */
     center?: React.ReactNode;
-    /** Figma's `End Slot`. */
+    /** Figma's `End Slot` — buttons and actions. Same placement rules as `center`. */
     end?: React.ReactNode;
+    /** Controlled Mobile-Open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Initial Mobile-Open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires whenever the menu toggle changes the state, controlled or not. */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name for the mobile menu toggle. */
+    menuLabel?: string;
     children?: React.ReactNode;
 }
 /**
- * Header renders Figma's three Device variants through media queries, not a
- * prop.
- *
- * Device is the one variant axis in the system the browser already knows the
- * answer to. Every other component takes its variant from the caller because
- * the caller is the only one who knows; a header is Mobile because the viewport
- * is narrow, and having React duplicate that judgement is how the two drift
- * apart. Breakpoints match the Breakpoint collection's container widths.
+ * Header renders Figma's four Device variants — Desktop, Tablet,
+ * Mobile-Closed, Mobile-Open — from one DOM tree.
+ *
+ * TWO AXES, AND THEY ARE NOT THE SAME KIND OF THING
+ *
+ * Figma spells Device as a single four-way variant, but it is really two: a
+ * *breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They
+ * are modelled differently here because they are known by different people.
+ *
+ *   Breakpoint is a media query. It is the one variant axis in the system the
+ *   browser already knows the answer to — a header is Mobile because the
+ *   viewport is narrow — and having React duplicate that judgement is how the
+ *   two drift apart. Breakpoints match the Breakpoint collection's container
+ *   widths: Tablet below 1216, Mobile below 896.
+ *
+ *   Open/Closed is a prop, because only the caller knows. It follows the
+ *   controlled/uncontrolled pair the rest of the system uses.
+ *
+ * ONE TREE, TWO LAYOUTS
+ *
+ * `center` and `end` sit inline in the bar on Desktop and Tablet, and inside
+ * the dropped Menu-Container on Mobile-Open. They are rendered once, in one
+ * wrapper, which is `display: contents` above the mobile breakpoint and an
+ * absolutely positioned panel below it. Rendering them twice — or moving them
+ * with JavaScript — would mean the same nav link exists twice in the
+ * accessibility tree, and would reset any state a caller put in a slot every
+ * time the viewport crossed 896px.
+ *
+ * The centre slot is no longer hidden on Tablet. Figma's Tablet variant ships
+ * it populated; the previous release collapsed it, which was correct for the
+ * previous design and is not for this one.
  *
  * A `<header>` element with no explicit role: it is a landmark already when it
  * is a direct child of body, which is where a page header sits.

package/dist/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wFAAwF;IACxF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,iFAkBlB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA2BxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;iEAC6D;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,iFAwElB,CAAC"}

package/dist/components/Header.js

@@ -1,18 +1,70 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useId, useState } from 'react';
+/** Figma's `Icon` on the Mobile-Closed toggle. Inlined for the same reason
+ *  NavItem's chevron is: it is part of the control, not a slot a caller fills. */
+const MenuGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M3 6h18M3 12h18M3 18h18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+/** Figma's `Icon` on the Mobile-Open toggle. */
+const CloseGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 5 14 14M19 5 5 19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 /**
- * Header renders Figma's three Device variants through media queries, not a
- * prop.
+ * Header renders Figma's four Device variants — Desktop, Tablet,
+ * Mobile-Closed, Mobile-Open — from one DOM tree.
  *
- * Device is the one variant axis in the system the browser already knows the
- * answer to. Every other component takes its variant from the caller because
- * the caller is the only one who knows; a header is Mobile because the viewport
- * is narrow, and having React duplicate that judgement is how the two drift
- * apart. Breakpoints match the Breakpoint collection's container widths.
+ * TWO AXES, AND THEY ARE NOT THE SAME KIND OF THING
+ *
+ * Figma spells Device as a single four-way variant, but it is really two: a
+ * *breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They
+ * are modelled differently here because they are known by different people.
+ *
+ *   Breakpoint is a media query. It is the one variant axis in the system the
+ *   browser already knows the answer to — a header is Mobile because the
+ *   viewport is narrow — and having React duplicate that judgement is how the
+ *   two drift apart. Breakpoints match the Breakpoint collection's container
+ *   widths: Tablet below 1216, Mobile below 896.
+ *
+ *   Open/Closed is a prop, because only the caller knows. It follows the
+ *   controlled/uncontrolled pair the rest of the system uses.
+ *
+ * ONE TREE, TWO LAYOUTS
+ *
+ * `center` and `end` sit inline in the bar on Desktop and Tablet, and inside
+ * the dropped Menu-Container on Mobile-Open. They are rendered once, in one
+ * wrapper, which is `display: contents` above the mobile breakpoint and an
+ * absolutely positioned panel below it. Rendering them twice — or moving them
+ * with JavaScript — would mean the same nav link exists twice in the
+ * accessibility tree, and would reset any state a caller put in a slot every
+ * time the viewport crossed 896px.
+ *
+ * The centre slot is no longer hidden on Tablet. Figma's Tablet variant ships
+ * it populated; the previous release collapsed it, which was correct for the
+ * previous design and is not for this one.
  *
  * A `<header>` element with no explicit role: it is a landmark already when it
  * is a direct child of body, which is where a page header sits.
  */
-export const Header = forwardRef(({ brand, center, end, className, children, ...rest }, ref) => (_jsxs("header", { ...rest, ref: ref, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsx("div", { className: "ion-header__center", children: center }), children, end && _jsx("div", { className: "ion-header__end", children: end })] })));
+export const Header = forwardRef(({ brand, center, end, open: openProp, defaultOpen = false, onOpenChange, menuLabel = 'Menu', className, children, ...rest }, ref) => {
+    const menuId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = isControlled ? openProp : uncontrolledOpen;
+    const toggle = useCallback(() => {
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    /*
+     * Escape closes the menu. It is a disclosure rather than a modal — no focus
+     * trap, no scroll lock — so Escape is the whole of the dismissal contract,
+     * and it is handled on the header rather than the document so a header that
+     * is never open never listens.
+     */
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && isOpen)
+            toggle();
+        rest.onKeyDown?.(event);
+    };
+    return (_jsxs("header", { ...rest, onKeyDown: handleKeyDown, ref: ref, "data-open": isOpen || undefined, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsxs("div", { className: "ion-header__menu", id: menuId, children: [_jsx("div", { className: "ion-header__center", children: center }), _jsx("div", { className: "ion-header__end", children: end })] }), children, _jsx("button", { type: "button", className: "ion-header__toggle", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": menuLabel, onClick: toggle, children: isOpen ? _jsx(CloseGlyph, {}) : _jsx(MenuGlyph, {}) })] }));
+});
 Header.displayName = 'Header';
 //# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAY1C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7D,qBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAE7D,KAAK,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,EAM1D,cAAK,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAO,EACjD,QAAQ,EACR,GAAG,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,GAAG,GAAO,IAC7C,CACV,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.d.ts

@@ -30,4 +30,6 @@ export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
 export type { TableProps, TableDensity, TableRowProps, TableRowSelection, TableCellProps, TableCellAlign, TableCellScope, } from './Table.js';
 export { ScrollProgress } from './ScrollProgress.js';
 export type { ScrollProgressProps, ScrollProgressSection, } from './ScrollProgress.js';
+export { FullCard } from './FullCard.js';
+export type { FullCardProps, FullCardAlignment, FullCardHeadingLevel, } from './FullCard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/dist/components/index.js

@@ -14,4 +14,5 @@ export { Divider } from './Divider.js';
 export { NavItem } from './NavItem.js';
 export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
 export { ScrollProgress } from './ScrollProgress.js';
+export { FullCard } from './FullCard.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/styles/full-card.css

@@ -0,0 +1,287 @@
+/*
+ * Full Card
+ *
+ * Measured from Figma `Full Card` (592:857) — a component set with one axis,
+ * `Alignment`, whose `Right` (590:189) and `Left` (592:858) variants mirror the
+ * media panel across the card.
+ *
+ *   content column   padding 0 / 48, centred, hugs half the width
+ *   media column     surface/page, 1px rule facing the content, padding-top 48
+ *   media mat        surface/sunken, 8px inset, radius/6xl on the outer top corner
+ *   media frame      surface/default, 1px rule on three sides, radius/5xl
+ *
+ * WHAT WAS NOT COPIED FROM FIGMA, AND WHY
+ *
+ * 1. The 366px height and 1296px width are canvas measurements, not
+ *    constraints. 366 is what the parts add up to — 48 (column) + 8 (mat) +
+ *    310 (screen) — so it falls out of the box model and stating it again
+ *    would only pin the card to one media size. 1296 is the desktop container
+ *    width, which belongs to the page, not the card.
+ *
+ * 2. The description container's gap reads 9px in Figma. There is no 9 on the
+ *    spacing ladder and no token that resolves to one, so it is a nudge rather
+ *    than a decision; this uses `spacing/8`. Change it in Figma if the 9 was
+ *    meant, and it becomes a real token here.
+ *
+ * 3. The left variant carries its media rule on the media column's LEFT edge —
+ *    i.e. the card's outer edge — while the right variant carries it on the
+ *    edge facing the text. Only one of those is a divider; the other is a
+ *    stray line at the boundary of the card. Read as a mirroring oversight in
+ *    Figma, so both variants draw the rule on the inner edge here. Worth
+ *    fixing in the file, since the two disagree today.
+ *
+ * 4. The left variant's media column also hard-codes a 48px top padding where
+ *    the right variant binds `spacing/48`. Same oversight, same resolution:
+ *    the token, both times.
+ *
+ * 5. Figma has no narrow variant of this card, and a 1296-wide two-column row
+ *    is unusable below its own width. The stacked layout is repo-owned, on the
+ *    same reasoning as Header's device media queries: the browser knows the
+ *    viewport, so the caller should not have to say.
+ *
+ *    The split holds from 1080 — a chosen number, not a Breakpoint collection
+ *    container width, so it is stated here rather than in the token pipeline.
+ *    The two halves are even only while there is room for it: below roughly
+ *    1190 the media column holds at the panel plus its gutter and the text
+ *    column takes what is left, bottoming out near 375px of text at 1080. The
+ *    896 query below changes no layout at all — only the text gutter.
+ *
+ * STACKED PUTS THE MEDIA ON TOP, IN BOTH ALIGNMENTS
+ *
+ * `column-reverse`, so the DOM stays content-then-media while the media renders
+ * above the text. Two reasons it is the media rather than the headline:
+ *
+ *   - `Alignment` stops meaning anything once there is only one column. Letting
+ *     it decide the vertical order would turn one axis into two, and a card
+ *     whose text sits above the panel on some rows and below it on others reads
+ *     as a bug rather than a variant.
+ *   - The panel is the thing the card is about. Stacked, it is also the only
+ *     part with a fixed height, so putting it second would push it below the
+ *     fold on every narrow viewport.
+ */
+.ion-full-card {
+  --ion-full-card-padding-x: var(--spacing-24);
+  --ion-full-card-padding-y: var(--spacing-32);
+  --ion-full-card-gap: var(--spacing-8);
+  --ion-full-card-media-width: 562px;
+
+  /*
+   * The least space allowed between the centre rule and the media panel.
+   * Figma's is 86 at the design width (648 column − 562 panel), which is not on
+   * the spacing ladder and is a consequence of the 50/50 split rather than a
+   * decision. `spacing/48` is the floor, and it is the same 48 the panel is
+   * already inset from the top of the card — so when the row is too narrow for
+   * an even split, the panel keeps a gutter that matches its own top edge.
+   */
+  --ion-full-card-media-gutter: var(--spacing-48);
+
+  /*
+   * Placeholder geometry: the height of Figma's empty `Screen Container`. It
+   * is a floor, not a size — real media in the slot sets the height and this
+   * stops an empty card collapsing. Override per instance if the media has a
+   * known aspect ratio.
+   */
+  --ion-full-card-media-min-height: 310px;
+
+  display: flex;
+  flex-direction: column-reverse;
+  width: 100%;
+  border-top: var(--border-width-default) solid var(--border-default);
+  border-bottom: var(--border-width-default) solid var(--border-default);
+  font-family: var(--font-family-sans);
+}
+
+/*
+ * `flex: 0 0 auto` while stacked, not the `1 1 0` the split uses. In a column
+ * flex container a zero basis is a zero HEIGHT that then grows to fill — which
+ * is the two halves splitting the viewport instead of sizing to their content.
+ * The split re-states `1 1 0` at Desktop, where the axis is horizontal and a
+ * zero basis is what makes the halves equal regardless of text length.
+ */
+.ion-full-card__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: var(--ion-full-card-padding-y) var(--ion-full-card-padding-x);
+  overflow: hidden;
+}
+
+.ion-full-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ion-full-card-gap);
+  width: 100%;
+}
+
+.ion-full-card__eyebrow,
+.ion-full-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
+}
+
+/*
+ * The type styles are restated rather than delegated to `.ion-text-h3` /
+ * `.ion-text-body-sm`, so the card renders correctly whatever classes the
+ * caller puts on the headline. Both sets read the same breakpoint-scoped
+ * `type/*` tokens, so they resize together.
+ */
+.ion-full-card__headline {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-h3);
+  line-height: var(--type-h3-line-height);
+  color: var(--text-default);
+}
+
+.ion-full-card__description {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  color: var(--text-secondary);
+}
+
+.ion-full-card__media {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding-top: var(--spacing-48);
+
+  /*
+   * Stacked, the panel is inset from the card's left and right edges too, not
+   * just the top — and by the text's own gutter, so the panel and the headline
+   * share an edge instead of sitting on two arbitrary ones. In the split the
+   * panel deliberately bleeds off the outer edge, so this resets to zero there.
+   */
+  padding-inline: var(--ion-full-card-padding-x);
+  background-color: var(--surface-page);
+
+  /*
+   * The stacked analogue of the vertical rule between the two halves. The
+   * frame deliberately has no bottom border, so without this the white screen
+   * would run straight into the text with nothing separating them.
+   */
+  border-bottom: var(--border-width-default) solid var(--border-default);
+  overflow: hidden;
+}
+
+.ion-full-card__media-mat {
+  width: 100%;
+  padding-top: var(--spacing-8);
+  padding-inline: var(--spacing-8);
+  background-color: var(--surface-sunken);
+  border-start-start-radius: var(--radius-6xl);
+  border-start-end-radius: var(--radius-6xl);
+  overflow: hidden;
+}
+
+/*
+ * Three sides only. The card is a full-bleed band and the panel runs off its
+ * bottom edge, so a fourth rule would draw a line the design does not have.
+ */
+.ion-full-card__media-frame {
+  width: 100%;
+  border: var(--border-width-default) solid var(--border-default);
+  border-bottom: none;
+  border-start-start-radius: var(--radius-5xl);
+  border-start-end-radius: var(--radius-5xl);
+  overflow: hidden;
+}
+
+.ion-full-card__media-screen {
+  width: 100%;
+  min-height: var(--ion-full-card-media-min-height);
+  background-color: var(--surface-default);
+}
+
+/* Tablet is still stacked; only the text gutter opens up. */
+@media (width >= 896px) {
+  .ion-full-card {
+    --ion-full-card-padding-x: var(--spacing-32);
+  }
+}
+
+/*
+ * Side by side from 1080 up. Below it the card stacks, media first, the panel
+ * takes the text's own gutters and both its top corners round rather than the
+ * single outer one.
+ */
+@media (width >= 1080px) {
+  .ion-full-card {
+    --ion-full-card-padding-x: var(--spacing-48);
+    --ion-full-card-padding-y: var(--spacing-0);
+
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .ion-full-card__content {
+    flex: 1 1 0;
+  }
+
+  .ion-full-card--media-left {
+    /*
+     * Reversed here, not in the DOM: the markup stays headline → actions →
+     * media in both alignments so reading and focus order follow the content
+     * rather than the mirror.
+     */
+    flex-direction: row-reverse;
+  }
+
+  /*
+   * `1 1 0` for the even split, floored so the panel is never the thing that
+   * gives. Below roughly 1190 the halves are narrower than the panel, and
+   * without the floor the panel shrank to fill its column — losing the gutter
+   * against the centre rule and reading as a full-bleed block right up to the
+   * moment the card stacked. The text column absorbs the difference instead:
+   * a paragraph reflows, and a panel with no gutter is a different design.
+   */
+  .ion-full-card__media {
+    align-items: flex-end;
+    flex: 1 1 0;
+    min-width: calc(
+      var(--ion-full-card-media-width) + var(--ion-full-card-media-gutter)
+    );
+    padding-inline: var(--spacing-0);
+    border-bottom: none;
+    border-inline-start: var(--border-width-default) solid var(--border-default);
+  }
+
+  .ion-full-card--media-left .ion-full-card__media {
+    align-items: flex-start;
+    border-inline-start: none;
+    border-inline-end: var(--border-width-default) solid var(--border-default);
+  }
+
+  .ion-full-card__media-mat {
+    width: var(--ion-full-card-media-width);
+    max-width: 100%;
+    padding-inline: var(--spacing-8) var(--spacing-0);
+    border-start-end-radius: var(--radius-none);
+  }
+
+  .ion-full-card--media-left .ion-full-card__media-mat {
+    padding-inline: var(--spacing-0) var(--spacing-8);
+    border-start-start-radius: var(--radius-none);
+    border-start-end-radius: var(--radius-6xl);
+  }
+
+  .ion-full-card__media-frame {
+    border-start-end-radius: var(--radius-none);
+  }
+
+  .ion-full-card--media-left .ion-full-card__media-frame {
+    border-start-start-radius: var(--radius-none);
+    border-start-end-radius: var(--radius-5xl);
+  }
+}