@usableapp/cardds 0.1.0

package/css/forms.css

@@ -0,0 +1,64 @@
+/* ============================================================
+   cardds/forms.css — inputs + inline form actions
+   .field: flat outlined input, the label IS the placeholder.
+   Markup: <label class="field"><svg?/><input placeholder="Passport Number"></label>
+   ============================================================ */
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: var(--border-w) solid var(--action-border);
+  border-radius: var(--r-control);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  padding-inline: var(--sp-4);
+  min-height: var(--tap);
+  min-width: 0;
+}
+
+.field input,
+.field select {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: var(--type-body);
+  width: 100%;
+  min-width: 0;
+  outline-offset: var(--sp-1);
+}
+.field input::placeholder { color: inherit; opacity: 0.55; }
+
+/* field with its action inside: date pick, send, go — the button sits flush right */
+.field--action { padding-right: var(--sp-1); min-height: var(--tap-lg); }
+.field--action > .icon-btn { margin-left: auto; }
+
+/* colored palettes drop the visible outline elsewhere — fields keep one */
+[data-palette] .field { border-color: color-mix(in srgb, currentColor 25%, transparent); }
+
+/* ---- add-row: inline "+ add another" action ---- */
+.add-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: var(--type-label);
+  font-size: var(--fs-body);
+  padding: var(--sp-2) 0;
+  min-height: var(--tap-sm);
+}
+.add-row__plus {
+  width: var(--icon);
+  height: var(--icon);
+  flex: none;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--on-accent);
+  display: grid;
+  place-items: center;
+  font-size: var(--fs-md);
+  line-height: 1;
+}
+.add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }

package/css/journey.css

@@ -0,0 +1,61 @@
+/* ============================================================
+   cardds/journey.css — trip/status primitives inside cards:
+   route row, tile badge, note row. Generic: flights, buses,
+   deliveries — anything with endpoints and a status.
+   ============================================================ */
+
+/* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
+.route { display: flex; align-items: center; gap: var(--sp-3); }
+
+.route__point { display: grid; gap: var(--sp-0); min-width: 0; }
+.route__point--end { text-align: right; }
+
+.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); }
+.route__time { font: var(--type-body); font-variant-numeric: tabular-nums; }
+.route__place { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .route__place { color: inherit; opacity: 0.7; }
+
+.route__via {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  opacity: 0.65;
+  font-size: var(--fs-body);
+}
+.route__via::before,
+.route__via::after {
+  content: "";
+  flex: 1;
+  border-top: var(--rule-w) dotted currentColor;
+}
+
+/* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
+.tile-badge {
+  display: inline-grid;
+  justify-items: center;
+  gap: var(--sp-0);
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-badge);
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+}
+.tile-badge__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.7; }
+.tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+
+/* plain: no fill — a date box beside a title (Jun / 18) */
+.tile-badge--plain { background: transparent; color: inherit; padding: 0; min-width: var(--tap-sm); }
+.tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
+
+/* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
+.tile-badge--corner { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
+
+/* ---- note row: icon + caption (transit hints, fine print) ---- */
+.note-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  font: var(--type-caption);
+  color: var(--card-muted);
+}
+.card--3 .note-row { color: inherit; opacity: 0.7; }

package/css/layover.css

@@ -0,0 +1,243 @@
+/* ============================================================
+   cardds/layover.css — cards that lay OVER other content:
+   ask drawer · popover menu · expanding banner · float bar ·
+   callout · swipe deck. The sheet (peek / half / full / page)
+   lives in sheet.css; these compose with .sheet-stage.
+   ============================================================ */
+
+/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+   <div class="sheet-stage sheet-stage--ask">
+     <article class="card lift">…page content…</article>
+     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
+     </div></div> */
+.sheet-stage--ask {
+  --drawer-h: 14rem;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+}
+.lift {
+  position: absolute;
+  inset: 0 0 var(--drawer-h) 0;
+  border: 0;
+  border-radius: 0 0 var(--r-card) var(--r-card);
+  overflow: hidden;
+  overscroll-behavior: contain;
+  box-shadow: var(--shadow-sheet);
+  align-content: start;
+}
+.drawer {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--drawer-h);
+  padding: var(--sp-5);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sp-1);
+  text-align: center;
+  --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
+  --on-accent: var(--card-3-bg);
+}
+.drawer .t-caption { opacity: 0.7; }
+.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
+.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
+.btn-trio__dots {
+  width: var(--sp-5);
+  height: var(--sp-1);
+  background: radial-gradient(circle, currentColor var(--sp-0), transparent calc(var(--sp-0) + 0.5px)) 0 0 / calc(var(--sp-5) / 2) 100% repeat-x;
+  opacity: 0.4;
+}
+
+/* ---- popover menu: a card anchored to its button, rows of icon + label ----
+   <button class="chip" popovertarget="when">Now ▾</button>
+   <div class="menu" id="when" popover><button class="menu__item"><svg class="icon"/>Now</button>…</div>
+   Native popover: light dismiss, Esc, top layer. Anchored to the invoker where
+   anchor positioning exists; the fallback is the browser's centred placement. */
+.menu {
+  display: none;              /* explicit closed state — never display on the base rule */
+  margin: 0;
+  inset: auto;
+  border: var(--border-w) solid var(--action-border);
+  border-radius: var(--r-card);
+  padding: var(--sp-2);
+  min-width: 12rem;
+  background: var(--action-bg);
+  color: var(--action-ink);
+  box-shadow: var(--shadow-float);
+}
+.menu:popover-open { display: grid; }
+.menu:not([popover]) { display: grid; position: relative; } /* inline usage (no attribute) */
+.menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: var(--tap);
+  width: 100%;
+  padding: 0 var(--sp-3);
+  border: 0;
+  border-radius: var(--r-control);
+  background: transparent;
+  color: inherit;
+  font: var(--type-title);
+  text-align: left;
+  cursor: pointer;
+}
+.menu__item:hover, .menu__item:focus-visible { background: var(--ink-tint); outline: none; }
+.menu__item[aria-current], .menu__item.is-on { background: var(--accent); color: var(--on-accent); }
+@supports (anchor-name: --a) {
+  .menu[popover] {
+    position-area: block-end span-inline-end;
+    margin-top: var(--sp-2);
+    min-width: max(12rem, anchor-size(width)); /* at least as wide as its trigger */
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .menu[popover] {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--sp-2));
+    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s, translate 0.2s;
+  }
+  .menu:popover-open { opacity: 1; translate: 0 0; }
+  @starting-style { .menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--sp-2)); } }
+}
+
+/* ---- banner: a chip that opens into a tinted card, no JS ----
+   <details class="banner"><summary class="chip chip--on">Save $30 on orders over $70 <svg class="icon icon--xs"/></summary>
+     <div class="card card--3 banner__body">…</div></details> */
+.banner { display: grid; gap: var(--sp-2); justify-items: start; }
+.banner > summary { list-style: none; cursor: pointer; }
+.banner > summary::-webkit-details-marker { display: none; }
+.banner > summary .icon { transition: rotate 0.2s ease; }
+.banner[open] > summary .icon { rotate: 180deg; }
+.banner__body { width: 100%; padding: var(--sp-4) var(--sp-5); --card-gap: var(--sp-1); }
+.banner::details-content { width: 100%; } /* Chromium wraps the content in this pseudo; justify-items: start shrink-wrapped it, so the body never reached the width */
+@supports (interpolate-size: allow-keywords) {
+  @media (prefers-reduced-motion: no-preference) {
+    .banner { interpolate-size: allow-keywords; }
+    .banner::details-content { block-size: 0; overflow: clip; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete; }
+    .banner[open]::details-content { block-size: auto; }
+  }
+}
+
+/* ---- float bar: glass pill nav + detached round button, floats over content ----
+   <nav class="float-bar"><div class="float-bar__pill"><a class="float-bar__item" aria-current="page"><svg class="icon"/>Left</a>…</div><button class="icon-btn">…</button></nav> */
+.float-bar {
+  position: fixed;
+  inset-inline: 0;
+  bottom: var(--sp-5);
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  padding-inline: var(--sp-4);
+  display: flex;
+  gap: var(--sp-2);
+  align-items: center;
+  z-index: 30;
+}
+.sheet-stage > .float-bar { position: absolute; padding-inline: var(--sp-4); }
+/* .screen's default bottom padding clears an .action-bar; a .float-bar is
+   taller (--bar-h + its own bottom offset), so reserve the difference. Any
+   parent that hosts the bar counts (see .action-bar's reserve, actions.css) */
+:has(> .float-bar) .screen:not(.screen--fill) { padding-bottom: calc(var(--bar-h) + var(--sp-5) + var(--sp-6)); }
+.float-bar__pill {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: var(--bar-h);
+  padding: var(--sp-1);
+  border-radius: var(--r-chip);
+  border: var(--border-w) solid var(--action-border);
+  background: color-mix(in srgb, var(--action-bg) 82%, transparent);
+  color: var(--action-ink);
+  backdrop-filter: blur(var(--sp-3));
+  -webkit-backdrop-filter: blur(var(--sp-3));
+  box-shadow: var(--shadow-float);
+}
+.float-bar__item {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  justify-items: center;
+  gap: var(--sp-0);
+  min-height: var(--tap-lg);
+  padding: var(--sp-1);
+  border: 0;
+  border-radius: var(--r-chip);
+  background: transparent;
+  color: inherit;
+  font: var(--type-caption);
+  text-decoration: none;
+  opacity: 0.6;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* aria-current="false" is the correct way to mark the OTHER tabs, so the
+   bare attribute selector lights every one of them up */
+.float-bar__item[aria-current]:not([aria-current="false"]),
+.float-bar__item.is-on { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
+
+/* ---- callout: a small card with a tail — over a map, a media, a mascot ----
+   <div class="callout" style="top: 30%; left: 40%"><span class="callout__title">Telok Ayer Park</span><span class="callout__sub">1.2 km</span></div> */
+.callout {
+  position: absolute;
+  display: grid;
+  gap: var(--sp-0);
+  width: max-content;
+  max-width: 15rem;
+  padding: var(--sp-3) var(--sp-4);
+  border: var(--border-w) solid var(--action-border);
+  border-radius: var(--r-card);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  box-shadow: var(--shadow-float);
+  text-align: center;
+}
+.callout::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: calc(-1 * var(--sp-2));
+  width: var(--sp-3);
+  height: var(--sp-3);
+  translate: -50% 0;
+  rotate: 45deg;
+  background: inherit;
+  border: inherit;
+  border-top: 0;
+  border-left: 0;
+}
+.callout__title { font: var(--type-title); }
+.callout__sub { font: var(--type-caption); opacity: 0.7; }
+/* speech chip: a chip with the same tail (mascot / greeting) */
+.chip--bubble { position: relative; }
+.chip--bubble::after {
+  content: "";
+  position: absolute;
+  left: var(--sp-4);
+  bottom: calc(-1 * var(--sp-2) + var(--border-w));
+  width: var(--sp-3);
+  height: var(--sp-3);
+  rotate: 45deg;
+  background: inherit;
+  border: inherit;
+  border-top: 0;
+  border-left: 0;
+}
+
+/* ---- deck: swipe cards; the last child is on top ----
+   <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
+   <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */
+.deck { display: grid; place-items: center; padding: var(--sp-4) var(--sp-4) var(--sp-6); }
+.deck > .card { grid-area: 1 / 1; width: min(100%, 20rem); min-height: 12.5rem; transition: rotate 0.3s ease, translate 0.3s ease; }
+.deck > .card:nth-last-child(2) { rotate: -4deg; translate: calc(-1 * var(--sp-2)) var(--sp-2); opacity: 0.85; }
+.deck > .card:nth-last-child(3) { rotate: 5deg; translate: var(--sp-3) var(--sp-4); opacity: 0.6; }
+.deck > .card:nth-last-child(n + 4) { display: none; }
+.deck__actions { display: flex; justify-content: center; gap: var(--sp-8); }
+.deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }

package/css/lists.css

@@ -0,0 +1,142 @@
+/* ============================================================
+   cardds/lists.css — frameless rows and pairs INSIDE a card:
+   row (lead · body · end) · key-value rows · kv grid ·
+   timeline · legend · link
+   A row inside a card has no boundary of its own; .rows draws
+   hairlines between rows. A row that IS a card = .card--row.
+   ============================================================ */
+
+/* ---- row: leading visual · title + meta · trailing control ----
+   <div class="row"><span class="avatar">A</span><div class="row__body"><span class="row__title">Alice Kau</span><span class="row__meta">Owner</span></div><button class="icon-btn icon-btn--sm">›</button></div> */
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: var(--tap);
+  padding-block: var(--sp-2);
+  min-width: 0;
+  color: inherit;
+  text-decoration: none; /* .row works as <a> too — it is a tap target */
+}
+.row__lead {
+  width: var(--tap);
+  height: var(--tap);
+  flex: none;
+  border-radius: var(--r-control);
+  border: var(--border-w) solid var(--outline);
+  display: grid;
+  place-items: center;
+}
+.row__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-0); }
+.row__title { font: var(--type-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 0.12em; margin-block: -0.12em; } /* the clip keeps Thai marks — see card.css */
+.row__meta { font: var(--type-caption); color: var(--card-muted); display: flex; align-items: center; gap: var(--sp-1); }
+.card--3 .row__meta { color: inherit; opacity: 0.7; }
+.row__end { margin-left: auto; text-align: right; display: grid; gap: var(--sp-0); justify-items: end; flex: none; }
+.row--lg { min-height: var(--fab); padding-block: var(--sp-3); } /* menu rows: more air, round arrow at the end */
+.row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
+.row--flush { padding-block: 0; } /* a single row as card content: the card's gap is the spacing */
+/* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
+   the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
+   pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look
+   at --tap-sm, but not an input: nothing to press. */
+.row--done { pointer-events: none; cursor: default; }
+.row--done .row__title { color: var(--card-muted); }
+.card--3 .row--done .row__title { color: inherit; opacity: 0.7; }
+.row__done {
+  width: var(--tap-sm);
+  height: var(--tap-sm);
+  flex: none;
+  margin-left: auto;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--on-accent);
+  display: grid;
+  place-items: center;
+}
+
+/* rows: a list of rows separated by hairlines */
+.rows { display: grid; }
+.rows > .row + .row { border-top: var(--border-w) solid var(--hairline); }
+
+/* ---- kv: label left, value right ----
+   <dl class="kv"><div class="kv__row"><dt class="kv__key">Pay with</dt><dd class="kv__val">GHO</dd></div>…</dl> */
+.kv { margin: 0; display: grid; }
+.kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); }
+.kv--lined > .kv__row + .kv__row { border-top: var(--border-w) solid var(--hairline); }
+.kv__key { font: var(--type-body); color: var(--card-muted); }
+.card--3 .kv__key { color: inherit; opacity: 0.7; }
+.kv__val { margin: 0; font: var(--type-title); display: inline-flex; align-items: center; gap: var(--sp-2); text-align: right; min-width: 0; }
+
+/* ---- kv grid: value over label, cells split by a rule (Sex | Weight) ----
+   <div class="kv-grid"><div class="kv-cell"><svg class="icon"/><span class="kv-cell__val">15.6 kg</span><span class="kv-cell__key">Weight</span></div>…</div> */
+.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--sp-4); }
+.kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
+.kv-cell { display: grid; gap: var(--sp-0); align-content: start; min-width: 0; }
+.kv-cell > .icon { margin-bottom: var(--sp-1); }
+.kv-cell__val { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.kv-cell__key { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
+
+/* ---- timeline: a hairline with date chips, entries to the right ----
+   <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
+.timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 var(--sp-6);
+  display: grid;
+  gap: var(--sp-5);
+  position: relative;
+}
+.timeline::before {
+  content: "";
+  position: absolute;
+  left: calc((var(--sp-3) - var(--border-w)) / 2); /* through the centre of the dots */
+  top: var(--sp-3);
+  bottom: var(--sp-3);
+  border-left: var(--border-w) solid var(--hairline);
+}
+.timeline__item { display: grid; gap: var(--sp-2); position: relative; min-width: 0; }
+.timeline__item::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--sp-6));
+  top: var(--sp-2);
+  width: var(--sp-3);
+  height: var(--sp-3);
+  border-radius: 50%;
+  background: var(--accent);
+}
+.timeline__mark {
+  justify-self: start;
+  font: var(--type-overline);
+  letter-spacing: var(--track-overline);
+  text-transform: uppercase;
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-chip);
+  background: var(--ink-tint);
+}
+
+/* ---- legend: signal dots with captions ----
+   <div class="legend"><span class="legend__item"><span class="dot"></span> very high</span>…</div> */
+.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: var(--type-caption); color: var(--card-muted); }
+.card--3 .legend { color: inherit; opacity: 0.8; }
+.legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--icon); }
+
+/* ---- link: "See all ↗" in a card head, big enough to tap ----
+   <a class="link" href="#">See all <svg class="icon icon--xs"/></a> */
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  min-height: var(--tap-sm);
+  color: inherit;
+  text-decoration: none;
+  font: var(--type-label);
+  font-size: var(--fs-body);
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+.link--muted { color: var(--card-muted); }
+.card--3 .link--muted { color: inherit; opacity: 0.7; }