@usableapp/cardds 0.7.96 → 0.7.98

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

@@ -20,10 +20,9 @@
    so a finish sits in any palette; the one plain white is the sticker's backing paper and the lit edge's light.
    ============================================================ */
 
-/* every finish: the finish IS the controls' edge, so the wireframe's control border steps back (as [data-palette] in palette.css). The card
-   keeps its --card-border: lit's ring and sticker's white cut do not reach 3:1 on a light ground (palette.css, THE CARD KEEPS AN EDGE);
-   print and ink draw their own line below */
-[data-finish] { --action-border: transparent; }
+/* every finish: the finish IS the edge, so the wireframe's two borders step back (as [data-palette] in palette.css, A CARD HAS NO EDGE);
+   ink puts its own line there below */
+[data-finish] { --card-border: transparent; --action-border: transparent; }
 
 /* ============================================================
    lit — the light comes from above:

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.
    ============================================================ */
@@ -124,17 +124,15 @@
   --dot-a: #dd9787;  --dot-b: #b08a5a;
 }
 
-/* Colored palettes add a soft elevation under the card's edge. */
+/* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
    --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
    "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
-   edge (forms.css); and the controls' wireframe border steps back, as in every stock palette.
-   THE CARD KEEPS AN EDGE (Lh 2026-10-18, timebank's help sheet: white cards on the white sheet, "no different from
-   the background at all"). A card is one boundary, and WCAG 2.2 SC 1.4.11 asks 3:1 for it against what it stands
-   on. Light cards on a light ground cannot reach 3:1 by fill (a tone-1 card in a tone-1 sheet is 1:1), so the
-   edge carries it: the muted ink of the ground, which every palette already holds to AA on its surface.
-   `cardGrounds()` measures each tone on each ground (tests/card-grounds.spec.js). */
-[data-palette] { --card-border: var(--on-surface-muted); --action-border: transparent; }
+   edge (forms.css); and the two wireframe borders step back, as in every stock palette.
+   A CARD HAS NO EDGE (Lh 2026-10-18, ruled after 0.7.96 gave every card and every sheet a line: "this design never
+   used a card edge"). A card stands apart from its ground by its FILL; `cardGrounds()` measures that fill and
+   names the tokens to move. Never answer a card that cannot be seen with a border. */
+[data-palette] { --card-border: transparent; --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }

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   (transparent in coloured mode: a card stands apart by its fill, 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);
@@ -205,7 +205,7 @@
   --card-4-bg: #d4d4d0;
   --card-5-bg: #3d3d3d;
 
-  --card-border: #141414;      /* wireframe: visible outline; coloured mode: --on-surface-muted (palette.css). Its edge, or the fill, holds 3:1 on the ground: cardGrounds() */
+  --card-border: #141414;      /* wireframe: visible outline; coloured mode and every finish: transparent, the card stands apart by its fill (cardGrounds()) */
 
   /* actions */
   --accent: var(--color-brand, #141414);           /* primary CTA fill */
@@ -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);
@@ -246,7 +246,7 @@
   --card-4-bg: #d4d4d0;
   --card-5-bg: #3d3d3d;
 
-  --card-border: #141414;      /* wireframe: visible outline; coloured mode: --on-surface-muted (palette.css). Its edge, or the fill, holds 3:1 on the ground: cardGrounds() */
+  --card-border: #141414;      /* wireframe: visible outline; coloured mode and every finish: transparent, the card stands apart by its fill (cardGrounds()) */
 
   /* actions */
   --accent: var(--color-brand, #141414);           /* primary CTA fill */
@@ -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.
    ============================================================ */
@@ -477,18 +477,16 @@
   --dot-a: #dd9787;  --dot-b: #b08a5a;
 }
 
-/* Colored palettes add a soft elevation under the card's edge. */
+/* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
    --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
    "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
-   edge (forms.css); and the controls' wireframe border steps back, as in every stock palette.
-   THE CARD KEEPS AN EDGE (Lh 2026-10-18, timebank's help sheet: white cards on the white sheet, "no different from
-   the background at all"). A card is one boundary, and WCAG 2.2 SC 1.4.11 asks 3:1 for it against what it stands
-   on. Light cards on a light ground cannot reach 3:1 by fill (a tone-1 card in a tone-1 sheet is 1:1), so the
-   edge carries it: the muted ink of the ground, which every palette already holds to AA on its surface.
-   `cardGrounds()` measures each tone on each ground (tests/card-grounds.spec.js). */
-[data-palette] { --card-border: var(--on-surface-muted); --action-border: transparent; }
+   edge (forms.css); and the two wireframe borders step back, as in every stock palette.
+   A CARD HAS NO EDGE (Lh 2026-10-18, ruled after 0.7.96 gave every card and every sheet a line: "this design never
+   used a card edge"). A card stands apart from its ground by its FILL; `cardGrounds()` measures that fill and
+   names the tokens to move. Never answer a card that cannot be seen with a border. */
+[data-palette] { --card-border: transparent; --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }
 
@@ -1125,7 +1123,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 +2732,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 +2762,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 +3026,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;
@@ -5594,10 +5592,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    so a finish sits in any palette; the one plain white is the sticker's backing paper and the lit edge's light.
    ============================================================ */
 
-/* every finish: the finish IS the controls' edge, so the wireframe's control border steps back (as [data-palette] in palette.css). The card
-   keeps its --card-border: lit's ring and sticker's white cut do not reach 3:1 on a light ground (palette.css, THE CARD KEEPS AN EDGE);
-   print and ink draw their own line below */
-[data-finish] { --action-border: transparent; }
+/* every finish: the finish IS the edge, so the wireframe's two borders step back (as [data-palette] in palette.css, A CARD HAS NO EDGE);
+   ink puts its own line there below */
+[data-finish] { --card-border: transparent; --action-border: transparent; }
 
 /* ============================================================
    lit — the light comes from above:

package/dist/cards/cardGrounds.js

@@ -74,7 +74,7 @@ export function cardGrounds(root = document.body) {
             const edge = Math.max(1, ...edges.map((c) => ratio(paint([...under, c]), ground)));
             const f = ratio(fill, ground), pass = f >= 3 || edge >= 3;
             const where = g.ground === 'screen' ? 'on the screen' : `in a ${g.ground}'s body`;
-            const problem = pass ? '' : `tone ${tone} card ${where}: fill ${f}:1 (--card-${tone}-bg ${hex(fill)} on ${g.token} ${hex(ground)}), edge ${edge}:1 (--card-border); one of them needs 3:1 — the fill is short by ${Math.round((3 - f) * 100) / 100}, or give --card-border a colour of 3:1 on ${hex(ground)}`;
+            const problem = pass ? '' : `tone ${tone} card ${where}: fill ${f}:1 (--card-${tone}-bg ${hex(fill)} on ${g.token} ${hex(ground)}); the fill needs 3:1 and is short by ${Math.round((3 - f) * 100) / 100} — move --card-${tone}-bg or ${g.token}, never an edge`;
             return { ground: g.ground, tone, fill: f, edge, pass, problem };
         }));
     }

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: