@usableapp/cardds 0.7.51 → 0.7.52

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 > 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.
 
+## 0.7.52 — 2026-10-05
+
+### Changed
+- **A `StackSheet` tab's disc shows only while its sheet is open** (Lh 2026-10-04). On the home, every peeked sheet's tabs are the icon alone — none is filled. The chosen tab fills as the sheet rises (the one that was pressed, or the page the sheet opens on) and the fill leaves as the sheet folds. Which page is current is unchanged; only the paint waits. Nothing to change in a screen.
+
 ## 0.7.51 — 2026-10-04
 
 ### Added

package/css/finish.css

@@ -65,6 +65,11 @@
     0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
 }
+/* a peeked stack tab is the icon alone: no sheen and no shadow until its sheet is open (the fill fades with the sheet) */
+[data-finish="lit"] .sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab {
+  background-image: none;
+  box-shadow: none;
+}
 [data-finish="lit"] :is(.btn:not(.btn--quiet), .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert))):active:not(:disabled) {
   background-image: none;
   box-shadow: var(--finish-control-down);

package/css/stack.css

@@ -285,7 +285,7 @@
 .sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
-   filled (.icon-btn--invert); a count is a small circle over the icon's top right corner ---- */
+   filled (.icon-btn--invert) only while the sheet is open; a count is a small circle over the icon's top right corner ---- */
 .stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
 /* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
    (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
@@ -304,8 +304,19 @@
 @media (prefers-reduced-motion: reduce) {
   .stack-sheet__title.is-long .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
   .stack-sheet__title.is-long { text-overflow: ellipsis; }
+  .stack-sheet__tab { transition: none; } /* the disc is simply there while open, and gone while closed */
+}
+.stack-sheet__tab {
+  position: relative;
+  /* the disc fades with the sheet: in as it rises, out as it folds, and across when another tab is pressed.
+     scale stays on the press (actions.css) so the give under a finger stays quick */
+  transition:
+    scale var(--motion-press) ease-out,
+    background-color var(--motion-sheet) ease,
+    color var(--motion-sheet) ease,
+    border-color var(--motion-sheet) ease,
+    box-shadow var(--motion-sheet) ease;
 }
-.stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
   top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
@@ -323,6 +334,12 @@
 /* a tab not chosen is the icon alone — no ring, no ground (Lh 2026-09-23: "the circle around is not pretty"); the chosen one turns
    to the opposite colour (.icon-btn--invert). */
 .stack-sheet__tab:not(.icon-btn--invert) { border-color: transparent; background: transparent; box-shadow: none; color: inherit; } /* the sheet's own ink, on any paper */
+/* a CLOSED sheet shows no chosen disc either (Lh 2026-10-04): arriving on the home, every tab of every sheet is the icon
+   alone. The fill fades in with the rise — the tab that was pressed, or the one the sheet opens on — and fades out as the
+   sheet folds. The class stays (which page it is); only the paint waits for .is-open. */
+.sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab.icon-btn--invert {
+  border-color: transparent; background-color: transparent; box-shadow: none; color: inherit;
+}
 /* the last tab's ICON lines up with the inset, not its button's edge: an unchosen tab shows the glyph only, so the button's own
    margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
 .card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }

package/dist/cardds.css

@@ -1286,7 +1286,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
-   filled (.icon-btn--invert); a count is a small circle over the icon's top right corner ---- */
+   filled (.icon-btn--invert) only while the sheet is open; a count is a small circle over the icon's top right corner ---- */
 .stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
 /* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
    (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
@@ -1305,8 +1305,19 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 @media (prefers-reduced-motion: reduce) {
   .stack-sheet__title.is-long .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
   .stack-sheet__title.is-long { text-overflow: ellipsis; }
+  .stack-sheet__tab { transition: none; } /* the disc is simply there while open, and gone while closed */
+}
+.stack-sheet__tab {
+  position: relative;
+  /* the disc fades with the sheet: in as it rises, out as it folds, and across when another tab is pressed.
+     scale stays on the press (actions.css) so the give under a finger stays quick */
+  transition:
+    scale var(--motion-press) ease-out,
+    background-color var(--motion-sheet) ease,
+    color var(--motion-sheet) ease,
+    border-color var(--motion-sheet) ease,
+    box-shadow var(--motion-sheet) ease;
 }
-.stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
   top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
@@ -1324,6 +1335,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* a tab not chosen is the icon alone — no ring, no ground (Lh 2026-09-23: "the circle around is not pretty"); the chosen one turns
    to the opposite colour (.icon-btn--invert). */
 .stack-sheet__tab:not(.icon-btn--invert) { border-color: transparent; background: transparent; box-shadow: none; color: inherit; } /* the sheet's own ink, on any paper */
+/* a CLOSED sheet shows no chosen disc either (Lh 2026-10-04): arriving on the home, every tab of every sheet is the icon
+   alone. The fill fades in with the rise — the tab that was pressed, or the one the sheet opens on — and fades out as the
+   sheet folds. The class stays (which page it is); only the paint waits for .is-open. */
+.sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab.icon-btn--invert {
+  border-color: transparent; background-color: transparent; box-shadow: none; color: inherit;
+}
 /* the last tab's ICON lines up with the inset, not its button's edge: an unchosen tab shows the glyph only, so the button's own
    margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
 .card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
@@ -4136,6 +4153,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
     0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
 }
+/* a peeked stack tab is the icon alone: no sheen and no shadow until its sheet is open (the fill fades with the sheet) */
+[data-finish="lit"] .sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab {
+  background-image: none;
+  box-shadow: none;
+}
 [data-finish="lit"] :is(.btn:not(.btn--quiet), .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert))):active:not(:disabled) {
   background-image: none;
   box-shadow: var(--finish-control-down);

package/dist/sheets/StackSheet.d.ts

@@ -32,8 +32,9 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
 }
 /**
  * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
- * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons, the chosen one filled;
- * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
+ * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons. The chosen one is filled
+ * only while this sheet is open — a closed home shows every icon plain; the disc fades in with the rise and out with the fold.
+ * A count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
  * is closed — see `Home`). A direct child of `SheetStack`.
  */
 export declare function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel, backAt, className, children, ...rest }: StackSheetProps): import("react").JSX.Element;

package/dist/sheets/StackSheet.js

@@ -14,8 +14,9 @@ import { Badge } from '../numbers/Badge.js';
 import { word } from '../words.js';
 /**
  * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
- * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons, the chosen one filled;
- * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
+ * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons. The chosen one is filled
+ * only while this sheet is open — a closed home shows every icon plain; the disc fades in with the rise and out with the fold.
+ * A count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
  * is closed — see `Home`). A direct child of `SheetStack`.
  */
 export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = word('back'), backAt = 'none', className, children, ...rest }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.51",
+  "version": "0.7.52",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",