@usableapp/cardds 0.1.3 → 0.1.5

package/dist/index.js

@@ -2,74 +2,74 @@
 // markup contract the CSS documents, nothing more. cardds.js rides along for
 // the behaviours (sheet handle, stack open/close, dropdown value sync).
 import '../cardds.js';
-export { cx } from './cx';
-export * from './type/Icon';
-export { ICON_NAMES } from './type/icons';
-export * from './type/Text';
-export * from './scaffold/Screen';
-export * from './scaffold/AppBar';
-export * from './scaffold/TopBar';
-export * from './scaffold/ActionBar';
-export * from './scaffold/PagerAt';
-export * from './scaffold/FloatBar';
-export * from './scaffold/FilterRow';
-export * from './scaffold/Section';
-export * from './scaffold/EmptyState';
-export * from './scaffold/Centre';
-export * from './cards/Card';
-export * from './cards/CardHead';
-export * from './cards/CardFoot';
-export * from './cards/CardParts';
-export * from './cards/Stat';
-export * from './cards/Placeholder';
-export * from './sheets/SheetStack';
-export * from './sheets/CardBack';
-export * from './sheets/Sheet';
-export * from './sheets/SheetHead';
-export * from './sheets/SheetBody';
-export * from './sheets/SheetStage';
-export * from './sheets/Step';
-export * from './sheets/Drawer';
-export * from './actions/Btn';
-export * from './actions/IconBtn';
-export * from './actions/Chip';
-export * from './actions/Dot';
-export * from './actions/Dropdown';
-export * from './actions/Segment';
-export * from './actions/Fab';
-export * from './actions/BtnRow';
-export * from './actions/Link';
-export * from './forms/Field';
-export * from './forms/FileBtn';
-export * from './forms/AddRow';
-export * from './forms/Pin';
-export * from './forms/Composer';
-export * from './choice/Check';
-export * from './choice/DayStrip';
-export * from './choice/Calendar';
-export * from './choice/Mood';
-export * from './choice/Slider';
-export * from './numbers/Ring';
-export * from './numbers/Track';
-export * from './numbers/Band';
-export * from './numbers/DotGrid';
-export * from './numbers/Picker';
-export * from './numbers/Badge';
-export * from './numbers/Bars';
-export * from './people/Avatar';
-export * from './people/AvatarPick';
-export * from './lists/Row';
-export * from './lists/Kv';
-export * from './lists/Timeline';
-export * from './lists/Legend';
-export * from './media/Quote';
-export * from './media/Postcard';
-export * from './media/MapArea';
-export * from './media/Tile';
-export * from './media/Mosaic';
-export * from './layover/Banner';
-export * from './layover/Callout';
-export * from './layover/Deck';
-export * from './journey/Route';
-export * from './journey/TileBadge';
-export * from './journey/NoteRow';
+export { cx } from './cx.js';
+export * from './type/Icon.js';
+export { ICON_NAMES } from './type/icons.js';
+export * from './type/Text.js';
+export * from './scaffold/Screen.js';
+export * from './scaffold/AppBar.js';
+export * from './scaffold/TopBar.js';
+export * from './scaffold/ActionBar.js';
+export * from './scaffold/PagerAt.js';
+export * from './scaffold/FloatBar.js';
+export * from './scaffold/FilterRow.js';
+export * from './scaffold/Section.js';
+export * from './scaffold/EmptyState.js';
+export * from './scaffold/Centre.js';
+export * from './cards/Card.js';
+export * from './cards/CardHead.js';
+export * from './cards/CardFoot.js';
+export * from './cards/CardParts.js';
+export * from './cards/Stat.js';
+export * from './cards/Placeholder.js';
+export * from './sheets/SheetStack.js';
+export * from './sheets/CardBack.js';
+export * from './sheets/Sheet.js';
+export * from './sheets/SheetHead.js';
+export * from './sheets/SheetBody.js';
+export * from './sheets/SheetStage.js';
+export * from './sheets/Step.js';
+export * from './sheets/Drawer.js';
+export * from './actions/Btn.js';
+export * from './actions/IconBtn.js';
+export * from './actions/Chip.js';
+export * from './actions/Dot.js';
+export * from './actions/Dropdown.js';
+export * from './actions/Segment.js';
+export * from './actions/Fab.js';
+export * from './actions/BtnRow.js';
+export * from './actions/Link.js';
+export * from './forms/Field.js';
+export * from './forms/FileBtn.js';
+export * from './forms/AddRow.js';
+export * from './forms/Pin.js';
+export * from './forms/Composer.js';
+export * from './choice/Check.js';
+export * from './choice/DayStrip.js';
+export * from './choice/Calendar.js';
+export * from './choice/Mood.js';
+export * from './choice/Slider.js';
+export * from './numbers/Ring.js';
+export * from './numbers/Track.js';
+export * from './numbers/Band.js';
+export * from './numbers/DotGrid.js';
+export * from './numbers/Picker.js';
+export * from './numbers/Badge.js';
+export * from './numbers/Bars.js';
+export * from './people/Avatar.js';
+export * from './people/AvatarPick.js';
+export * from './lists/Row.js';
+export * from './lists/Kv.js';
+export * from './lists/Timeline.js';
+export * from './lists/Legend.js';
+export * from './media/Quote.js';
+export * from './media/Postcard.js';
+export * from './media/MapArea.js';
+export * from './media/Tile.js';
+export * from './media/Mosaic.js';
+export * from './layover/Banner.js';
+export * from './layover/Callout.js';
+export * from './layover/Deck.js';
+export * from './journey/Route.js';
+export * from './journey/TileBadge.js';
+export * from './journey/NoteRow.js';

package/dist/journey/NoteRow.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface NoteRowProps extends ComponentPropsWithoutRef<'div'> {
     icon?: IconName;
 }

package/dist/journey/NoteRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** NoteRow — icon + caption: transit hints, fine print. */
 export function NoteRow({ icon = 'clock', className, children, ...rest }) {
     return (_jsxs("div", { className: cx('note-row', className), ...rest, children: [_jsx(Icon, { name: icon, size: "sm" }), " ", children] }));

package/dist/journey/Route.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface RoutePoint {
     /** the place name (caption) */
     place: ReactNode;

package/dist/journey/Route.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Route — endpoint · dotted connector with an icon · endpoint: flights, buses, deliveries. */
 export function Route({ from, to, via = 'plane', className, ...rest }) {
     const point = (p, end) => (_jsxs("div", { className: cx('route__point', end && 'route__point--end'), children: [_jsx("span", { className: "route__place", children: p.place }), _jsx("span", { className: "route__code", children: p.code }), _jsx("span", { className: "route__time", children: p.time })] }));

package/dist/journey/TileBadge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** TileBadge — a tiny label over a big value: gate, seat, date, rating. */
 export function TileBadge({ label, value, sub, plain, corner, className, ...rest }) {
     return (_jsxs("span", { className: cx('tile-badge', plain && 'tile-badge--plain', corner && 'tile-badge--corner', className), ...rest, children: [_jsx("span", { className: "tile-badge__label", children: label }), _jsx("span", { className: "tile-badge__value", children: value }), sub != null && _jsx("span", { className: "tile-badge__label", children: sub })] }));

package/dist/layover/Banner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Banner — a chip that expands into a tinted card, no JS (a native details). */
 export function Banner({ summary, tone = 3, className, children, ...rest }) {
     return (_jsxs("details", { className: cx('banner', className), ...rest, children: [_jsx("summary", { children: summary }), _jsx("div", { className: cx('card banner__body', tone !== 1 && `card--${tone}`), children: children })] }));

package/dist/layover/Callout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Callout — a small card with a tail, pinned over a map or a media. */
 export function Callout({ title, sub, top, left, className, style, ...rest }) {
     return (_jsxs("div", { className: cx('callout', className), style: { top, left, translate: left ? '-50% 0' : undefined, ...style }, ...rest, children: [_jsx("span", { className: "callout__title", children: title }), sub != null && _jsx("span", { className: "callout__sub", children: sub })] }));

package/dist/layover/Deck.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Deck — swipe cards fanned behind each other; the LAST child is on top. Children are Cards (the front one may `fold`). */
 export function Deck({ className, ...rest }) {
     return _jsx("div", { className: cx('deck', className), ...rest });

package/dist/lists/Kv.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface KvProps extends ComponentPropsWithoutRef<'dl'> {
     /** hairlines between rows */
     lined?: boolean;

package/dist/lists/Kv.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Kv — key-value rows: label left, value right (Pay with · Time credits); children are KVRows. */
 export function Kv({ lined, className, ...rest }) {
     return _jsx("dl", { className: cx('kv', lined && 'kv--lined', className), ...rest });

package/dist/lists/Legend.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Dot } from '../actions/Dot';
+import { cx } from '../cx.js';
+import { Dot } from '../actions/Dot.js';
 /** Legend — signal dots with captions under a chart; children are LegendItems. */
 export function Legend({ className, ...rest }) {
     return _jsx("div", { className: cx('legend', className), ...rest });

package/dist/lists/Row.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /** the leading visual: an Avatar, an AvatarStack, an Icon */
     lead?: ReactNode;

package/dist/lists/Row.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /**
  * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.

package/dist/lists/Timeline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Timeline — a hairline with accent dots, date marks and entries to the right; children are TimelineItems. */
 export function Timeline({ className, ...rest }) {
     return _jsx("ol", { className: cx('timeline', className), ...rest });

package/dist/media/MapArea.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * MapArea — the box a map engine draws in, behind a stage sheet: the child is the engine's mount and fills it;
  * before tiles arrive (or offline) the box shows the wireframe street pattern, never a hole. The ring marks the

package/dist/media/Mosaic.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Mosaic — one big photo + two small in a card (three Placeholders or imgs). */
 export function Mosaic({ label = 'Photos', className, ...rest }) {
     return _jsx("div", { className: cx('mosaic', className), role: "img", "aria-label": label, ...rest });

package/dist/media/Postcard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Postcard — a member's introduction as a card in the hand: the photo (or the wireframe box) with the name in front,
  * the caption on the back; a tap on either face turns it over (cardds.js toggles `is-flipped`, `--motion-flip`).

package/dist/media/Quote.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Quote — a giant opening mark, big text, an overline attribution. */
 export function Quote({ text, by, sm, className, ...rest }) {
     return (_jsxs("blockquote", { className: cx('quote', sm && 'quote--sm', className), ...rest, children: [_jsx("p", { className: "quote__text", children: text }), by != null && _jsx("footer", { className: "quote__by", children: by })] }));

package/dist/media/Tile.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
     /** three across on a phone (attachments, upload kinds) */
     cols3?: boolean;

package/dist/media/Tile.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** TileGrid — big square Tiles in a responsive grid. */
 export function TileGrid({ cols3, bleed, className, ...rest }) {
     return _jsx("div", { className: cx('tile-grid', cols3 && 'tile-grid--3', bleed && 'bleed', className), ...rest });

package/dist/numbers/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Badge — the tiny count beside a title or tab ("Leads +9"). */
 export function Badge({ soft, className, ...rest }) {
     return _jsx("span", { className: cx('badge', soft && 'badge--soft', className), ...rest });

package/dist/numbers/Band.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
 export function Band({ label, num, foot, tone, className, ...rest }) {
     return (_jsxs("article", { className: cx('card card--band', tone && tone !== 1 && `card--${tone}`, className), ...rest, children: [_jsx("span", { className: "band__label", children: label }), _jsx("span", { className: "band__num", children: num }), foot != null && _jsx("span", { className: "band__foot", children: foot })] }));

package/dist/numbers/Bars.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Bars — three or four bars with a count on top, the glance chart; children are Bar. */
 export function Bars({ max, className, style, ...rest }) {
     return _jsx("div", { className: cx('bars', className), style: { ...style, '--max': max }, ...rest });

package/dist/numbers/DotGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** DotGrid — progress over time as a grid of dots, one element and three numbers (`--total`, `--done`, `--cols`). */
 export function DotGrid({ total, done, cols, label, className, style, ...rest }) {
     return (_jsx("div", { className: cx('dotgrid', className), style: { ...style, '--total': total, '--done': done, ...(cols ? { '--cols': cols } : {}) }, role: "img", "aria-label": label ?? `${done} of ${total}`, ...rest }));

package/dist/numbers/Picker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Picker — a horizontal snap picker, the centre value big between two accent rules; children are PickerItems. */
 export function Picker({ unit, label, className, children, ...rest }) {
     const rail = useRef(null);

package/dist/numbers/Ring.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Ring — the conic gauge with its value centred; data goes in as `--value`, the math lives in CSS. */
 export function Ring({ value, size, text, caption, label, className, style, children, ...rest }) {
     return (_jsxs("div", { className: cx('ring', size && `ring--${size}`, className), style: { ...style, '--value': value }, role: "img", "aria-label": label ?? `${value} percent`, ...rest, children: [text != null && _jsx("span", { className: "ring__value", children: text }), caption != null && _jsx("span", { className: "ring__label", children: caption }), children] }));

package/dist/numbers/Track.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Track — step progress in a dark pill: done · done · todo; children are TrackSteps holding an Icon each. */
 export function Track({ label = 'Progress', className, ...rest }) {
     return _jsx("ol", { className: cx('track', className), "aria-label": label, ...rest });

package/dist/people/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface AvatarProps extends ComponentPropsWithoutRef<'span'> {
     /** sm 32px · default 40px · lg 56px · xl 72px (a sheet head's icon ring) */
     size?: 'sm' | 'lg' | 'xl';

package/dist/people/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Avatar — initials by default, a photo or an Icon when there is one; sizes are the tokens. */
 export function Avatar({ size, outline, add, on, halo, center, src, alt = '', icon, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');

package/dist/people/AvatarPick.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. */
 export function AvatarPick({ bleed, label, className, ...rest }) {
     return _jsx("div", { className: cx('avatar-pick', bleed && 'bleed', className), "aria-label": label, ...rest });

package/dist/scaffold/ActionBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * ActionBar — the screen's ONE move, fixed at the bottom, OUTSIDE the Screen/Step (a sibling after it).
  * Plain: one wide primary Btn (the step that commits). `pager`: Back + Next as peers — buttons only; where you are is the

package/dist/scaffold/AppBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * AppBar — the app-context bar fixed at the very top: logo · two-line label · switcher.
  * It is fixed, so the Screen it sits in reserves its height (`--header-h`, 60px) automatically.

package/dist/scaffold/Centre.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { flushSync } from 'react-dom';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Centre — the centred group: ONE thing to read at the human centre of the screen, when that thing is not a lone
  * card: an EmptyState; a Card with its quiet second Btn and the PagerAt under it; a Deck with its DeckActions.

package/dist/scaffold/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (in a `Centre`)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in. */
 export function EmptyState({ icon, title, action, level = 'h2', className, children, ...rest }) {

package/dist/scaffold/FilterRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** FilterRow — a row of Dropdowns sharing the width, under the TopBar (this week · USD). */
 export function FilterRow({ className, ...rest }) {
     return _jsx("div", { className: cx('filter-row', className), ...rest });

package/dist/scaffold/FloatBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * FloatBar — the glass pill navigation floating over content, plus one detached round button.
  * Children are FloatBarItems; fixed at the bottom (absolute inside a SheetStage). Use it instead of an ActionBar

package/dist/scaffold/PagerAt.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** PagerAt — the "where am I" dots, centred under the card that changes (a child of Centre): one accent dot at the current page. Never inside an ActionBar. */
 export function PagerAt({ at, of, label, className, ...rest }) {
     return (_jsx("span", { className: cx('pager__at', className), role: "img", "aria-label": label ?? `Page ${at} of ${of}`, ...rest, children: Array.from({ length: of }, (_, i) => _jsx("i", { className: i + 1 === at ? 'is-at' : undefined }, i)) }));

package/dist/scaffold/Screen.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Screen — the mobile screen column: max 25rem wide, the standard horizontal inset, NO vertical padding
  * (bars reserve their own room). Every screen is base · top menu · bottom menu · content.

package/dist/scaffold/Section.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Section — frameless on-surface content + a CTA: an overline, a display heading, a paragraph, a CtaPack.
  * NEVER a card: sections are what the base says; cards are content the system offers.

package/dist/scaffold/TopBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * TopBar — the screen's title bar: back · TITLE · actions. Same 60px floor as the AppBar.
  * One per screen, first child of the Screen; a Step that follows it touches it.

package/dist/sheets/CardBack.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** CardBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open. */
 export function CardBack({ label = 'Back', className, ...rest }) {
     return (_jsx("button", { type: "button", className: cx('icon-btn icon-btn--sm card__back', className), "aria-label": label, ...rest, children: _jsx(Icon, { name: "arrow-left" }) }));

package/dist/sheets/Drawer.d.ts

@@ -1,7 +1,11 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface LiftProps extends ComponentPropsWithoutRef<'article'> {
+export interface ModalProps extends ComponentPropsWithoutRef<'article'> {
 }
-/** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
+/** Modal — the ask: ONE card at the centre of a `SheetStage ask`, two parts — a `Lift` (the thing being asked about, light, scrolls when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above to the centre · the drawer comes out below while the lift moves up. A click on any button in the Drawer plays them backwards and fires `cardds:modal` on the stage (`detail.answer` = the button's `data-answer`) for the app to remove it. */
+export declare function Modal({ className, ...rest }: ModalProps): import("react").JSX.Element;
+export interface LiftProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
 export declare function Lift({ className, ...rest }: LiftProps): import("react").JSX.Element;
 export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /** the question */
@@ -9,7 +13,7 @@ export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'titl
     /** the fine print under it */
     caption?: ReactNode;
 }
-/** Drawer — the dark strip at the bottom of an ask stage: a question, a caption, a BtnTrio (no · ask · yes). */
+/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons); give each button a `data-answer` — any of them closes the modal. */
 export declare function Drawer({ title, caption, className, children, ...rest }: DrawerProps): import("react").JSX.Element;
 export interface BtnTrioProps extends ComponentPropsWithoutRef<'div'> {
 }

package/dist/sheets/Drawer.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from 'react';
-import { cx } from '../cx';
-/** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
+import { cx } from '../cx.js';
+/** Modal — the ask: ONE card at the centre of a `SheetStage ask`, two parts — a `Lift` (the thing being asked about, light, scrolls when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above to the centre · the drawer comes out below while the lift moves up. A click on any button in the Drawer plays them backwards and fires `cardds:modal` on the stage (`detail.answer` = the button's `data-answer`) for the app to remove it. */
+export function Modal({ className, ...rest }) {
+    return _jsx("article", { className: cx('card modal', className), ...rest });
+}
+/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
 export function Lift({ className, ...rest }) {
-    return _jsx("article", { className: cx('card lift', className), ...rest });
+    return _jsx("div", { className: cx('modal__lift', className), ...rest });
 }
-/** Drawer — the dark strip at the bottom of an ask stage: a question, a caption, a BtnTrio (no · ask · yes). */
+/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons); give each button a `data-answer` — any of them closes the modal. */
 export function Drawer({ title, caption, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
+    return (_jsxs("div", { className: cx('modal__drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */
 export function BtnTrio({ className, children, ...rest }) {

package/dist/sheets/Sheet.d.ts

@@ -1,13 +1,13 @@
 import type { ComponentPropsWithoutRef } from 'react';
-export type SheetState = 'peek' | 'half' | 'full';
+export type SheetState = 'peek' | 'half' | '3q' | 'full';
 export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
-    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `full` (its top edge at the top bar) — a class, never a height */
+    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `3q` (three quarters showing) · `full` (its top edge at the top bar) — a class, never a height. A tap on the handle toggles between this state and peek; a drag snaps to any of `states` */
     state?: SheetState;
     /** floats above a footnote strip on a dim stage (bottom corners and border back) */
     raised?: boolean;
     /** the grab handle (tap / drag / keyboard via cardds.js); `false` for a sheet with no handle, a string sets its accessible name */
     handle?: boolean | string;
-    /** which states the handle cycles through, e.g. "peek half full" (default all three) */
+    /** which states a drag snaps to, e.g. "peek half full" (default all four: peek half 3q full) */
     states?: string;
 }
 /**

package/dist/sheets/Sheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Sheet — the SINGLE sheet: one card as a bottom sheet holding what the member ACTS on (controls, or small `Card sm`
  * content cards). Always the full height of its box — a Step or a SheetStage — a state is only how far it slid.

package/dist/sheets/SheetBody.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** SheetBody — everything under a Sheet's head: the one thing that scrolls; its scroll padding keeps a focused control above the cut. Content never goes straight into the Sheet. */
 export function SheetBody({ className, ...rest }) {
     return _jsx("div", { className: cx('sheet__body', className), ...rest });