@usableapp/cardds 0.7.13 → 0.7.15

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 > 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.15 — 2026-09-25
+
+### Removed (breaking for anyone using them)
+- Palettes `shine` and `field`. `data-palette="shine"|"field"` → pick `clay`, `roast`, `hydro`, `orchard` or `vers`.
+  The `Palette` type no longer lists them.
+
+### Added
+- Palette `vers`: white surface, champagne paper, sage brand, earth tones 2·4·5, signals from salmon.
+- Palette `orchard` (reworked): modern earth (linen · bone · sand · moss · sage mist · clay); each tone's ink is a deep
+  shade of its own ground, so lines tint with the ground. Fields and PIN cells are white. Vivid accents: primary `Btn`
+  yellow, avatars fuchsia, `Ring` and a `Toggle` that is on in sky, the count badge and dot a in maple. Every one of these
+  still yields to its knob (`--btn-primary-bg`, `--avatar-bg`, `--badge-bg`…) set by a project.
+- Tokens `--highlight-1` … `--highlight-4`: four atmosphere colours a palette may set (grey in the wireframe). Nothing
+  changes for a project that doesn't set them.
+- Card tones 4 · 5 and signals `--signal-warn` · `--signal-ok` · `--signal-info` (with `--signal-error`).
+- Gallery: a `Palette` page (type group) — every colour role of the palette on now, plus stories `Signals` and `Highlights`.
+
+## 0.7.14 — 2026-09-25
+
+### Added
+- `Btn form`: a form's button. It is sized to its words with wide sides (58px, knob `--btn-form-pad-x`) and centred on its
+  own row under the field, so it reads as part of the form, not a page CTA. Use it for a SheetStep's button:
+  `<Btn primary block>` → `<Btn primary form>`. Don't combine it with `block` (block wins). Replaces the native `form`
+  attribute on `Btn`. Story `Btn · Form`.
+
+### Changed
+- Gallery: `IconBtn`'s stories are on the Btn page (no IconBtn page). The component and its API are unchanged.
+
 ## 0.7.13 — 2026-09-25
 
 ### Added

package/css/actions.css

@@ -123,6 +123,7 @@
    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%; }
+.btn--form    { justify-self: center; align-self: center; margin-inline: auto; padding-inline: var(--btn-form-pad-x, calc(var(--sp-base) * 14.5)); /* 58px: "ส่งรหัส OTP" at 213px, 20% longer than at 40px sides (Lh 2026-09-25) */ } /* a form's button: its words + wide sides, centred in a grid (a step) or a block (Lh 2026-09-25) */
 /* 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,

package/css/card.css

@@ -26,6 +26,8 @@
 
 .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,

package/css/media.css

@@ -105,6 +105,8 @@
 }
 /* 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) ----

package/css/palette.css

@@ -26,46 +26,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;
@@ -106,6 +66,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

package/css/tokens.css

@@ -167,6 +167,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) */
@@ -187,6 +190,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 */

package/dist/actions/Btn.d.ts

@@ -1,11 +1,14 @@
 import { type ComponentProps } from 'react';
-export interface BtnProps extends ComponentProps<'button'> {
+export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
     /** the filled accent button — the one forward move */
     primary?: boolean;
     /** ink on whatever it sits on, a faint outline */
     quiet?: boolean;
     /** full width */
     block?: boolean;
+    /** a form's button: sized to its words with wide side padding, centred on its own row — it reads as part of the form above it,
+     *  not a page CTA (Lh 2026-09-25). Replaces the native `form` attribute (a button outside its <form> — not a cardds pattern). */
+    form?: boolean;
     /** the one giant call to action in a tinted card ("Taxi!") */
     xl?: boolean;
     /** a link styled as a button */
@@ -15,129 +18,76 @@ export interface BtnProps extends ComponentProps<'button'> {
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
  * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
-export declare function Btn({ primary, quiet, block, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
-    ref?: import("react").Ref<HTMLButtonElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    disabled?: boolean | undefined;
-    form?: string | undefined;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
-    formEncType?: string | undefined;
-    formMethod?: string | undefined;
-    formNoValidate?: boolean | undefined;
-    formTarget?: string | undefined;
-    name?: string | undefined;
-    value?: string | readonly string[] | number | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-    autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    slot?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+export declare function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
+    name?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
+    title?: string | undefined | undefined;
+    children?: import("react").ReactNode;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    part?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-    popoverTarget?: string | undefined;
-    inert?: boolean | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-    is?: string | undefined;
-    exportparts?: string | undefined;
-    part?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
+    tabIndex?: number | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
+    "aria-flowto"?: string | undefined | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    children?: import("react").ReactNode | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
-    } | undefined;
+    } | undefined | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -306,6 +256,58 @@ export declare function Btn({ primary, quiet, block, xl, href, className, type,
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    ref?: import("react").Ref<HTMLButtonElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    disabled?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
     href: string | undefined;
     type: "button" | "submit" | "reset" | undefined;
     className: string;

package/dist/actions/Btn.js

@@ -4,11 +4,11 @@ import { cx } from '../cx.js';
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
  * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
-export function Btn({ primary, quiet, block, xl, href, className, type, ...rest }) {
+export function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }) {
     return createElement(href ? 'a' : 'button', {
         href,
         type: href ? undefined : type ?? 'button',
-        className: cx('btn', primary && 'btn--primary', quiet && 'btn--quiet', block && 'btn--block', xl && 'btn--xl', className),
+        className: cx('btn', primary && 'btn--primary', quiet && 'btn--quiet', block && 'btn--block', form && 'btn--form', xl && 'btn--xl', className),
         ...rest,
     });
 }

package/dist/cardds.css

@@ -208,6 +208,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 +231,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 +296,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 +336,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
@@ -564,6 +613,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,
@@ -2053,6 +2104,7 @@ button { font: inherit; cursor: pointer; }
    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%; }
+.btn--form    { justify-self: center; align-self: center; margin-inline: auto; padding-inline: var(--btn-form-pad-x, calc(var(--sp-base) * 14.5)); /* 58px: "ส่งรหัส OTP" at 213px, 20% longer than at 40px sides (Lh 2026-09-25) */ } /* a form's button: its words + wide sides, centred in a grid (a step) or a block (Lh 2026-09-25) */
 /* 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,
@@ -3260,6 +3312,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) ----

package/dist/cards/Card.d.ts

@@ -1,7 +1,7 @@
 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 */

package/dist/media/Tile.d.ts

@@ -32,7 +32,7 @@ export interface TileProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /** spans the whole grid */
     wide?: boolean;
     /** a slot tint */
-    tone?: 2 | 3;
+    tone?: 2 | 3 | 4 | 5;
     /** div (default), button for a tap tile — pick tiles render as a label */
     as?: 'div' | 'button';
 }

package/dist/numbers/Band.d.ts

@@ -6,7 +6,7 @@ export interface BandProps extends ComponentProps<'article'> {
     num: ReactNode;
     /** the footnote under the label */
     foot?: ReactNode;
-    tone?: 1 | 2 | 3;
+    tone?: 1 | 2 | 3 | 4 | 5;
 }
 /** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
 export declare function Band({ label, num, foot, tone, className, ...rest }: BandProps): import("react").JSX.Element;

package/dist/scaffold/Screen.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps, type ReactNode, type Ref } from 'react';
-export type Palette = 'clay' | 'shine' | 'field' | 'roast' | 'hydro';
+export type Palette = 'clay' | 'roast' | 'hydro' | 'orchard' | 'vers';
 export interface ScreenProps extends ComponentProps<'div'> {
     /** exactly one phone height (100dvh), clipped: the box a Step or a SheetStack fills — an app screen, not a scrolling page */
     fill?: boolean;

package/dist/sheets/StackSheet.d.ts

@@ -12,7 +12,7 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
     /** the SHEET HEAD's title — an h2 (the page's h1 is its own) */
     title: ReactNode;
     /** the paper: 1 light · 2 tinted · 3 dark */
-    tone?: 1 | 2 | 3;
+    tone?: 1 | 2 | 3 | 4 | 5;
     /** the head's end when the sheet has no tabs: an Icon, an IconRow */
     icon?: ReactNode;
     /** TABS in the head: icon buttons at the end — the sheet's pages. A tap on one in a peeked head opens the sheet on it */

package/dist/templates/Home.d.ts

@@ -7,7 +7,7 @@ export interface HomeSheet {
     /** the sheet head's end when it has no tabs: an Icon, an IconRow */
     icon?: ReactNode;
     /** the paper: 1 light · 2 tinted · 3 dark (default: 2, 3, 1, 2, 3 by place) */
-    tone?: 1 | 2 | 3;
+    tone?: 1 | 2 | 3 | 4 | 5;
     /** the sheet's pages as icon tabs in its head (a count shows as a small circle over the icon) — see `StackSheet` */
     tabs?: StackSheetTab[];
     /** the tab shown first (default: the first) */

package/package.json

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