@usableapp/cardds 0.7.14 → 0.7.16

package/dist/cardds.css

@@ -89,7 +89,7 @@
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
-  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
+  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
   --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
   --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
@@ -136,6 +136,9 @@
   --motion-sheet: 0.35s;
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
+  --dim: 0.7; /* secondary words dimmed on a ground whose muted ink does not fit (the dark card --3, a drawer, a tile's sub line): ONE share for all */
+  --motion-press: 0.12s; /* a control giving under the finger and springing back (actions.css PRESS) */
+  --press-scale: 0.96;   /* how far it gives — a share of its size */
 
   /* ---- typography: one scale, rem so it follows the root ---- */
   --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif; /* fonts.css ships it; the rest is the fallback while it loads */
@@ -208,6 +211,9 @@
   --card-1-bg: var(--color-paper, #ffffff);  --card-1-ink: var(--color-ink, #141414);
   --card-2-bg: var(--_tone-2, #e6e6e3);  --card-2-ink: var(--color-ink, #141414);
   --card-3-bg: var(--color-brand, #141414);  --card-3-ink: var(--color-on-brand, #ffffff);
+  /* tones 4 · 5 (Lh 2026-09-25): more card colours for a palette that has them — the wireframe keeps them grey */
+  --card-4-bg: #d4d4d0;  --card-4-ink: var(--color-ink, #141414);  --card-4-muted: #555555;
+  --card-5-bg: #3d3d3d;  --card-5-ink: #ffffff;                    --card-5-muted: #c4c4c4;
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
   --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
@@ -228,6 +234,11 @@
   --neg: #3d3d3d;
   --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
+  --signal-warn: #8a6d00;   /* the full signal set (Lh 2026-09-25): error · warn · ok · info — each with an icon and words */
+  --signal-ok: #2e7d32;
+  --signal-info: #2f5f9e;
+  /* highlights (Lh 2026-09-25): four atmosphere colours a palette may set for decoration — a count, a mark, a chart dot; the wireframe keeps them grey */
+  --highlight-1: #3d3d3d;  --highlight-2: #8a8a8a;  --highlight-3: #5f5f5f;  --highlight-4: #b0b0b0;
   --signal-error: #c62828;  /* the ONE colour in the wireframe (Lh 2026-09-24): something went wrong — a field's edge, the words that say what. Always with an icon and words, never the colour alone */
 
   /* derived tints — read the element's own ink, so they work on any slot */
@@ -288,46 +299,6 @@
   --dot-a: #e05c3a;  --dot-b: #6f6be0;
 }
 
-/* ---- SHINE — shiny: periwinkle surface, coral / black / gold cards ---- */
-[data-palette="shine"] {
-  --surface: #6d6ae4;
-  --on-surface: #ffffff;
-  --on-surface-muted: #d3d2f7;
-
-  --card-1-bg: #eec85a;  --card-1-ink: #16161a;
-  --card-2-bg: #e8624a;  --card-2-ink: #16161a;
-  --card-3-bg: #1b1b1f;  --card-3-ink: #ffffff;
-
-  --card-border: transparent;
-  --card-muted: #4c4a44;
-
-  --accent: #1b1b1f;     --on-accent: #ffffff;
-  --action-bg: #ffffff;  --action-ink: #16161a;  --action-border: transparent;
-
-  --pos: #2e9e5b;  --neg: #d6402a;
-  --dot-a: #e8624a;  --dot-b: #6d6ae4;
-}
-
-/* ---- FIELD — warm peach editorial: cream surface, orange accent ---- */
-[data-palette="field"] {
-  --surface: #f9e8dc;
-  --on-surface: #241f1b;
-  --on-surface-muted: #8a7d72;
-
-  --card-1-bg: #ffffff;  --card-1-ink: #241f1b;
-  --card-2-bg: #f6d9c5;  --card-2-ink: #241f1b;
-  --card-3-bg: #ef4e0b;  --card-3-ink: #fff4ec;
-
-  --card-border: transparent;
-  --card-muted: #8a7d72;
-
-  --accent: #ef4e0b;     --on-accent: #fff4ec;
-  --action-bg: #ffffff;  --action-ink: #241f1b;  --action-border: transparent;
-
-  --pos: #2e8f52;  --neg: #d13b1a;
-  --dot-a: #ef4e0b;  --dot-b: #241f1b;
-}
-
 /* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
 [data-palette="roast"] {
   --surface: #f6f1e7;
@@ -368,6 +339,87 @@
   --dot-a: #3d63e0;  --dot-b: #eec85a;
 }
 
+/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand; every
+   tone's ink + muted is a deep shade of ITS OWN ground, so lines (currentColor mixes: --hairline, --outline, field
+   edges) come out as a darker tint of the ground under them — never a grey on a warm card. Four highlights for the
+   atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
+[data-palette="orchard"] {
+  --surface: #f4efe6;          /* linen */
+  --on-surface: #2a241c;       /* umber */
+  --on-surface-muted: #6e6353;
+
+  --card-1-bg: #fbf8f2;  --card-1-ink: #2a241c;                          /* bone paper — sheets */
+  --card-2-bg: #e6d8bf;  --card-2-ink: #33291c;                          /* sand */
+  --card-3-bg: #5c6b47;  --card-3-ink: #f6f1e6;  --card-3-muted: #d3d8c4; /* moss — the brand */
+  --card-4-bg: #d3d9c4;  --card-4-ink: #2b3322;  --card-4-muted: #515c42; /* sage mist */
+  --card-5-bg: #dcc2a6;  --card-5-ink: #3a2a1c;  --card-5-muted: #6b503a; /* clay */
+
+  --card-border: transparent;
+  --card-muted: #736754;
+  --card-2-muted: #66573f;
+
+  --accent: #5c6b47;     --on-accent: #f6f1e6;
+  --action-bg: #fbf8f2;  --action-ink: #2a241c;  --action-border: transparent;
+
+  /* highlights — decoration and atmosphere, a small dose: counts, marks, chart dots, a badge on a tile */
+  --highlight-1: #d93a1f;  /* maple red */
+  --highlight-2: #f5c518;  /* bright yellow */
+  --highlight-3: #3a9fe0;  /* sky */
+  --highlight-4: #e0457b;  /* fuchsia */
+  --dot-a: var(--highlight-1);  --dot-b: var(--highlight-3);
+
+  /* signals from Sweet Salmon #dd9787 — words and edges, always with an icon */
+  --pos: #6f8f5a;  --neg: #c4694f;
+  --signal-error: #b5503b;  /* salmon, deepened */
+  --signal-warn: #a0721f;   /* ochre */
+  --signal-ok: #4f7f4a;     /* leaf */
+  --signal-info: #4d6f96;   /* slate */
+}
+/* on the dark moss card the signals turn to their light shades — the same hues, readable on the ground */
+/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a knob) */
+[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, #fff8f0); }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); color: var(--tile-badge-ink, #2a241c); }
+[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 40%, transparent)); }
+/* fields are WHITE boxes on every ground (Lh 2026-09-25) — the words typed in them read dark, even on the moss card */
+[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: #2a241c; }
+[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: #2a241c; }
+/* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
+[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, #2a241c); }
+[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); color: var(--avatar-ink, #ffffff); }
+[data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
+[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); }
+[data-palette="orchard"] .toggle:checked::after { background: #ffffff; }
+[data-palette="orchard"] .card--3 { --signal-error: #f4b7a6; --signal-warn: #f1d18a; --signal-ok: #cfe6b8; --signal-info: #bcd0ec; }
+
+/* ---- VERS — Lh's own-palette pick (2026-09-25): white surface, champagne paper, sage brand; earth tones for tones 2·4·5 ---- */
+[data-palette="vers"] {
+  --surface: #ffffff;
+  --on-surface: #1f1b16;
+  --on-surface-muted: #6b6358;
+
+  --card-1-bg: #f6e7cb;  --card-1-ink: #1f1b16;  /* paper — Champagne */
+  --card-2-bg: #e3cfa6;  --card-2-ink: #1f1b16;  /* sand */
+  --card-3-bg: #678d58;  --card-3-ink: #ffffff;  /* brand — Sage */
+  --card-4-bg: #c9d6b0;  --card-4-ink: #1f1b16;  --card-4-muted: #4a5438;  /* lichen */
+  --card-5-bg: #d4bf9c;  --card-5-ink: #1f1b16;  --card-5-muted: #5e4a36;  /* wheat — bark was too dark */
+
+  --card-border: transparent;
+  --card-muted: #6b5f4c;
+  --card-2-muted: #5c4f3a;
+  --card-3-muted: #dfe8d6;
+
+  --accent: #678d58;     --on-accent: #ffffff;
+  --action-bg: #f6e7cb;  --action-ink: #1f1b16;  --action-border: transparent;
+
+  /* signals from Sweet Salmon #dd9787, deepened to read on white/champagne */
+  --pos: #7fa86f;  --neg: #dd9787;
+  --signal-error: #b5503b;  /* salmon */
+  --signal-warn: #a5782a;   /* ochre */
+  --signal-ok: #4f7f4a;     /* leaf */
+  --signal-info: #4d6f96;   /* slate */
+  --dot-a: #dd9787;  --dot-b: #b08a5a;
+}
+
 /* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
@@ -390,7 +442,7 @@
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
 button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
-.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
+.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -483,7 +535,7 @@ button { font: inherit; cursor: pointer; }
 
 .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 */
+.card--3 .t-muted { color: inherit; opacity: var(--dim); } /* 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 */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
@@ -564,6 +616,8 @@ button { font: inherit; cursor: pointer; }
 
 .card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
 .card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); }
+.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
+.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
 
 /* dark/accent slot: accent-toned controls would vanish — the slot re-points
    the accent tokens, so every accent consumer (btn--primary, chip--on,
@@ -697,8 +751,7 @@ button { font: inherit; cursor: pointer; }
      one is there, and the screen's gap), or twice the room below it (the
      bar's reserve) — whichever is less. --_lead is the title bar's height
      only on a screen that HAS one: without a .topbar/.appbar before it the
-     block keeps that room (a deck and its two buttons, a card and its pager
-     under it, need it on a short phone; Lh, 2026-09-11). */
+     block keeps that room (a card and its pager under it needs it on a short phone; Lh, 2026-09-11). */
   --_lead: 0rem;
   max-height: calc(2 * min(var(--screen-centre) - var(--_lead) - var(--screen-gap), 100% - var(--screen-centre) - var(--bar-reserve)));
   overflow-y: auto;
@@ -709,9 +762,8 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- centred block: the same place, for one thing to read that is not a
    lone card — an empty state, a card with its quiet second button and the
-   pager under it, a deck with its two round buttons. The block runs edge to
-   edge and keeps the screen's inset as padding, so a deck's fanned cards can
-   overhang and clip at the screen's edges (correct — the fold visual), and
+   pager under it. The block runs edge to
+   edge and keeps the screen's inset as padding, and
    its children stack at the screen's own rhythm (Lh, 2026-09-11):
    <div class="screen screen--fill"><header class="topbar">…</header>
      <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
@@ -784,14 +836,10 @@ button { font: inherit; cursor: pointer; }
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
 }
-:root[data-slide="next"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
-:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(centre-card-out), :root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card-in), :root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card-out), :root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card-in), :root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
@@ -1098,9 +1146,6 @@ button { font: inherit; cursor: pointer; }
   padding-left: 0;
   transition: padding-left 0.35s ease;
 }
-.sheet-stack--tap > .card.is-open > .card__head {
-  padding-left: calc(var(--tap-sm) + var(--sp-3));
-}
 .sheet-stack--tap .sheet-stack__back {
   position: absolute;
   left: 0;
@@ -1109,6 +1154,12 @@ button { font: inherit; cursor: pointer; }
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s;
+  /* SMALL (see "the back button, SMALL" below) */
+  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
 }
 .sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
@@ -1168,13 +1219,6 @@ button { font: inherit; cursor: pointer; }
    tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
    (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
 .sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) + var(--sp-2))); }
-.sheet-stack--tap .sheet-stack__back {
-  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-}
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2); }
 
@@ -1568,9 +1612,8 @@ button { font: inherit; cursor: pointer; }
    bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .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; }
+.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 { position: relative; }
 .sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
 
 .sheet-step {
@@ -1588,23 +1631,22 @@ button { font: inherit; cursor: pointer; }
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* 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, 0px) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
+  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 */
 }
-.sheet-step__summary { color: inherit; opacity: 0.8; }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
   flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
-.sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.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 > * { 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); }
-.sheet-step__go { position: absolute; inset: min(0px, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sheet-step__go { position: absolute; inset: min(0rem, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }
@@ -1704,8 +1746,6 @@ button { font: inherit; cursor: pointer; }
 .step:has(> .sheet--peek) > :is(.page, .pages) { padding-bottom: var(--sheet-peek); }
 .step > :is(.page, .pages) {
   flex: 0 1 auto;
-}
-.step > :is(.page, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
   overflow-y: auto;
@@ -1717,12 +1757,12 @@ button { font: inherit; cursor: pointer; }
    padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
    The walk shows no scrollbar. */
 .step > .pages { margin: 0; scrollbar-width: none; touch-action: pan-y; } /* pan-y: the walk scrolls itself up and down; a sideways swipe is the Walkthrough's (it turns the page) */ /* the scrolling box is the whole content: from the step's top edge, edge to edge — no margin (Lh 2026-09-23) */
-.step > .pages > .page { padding-inline: var(--screen-pad); } /* the words keep the inset INSIDE it */
-.step > .pages > .page { margin-top: var(--_lead, 0rem); } /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
-.step > .pages::-webkit-scrollbar { display: none; }
 .step > .pages > .page {
+  padding-inline: var(--screen-pad); /* the words keep the inset INSIDE it */
+  margin-top: var(--_lead, 0rem); /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
   padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
+.step > .pages::-webkit-scrollbar { display: none; }
 
 /* ============================================================
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
@@ -1893,7 +1933,7 @@ button { font: inherit; cursor: pointer; }
 .route__point--end .route__code::after { content: none; }
 .route__time { font: var(--route-time-font, var(--type-body)); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
-.card--3 .route__place { color: inherit; opacity: 0.7; }
+.card--3 .route__place { color: inherit; opacity: var(--dim); }
 
 .route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
@@ -1907,7 +1947,7 @@ button { font: inherit; cursor: pointer; }
   background: var(--tile-badge-bg, var(--card-3-bg));
   color: var(--tile-badge-ink, var(--card-3-ink));
 }
-.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: 0.7; }
+.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: var(--dim); }
 .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) */
@@ -1925,7 +1965,7 @@ button { font: inherit; cursor: pointer; }
   font: var(--note-row-font, var(--type-caption));
   color: var(--note-row-ink, var(--card-muted));
 }
-.card--3 .note-row { color: inherit; opacity: 0.7; }
+.card--3 .note-row { color: inherit; opacity: var(--dim); }
 
 /* ---- css/actions.css — topbar, chips, buttons, CTA pack ---- */
 /* ============================================================
@@ -2002,7 +2042,7 @@ button { font: inherit; cursor: pointer; }
   border-radius: var(--appbar-who-radius, var(--r-chip));
   -webkit-tap-highlight-color: transparent;
 }
-.appbar__who:focus-visible { outline: var(--focus); outline-offset: 2px; }
+.appbar__who:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .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); }
@@ -2264,6 +2304,29 @@ button { font: inherit; cursor: pointer; }
 .action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
 .action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
 
+/* PRESS (Lh 2026-09-25): every CONTROL answers a tap — it gives under the finger and springs back, its choice fill fades in;
+   INFORMATION never does (no pointer, no press). One list, zero specificity: a component's own rule always wins. */
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
+  .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item) {
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: scale var(--motion-press) ease-out;
+}
+/* a CHOICE's fill fades in as it is picked (a button's colour never changes on a tap, so it does not fade) */
+:where(.chip--pick, .tile--pick, .day, .segment__item, .calendar__day, .float-bar__item, .menu__item) {
+  transition: scale var(--motion-press) ease-out, background-color var(--motion-press) ease-out, color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
+}
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
+  .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active:not(:disabled, [aria-disabled="true"]) {
+  scale: var(--press-scale);
+}
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, a.tile, button.tile, .day, .segment__item, .calendar__day, .float-bar__item,
+  .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+@media (prefers-reduced-motion: reduce) {
+  :where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
+    .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active { scale: none; }
+}
+
 /* ---- css/numbers.css — ring, track, band, dot grid, picker, badge, bars ---- */
 /* ============================================================
    cardds/numbers.css — big numbers inside cards:
@@ -2300,7 +2363,7 @@ button { font: inherit; cursor: pointer; }
 }
 .ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
 .ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
-.card--3 .ring__label { color: inherit; opacity: 0.7; }
+.card--3 .ring__label { color: inherit; opacity: var(--dim); }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
 .ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
@@ -2353,6 +2416,7 @@ button { font: inherit; cursor: pointer; }
   background: color-mix(in srgb, var(--_ink) 30%, transparent);
   color: var(--_ink);
 }
+.track__step > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-title)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
 .track__step.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
@@ -2374,7 +2438,7 @@ button { font: inherit; cursor: pointer; }
 }
 .band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
 .band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
-.card--3 .band__foot { color: inherit; opacity: 0.7; }
+.card--3 .band__foot { color: inherit; opacity: var(--dim); }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
 .band-stack {
@@ -2473,7 +2537,7 @@ button { font: inherit; cursor: pointer; }
 }
 .picker::after { left: auto; right: calc(100% / 3); }
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
-.card--3 .picker__unit { color: inherit; opacity: 0.7; }
+.card--3 .picker__unit { color: inherit; opacity: var(--dim); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
   .picker__item { opacity: 0.3; animation: picker-focus linear both; animation-timeline: view(x); }
@@ -2574,7 +2638,7 @@ button { font: inherit; cursor: pointer; }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
 .avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
 .avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
@@ -2619,7 +2683,8 @@ button { font: inherit; cursor: pointer; }
 }
 .avatar-pick__name { font: var(--avatar-pick-name-font, var(--type-label)); font-size: var(--avatar-pick-name-font-size, var(--fs-sm)); }
 .avatar-pick__role { font: var(--avatar-pick-role-font, var(--type-caption)); color: var(--avatar-pick-role-ink, var(--card-muted)); margin-top: calc(-1 * var(--sp-1)); }
-.card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }
+.avatar-pick__item[aria-pressed="true"] > .avatar { background: var(--avatar-pick-on-bg, var(--accent)); color: var(--avatar-pick-on-ink, var(--on-accent)); border-color: transparent; } /* the picked person */
+.card--3 .avatar-pick__role { color: inherit; opacity: var(--dim); }
 
 /* ---- css/choice.css — check, toggle, toggle chip, chip grid, days, calendar, mood, pin, composer ---- */
 /* ============================================================
@@ -2763,7 +2828,7 @@ button { font: inherit; cursor: pointer; }
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
 .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
-.card--3 .calendar__wd { color: inherit; opacity: 0.7; }
+.card--3 .calendar__wd { color: inherit; opacity: var(--dim); }
 .calendar__day {
   width: 100%;
   max-width: var(--calendar-day-max-w, var(--tap));
@@ -2866,7 +2931,7 @@ button { font: inherit; cursor: pointer; }
 .composer__input::placeholder { color: inherit; opacity: 0.4; }
 .composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--composer-bar-gap, var(--sp-3)); }
 .composer__hint { font: var(--composer-hint-font, var(--type-caption)); color: var(--composer-hint-ink, var(--card-muted)); }
-.card--3 .composer__hint { color: inherit; opacity: 0.7; }
+.card--3 .composer__hint { color: inherit; opacity: var(--dim); }
 
 /* ---- slider: one value along a track, a thumb-size knob ----
    <label class="slider"><span class="slider__label">ขนาดตัวหนังสือ</span><input class="slider__range" type="range" min="100" max="160" step="15" aria-label="ขนาดตัวหนังสือ"></label>
@@ -3209,7 +3274,7 @@ button { font: inherit; cursor: pointer; }
 .quote__text { margin: 0; font: var(--quote-text-font, var(--type-h1)); letter-spacing: var(--track-h1); text-wrap: balance; }
 .quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
 .quote__by { font: var(--quote-by-font, var(--type-caption)); color: var(--quote-by-ink, var(--card-muted)); }
-.card--3 .quote__by { color: inherit; opacity: 0.7; }
+.card--3 .quote__by { color: inherit; opacity: var(--dim); }
 
 /* ---- tile grid: big square tiles — icon top, label bottom ----
    <div class="tile-grid"><button class="tile"><svg class="icon"/><span class="tile__label">Light</span></button>
@@ -3235,11 +3300,10 @@ button { font: inherit; cursor: pointer; }
   font: inherit;
   text-align: left;
   position: relative;
-  cursor: pointer;
 }
 .tile__label { font: var(--tile-label-font, var(--type-title)); }
 .tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: 0.7; }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: var(--dim); }
 .tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
 .tile--on { background: var(--tile-on-bg, var(--accent)); color: var(--tile-on-ink, var(--on-accent)); border-color: transparent; }
 .tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
@@ -3247,7 +3311,7 @@ button { font: inherit; cursor: pointer; }
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
 /* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-.tile--stat { border-color: transparent; background: none; padding-inline: 0; cursor: default; }
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; }
 .tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
@@ -3261,6 +3325,8 @@ button { font: inherit; cursor: pointer; }
 }
 /* tinted tiles: slot colors inside a card (schedule, notes) */
 .tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); color: var(--tile-2-ink, var(--card-2-ink)); border-color: transparent; }
+.tile--4 { background: var(--tile-4-bg, var(--card-4-bg)); color: var(--tile-4-ink, var(--card-4-ink)); border-color: transparent; }
+.tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); color: var(--tile-5-ink, var(--card-5-ink)); border-color: transparent; }
 .tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); color: var(--tile-3-ink, var(--card-3-ink)); border-color: transparent; }
 
 /* ---- fold: a sticky-note corner on any card (decorative) ----
@@ -3269,7 +3335,7 @@ button { font: inherit; cursor: pointer; }
    the corner read as a notch with a line through it rather than a lifted flap.
    The COLOUR goes transparent rather than the border going to 0, so the box
    keeps its geometry and a fold card still measures the same as the cards
-   beside it in a deck. */
+   beside it. */
 .card--fold {
   border-color: transparent;
   border-bottom-right-radius: 0;
@@ -3446,7 +3512,7 @@ button { font: inherit; cursor: pointer; }
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
    Modal (ask) · popover menu · expanding banner · float bar ·
-   callout · swipe deck. The sheet (peek / half / full / page)
+   callout. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
@@ -3517,7 +3583,7 @@ button { font: inherit; cursor: pointer; }
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {
@@ -3589,7 +3655,7 @@ button { font: inherit; cursor: pointer; }
   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); }
+.menu__item[aria-current] { background: var(--accent); color: var(--on-accent); }
 @supports (anchor-name: --a) {
   .menu[popover] {
     position-area: block-end span-inline-end;
@@ -3700,8 +3766,7 @@ button { font: inherit; cursor: pointer; }
 }
 /* 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__item[aria-current]:not([aria-current="false"]) { 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 ----
@@ -3735,18 +3800,7 @@ button { font: inherit; cursor: pointer; }
   border-left: 0;
 }
 .callout__title { font: var(--callout-title-font, var(--type-title)); }
-.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: 0.7; }
-/* ---- 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(--deck-pad-top, var(--sp-4)) var(--deck-pad-x, var(--sp-4)) var(--deck-pad-bottom, 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(--deck-actions-gap, var(--sp-8)); }
-.deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
-
+.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: var(--dim); }
 /* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
    <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
      <p class="splash__text">…</p></div></section>

package/dist/cards/Card.d.ts

@@ -1,14 +1,14 @@
 import { type ComponentProps } from 'react';
 export interface CardProps extends ComponentProps<'article'> {
-    /** the tone slot: 1 (default, light) · 2 (tinted) · 3 (dark / accent — controls invert automatically) */
-    tone?: 1 | 2 | 3;
+    /** the tone slot: 1 (default, light) · 2 (tinted) · 3 (dark / accent — controls invert automatically) · 4 · 5 (more colours, from the palette) */
+    tone?: 1 | 2 | 3 | 4 | 5;
     /** compact: a small card inside a card or a sheet body (a note, a promo) */
     sm?: boolean;
     /** a list row that is its own card: thumb · body · end, in a CardList */
     row?: boolean;
     /** the image IS the card: a Placeholder or img first, text over a scrim */
     cover?: boolean;
-    /** a sticky-note corner, no border (swipe decks, quotes) */
+    /** a sticky-note corner, no border (quotes) */
     fold?: boolean;
     /** one card at the human centre of a `Screen fill` (the introduction screens) */
     centre?: boolean;

package/dist/choice/Calendar.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. It shows ONE month and knows no dates:
  *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). */
 export function Calendar({ title, days = 30, start = 1, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel = 'Previous', nextLabel = 'Next', marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
-    const [inner, setInner] = useState(defaultSelected);
-    const day = selected !== undefined ? selected : inner;
-    const pick = (d) => { if (selected === undefined)
-        setInner(d); onSelect?.(d); };
+    const [day, setOwn] = useControlled(selected, defaultSelected);
+    const pick = (d) => { setOwn(d); onSelect?.(d); };
     return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: prevLabel, onClick: onPrev }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: nextLabel, onClick: onNext })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (_jsx("button", { type: "button", className: cx('calendar__day', marks.includes(d) && 'calendar__day--mark', marks2.includes(d) && 'calendar__day--mark2'), "aria-selected": d === day ? 'true' : undefined, onClick: () => pick(d), disabled: disabled.includes(d), style: d === 1 ? { '--start': start } : undefined, children: d }, d)))] })] }));
 }