ionbase-ui 0.3.0 → 0.5.0

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/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/button.css

@@ -89,10 +89,34 @@
   border-style: solid;
   border-width: var(--border-width-default);
   border-radius: var(--radius-md);
+
+  /*
+   * `base` + `ease-out`, from the shared motion ladder in motion.css.
+   *
+   * This was `150ms cubic-bezier(0.4, 0, 0.2, 1)`, hardcoded here and in eleven
+   * other stylesheets. Both halves were wrong for a state change: 150ms is
+   * short enough to read as a jump rather than a change, and that curve is
+   * symmetric — its slow tail means a colour appears to arrive late and then
+   * snap. `ease-out` leaves immediately and decelerates in, so the same change
+   * reads as settling.
+   */
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    box-shadow var(--ion-duration-base) var(--ion-ease-out);
+}
+
+/*
+ * Press drops to `fast`.
+ *
+ * A press must resolve while the pointer is still down or the feedback reads as
+ * lag rather than as a press — it is the one interaction the user is actively
+ * waiting on. Release still returns at `base`, because the rule only overrides
+ * the duration while the pressed state holds.
+ */
+.ion-button:active,
+.ion-button[data-pressed='true'] {
+  transition-duration: var(--ion-duration-fast);
 }
 
 /* Size modifiers — radius, border-width and font-weight are size-invariant. */
@@ -204,12 +228,12 @@
 
 @media (hover: hover) {
   .ion-button--primary-neutral:hover {
-    background-color: var(--surface-inverse);
+    background-color: var(--surface-inverse-subtle);
   }
 }
 
 .ion-button--primary-neutral[data-hovered='true'] {
-  background-color: var(--surface-inverse);
+  background-color: var(--surface-inverse-subtle);
 }
 
 .ion-button--primary-neutral:active,
@@ -229,16 +253,20 @@
   border-color: var(--border-strong);
 }
 
+/*
+ * The border does NOT move on hover — Figma binds `border/strong` on Default,
+ * Hover and Focus alike, and only steps to `border/stronger` on Pressed. The
+ * hover step was previously reproduced here and is a difference the current
+ * design does not draw.
+ */
 @media (hover: hover) {
   .ion-button--secondary:hover {
     background-color: var(--surface-page);
-    border-color: var(--border-stronger);
   }
 }
 
 .ion-button--secondary[data-hovered='true'] {
   background-color: var(--surface-page);
-  border-color: var(--border-stronger);
 }
 
 .ion-button--secondary:active,
@@ -246,6 +274,7 @@
   --ion-button-elevation: var(--ion-button-pressed);
 
   background-color: var(--surface-muted);
+  border-color: var(--border-stronger);
 }
 
 /* Tertiary Variant — intentionally flat; a ghost button has no surface to raise. */

package/dist/styles/checkbox.css

@@ -124,8 +124,8 @@
     (var(--ion-checkbox-line-height) - var(--ion-checkbox-size)) / 2
   );
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-checkbox__mark {

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);
+  }
+}

package/dist/styles/index.css

@@ -36,6 +36,7 @@
 @import url('./divider.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
+@import url('./full-card.css');
 
 /*
  * Every IonBase element is border-box.

package/dist/styles/input.css

@@ -63,8 +63,8 @@
   font-size: var(--ion-input-font-size);
   line-height: var(--ion-input-line-height);
   transition:
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 /*

package/dist/styles/menu.css

@@ -54,7 +54,7 @@
   width: 100%;
   cursor: pointer;
   user-select: none;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-menu__icon,

package/dist/styles/nav-item.css

@@ -37,7 +37,7 @@
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-nav-item__icon,
@@ -47,7 +47,7 @@
   justify-content: center;
   flex-shrink: 0;
   color: var(--icon-tertiary);
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-nav-item__icon svg,

package/dist/styles/radio.css

@@ -96,8 +96,8 @@
   /* Centred on the label's first line — see checkbox.css. */
   margin-top: calc((var(--ion-radio-line-height) - var(--ion-radio-size)) / 2);
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-radio__dot {

package/dist/styles/scroll-progress.css

@@ -29,8 +29,10 @@
  *
  * REVEAL TRANSITION IS DELIBERATELY PLAIN
  *
- * Opacity and an 8px slide, the same 150ms/cubic-bezier(0.4,0,0.2,1) language
- * every hover state in the system already uses. The deeper choreography this
+ * Opacity and an 8px slide on the shared motion ladder — `--ion-duration-base`
+ * and `--ion-ease-out`, the same language every hover state in the system
+ * already uses. It reads as a reveal rather than travel, so it stays on `base`
+ * rather than taking the `slow` rung. The deeper choreography this
  * component could eventually justify — a staggered reveal per row, easing
  * that matches the rail's own scale — is future work, tracked in
  * docs/motion-system.md, not invented here ahead of that decision.
@@ -62,7 +64,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--type-body-sm);
   line-height: var(--type-body-sm-line-height);
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-scroll-progress__rail {
@@ -76,7 +78,7 @@
   width: var(--spacing-32);
   height: var(--border-width-thick);
   background-color: var(--border-strong);
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-scroll-progress__tick--active {
@@ -118,9 +120,9 @@
   pointer-events: none;
   transform: translateY(-50%) translateX(-4px);
   transition:
-    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    visibility 150ms;
+    opacity var(--ion-duration-base) var(--ion-ease-out),
+    transform var(--ion-duration-base) var(--ion-ease-out),
+    visibility var(--ion-duration-base);
 }
 
 .ion-scroll-progress__panel[data-open='true'] {
@@ -145,8 +147,8 @@
   text-align: left;
   cursor: pointer;
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 @media (hover: hover) {

package/dist/styles/select.css

@@ -47,8 +47,8 @@
   font-size: var(--ion-select-font-size);
   line-height: var(--ion-select-line-height);
   transition:
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 /* Small shares Medium's padding — see input.css. */

package/dist/styles/table.css

@@ -107,7 +107,7 @@
 
 .ion-table tr {
   background-color: var(--surface-default);
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-table tbody tr {

package/dist/styles/tabs.css

@@ -80,9 +80,9 @@
   cursor: pointer;
   user-select: none;
   transition:
-    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-tabs__item--sm {

package/dist/styles/toggle.css

@@ -115,8 +115,8 @@
     (var(--ion-toggle-line-height) - var(--ion-toggle-track-h)) / 2
   );
   transition:
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
 }
 
 .ion-toggle__thumb {
@@ -127,7 +127,14 @@
 
   /* Cast, not bevelled — and the same in both states, so it is unconditional. */
   box-shadow: var(--ion-shadow-shadow-xs);
-  transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /*
+   * `ease-in-out`, not the `ease-out` every colour change uses. The knob is the
+   * one thing in the system that travels the same path in both directions, so
+   * a symmetric curve is what makes on and off feel like the same gesture
+   * reversed. Everything else enters a state and stays there.
+   */
+  transition: margin var(--ion-duration-base) var(--ion-ease-in-out);
 }
 
 .ion-toggle__label {

package/dist/styles/tokens/base.css

@@ -288,7 +288,7 @@
   --surface-raised: #ffffff;
   --surface-overlay: #ffffff;
   --surface-scrim: rgba(0, 0, 0, 0.4);
-  --surface-inverse: #131923;
+  --surface-inverse: #1d2735;
   --surface-inverse-subtle: #384252;
   --surface-disabled: #f0f2f4;
   --surface-placeholder: #dde0e4;

package/dist/styles/tokens/elevation.css

@@ -34,25 +34,25 @@
     0px 8px 8px -4px rgb(0 0 0 / 4%);
 
   --ion-shadow-raised-lifted-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 40%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 6%),
     0px 1px 2px 0px rgb(7 10 13 / 4%);
 
   --ion-shadow-raised-lifted-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 30%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 2px 0px rgb(7 10 13 / 8%),
     0px 2px 4px 0px rgb(7 10 13 / 5%);
 
   --ion-shadow-raised-lifted-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 40%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 32%),
     0px 1px 2px 0px rgb(7 10 13 / 16%);
 
   --ion-shadow-raised-lifted-xl:
-    inset 0px -6px 2px 0px rgb(0 0 0 / 35%),
+    inset 0px -6px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 6px 2px 0px rgb(255 255 255 / 20%),
     0px 1px 2px 0px rgb(7 10 13 / 30%),
     0px 2px 4px 0px rgb(7 10 13 / 14%);
@@ -74,19 +74,19 @@
     0px 2px 6px 0px rgb(7 10 13 / 20%);
 
   --ion-shadow-raised-flush-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 40%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 30%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 40%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-xl:
-    inset 0px -6px 2px 0px rgb(0 0 0 / 35%),
+    inset 0px -6px 2px 0px rgb(0 0 0 / 25%),
     inset 0px 6px 2px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-inset-lifted-xs:

package/dist/styles/tokens/index.css

@@ -4,3 +4,4 @@
 @import "./breakpoint-mobile.css";
 @import "./typography.css";
 @import "./elevation.css";
+@import "./motion.css";

package/dist/styles/tokens/motion.css

@@ -0,0 +1,51 @@
+/**
+ * Generated from motion.json. Do not edit.
+ * Regenerate with `pnpm --filter @ionbase-ui/tokens build`.
+ *
+ * Source: motion.json (repo-owned — NOT a Figma export)
+ *
+ * These are NOT tokens. Figma expresses motion as prototype reactions rather
+ * than variables, so there is nothing for them to alias; the values are
+ * committed and generated instead. The `--ion-` prefix marks that, the same
+ * way it does for `--ion-shadow-*`.
+ *
+ * A LADDER, NOT RECIPES. Pick a rung per component. There is deliberately no
+ * `--ion-duration-hover`: that is indexed by usage, so it needs a new name
+ * per usage pattern.
+ *
+ * Reduced motion is handled globally in the package's index.css, not here —
+ * one block covering every `ion-*` rule, rather than a media query per value.
+ */
+
+:root {
+  /* Press and release. Must resolve before the finger leaves the button, or */
+  /* the feedback reads as lag rather than as a press. */
+  --ion-duration-fast: 120ms;
+
+  /* The default for any state colour change — hover, focus, selection, */
+  /* validation. Replaces a hardcoded 150ms that read as abrupt. */
+  --ion-duration-base: 200ms;
+
+  /* Anything that travels or changes size: panels, overlays, disclosure. */
+  /* Distance needs time; a colour does not. */
+  --ion-duration-slow: 320ms;
+
+  /* The default. Leaves immediately and decelerates into the end state, so */
+  /* the change reads as settling. Correct for anything entering a state and */
+  /* staying there. */
+  --ion-ease-out: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Accelerates and arrives at full velocity. Only for things leaving — */
+  /* dismissing an overlay, collapsing a panel. On a state a user is entering */
+  /* it reads as a snap. */
+  --ion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  /* Symmetric, for two-way travel where the same element moves back and */
+  /* forth — the Toggle knob. This is the curve every stylesheet used for */
+  /* everything, which is why state changes felt jerky. */
+  --ion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Continuous progress only, where easing would misreport position. Never */
+  /* for interaction. */
+  --ion-ease-linear: linear;
+}

package/dist/tokens/index.d.ts

@@ -1093,7 +1093,7 @@ export declare const tokenValues: {
         readonly Dark: "{alpha.black-60}";
     };
     readonly "surface/inverse": {
-        readonly Light: "{neutral.900}";
+        readonly Light: "{neutral.800}";
         readonly Dark: "{base.white}";
     };
     readonly "surface/inverse-subtle": {

package/dist/tokens/index.js

@@ -698,7 +698,7 @@ export const tokenValues = {
         "Dark": "{alpha.black-60}"
     },
     "surface/inverse": {
-        "Light": "{neutral.900}",
+        "Light": "{neutral.800}",
         "Dark": "{base.white}"
     },
     "surface/inverse-subtle": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",