@usableapp/cardds 0.7.96 → 0.7.97

package/bin/cardds.mjs

@@ -78,7 +78,7 @@ In the app's entry, once:
   import './theme.css';                       // after cardds.css
 
 Start a screen from a template (Walkthrough · Home · CallSheet · Splash) or compose the components —
-import them, never copy their markup: the behaviour lives in the component. Gallery: see README.`);
+import them, never copy their markup: the behaviour lives in the component. Gallery: see docs/reference.md.`);
   return 0;
 }
 

package/css/actions.css

@@ -199,7 +199,7 @@
 /* --sm: a small LABEL (a name on a note, a tag in a tight head) — low and tight; never a tap target */
 .chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); }
 .chip--on { background: var(--chip-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--chip-on-ink, var(--card-ink)); border-color: transparent; }
-/* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
+/* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (docs/reference.md 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); } /* the chip's own fill's muted words: a muted chip on the dark card is still a light chip */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@@ -229,7 +229,7 @@
   font-size: var(--fs-body);
   text-align: left;
 }
-/* muted: the value is still the default (README 13) */
+/* muted: the value is still the default (docs/reference.md 13) */
 .dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--action-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate var(--motion-quick) ease; }

package/css/numbers.css

@@ -46,7 +46,7 @@
   --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
   --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
   /* the track lays down the accent fill of where it stands (the brand on a light card, the card's ink on the brand card), so it is a
-     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (README rule 10) */
+     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (docs/reference.md rule 10) */
   --dark: var(--accent-dark);
   list-style: none;
   margin: 0;

package/css/palette.css

@@ -3,7 +3,7 @@
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.
-   A palette sets its grounds, its two ink sets (onlight, ondark; README "Ink follows its ground") and the side of any ground
+   A palette sets its grounds, its two ink sets (onlight, ondark; docs/reference.md "Ink follows its ground") and the side of any ground
    that is not the default's (tokens.css: tones 1, 2, 4 and the paper light; tone 3, tone 5 and the brand dark). Each ink set
    holds 4.5:1 on every ground of its side; a tone with words on its 12% tint (a banner, a step bar, today) holds them there too.
    ============================================================ */

package/css/stack.css

@@ -32,7 +32,7 @@
    bottom, the headroom above is the base's (block below).
    --flood (with --closed): an open sheet fills the whole screen, over the top bar.
    Direct children only, five at most (slots are :nth-child below):
-   first = the back of the stack, last = the front. README "Sheet stack
+   first = the back of the stack, last = the front. docs/reference.md "Sheet stack
    markup". The SheetStack component opens and closes a --tap stack; without it the
    stack still renders, it just won't open.
    ============================================================ */

package/css/theme.template.css

@@ -43,7 +43,7 @@
   /* --color-brand: #ef4e0b; */     /* the primary action, the strong card */
   /* --color-on-brand: #fff4ec; */  /* the words on the brand */
 
-  /* ---- ink: two sets, ONLIGHT and ONDARK (README "Ink follows its ground") ----
+  /* ---- ink: two sets, ONLIGHT and ONDARK (docs/reference.md "Ink follows its ground") ----
      Every word and glyph on a light ground is onlight, on a dark ground ondark. Set the two sets; each one's ink and its muted shade
      hold 4.5:1 on every ground of its side (inkGrounds() measures it). Unset, --color-ink and --color-on-brand derive them.
      --ink-onlight --ink-onlight-muted  --ink-ondark --ink-ondark-muted
@@ -55,7 +55,7 @@
 
   /* ---- colour roles: only where a derivation is not what you want — a role set here wins over it ----
      --surface  --card-1-bg … --card-5-bg   (five card tones: fills only, their words follow their side)
-     --card-border   (a card's fill or its --card-border holds 3:1 on its ground: cardGrounds(), README)
+     --card-border   (a card's fill or its --card-border holds 3:1 on its ground: cardGrounds(), docs/reference.md)
      --accent  --action-bg  --action-border
      --pos --neg  --dot-a --dot-b
      --signal-ok-onlight --signal-warn-onlight --signal-error-onlight --signal-info-onlight   (the signal set: green · yellow · red ·

package/css/tokens.css

@@ -180,7 +180,7 @@
 
   /* INK: TWO SETS, ONLIGHT AND ONDARK (Lh 2026-10-18: "there are text colours ONLIGHT and ONDARK. When the ground is light, use
      onlight; when the ground is dark, use ondark"). Words and glyphs alike (icons, marks, dots, a check, a knob). Each set holds its
-     ink and its muted shade to 4.5:1 on every ground of its side. README "Ink follows its ground". */
+     ink and its muted shade to 4.5:1 on every ground of its side. docs/reference.md "Ink follows its ground". */
   --ink-onlight: var(--color-ink, #141414);
   --ink-onlight-muted: var(--_onlight-muted, #575757);   /* 4.6:1 on the water note and 4.9 on tone 4's grey, the darkest light grounds */
   --ink-ondark: var(--color-on-brand, #ffffff);
@@ -279,7 +279,7 @@
    marks, dots: currentColor), --card-muted (secondary words), the four signals, --on-accent (the ink on the accent fill, whose
    side is --accent-dark) and --accent-ink (the brand as a glyph). A piece with no fill of its own reads only these, so a dark
    surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
-   tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; README "Ink follows its ground" */
+   tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
   .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .sheet--paper > .sheet__body,
   .postcard__band, .track__step, .toggle, .chip) {

package/dist/actions/Chip.d.ts

@@ -3,7 +3,7 @@ import { type DotTone } from './Dot.js';
 export interface ChipProps extends ComponentProps<'span'> {
     /** filled accent: the selected / live state */
     on?: boolean;
-    /** quiet: an untouched default value — muted words, the thin edge, nothing to find the eye (README rule 13) */
+    /** quiet: an untouched default value — muted words, the thin edge, nothing to find the eye (docs/reference.md rule 13) */
     muted?: boolean;
     /** a leading signal dot: `a` (the accent signal), `b` (the secondary), or one of the signal set — ok · warn · error · info */
     dot?: 'a' | 'b' | DotTone;

package/dist/actions/Dropdown.d.ts

@@ -13,7 +13,7 @@ export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange' |
     label?: ReactNode;
     /** right-aligned trigger: the panel grows leftwards (in TopBar actions) */
     end?: boolean;
-    /** quiet: the value is still the default — muted words; drop it once the member picks (README rule 13) */
+    /** quiet: the value is still the default — muted words; drop it once the member picks (docs/reference.md rule 13) */
     muted?: boolean;
     /** MenuItems, each with a `value` */
     children?: ReactNode;

package/dist/cardds.css

@@ -221,7 +221,7 @@
 
   /* INK: TWO SETS, ONLIGHT AND ONDARK (Lh 2026-10-18: "there are text colours ONLIGHT and ONDARK. When the ground is light, use
      onlight; when the ground is dark, use ondark"). Words and glyphs alike (icons, marks, dots, a check, a knob). Each set holds its
-     ink and its muted shade to 4.5:1 on every ground of its side. README "Ink follows its ground". */
+     ink and its muted shade to 4.5:1 on every ground of its side. docs/reference.md "Ink follows its ground". */
   --ink-onlight: var(--color-ink, #141414);
   --ink-onlight-muted: var(--_onlight-muted, #575757);   /* 4.6:1 on the water note and 4.9 on tone 4's grey, the darkest light grounds */
   --ink-ondark: var(--color-on-brand, #ffffff);
@@ -320,7 +320,7 @@
    marks, dots: currentColor), --card-muted (secondary words), the four signals, --on-accent (the ink on the accent fill, whose
    side is --accent-dark) and --accent-ink (the brand as a glyph). A piece with no fill of its own reads only these, so a dark
    surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
-   tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; README "Ink follows its ground" */
+   tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
   .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .sheet--paper > .sheet__body,
   .postcard__band, .track__step, .toggle, .chip) {
@@ -356,7 +356,7 @@
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.
-   A palette sets its grounds, its two ink sets (onlight, ondark; README "Ink follows its ground") and the side of any ground
+   A palette sets its grounds, its two ink sets (onlight, ondark; docs/reference.md "Ink follows its ground") and the side of any ground
    that is not the default's (tokens.css: tones 1, 2, 4 and the paper light; tone 3, tone 5 and the brand dark). Each ink set
    holds 4.5:1 on every ground of its side; a tone with words on its 12% tint (a banner, a step bar, today) holds them there too.
    ============================================================ */
@@ -1125,7 +1125,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    bottom, the headroom above is the base's (block below).
    --flood (with --closed): an open sheet fills the whole screen, over the top bar.
    Direct children only, five at most (slots are :nth-child below):
-   first = the back of the stack, last = the front. README "Sheet stack
+   first = the back of the stack, last = the front. docs/reference.md "Sheet stack
    markup". The SheetStack component opens and closes a --tap stack; without it the
    stack still renders, it just won't open.
    ============================================================ */
@@ -2734,7 +2734,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --sm: a small LABEL (a name on a note, a tag in a tight head) — low and tight; never a tap target */
 .chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); }
 .chip--on { background: var(--chip-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--chip-on-ink, var(--card-ink)); border-color: transparent; }
-/* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
+/* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (docs/reference.md 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); } /* the chip's own fill's muted words: a muted chip on the dark card is still a light chip */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@@ -2764,7 +2764,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   font-size: var(--fs-body);
   text-align: left;
 }
-/* muted: the value is still the default (README 13) */
+/* muted: the value is still the default (docs/reference.md 13) */
 .dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--action-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate var(--motion-quick) ease; }
@@ -3028,7 +3028,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
   --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
   /* the track lays down the accent fill of where it stands (the brand on a light card, the card's ink on the brand card), so it is a
-     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (README rule 10) */
+     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (docs/reference.md rule 10) */
   --dark: var(--accent-dark);
   list-style: none;
   margin: 0;

package/dist/cards/inkGrounds.d.ts

@@ -24,7 +24,7 @@ export type InkGround = {
  * every glyph drawn as a fill (a dot, a day's dot, the pager's dots, a check's tick, a switch's knob, a strong calendar mark's ring) inside
  * `root`, finds the ground it is really drawn on (each ancestor's fill, from the page down, through every opacity on the way, to the first
  * opaque one and past it) and returns one row per piece: words 4.5:1, large words, icons and glyphs 3:1. Each row names the side its ground
- * declares and the ink set its colour is (README "Ink follows its ground": light ground → onlight, dark ground → ondark). What the browser
+ * declares and the ink set its colour is (docs/reference.md "Ink follows its ground": light ground → onlight, dark ground → ondark). What the browser
  * draws is what is measured, so the project's theme.css, palette and finish are in it. Not measured: a piece on a picture (a `url()` ground
  * is not one colour; a gradient is read as decoration unless it is one colour, a fill laid as an image), a disabled control (WCAG exempts
  * it), a hidden one, words drawn by CSS `content`. Run it where the theme is loaded:

package/dist/cards/inkGrounds.js

@@ -3,7 +3,7 @@
  * every glyph drawn as a fill (a dot, a day's dot, the pager's dots, a check's tick, a switch's knob, a strong calendar mark's ring) inside
  * `root`, finds the ground it is really drawn on (each ancestor's fill, from the page down, through every opacity on the way, to the first
  * opaque one and past it) and returns one row per piece: words 4.5:1, large words, icons and glyphs 3:1. Each row names the side its ground
- * declares and the ink set its colour is (README "Ink follows its ground": light ground → onlight, dark ground → ondark). What the browser
+ * declares and the ink set its colour is (docs/reference.md "Ink follows its ground": light ground → onlight, dark ground → ondark). What the browser
  * draws is what is measured, so the project's theme.css, palette and finish are in it. Not measured: a piece on a picture (a `url()` ground
  * is not one colour; a gradient is read as decoration unless it is one colour, a fill laid as an image), a disabled control (WCAG exempts
  * it), a hidden one, words drawn by CSS `content`. Run it where the theme is loaded: