@usableapp/cardds 0.7.97 → 0.7.98

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-> For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
+> For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap. Each release section after 0.7.97 carries one `Components:` line, written by `node scripts/components-changed.mjs <previous tag>`: the components the release changed, or `all` when a file changed that any component can read (a token, the build), or `none`; check only the screens that import those.
+
+## 0.7.98 — 2026-10-18
+
+Components: all
+
+### Added
+- **A release names the components it changed.** Before → after: a project taking a new version could not tell which screens it reaches, so it re-ran all of them → each section from this one on carries one `Components:` line (names, `all` when a shared file such as a token changed, or `none`), written by `node scripts/components-changed.mjs <previous tag>`; `npm run release` publishes no version without it. Check only the screens that import what it names.
+
+### Changed
+- **A card has no edge again** (Lh 2026-10-18: "this design never used a card edge"). Before → after: 0.7.96 set `--card-border: var(--on-surface-muted)` under any `data-palette` and kept it under the `lit` and `sticker` finishes, so every card, and every `SheetStack` and `Sheet` sheet (each is a `.card`), drew a 1.5px line → `--card-border` is `transparent` in coloured mode and under every finish, as before 0.7.96; `print` and `ink` draw their own line as the finish; the wireframe keeps its black line. A card stands apart from its ground by its fill: `cardGrounds()` still measures it, and a failing row now names only the fill's tokens (`--card-N-bg` or the ground's) and its shortfall, never an edge. `tests/card-grounds.spec.js` no longer holds every stock palette to 3:1, because the light tones on a light ground do not reach it by fill; which colours carry it is the theme's call. A project that wants the line back sets `--card-border` in its own `theme.css`.
 
 ## 0.7.97 — 2026-10-18
 

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

@@ -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/theme.template.css

@@ -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(), docs/reference.md)
+     --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

@@ -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 */

package/dist/cardds.css

@@ -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 */
@@ -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); }
 
@@ -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 };
         }));
     }