@usableapp/cardds 0.1.0

package/css/actions.css

@@ -0,0 +1,292 @@
+/* ============================================================
+   cardds/actions.css — contextual commands around/inside cards:
+   topbar, chips, buttons, selects, bottom CTA pack
+   ============================================================ */
+
+/* ---- the bars across the top of a screen: one height, whatever they carry ----
+   .topbar (screen title) and .appbar (app context) are the same bar with
+   different contents, so the height is declared here once rather than left to
+   whichever control happens to be tallest. Measured before this rule existed:
+   a title-only topbar 46px, one with an .icon-btn--sm 60px, with a full-size
+   .icon-btn 64px, with a .btn 70px. --header-h is a floor, not a cap — a bar
+   given a deliberately taller control still grows instead of clipping it. */
+.topbar, .appbar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding-block: var(--sp-2);
+  min-height: var(--header-h);
+}
+
+/* ---- top bar: back + screen title ---- */
+.topbar .t-h1 {
+  text-transform: uppercase;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-block: 0.15em; /* Thai marks survive the clip — see card.css, the head rule */
+  margin-block: -0.15em;
+}
+.topbar__actions { margin-left: auto; display: flex; gap: var(--sp-2); }
+
+/* a screen whose one big move sits at the top right (home's "ขอความช่วยเหลือ" — Lh 2026-09-09:
+   no bottom bar on the home screen) puts a primary .btn in the top bar's actions; it stands at
+   the hero height so it is the easiest thing on the screen to hit */
+.topbar__actions > .btn--primary { min-height: var(--tap-lg); }
+
+/* ---- appbar: app context/brand switcher (logo · two-line label · chevron) ---- */
+.appbar {
+  position: fixed;
+  inset-inline: 0;
+  top: 0;
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  padding-inline: var(--screen-pad); /* fixed + full-bleed: the screen's own inset, so the bar's contents line up with the title bar under it (Lh 2026-09-15) */
+  z-index: 40; /* topmost — card animations never cover it */
+  background: var(--surface); /* solid: sliding cards never show through */
+}
+/* fixed, so it covers the top of the screen it sits in — reserve its height
+   there, from the same token, the way the bottom bars reserve theirs. The
+   breathing under it is published: a .step cancels it to touch the bar. */
+.screen:has(> .appbar) { --header-gap: var(--sp-2); padding-top: calc(var(--header-h) + var(--header-gap)); }
+.appbar__brand { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+.appbar__text { display: grid; min-width: 0; flex: 1; } /* pushes trailing button to the right edge */
+.appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
+.appbar__title { font: var(--type-label); }
+.appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
+/* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
+   Lh 2026-09-13) stand on the tap floor: a chip that is a switch grows to --tap here */
+.appbar .chip--toggle { min-height: var(--tap); }
+
+/* ---- icon button (round) ---- */
+.icon-btn {
+  width: var(--tap); height: var(--tap);
+  flex: none;
+  border-radius: var(--r-chip);
+  border: var(--border-w) solid var(--outline); /* see .btn — same reason */
+  background: var(--action-bg);
+  color: var(--action-ink);
+  display: grid;
+  place-items: center;
+  font-size: var(--fs-lg);
+  line-height: 1;
+}
+.icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.icon-btn--sm { width: var(--tap-sm); height: 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: 31; }
+
+/* ---- buttons ---- */
+.btn {
+  /* --outline, not --action-border: same reason as .chip — on a palette where
+     --card-1-bg equals --action-bg a transparent border makes a plain button
+     invisible on a white card. --primary and --quiet set their own edge. */
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  border-radius: var(--r-chip);
+  padding: var(--sp-4) var(--sp-6);
+  font: var(--type-label);
+  font-size: var(--fs-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  min-height: var(--btn-h);
+  text-decoration: none; /* .btn works as <a> too */
+}
+.btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+/* quiet keeps a faint outline so it still reads as a button on colored palettes;
+   it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
+   would take the light-card action ink and vanish */
+.btn--quiet   { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
+.btn--block   { width: 100%; }
+/* xl: the one giant call to action in a tinted card ("Taxi!") */
+.btn--xl      { min-height: var(--btn-xl-h); font: 800 var(--fs-3xl)/1 var(--font-display); letter-spacing: var(--track-h1); border-radius: var(--r-card); padding-inline: var(--sp-8); }
+/* disabled keeps the slot — a control that vanishes moves everything else,
+   and a pager whose "previous" disappeared on page one would shift the bar
+   under the thumb on every page */
+:is(.btn, .icon-btn):disabled { opacity: 0.4; cursor: default; }
+/* a row of buttons sharing the width (twin CTAs inside a card) */
+.btn-row { display: flex; gap: var(--sp-2); }
+.btn-row > .btn { flex: 1; min-width: 0; }
+
+/* ---- chip: status/attribute tag, optional signal dot ---- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border-radius: var(--r-chip);
+  /* --outline, not --action-border: a chip is a control, and on a palette
+     where --card-1-bg == --action-bg (field, roast, hydro) a transparent
+     border makes it invisible on a white card. Same edge fields, checks,
+     toggles, tiles and the dropdown already use. */
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  padding: var(--sp-2) var(--sp-3);
+  font: var(--type-label);
+  font-size: var(--fs-sm);
+  min-height: var(--chip-h);
+  text-decoration: none;
+  justify-self: start; /* as a grid child it hugs its text, never stretches */
+}
+.dot { width: var(--dot); height: var(--dot); flex: none; border-radius: 50%; background: var(--dot-a); } /* signal dot: chips, legends */
+.dot--b { background: var(--dot-b); }
+.chip--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+/* dark-slot inversion lives in card.css (.card--3 :is(...)) */
+
+.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
+
+/* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
+   <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
+     <div class="menu" id="f1" popover><button class="menu__item" aria-current="true" data-value="week">this week</button>…</div></div>
+   cardds.js copies the picked item into the label and fires "change" on .dropdown.
+   .menu (layover.css) draws the panel; anchor positioning pins it under the trigger. */
+.dropdown { position: relative; min-width: 0; display: inline-grid; }
+.dropdown__btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--tap-sm);
+  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
+  border: var(--border-w) solid var(--outline); /* --outline: keeps a faint edge on colored palettes, like fields */
+  border-radius: var(--r-chip);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  font: var(--type-label);
+  font-size: var(--fs-body);
+  text-align: left;
+  cursor: pointer;
+}
+.dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dropdown__btn > .icon { transition: rotate 0.2s ease; }
+.dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
+.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards */
+.filter-row { display: flex; gap: var(--sp-2); }
+.filter-row > .dropdown { flex: 1; min-width: 0; }
+
+/* ---- segment (day picker / tab strip) — items share width, shrink on small screens ---- */
+.segment { display: flex; gap: var(--sp-1); }
+.segment__item {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  border-radius: var(--r-chip);
+  padding: var(--sp-2) var(--sp-1);
+  font: var(--type-label);
+  font-size: var(--fs-sm);
+  min-height: calc(var(--tap-sm) - var(--sp-0));
+  flex: 1;
+  min-width: 0;
+}
+.segment__item[aria-selected="true"] {
+  background: var(--accent);
+  color: var(--on-accent);
+  opacity: 1;
+}
+
+/* ---- bottom CTA pack: fixed action zone under the content ----
+   --bar-reserve is the room the bar needs — its own height plus a breathing
+   gap above it — published here so anything else that must stop clear of it
+   reads this instead of recomputing it. .screen's own reserve below reads
+   it; so does .step (step.css), the box a sheet slides in — one number, so
+   the two can't drift apart.
+   --kb is the on-screen keyboard's height, published on :root by cardds.js
+   from the visual viewport (0 without one, and on a platform that shrinks
+   the layout viewport itself): the bar rides above the keyboard on iOS the
+   way it already does on Android, and .step grows its room by the same. */
+:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+.action-bar {
+  position: fixed;
+  inset-inline: 0;
+  bottom: var(--kb, 0);
+  z-index: 30; /* 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);
+  display: flex;
+  gap: var(--sp-2);
+}
+.action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
+.action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
+
+/* ---- pager: previous / next at the two edges of the bar ----
+   For a sequence you can walk BOTH ways — a three-card feature intro, a step
+   flow. Use it instead of the default pack whenever going back is as ordinary
+   as going on: a wide CTA beside a small round icon reads as one action plus
+   an afterthought, which is wrong when the two are peers.
+
+   Both buttons are the same shape and the same height, so neither wins by
+   being physically bigger; the fill alone leans forward. The bar carries the
+   buttons only: where you are is said by the .pager__at dots UNDER the card
+   that changes (a .screen__centre group, card.css), never in the bar — the
+   dots move with what moves (Lh, 2026-09-12). Between the buttons goes a
+   "skip" link or nothing. Keep the last step of a flow on the plain
+   .action-bar: a step that COMMITS deserves one wide button, not a pair.
+
+   <div class="action-bar action-bar--pager">
+     <button class="btn" disabled><svg class="icon icon--xs"><use href="icons.svg#arrow-left"/></svg>Back</button>
+     <button class="btn btn--primary">Next<svg class="icon icon--xs"><use href="icons.svg#arrow-right"/></svg></button>
+   </div>                                                                  */
+.action-bar--pager { align-items: center; }
+/* equal share of the bar, and tighter than a lone CTA so two labels plus the
+   indicator still fit a 320px screen */
+.action-bar--pager > .btn {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-inline: var(--sp-3);
+  gap: var(--sp-1);
+  white-space: nowrap;
+  overflow: hidden;
+}
+/* the page dots: under the card in a .screen__centre group; tight gaps */
+.pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
+.pager__at > * {
+  width: var(--dot);
+  height: var(--dot);
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+}
+.pager__at > .is-at { background: var(--accent); opacity: 1; }
+/* ---- tiers: a control row above the buttons ----
+   A screen whose one move comes with a control — the introduction's text-size
+   slider above its pager. Each tier is a row; the bar stacks them, and any
+   parent hosting the bar publishes the room for both, the way the plain
+   reserve is published above, so a .screen or a .card--centre stops clear.
+   <div class="action-bar action-bar--tiers">
+     <div class="action-bar__tier"><label class="slider">…</label></div>
+     <div class="action-bar__tier action-bar__tier--pager">…the round pager…</div>
+   </div>                                                                  */
+.action-bar--tiers { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
+/* the tiers bar is as transparent as every other bar: the content scrolls under
+   it and shows through — the rail and the round buttons carry their own float
+   shadow and read on their own (Lh, 2026-09-12; replaces the 09-11 fade) */
+.action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
+.action-bar__tier > .btn { flex: 1; }
+:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+
+/* ---- round pager: previous / next as two round buttons at the two edges ----
+   The pager with nothing to say between its buttons — no dots, no label — as
+   two equal round icon buttons, one at each edge, in thumb reach from either
+   side. Rule 3 still holds: the step that commits goes back to one wide button.
+   <div class="action-bar action-bar--pager">
+     <button class="icon-btn" aria-label="ย้อนกลับ">…</button>
+     <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
+   </div>   — or the same two in an .action-bar__tier--pager under a control  */
+:is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
+
+/* .screen's default bottom padding is a constant; derive the reserve from the
+   bar instead, so a taller button (a longer label, a script with more leading)
+   can never end up underneath it. Any parent that hosts the bar counts —
+   <body>, or an app shell (#app > .screen + .action-bar) — since the bar is
+   fixed to the viewport wherever it sits. (.screen--fill reserves nothing:
+   its .step carries the bar's room itself, step.css.) */
+:has(> .action-bar) .screen:not(.screen--fill) { padding-bottom: var(--bar-reserve); }

package/css/base.css

@@ -0,0 +1,128 @@
+/* ============================================================
+   cardds/base.css — reset, surface, typography levels, section
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+
+/* the scale: everything is rem, so this one number resizes the whole system.
+   100% = the user's text size (16px by default); narrow phones step to 15/16 so
+   the 25rem column and its 48px taps keep their proportions on 320–360 screens.
+   --text-scale is an app's OWN text-size setting — a unitless number the app
+   writes on <html> (1 = as the browser has it; 1.1875 = larger). It multiplies
+   in here so it composes with the narrow-phone step instead of overwriting the
+   root, and so the app never writes a length from script. */
+html { font-size: calc(100% * var(--text-scale, 1)); scrollbar-width: none; }
+@media (max-width: 22.5em) { html { font-size: calc(93.75% * var(--text-scale, 1)); } }
+html::-webkit-scrollbar { display: none; } /* Chromium/Safari */
+
+body {
+  margin: 0;
+  background: var(--surface);
+  color: var(--on-surface);
+  font: var(--type-body);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* components here set display (grid/flex), which outranks the UA's
+   [hidden] { display: none } — so the attribute silently does nothing on a
+   .btn, .icon-btn, .chip or .row. Restore it once, for all of them. */
+[hidden] { display: none !important; }
+
+img, svg { display: block; max-width: 100%; }
+button { font: inherit; cursor: pointer; }
+
+/* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
+.icon { width: var(--icon); height: var(--icon); flex: none; }
+.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
+.icon--xs { width: var(--icon-xs); height: var(--icon-xs); } /* inside captions, chips, links */
+.icon--lg { width: var(--icon-lg); height: var(--icon-lg); } /* empty states */
+
+/* mobile screen column — the standard horizontal inset, and nothing vertical.
+   Top and bottom are zero on purpose: vertical room is only ever a RESERVE for
+   something fixed parked over the screen, so each bar adds its own and a page
+   without bars needs no override. .appbar reserves the top (actions.css),
+   .action-bar (actions.css) and .float-bar (layover.css) the bottom. */
+.screen {
+  --screen-gap: var(--sp-5); /* published: a .step cancels it to touch the bar it follows (step.css) */
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  padding-inline: var(--screen-pad);
+  display: grid;
+  gap: var(--screen-gap);
+}
+.screen > * { min-width: 0; } /* content never widens the column past the viewport */
+/* a screen that carries its own palette (data-palette on the element, not on <html>)
+   paints its own surface, so a design tool can show one screen per palette */
+.screen[data-palette] { background: var(--surface); color: var(--on-surface); }
+
+/* app screen: exactly one phone height — a height, not a minimum, so that a
+   .step (step.css) has a bound to fill and its card and sheet scroll INSIDE
+   it instead of growing the page; and clip, not hidden, because a clipped
+   box is not a scroll container: nothing — not even the browser revealing a
+   focused field — can shift the screen up. A trailing .sheet-stack (stack.css) stretches
+   and bleeds off the bottom edge. */
+.screen--fill {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  overflow: clip;
+  position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
+}
+/* min-height: 0 — a flex item's floor is its content, and the stack's content
+   is its own full-height sheets, so without it the stack grew to the whole
+   screen and its open sheet ran past the bottom edge by the bars' height,
+   unreachable by scrolling (timebank home, 2026-09-13). The stack IS the room
+   left under the bars; every sheet fills exactly that. */
+.screen--fill > .sheet-stack { flex: 1; min-height: 0; }
+
+/* ---- typography levels ---- */
+/* --fs-self: each level publishes its own size, so a consumer that scales a
+   heading (card.css --squeeze) can multiply it without knowing the level */
+.t-display  { font: var(--type-display); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; --fs-self: var(--fs-display); }
+.t-h1       { font: var(--type-h1); letter-spacing: var(--track-h1); margin: 0; --fs-self: var(--fs-h1); }
+.t-h2       { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; --fs-self: var(--fs-h2); }
+.t-title    { font: var(--type-title); margin: 0; --fs-self: var(--fs-title); }
+.t-body     { font: var(--type-body); margin: 0; }
+.t-label    { font: var(--type-label); }
+.t-caption  { font: var(--type-caption); }
+.t-overline { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; }
+.t-stat     { font: var(--type-stat); letter-spacing: var(--track-display); margin: 0; font-variant-numeric: tabular-nums; }
+.t-stat--mono { font-family: var(--font-mono); letter-spacing: 0; } /* clocks, ETAs, codes */
+.t-stat--xl   { font-size: var(--fs-hero); } /* the one number on a sheet */
+
+.t-muted { color: var(--on-surface-muted); }
+.card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
+.card--3 .t-muted { color: inherit; opacity: 0.7; } /* card-muted is tuned for light cards; dim instead on the dark slot */
+.t-caps  { text-transform: uppercase; }
+.grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
+
+/* ---- section: frameless on-surface content + CTA (never a card) ---- */
+.section {
+  display: grid;
+  gap: var(--sp-3);
+  padding-block: var(--sp-4);
+}
+.section > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
+.section .cta-pack {
+  display: flex;
+  gap: var(--sp-2);
+  margin-top: var(--sp-2);
+  flex-wrap: wrap;
+}
+
+/* ---- empty state: on-surface, centered, optional CTA below ---- */
+.empty-state {
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: var(--sp-2);
+  padding: var(--sp-12) var(--sp-6);
+  color: var(--on-surface-muted);
+}
+.empty-state > :is(h1, h2, h3) { color: var(--on-surface); } /* the heading in full ink, the words muted */
+.empty-state__action { margin-top: var(--sp-2); }
+/* inside a card (a section's "nothing yet"): the card's ink, the way .t-muted and .row__meta follow it */
+.card .empty-state { color: var(--card-muted); padding-block: var(--sp-6); }
+.card .empty-state > :is(h1, h2, h3) { color: var(--card-ink); }
+.card--3 .empty-state { color: inherit; }
+.card--3 .empty-state > :not(:is(h1, h2, h3)) { opacity: 0.7; }