@usableapp/cardds 0.7.18 → 0.7.20

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 > 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.20 — 2026-09-28
+
+Lh, from timebank on a real Android phone (card #153). Nothing to change in a screen.
+
+### Changed
+- A `Sheet`'s title is ONE line, cut with … when too long (was: wrapped to two lines). The thing at the head's end keeps its place; a caption still takes its own row. A wrapped title no longer makes a taller peek strip — there is none.
+- `SheetSteps`: the open step's content (words, `Field`, `Pin` cells…) sits inset to the step title's words — the bar's own inset (`--sheet-step-bar-pad-x`), or its own knob `--sheet-step-inner-pad-x`.
+- `SheetSteps`: room under the LAST step (`--sheet-steps-end`, default sp-6) — scrolled to the end it no longer touches the sheet's foot button.
+
+### Fixed
+- A folded `SheetStep`'s long `summary` ran past the sheet's right edge; it is cut with … inside its row now.
+
+### Added
+- `Bullets` + `Bullet` (lists): each item led by a small square picture one line tall (`1lh`), the words wrap beside it. `pic` = an image URL or any node, on the list (every item) or on an item (its own); none = the placeholder square. Knobs `--bullets-pic-size` · `--bullets-pic-gap` · `--bullets-pic-radius` · `--bullets-gap` · `--bullets-font`. Gallery: `/Bullets`.
+
+## 0.7.19 — 2026-09-28
+
+### Fixed
+- SAFE AREA (Lh, timebank on Android Chrome: the bar's ← → buttons lay half under the gesture bar). With `viewport-fit=cover` the phone draws the page under its own bars; cardds kept nothing clear of them. Now it publishes `--safe-top` / `--safe-bottom` (`env(safe-area-inset-*)`, 0 without cover) and keeps clear of them: the `ActionBar`'s buttons (its ground still runs to the edge), a peeked `Sheet`'s head, a sheet's foot button and the end of its body, `FloatBar`, `Fab`, a stage's foot; a fill `Screen` starts under the status bar. A keyboard up covers the gesture bar, so the bottom room then goes to the keyboard alone. `--bar-reserve` includes it.
+- README says the ONE viewport meta cardds expects: `width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content`.
+- Nothing to change in a screen. A component of the app's own pinned to an edge reads `--safe-top` / `--safe-bottom`.
+
 ## 0.7.18 — 2026-09-27
 
 ### Fixed

package/README.md

@@ -42,6 +42,19 @@ import '@usableapp/cardds/dist/cardds.css';
 import './theme.css';   // the project's own look, after the system's — see "A project's theme"
 ```
 
+**The viewport meta cardds expects** (one way for every app):
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
+```
+
+`viewport-fit=cover` = the app runs edge to edge under the phone's own bars; cardds publishes their room as
+`--safe-top` / `--safe-bottom` (from `env(safe-area-inset-*)`, 0 without cover) and keeps what the member reads or taps
+clear of them — the bottom bar's buttons, a sheet's peeked head, its foot and the end of its body, the float bar, the FAB,
+a stage's foot; a fill `Screen` starts under the status bar — while every ground still runs to the edge. A
+component of the app's own pinned to an edge reads the same two tokens. `interactive-widget=resizes-content` =
+Android shrinks the page for the keyboard (`--kb` stays 0 there; iOS publishes it).
+
 Every behaviour is the component's own React code — the `Sheet`'s handle (tap, drag,
 keyboard) with the focus and on-screen-keyboard raises, the `SheetStack` opening and
 closing, the `Pin` auto-advance, the `Modal`'s leaving — each controlled like an input

package/css/actions.css

@@ -94,7 +94,7 @@
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
 /* fab: the square floating action, bottom-right of a stage or screen */
-.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
+.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3) + var(--safe-bottom)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
 
 /* ---- buttons ---- */
 .btn {
@@ -220,13 +220,13 @@
    (step.css); on a scrolling screen a sticky last row (below). --bar-reserve stays published — the bar's nominal
    height — for the one rule that still needs it without measuring: a .card--centre's cap (card.css).
    --kb is the on-screen keyboard's height (cardds.js): the bar rides above it. */
-:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 .action-bar {
   position: relative;
   z-index: var(--z-bar); /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
-  padding: var(--sp-3) var(--sp-4) var(--sp-5);
+  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--_safe-b-open)); /* its ground runs under the phone's gesture bar, its buttons stand above it */
   display: flex;
   gap: var(--sp-2);
 }
@@ -293,12 +293,12 @@
 .action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
 .action-bar__tier > .btn { flex: 1; }
 .action-bar__tier--link { justify-content: center; min-height: 0; } /* a Link under the buttons, e.g. "details" that opens a Modal — its row as tall as a small link, not a tap (Lh 2026-09-23) */
-:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 /* more rows (Lh 2026-09-23: a bar may hold several rows of controls — keeping it short is the designer's job): each row past two
    adds a tap-tall row and its gap to the reserve, so the words above never run under the bar */
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 
 /* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }

package/css/base.css

@@ -105,6 +105,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex;
   flex-direction: column;
   height: 100dvh;
+  padding-top: var(--safe-top); /* under the phone's status bar when the app runs edge to edge (Lh 2026-09-28) */
   overflow: clip;
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
   container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */

package/css/layover.css

@@ -198,7 +198,7 @@
 .float-bar {
   position: fixed;
   inset-inline: 0;
-  bottom: var(--sp-5);
+  bottom: calc(var(--sp-5) + var(--safe-bottom));
   max-width: var(--screen-w);
   margin-inline: auto;
   padding-inline: var(--float-bar-pad-x, var(--sp-4));

package/css/lists.css

@@ -204,3 +204,13 @@
 .link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a WaitLink counting down) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
+
+/* ---- bullets: a list, each item led by a small square picture as tall as a line of its words (Lh 2026-09-28, timebank #153) ----
+   <ul class="bullets"><li class="bullets__item"><img class="bullets__pic" alt=""><span class="bullets__text">…</span></li></ul>
+   The picture is the app's (an image or any node); none = the wireframe's crossed square. It sits on the item's FIRST line
+   (1lh — the line's own height, so it follows the text size), the words wrap beside it, never under it. */
+.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bullets-gap, var(--sp-3)); font: var(--bullets-font, var(--type-body)); }
+.bullets__item { display: flex; align-items: start; gap: var(--bullets-pic-gap, var(--sp-3)); min-width: 0; }
+.bullets__pic { flex: none; inline-size: var(--bullets-pic-size, 1lh); block-size: var(--bullets-pic-size, 1lh); min-height: 0; object-fit: contain; border-radius: var(--bullets-pic-radius, 0rem); display: grid; place-items: center; }
+.bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
+.bullets__text { flex: 1; min-width: 0; }

package/css/sheet.css

@@ -81,7 +81,7 @@
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
-  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -90,7 +90,7 @@
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h)); }
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
@@ -148,12 +148,12 @@
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad) + var(--_safe-b-open)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
   align-content: end;
-  padding: 0 var(--card-pad) var(--card-pad);
+  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;
   translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
@@ -169,7 +169,7 @@
 .sheet > :not(.sheet__body) { flex-shrink: 0; }
 :is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover)); }
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
 
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
@@ -208,6 +208,10 @@
      whole ask is that switch: peek shows it (a row is --tap tall plus its own
      padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
 .sheet > .card__head { min-height: var(--sheet-head-h); }
+/* a sheet's title is ONE line, cut with … when the phone is too narrow (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน"
+   wrapped to two lines at 390px) — the thing at its end keeps its place beside it; a caption still takes its own row */
+.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { flex-wrap: nowrap; }
+.sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .sheet__head {
   display: grid;
   grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
@@ -349,7 +353,9 @@
   position: absolute;
   inset-inline: 0;
   bottom: 0;
-  height: var(--tap-lg);
+  height: calc(var(--tap-lg) + var(--_safe-b-open));
+  padding-bottom: var(--_safe-b-open);
+  box-sizing: border-box;
   margin: 0;
   display: grid;
   place-items: center;
@@ -379,11 +385,11 @@
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
 .sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
-.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
 
 .sheet-step {
   position: relative; min-width: 0;
-  display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
+  display: grid; grid-template-columns: minmax(0, 1fr); /* the column is the step's width, never its words' — a long summary is cut with …, it never pushes the row past the sheet's edge (Lh 2026-09-28, #153) */ grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
   --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
@@ -394,7 +400,7 @@
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
 .sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
-  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
@@ -408,7 +414,7 @@
 .sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
-.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }

package/css/step.css

@@ -136,7 +136,7 @@
   margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge; its own padding is the inset */
   margin-bottom: calc(var(--sp-2) - var(--screen-gap));
 }
-.screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+.screen.screen--fill:has(> .appbar) { padding-top: var(--safe-top); --header-gap: 0rem; }
 /* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }

package/css/tokens.css

@@ -238,6 +238,13 @@
    sheet.css sets the values; these initial values are what a sheet
    falls back to when its own declaration cannot resolve.
    ============================================================ */
+/* SAFE AREA (Lh 2026-09-28, timebank on Android: the bar's buttons lay under the gesture bar) — the room the phone's own
+   bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
+   PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
+   --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
+:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+* { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
+
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
 @property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */

package/dist/cardds.css

@@ -279,6 +279,13 @@
    sheet.css sets the values; these initial values are what a sheet
    falls back to when its own declaration cannot resolve.
    ============================================================ */
+/* SAFE AREA (Lh 2026-09-28, timebank on Android: the bar's buttons lay under the gesture bar) — the room the phone's own
+   bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
+   PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
+   --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
+:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+* { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
+
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
 @property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */
@@ -553,6 +560,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex;
   flex-direction: column;
   height: 100dvh;
+  padding-top: var(--safe-top); /* under the phone's status bar when the app runs edge to edge (Lh 2026-09-28) */
   overflow: clip;
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
   container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */
@@ -1355,7 +1363,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
-  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -1364,7 +1372,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h)); }
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
@@ -1422,12 +1430,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad) + var(--_safe-b-open)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
   align-content: end;
-  padding: 0 var(--card-pad) var(--card-pad);
+  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;
   translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
@@ -1443,7 +1451,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet > :not(.sheet__body) { flex-shrink: 0; }
 :is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover)); }
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
 
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
@@ -1482,6 +1490,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      whole ask is that switch: peek shows it (a row is --tap tall plus its own
      padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
 .sheet > .card__head { min-height: var(--sheet-head-h); }
+/* a sheet's title is ONE line, cut with … when the phone is too narrow (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน"
+   wrapped to two lines at 390px) — the thing at its end keeps its place beside it; a caption still takes its own row */
+.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { flex-wrap: nowrap; }
+.sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .sheet__head {
   display: grid;
   grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
@@ -1623,7 +1635,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: absolute;
   inset-inline: 0;
   bottom: 0;
-  height: var(--tap-lg);
+  height: calc(var(--tap-lg) + var(--_safe-b-open));
+  padding-bottom: var(--_safe-b-open);
+  box-sizing: border-box;
   margin: 0;
   display: grid;
   place-items: center;
@@ -1653,11 +1667,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
 .sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
-.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
 
 .sheet-step {
   position: relative; min-width: 0;
-  display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
+  display: grid; grid-template-columns: minmax(0, 1fr); /* the column is the step's width, never its words' — a long summary is cut with …, it never pushes the row past the sheet's edge (Lh 2026-09-28, #153) */ grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
   --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
@@ -1668,7 +1682,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
 .sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
-  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
@@ -1682,7 +1696,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
-.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
@@ -1832,7 +1846,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge; its own padding is the inset */
   margin-bottom: calc(var(--sp-2) - var(--screen-gap));
 }
-.screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+.screen.screen--fill:has(> .appbar) { padding-top: var(--safe-top); --header-gap: 0rem; }
 /* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
@@ -2098,7 +2112,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
 /* fab: the square floating action, bottom-right of a stage or screen */
-.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
+.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3) + var(--safe-bottom)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
 
 /* ---- buttons ---- */
 .btn {
@@ -2224,13 +2238,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    (step.css); on a scrolling screen a sticky last row (below). --bar-reserve stays published — the bar's nominal
    height — for the one rule that still needs it without measuring: a .card--centre's cap (card.css).
    --kb is the on-screen keyboard's height (cardds.js): the bar rides above it. */
-:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 .action-bar {
   position: relative;
   z-index: var(--z-bar); /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
-  padding: var(--sp-3) var(--sp-4) var(--sp-5);
+  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--_safe-b-open)); /* its ground runs under the phone's gesture bar, its buttons stand above it */
   display: flex;
   gap: var(--sp-2);
 }
@@ -2297,12 +2311,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
 .action-bar__tier > .btn { flex: 1; }
 .action-bar__tier--link { justify-content: center; min-height: 0; } /* a Link under the buttons, e.g. "details" that opens a Modal — its row as tall as a small link, not a tap (Lh 2026-09-23) */
-:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 /* more rows (Lh 2026-09-23: a bar may hold several rows of controls — keeping it short is the designer's job): each row past two
    adds a tap-tall row and its gap to the reserve, so the words above never run under the bar */
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 
 /* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
@@ -3234,6 +3248,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
 
+/* ---- bullets: a list, each item led by a small square picture as tall as a line of its words (Lh 2026-09-28, timebank #153) ----
+   <ul class="bullets"><li class="bullets__item"><img class="bullets__pic" alt=""><span class="bullets__text">…</span></li></ul>
+   The picture is the app's (an image or any node); none = the wireframe's crossed square. It sits on the item's FIRST line
+   (1lh — the line's own height, so it follows the text size), the words wrap beside it, never under it. */
+.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bullets-gap, var(--sp-3)); font: var(--bullets-font, var(--type-body)); }
+.bullets__item { display: flex; align-items: start; gap: var(--bullets-pic-gap, var(--sp-3)); min-width: 0; }
+.bullets__pic { flex: none; inline-size: var(--bullets-pic-size, 1lh); block-size: var(--bullets-pic-size, 1lh); min-height: 0; object-fit: contain; border-radius: var(--bullets-pic-radius, 0rem); display: grid; place-items: center; }
+.bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
+.bullets__text { flex: 1; min-width: 0; }
+
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
 /* ============================================================
    cardds/media.css — media & display inside cards:
@@ -3717,7 +3741,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .float-bar {
   position: fixed;
   inset-inline: 0;
-  bottom: var(--sp-5);
+  bottom: calc(var(--sp-5) + var(--safe-bottom));
   max-width: var(--screen-w);
   margin-inline: auto;
   padding-inline: var(--float-bar-pad-x, var(--sp-4));

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bullets.js';
 export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';

package/dist/index.js

@@ -69,6 +69,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bullets.js';
 export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';

package/dist/lists/Bullets.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** a bullet's picture: an image URL, or any node (an Icon, an <img> of the app's own) */
+export type BulletPic = string | ReactNode;
+export interface BulletsProps extends ComponentProps<'ul'> {
+    /** the picture every item leads with, unless the item gives its own; none = a placeholder square */
+    pic?: BulletPic;
+}
+/** Bullets — a list whose items each lead with a small square PICTURE as tall as a line of their words (Lh 2026-09-28: an agreement's
+ *  short version, one point per item); children are Bullets. Pictures are decoration (alt=""), the words carry the meaning. */
+export declare function Bullets({ pic, className, ...rest }: BulletsProps): import("react").JSX.Element;
+export interface BulletProps extends ComponentProps<'li'> {
+    /** this item's own picture (wins over the list's) */
+    pic?: BulletPic;
+}
+/** Bullet — one item of Bullets: its picture, then its words. */
+export declare function Bullet({ pic, className, children, ...rest }: BulletProps): import("react").JSX.Element;

package/dist/lists/Bullets.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { cx } from '../cx.js';
+const PicOfList = createContext(undefined);
+/** Bullets — a list whose items each lead with a small square PICTURE as tall as a line of their words (Lh 2026-09-28: an agreement's
+ *  short version, one point per item); children are Bullets. Pictures are decoration (alt=""), the words carry the meaning. */
+export function Bullets({ pic, className, ...rest }) {
+    return (_jsx(PicOfList.Provider, { value: pic, children: _jsx("ul", { className: cx('bullets', className), ...rest }) }));
+}
+/** Bullet — one item of Bullets: its picture, then its words. */
+export function Bullet({ pic, className, children, ...rest }) {
+    const ofList = useContext(PicOfList);
+    const shown = pic ?? ofList;
+    return (_jsxs("li", { className: cx('bullets__item', className), ...rest, children: [shown == null ? _jsx("span", { className: "bullets__pic ph", "aria-hidden": "true" })
+                : typeof shown === 'string' ? _jsx("img", { className: "bullets__pic", src: shown, alt: "" })
+                    : _jsx("span", { className: "bullets__pic", "aria-hidden": "true", children: shown }), _jsx("span", { className: "bullets__text", children: children })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.18",
+  "version": "0.7.20",
   "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.",