@thewhatmatters/wmds 0.4.32 → 0.4.34

package/CHANGELOG.md

@@ -7,6 +7,70 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.34
+
+**Required and optional fields: mark the exception, read the badge with the field, never on autofill. Field width and form layout: widths that hint at the answer, a State select, side labels only on wide screens, and counters that don't cut text. Dropdowns, radios and checkboxes: a native Select for forms, bigger boxes with visible borders, and errors on Continue.**
+
+- **Field** `description` sits **between the label and the control** (was below; Labels and placeholders F8), so every hint is read before typing. New **`counter`** prop: a character counter, the one helper that stays below the control. Both join the control's accessible description (hint first). New test **fieldHintOrder.test.ts**.
+- **IntakeForm**: hints above their fields; the details counter ("67 / 400") uses `counter`, below the box. Company's hint is "So we can read up on you first."
+- **Input** `endBadge` (Required and optional Q8):
+  - Screen readers hear the badge as part of the field's description, after the hint.
+  - With a status icon, the icon comes first, then the badge (it used to be the badge, then the icon).
+  - The field keeps room for the badge, so a long value stops before it. A new interaction test checks this at phone width.
+  - Input warns in the console when `endBadge` sits on an autofill field (`autoComplete` name, email, tel, password, address or organization fields).
+- **wmds-check** `badge-on-autofill` (new, error): fails an Input with `endBadge` on an autofill field. Put "(optional)" in the label there.
+- **IntakeForm** (Q2, Q7, Q9):
+  - Name, email and project details carry `aria-required`.
+  - The website field is now labelled "Your website", with an "Optional" badge and a stated use ("So we can see what you have now.").
+  - **Company is off by default** (`company` turns it on). It's labelled "Company (optional)", since it's an autofill field.
+- **Field width** (Form layout L7): **Input** and **Select** take `width` in characters (`2ch`, `4ch`, `5ch`, `10ch`, `20ch`; default `full`) for fixed-length answers, never wider than their container. The label and hint keep their own width. A short field keeps its width when an error shows; the status band under it is at least 18rem wide, so the message reads on one or two lines. Story **Components/Input → Pattern — field widths** (city, state and ZIP share a row).
+- **State select** (L7): `usStateOptions` (new export) lists the 50 states and DC as two-letter abbreviations. Story **Components/Select → Pattern — US state**.
+- **Select `native`** (Dropdowns C8): the browser's own `<select>` in the WMDS shell, with the same chevron, sizes and focus ring, and 16px text on touch. The phone opens its own picker, typing jumps to an option, the browser can autofill it (`autoComplete="address-level1"`), and it submits with a plain form. It's the default when a Select has `name` or `autoComplete`. The custom listbox stays for toolbars, filters and menus with icons or counts (native options are text only). New `required` prop.
+- **Select** `description` sits above the trigger (Labels F8), like Input, TextArea and Field.
+- **Field** `orientation="horizontal"` (L8) puts the label beside the control only from `lg` (1024) and stacks below it. Use it for dense app settings only, never marketing or contact forms.
+- **IntakeForm counter** (L9): no `maxLength`, so a long paste stays whole. The counter says "N characters left" or "You have N characters too many". A screen reader hears it once typing pauses, not on every keystroke. Over the limit, the error band repeats the counter's words ("You have 7 characters too many"), and the counter line hides while the band shows: one message, not two. `intakeCounterText` is exported. Story **Pattern — over the character limit**.
+- **IntakeModal footer** (Buttons U6, U8): Continue comes first and stays enabled; Back follows as a `ghost` button. **IntakeForm `submitCount`** (new): the caller counts Continue presses. From the first press, every field shows its error. Two or more errors put an **ErrorSummary** at the top and focus it; one error focuses its field (V5, closes gap #49). `continueDisabled` is now discouraged. Story **Components/IntakeModal → Pattern — errors on Continue**.
+- **Select**'s empty-choice text ("Select…") uses `text-muted`, which clears 4.5:1. It was `text-disabled`, which failed axe.
+- **StepProgress** names its progressbar ("Step 1 of 4"), fixing a known axe violation.
+- **Checkbox and Radio** (Dropdowns C3, C4):
+  - The box is 24px (`md`; `sm` grows to 24px on touch screens).
+  - Rows are 44px tall on touch screens.
+  - The empty box's border uses `border-control`, which clears 3:1 (it was 1.3:1).
+- **PillGroup** `label` (new): a visible question above the pills that names the group (C2, C9). `aria-label` is now optional, for a question shown as a heading right above.
+- **Docs** (C7, C9): when to use Select, Switch, SegmentedControl, PillGroup and SelectableCard. The Select "with label" story now has 8 alphabetical options, and the PillGroup story starts with nothing selected.
+- **Stories:** the Input badge stories use a website field with "Optional", not an email field. They add "Pattern — end badge with a long value" and "Pattern — end badge + status icon". The validation morph demo drops its badge from the email field.
+
+### Consumer actions
+
+- Run `npx wmds-check`, and move any badge on a name, email, phone, password, address or company field into its label ("Business email (optional)").
+- Mark the exception: in a mostly-required form, badge the optional fields "Optional".
+- `IntakeForm` no longer shows Company unless you pass `company`. The website field's accessible name changed from "Link" to "Your website".
+
+- Give ZIP, phone, year and state fields a `width`, and use `usStateOptions` for a State select with `autoComplete="address-level1"`. Remove `maxLength` from text people write, and show a counter instead.
+- Form Selects with `name` or `autoComplete` are now native; pass `native={false}` to keep the custom listbox (needed for options with `start`/`end`).
+- IntakeModal: stop passing `continueDisabled`. Count Continue presses into IntakeForm's `submitCount` instead, and note that Back is now a ghost button after Continue.
+- Give **PillGroup** a `label` (the question).
+- `Field orientation="horizontal"` now stacks below 1024px. If you relied on side labels on tablets, that changes.
+- If a **Field** `description` is a character counter, pass it as `counter` so it stays below the control.
+
+## 0.4.33
+
+**Cards can take their own tone, and a Carousel can drift on its own with a Pause button and a follow cursor.**
+
+- **Card** `tone` (new): `inverse`, `field` or `light`, the same scopes **Band** uses, so a card can stand apart from its section (testimonials, offers). Everything inside re-skins. New export `cardTones` / `CardTone`.
+- **`[data-theme="light"]`** now scopes the light palette (colors.css and stateColors.css), so a light card or block works inside a dark or toned section.
+- **Carousel** `autoplay` (new): drifts the row slowly back and forth (`true` or `{ speed }` in px a second). It holds on hover, on focus inside the row, during a drag or a scrub, off screen and in a hidden tab, and never runs under reduced motion. A **Pause** / **Play** button sits beside the scrubber (WCAG 2.2.2).
+- **Carousel** `loop` (new): the items repeat seamlessly. A copy follows the last item (hidden from assistive tech, `inert`), and the row wraps back as it passes one full set, so it never ends; with `autoplay` it drifts one way. No scrubber or counter with a loop.
+- **Carousel** sets **`--carousel-velocity`** on its root while the row moves: -1 to 1, which way and how fast, smoothed by a Motion spring and easing back to 0 when it stops (always 0 under reduced motion). Use it straight, without a CSS transition. Items can lean or skew with it, e.g. `rotate-[calc(var(--carousel-velocity,0)*8deg)]`.
+- **Carousel**: a row you can drag no longer selects text (`select-none` while it overflows), so a press-and-drag doesn't paint selection over the items.
+- **Carousel** `cursor` (new): a decorative badge that follows a mouse over the row (fine pointers that can hover), e.g. a hand icon that says "drag me".
+- **Carousel** reads reduced motion through Motion's config, so a `MotionConfig reducedMotion` around it is respected (no change under the default `user`).
+- New tests: **cardTone.test.ts**, and Carousel interaction tests **autoplay drifts, holds on hover and focus, and pauses**, **autoplay never runs under reduced motion** , **loop repeats the items seamlessly and wraps back** and **--carousel-velocity follows the row's movement and settles to 0**. New stories **Card → Reference — tones** and **Carousel → Reference — autoplay with a follow cursor**.
+
+### Consumer actions
+
+If your brand stylesheet sets colours on `:root` only, also list `[data-theme="light"]` (`:root, [data-theme="light"] { … }`) so a `tone="light"` card picks them up.
+
 ## 0.4.32
 
 **Errors and validation: an error summary, errors announced as errors, no lost typing, and no iOS zoom. Labels and placeholders: every field named, the hint above the field, and inset buttons you can tap and see focused.**

package/bin/wmds-check.mjs

@@ -22,6 +22,9 @@
  *                             (Errors and validation V10; a status-only success tick is fine)
  *   missing-label     error  a WMDS Input, TextArea, Select or Search with no label, aria-label or
  *                             aria-labelledby (Labels and placeholders F7; a spread {...props} is trusted)
+ *   badge-on-autofill error  an Input with endBadge on an autofill field (autoComplete name, email, tel,
+ *                             password, address, organization…; Required and optional Q8): autofill paints
+ *                             over the badge, so say "(optional)" in the label
  *   brand-contrast    error  a brand-kit pair in the app's CSS under WCAG AA 4.5:1: --color-on-X (and
  *                             --color-on-X-muted) on --color-X, for primary, brand-surface and field,
  *                             when both are hex values in the same rule
@@ -55,6 +58,15 @@ try {
   // Not installed: the pattern rules are skipped.
 }
 
+// Required and optional Q8: autocomplete tokens browsers fill (same list as autofillFields.ts).
+const autofillTokens = [
+  "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname",
+  "email", "username", "new-password", "current-password", "one-time-code", "organization", "organization-title",
+  "street-address", "address-line1", "address-line2", "address-line3", "address-level1", "address-level2",
+  "address-level3", "address-level4", "country", "country-name", "postal-code",
+  "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-extension",
+];
+
 const skipDirs = new Set(["node_modules", ".next", "dist", "build", "out", ".git", "coverage", "storybook-static"]);
 const files = [];
 const cssFiles = [];
@@ -264,6 +276,18 @@ for (const file of files) {
     }
   }
 
+  // Q8: no badge inside an autofill field. Keep this list in step with src/components/atoms/Input/autofillFields.ts.
+  for (const match of source.matchAll(/<Input(?=[\s/>])/g)) {
+    const element = elementFrom(match.index);
+    if (!/\bendBadge=/.test(element)) continue;
+    const autoComplete = element.match(/\bautoComplete=(?:"([^"]*)"|\{\s*["']([^"']*)["']\s*\})/);
+    const value = autoComplete?.[1] ?? autoComplete?.[2];
+    if (value == null || !value.toLowerCase().split(/\s+/).some((token) => autofillTokens.includes(token))) continue;
+    const line = source.slice(0, match.index).split("\n").length;
+    if (ignored(lines, line - 1, "badge-on-autofill")) continue;
+    report(file, line, "badge-on-autofill", "error", `endBadge on autoComplete="${value}" — autofill covers it; put "(optional)" in the label`);
+  }
+
   // V10: an error or warning status always says what's wrong.
   for (const match of source.matchAll(/\bstatus=(?:"(error|warning)"|\{\s*["'](error|warning)["']\s*\})/g)) {
     const element = elementFrom(source.lastIndexOf("<", match.index));

package/dist/colors.css

@@ -8,7 +8,8 @@
  * Status roles: error | success | warning (+ *-muted, on-*).
  * Brand actions: primary / on-primary (WhatMatters — separate from accent).
  */
-:root {
+:root,
+[data-theme="light"] {
   /* Native UI (scrollbars, form controls, autofill) follows the theme. */
   color-scheme: light;
 

package/dist/components/atoms/Checkbox/checkboxStyles.d.ts

@@ -9,7 +9,7 @@ export declare const checkboxBoxSizeClasses: Record<CheckboxSize, string>;
 export declare const checkboxCheckIconSizeClasses: Record<CheckboxSize, string>;
 export declare const checkboxIndeterminateBarSizeClasses: Record<CheckboxSize, string>;
 export declare const checkboxBoxBaseClasses: string;
-export declare const checkboxBoxUncheckedClasses = "border-border-emphasized bg-surface group-hover/checkbox:border-border-emphasized group-hover/checkbox:bg-body";
+export declare const checkboxBoxUncheckedClasses = "border-border-control bg-surface group-hover/checkbox:border-border-control group-hover/checkbox:bg-body";
 export declare const checkboxBoxCheckedClasses = "border-primary bg-primary text-primary-foreground group-hover/checkbox:border-primary group-hover/checkbox:bg-primary";
 /** Check / indeterminate / spinner marks on the filled box. */
 export declare const checkboxMarkClasses = "stroke-current text-inherit";

package/dist/components/atoms/Checkbox/checkboxStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/checkboxStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,aAAa,uBAAwB,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG/D,CAAC;AAEF,kIAAkI;AAClI,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG/D,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGrE,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG5E,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,eAAO,MAAM,2BAA2B,mHAC0E,CAAC;AAEnH,eAAO,MAAM,yBAAyB,0HACmF,CAAC;AAE1H,+DAA+D;AAC/D,eAAO,MAAM,mBAAmB,gCAAgC,CAAC;AAEjE,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,oBAAoB,QAA8B,CAAC;AAEhE,iFAAiF;AACjF,eAAO,MAAM,0BAA0B,QAAiD,CAAC;AAEzF,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,QAAkE,CAAC;AAEpG,yFAAyF;AACzF,eAAO,MAAM,2BAA2B,WAAW,CAAC;AAEpD,2DAA2D;AAC3D,eAAO,MAAM,6BAA6B,sCAAsC,CAAC;AAEjF,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE,eAAO,MAAM,mCAAmC,QAA4C,CAAC;AAE7F,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGtE,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,wCAAwC,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGjF,CAAC;AAEF,eAAO,MAAM,sBAAsB,uDACmB,CAAC;AAEvD,0DAA0D;AAC1D,eAAO,MAAM,2BAA2B,iBAAiB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,QAA0D,CAAC;AAE1F,eAAO,MAAM,0BAA0B,uBAAuB,CAAC;AAE/D,eAAO,MAAM,0BAA0B,+HACuF,CAAC;AAE/H,eAAO,MAAM,wBAAwB,sKACgI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,OAAO,EACtB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CAWR;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK7F;AAED,iEAAiE;AACjE,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAK1E"}
+{"version":3,"file":"checkboxStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/checkboxStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,aAAa,uBAAwB,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI/D,CAAC;AAEF,kIAAkI;AAClI,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI/D,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGrE,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG5E,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6GAEoE,CAAC;AAE7G,eAAO,MAAM,yBAAyB,0HACmF,CAAC;AAE1H,+DAA+D;AAC/D,eAAO,MAAM,mBAAmB,gCAAgC,CAAC;AAEjE,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,oBAAoB,QAA8B,CAAC;AAEhE,iFAAiF;AACjF,eAAO,MAAM,0BAA0B,QAAiD,CAAC;AAEzF,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,QAAkE,CAAC;AAEpG,yFAAyF;AACzF,eAAO,MAAM,2BAA2B,WAAW,CAAC;AAEpD,2DAA2D;AAC3D,eAAO,MAAM,6BAA6B,sCAAsC,CAAC;AAEjF,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE,eAAO,MAAM,mCAAmC,QAA4C,CAAC;AAE7F,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGtE,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,wCAAwC,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGjF,CAAC;AAEF,eAAO,MAAM,sBAAsB,uDACmB,CAAC;AAEvD,0DAA0D;AAC1D,eAAO,MAAM,2BAA2B,iBAAiB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,QAA0D,CAAC;AAE1F,eAAO,MAAM,0BAA0B,uBAAuB,CAAC;AAE/D,eAAO,MAAM,0BAA0B,+HACuF,CAAC;AAE/H,eAAO,MAAM,wBAAwB,sKACgI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,OAAO,EACtB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CAWR;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK7F;AAED,iEAAiE;AACjE,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAK1E"}

package/dist/components/atoms/Checkbox/checkboxStyles.js

@@ -5,21 +5,21 @@ import { motionTransition as n } from "../../../lib/motion.js";
 import { inputStatusBannerSurfaceClasses as r, inputStatusShellClasses as i } from "../Input/inputShellStyles.js";
 //#region src/components/atoms/Checkbox/checkboxStyles.ts
 var a = ["sm", "md"], o = {
-	sm: "min-h-7 gap-2",
-	md: "min-h-9 gap-2.5"
+	sm: "min-h-7 gap-2 pointer-coarse:min-h-11",
+	md: "min-h-9 gap-2.5 pointer-coarse:min-h-11"
 }, s = {
-	sm: "size-7",
+	sm: "size-7 pointer-coarse:size-9",
 	md: "size-9"
 }, c = {
-	sm: "size-[18px] rounded",
-	md: "size-[22px] rounded-md"
+	sm: "size-[18px] rounded pointer-coarse:size-6",
+	md: "size-6 rounded-md"
 }, l = {
 	sm: "size-3",
 	md: "size-3.5"
 }, u = {
 	sm: "h-0.5 w-2.5",
 	md: "h-0.5 w-3"
-}, d = e("pointer-events-none flex items-center justify-center border shadow-none", "transition-[background-color,border-color,color]", n("fast")), f = "border-border-emphasized bg-surface group-hover/checkbox:border-border-emphasized group-hover/checkbox:bg-body", p = "border-primary bg-primary text-primary-foreground group-hover/checkbox:border-primary group-hover/checkbox:bg-primary", m = "stroke-current text-inherit", h = "opacity-50", g = t("ui-label"), _ = e(t("caption"), "leading-snug"), v = e("ml-auto shrink-0 tabular-nums", t("caption")), y = "flex-1", b = "flex min-w-0 items-baseline gap-2", x = "flex min-w-0 flex-col gap-px", S = e(g, "leading-tight"), C = {
+}, d = e("pointer-events-none flex items-center justify-center border shadow-none", "transition-[background-color,border-color,color]", n("fast")), f = "border-border-control bg-surface group-hover/checkbox:border-border-control group-hover/checkbox:bg-body", p = "border-primary bg-primary text-primary-foreground group-hover/checkbox:border-primary group-hover/checkbox:bg-primary", m = "stroke-current text-inherit", h = "opacity-50", g = t("ui-label"), _ = e(t("caption"), "leading-snug"), v = e("ml-auto shrink-0 tabular-nums", t("caption")), y = "flex-1", b = "flex min-w-0 items-baseline gap-2", x = "flex min-w-0 flex-col gap-px", S = e(g, "leading-tight"), C = {
 	sm: "flex min-w-0 items-start gap-2",
 	md: "flex min-w-0 items-start gap-2.5"
 }, w = {

package/dist/components/atoms/Input/Input.d.ts

@@ -1,10 +1,12 @@
 import { type InputHTMLAttributes, type ReactElement, type ReactNode } from "react";
 import { type InputMessagePosition, type InputSize, type InputStatus } from "./inputShellStyles";
+import { type FieldWidth } from "./fieldWidth";
+export { fieldWidths, type FieldWidth } from "./fieldWidth";
 export type { InputMessagePosition, InputSize, InputStatus } from "./inputShellStyles";
 export { inputMessagePositions, inputSizes, inputStatuses } from "./inputShellStyles";
 /** Layout-only — not for colors, borders, or typography overrides. */
 export type InputLayoutClassName = string;
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "width"> {
     size?: InputSize;
     /**
      * Optional visible label — omit for bare inputs. No label asterisk; use `endBadge` for Required.
@@ -26,10 +28,18 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** Monospace value — `type-code` instead of the sans face. For a read-only key or id. */
     mono?: boolean;
     /**
-     * Trailing inset inside the shell — pass {@link Badge} (e.g. Required).
-     * Atoms cannot import Badge; compose at call site. Combinable with `status` / `loading`.
+     * Trailing inset inside the shell — pass {@link Badge} ("Optional" or "Required", whichever is the
+     * exception in the form). Atoms cannot import Badge; compose at call site. Combinable with
+     * `status` / `loading`: the status icon comes first, then the badge. Screen readers hear it as part
+     * of the field's description. Not on autofill fields (name, email, tel, password, address,
+     * organization): autofill paints over it, so put "(optional)" in the label there.
      */
     endBadge?: ReactElement;
+    /**
+     * Field width in characters for fixed-length answers (ZIP `5ch`, year `4ch`, phone `10ch`); default
+     * `full`. Free-form answers stay full width (Form layout L7). The label and hint keep their own width.
+     */
+    width?: FieldWidth;
     /** Inside a parent pill (Search, CopyField) — no outer shell; the parent owns border and focus ring. */
     inline?: boolean;
     className?: InputLayoutClassName;

package/dist/components/atoms/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EA2BL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEtF,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yFAAyF;IACzF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wGAAwG;IACxG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AA2CD;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAgLhB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EA2BL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAwC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE5D,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEtF,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yFAAyF;IACzF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wGAAwG;IACxG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAyED;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAgMhB,CAAC"}

package/dist/components/atoms/Input/Input.js

@@ -1,100 +1,135 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { typographyClass as t } from "../../../lib/typography.js";
-import { inputAttachedFieldClasses as n, inputAttachedInputClasses as ee, inputBaseClasses as r, inputCompoundInnerFieldClassesFor as i, inputCompoundShellClassesFor as a, inputControlStackClasses as o, inputDisabledClasses as te, inputEndBadgeAndStatusGapClasses as s, inputEndBadgeGapClasses as c, inputEndBadgeWrapperClasses as ne, inputFieldStackClasses as l, inputIconGapClasses as u, inputIconPositionClasses as d, inputIconSizeClasses as f, inputInlineClasses as p, inputMessagePositions as m, inputShellClasses as h, inputSizeClasses as g, inputSizes as _, inputSoloFocusRingBaseClasses as re, inputSoloFocusRingColorClasses as v, inputSoloRadiusClasses as ie, inputStatusGapClasses as y, inputStatusShellClasses as ae, inputStatuses as b, inputTrailingInsetClasses as x, inputTrailingInsetPositionClasses as S } from "./inputShellStyles.js";
-import { InputStatusBanner as C, warnStatusWithoutMessage as w } from "../inputShared/InputStatusBanner.js";
-import { InputTrailingAffordance as oe } from "../inputShared/InputTrailingAffordance.js";
-import { forwardRef as T, useId as se } from "react";
-import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { inputAttachedFieldClasses as n, inputAttachedInputClasses as r, inputBaseClasses as i, inputCompoundInnerFieldClassesFor as ee, inputCompoundShellClassesFor as te, inputControlStackClasses as a, inputDisabledClasses as o, inputEndBadgeAndStatusGapClasses as s, inputEndBadgeGapClasses as c, inputEndBadgeWrapperClasses as ne, inputFieldStackClasses as re, inputIconGapClasses as l, inputIconPositionClasses as ie, inputIconSizeClasses as ae, inputInlineClasses as u, inputMessagePositions as d, inputShellClasses as f, inputSizeClasses as p, inputSizes as m, inputSoloFocusRingBaseClasses as oe, inputSoloFocusRingColorClasses as h, inputSoloRadiusClasses as se, inputStatusGapClasses as g, inputStatusShellClasses as ce, inputStatuses as _, inputTrailingInsetClasses as le, inputTrailingInsetPositionClasses as ue } from "./inputShellStyles.js";
+import { InputStatusBanner as de, warnStatusWithoutMessage as fe } from "../inputShared/InputStatusBanner.js";
+import { InputTrailingAffordance as v } from "../inputShared/InputTrailingAffordance.js";
+import { isAutofillField as y } from "./autofillFields.js";
+import { fieldWidthBandStyle as b, fieldWidthStyle as x, fieldWidths as S } from "./fieldWidth.js";
+import { forwardRef as C, useId as pe } from "react";
+import { Fragment as me, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/atoms/Input/Input.tsx
-function k(e) {
+function E(e) {
 	e.label == null && e["aria-label"] == null && e["aria-labelledby"] == null && console.warn("[WMDS Input] Provide `label`, `aria-label`, or `aria-labelledby`.");
 }
-function A(e) {
+function D(e, t) {
+	e && y(t) && console.warn(`[WMDS Input] No \`endBadge\` on an autofill field (autocomplete="${t}"): put "(optional)" in the label.`);
+}
+function O(e) {
 	e.message != null && e.status == null && console.warn("[WMDS Input] `message` requires `status`."), e.inline && (e.label != null || e.description != null || e.status != null || e.message != null) && console.warn("[WMDS Input] `inline` is for a parent pill (Search, CopyField) — omit label, description, and validation.");
 }
-function j(e, t, n) {
-	return t && n ? s[e] : t ? c[e] : n ? y[e] : !1;
+var k = {
+	sm: .625,
+	md: .75,
+	lg: 1
+}, A = {
+	sm: 2,
+	md: 2.5,
+	lg: 2.75
+}, j = {
+	[g.sm]: 2,
+	[g.md]: 2.5,
+	[g.lg]: 2.75,
+	[c.sm]: 4.5,
+	[c.md]: 5,
+	[c.lg]: 6,
+	[s.sm]: 6.5,
+	[s.md]: 7,
+	[s.lg]: 8
+};
+function M(e, t, n) {
+	let r = k[e];
+	return `${(t ? A[e] : r) + (n === !1 ? r : j[n] ?? r)}rem + 2px`;
+}
+function N(e, t, n) {
+	return t && n ? s[e] : t ? c[e] : n ? g[e] : !1;
 }
-var M = T(function({ size: s = "md", label: c, description: m, status: _, message: y, messagePosition: b = "bottom", loading: T = !1, icon: M, endBadge: N, mono: P = !1, inline: F = !1, className: I, disabled: L, id: R, "aria-describedby": z, ...B }, V) {
-	w("Input", _, y);
-	let H = se(), U = R ?? H;
-	k({
+var P = C(function({ size: s = "md", label: c, description: d, status: m, message: g, messagePosition: _ = "bottom", loading: y = !1, icon: S, endBadge: C, width: k = "full", mono: A = !1, inline: j = !1, className: P, disabled: F, id: I, "aria-describedby": L, ...R }, z) {
+	fe("Input", m, g);
+	let he = pe(), B = I ?? he;
+	E({
 		label: c,
-		"aria-label": B["aria-label"],
-		"aria-labelledby": B["aria-labelledby"]
-	}), A({
-		status: _,
-		message: y,
-		messagePosition: b,
-		loading: T,
-		inline: F,
+		"aria-label": R["aria-label"],
+		"aria-labelledby": R["aria-labelledby"]
+	}), O({
+		status: m,
+		message: g,
+		messagePosition: _,
+		loading: y,
+		inline: j,
 		label: c,
-		description: m
+		description: d
 	});
-	let W = y != null && y.length > 0 && _ != null, G = N != null, K = !W && (T || _ != null), q = M != null, J = j(s, G, K), Y = m == null ? void 0 : `${U}-description`, X = W ? `${U}-message` : void 0, ce = [
-		z,
-		Y,
-		X
-	].filter(Boolean).join(" ") || void 0, le = /* @__PURE__ */ O(E, { children: [
-		q ? /* @__PURE__ */ D("span", {
-			className: e("pointer-events-none absolute top-1/2 inline-flex -translate-y-1/2 [&>svg]:size-full [&>svg]:shrink-0 [&>svg]:stroke-current", d[s], f[s]),
+	let V = g != null && g.length > 0 && m != null, H = C != null;
+	D(H, R.autoComplete);
+	let U = !V && (y || m != null), W = S != null, G = N(s, H, U), K = d == null ? void 0 : `${B}-description`, q = V ? `${B}-message` : void 0, J = H ? `${B}-badge` : void 0, ge = [
+		L,
+		K,
+		J,
+		q
+	].filter(Boolean).join(" ") || void 0, _e = /* @__PURE__ */ T(me, { children: [
+		W ? /* @__PURE__ */ w("span", {
+			className: e("pointer-events-none absolute top-1/2 inline-flex -translate-y-1/2 [&>svg]:size-full [&>svg]:shrink-0 [&>svg]:stroke-current", ie[s], ae[s]),
 			"aria-hidden": !0,
-			children: M
+			children: S
 		}) : null,
-		/* @__PURE__ */ D("input", {
-			...B,
-			ref: V,
-			id: U,
-			disabled: L,
-			"aria-invalid": _ === "error" || void 0,
-			"aria-describedby": ce,
-			className: e(te, P && "type-code !font-mono !leading-none", W ? e(n, g[s], q && u[s], J, ee) : e(r, F ? e(p, q && u[s], I ?? g[s]) : e(g[s], q && u[s], J, _ != null && _ !== "success" ? e("border", ae[_]) : h[s], ie[s], re, _ != null && _ !== "success" ? v[_] : v.default, I)))
+		/* @__PURE__ */ w("input", {
+			...R,
+			ref: z,
+			id: B,
+			disabled: F,
+			"aria-invalid": m === "error" || void 0,
+			"aria-describedby": ge,
+			className: e(o, A && "type-code !font-mono !leading-none", V ? e(n, p[s], W && l[s], G, r) : e(i, j ? e(u, W && l[s], P ?? p[s]) : e(p[s], W && l[s], G, m != null && m !== "success" ? e("border", ce[m]) : f[s], se[s], oe, m != null && m !== "success" ? h[m] : h.default, P)))
 		}),
-		G || K ? /* @__PURE__ */ O("span", {
-			className: e(x, S[s]),
-			children: [G ? /* @__PURE__ */ D("span", {
-				className: ne,
-				children: N
-			}) : null, K ? /* @__PURE__ */ D(oe, {
+		H || U ? /* @__PURE__ */ T("span", {
+			className: e(le, ue[s]),
+			children: [U ? /* @__PURE__ */ w(v, {
 				size: s,
-				status: T ? void 0 : _,
-				loading: T
+				status: y ? void 0 : m,
+				loading: y
+			}) : null, H ? /* @__PURE__ */ w("span", {
+				id: J,
+				className: ne,
+				children: C
 			}) : null]
 		}) : null
-	] }), Z = W && _ != null && X != null ? /* @__PURE__ */ D(C, {
-		status: _,
-		message: y,
-		messageId: X,
+	] }), Y = V && m != null && q != null ? /* @__PURE__ */ w(de, {
+		status: m,
+		message: g,
+		messageId: q,
 		size: s,
-		messagePosition: b
-	}) : null, Q = W && _ != null, $ = /* @__PURE__ */ O("div", {
-		className: Q ? a(s, _) : e(F ? "relative flex min-w-0 flex-1 items-center" : o),
+		messagePosition: _,
+		className: k === "full" ? void 0 : _ === "bottom" ? "rounded-tr-[1.375rem]" : "rounded-br-[1.375rem]"
+	}) : null, X = V && m != null, Z = M(s, W, G), Q = j ? void 0 : x(k, Z), $ = /* @__PURE__ */ T("div", {
+		style: X && !j ? b(k, Z) : Q,
+		className: X ? te(s, m) : e(j ? "relative flex min-w-0 flex-1 items-center" : a),
 		children: [
-			Q && b === "top" ? Z : null,
-			/* @__PURE__ */ D("div", {
-				className: Q ? i(s, _, b) : "relative flex w-full items-center",
-				children: le
+			X && _ === "top" ? Y : null,
+			/* @__PURE__ */ w("div", {
+				style: X ? Q : void 0,
+				className: X ? ee(s, m, _) : "relative flex w-full items-center",
+				children: _e
 			}),
-			Q && b === "bottom" ? Z : null
+			X && _ === "bottom" ? Y : null
 		]
 	});
-	return F || c == null && m == null ? $ : /* @__PURE__ */ O("div", {
-		className: l,
+	return j || c == null && d == null ? $ : /* @__PURE__ */ T("div", {
+		className: re,
 		children: [
-			c == null ? null : /* @__PURE__ */ D("label", {
-				htmlFor: U,
-				className: e(t("ui-label"), L && "opacity-50"),
+			c == null ? null : /* @__PURE__ */ w("label", {
+				htmlFor: B,
+				className: e(t("ui-label"), F && "opacity-50"),
 				children: c
 			}),
-			Y == null ? null : /* @__PURE__ */ D("p", {
-				id: Y,
+			K == null ? null : /* @__PURE__ */ w("p", {
+				id: K,
 				className: t("caption"),
-				children: m
+				children: d
 			}),
 			$
 		]
 	});
 });
 //#endregion
-export { M as Input, m as inputMessagePositions, _ as inputSizes, b as inputStatuses };
+export { P as Input, S as fieldWidths, d as inputMessagePositions, m as inputSizes, _ as inputStatuses };

package/dist/components/atoms/Input/autofillFields.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Required and optional fields Q8: autocomplete tokens the browser or a password manager fills.
+ * Autofill paints over a badge inside the field, so these fields say "(optional)" in the label instead.
+ * bin/wmds-check.mjs keeps the same list (a unit test holds them together).
+ */
+export declare const autofillTokens: readonly ["name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "email", "username", "new-password", "current-password", "one-time-code", "organization", "organization-title", "street-address", "address-line1", "address-line2", "address-line3", "address-level1", "address-level2", "address-level3", "address-level4", "country", "country-name", "postal-code", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-extension"];
+/** True when an `autocomplete` value names an autofill field ("shipping postal-code" counts). */
+export declare function isAutofillField(autoComplete: string | undefined): boolean;
+//# sourceMappingURL=autofillFields.d.ts.map

package/dist/components/atoms/Input/autofillFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofillFields.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/autofillFields.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,cAAc,wfAgCjB,CAAC;AAEX,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAIzE"}

package/dist/components/atoms/Input/autofillFields.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/atoms/Input/autofillFields.ts
+var e = /* @__PURE__ */ "name.honorific-prefix.given-name.additional-name.family-name.honorific-suffix.nickname.email.username.new-password.current-password.one-time-code.organization.organization-title.street-address.address-line1.address-line2.address-line3.address-level1.address-level2.address-level3.address-level4.country.country-name.postal-code.tel.tel-country-code.tel-national.tel-area-code.tel-local.tel-extension".split(".");
+function t(t) {
+	return t != null && t.toLowerCase().split(/\s+/).some((t) => e.includes(t));
+}
+//#endregion
+export { e as autofillTokens, t as isAutofillField };

package/dist/components/atoms/Input/fieldWidth.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+/**
+ * Form layout L7: a field's width hints at the answer. Characters for fixed-length answers (ZIP 5ch,
+ * a US state 2ch, a year 4ch, a phone 10ch…), `full` for everything else.
+ */
+export declare const fieldWidths: readonly ["2ch", "4ch", "5ch", "10ch", "20ch", "full"];
+export type FieldWidth = (typeof fieldWidths)[number];
+/**
+ * Width for the field's shell: the characters plus the shell's own padding, border and insets (`chrome`,
+ * a CSS length), never wider than its container. `ch` is the inherited body face's, so the shell has a
+ * little room to spare at the smaller field sizes.
+ */
+export declare function fieldWidthStyle(width: FieldWidth, chrome: string): CSSProperties | undefined;
+/**
+ * The status band under a short field: at least 18rem (or the container), so a message reads on one or
+ * two lines while the field itself keeps its width — no jump when an error appears.
+ */
+export declare function fieldWidthBandStyle(width: FieldWidth, chrome: string): CSSProperties | undefined;
+//# sourceMappingURL=fieldWidth.d.ts.map

package/dist/components/atoms/Input/fieldWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldWidth.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/fieldWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,WAAW,wDAAyD,CAAC;AAElF,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAG5F;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAGhG"}

package/dist/components/atoms/Input/fieldWidth.js

@@ -0,0 +1,24 @@
+"use client";
+//#region src/components/atoms/Input/fieldWidth.ts
+var e = [
+	"2ch",
+	"4ch",
+	"5ch",
+	"10ch",
+	"20ch",
+	"full"
+];
+function t(e, t) {
+	if (e !== "full") return {
+		width: `calc(${e} + ${t})`,
+		maxWidth: "100%"
+	};
+}
+function n(e, t) {
+	if (e !== "full") return {
+		width: `max(calc(${e} + ${t}), min(100%, 18rem))`,
+		maxWidth: "100%"
+	};
+}
+//#endregion
+export { n as fieldWidthBandStyle, t as fieldWidthStyle, e as fieldWidths };

package/dist/components/atoms/Radio/radioStyles.d.ts

@@ -7,7 +7,7 @@ export declare const radioHitTargetSizeClasses: Record<RadioSize, string>;
 export declare const radioCircleSizeClasses: Record<RadioSize, string>;
 export declare const radioDotSizeClasses: Record<RadioSize, string>;
 export declare const radioCircleBaseClasses: string;
-export declare const radioCircleUncheckedClasses = "border-border-emphasized bg-surface group-hover/radio:border-border-emphasized group-hover/radio:bg-body";
+export declare const radioCircleUncheckedClasses = "border-border-control bg-surface group-hover/radio:border-border-control group-hover/radio:bg-body";
 export declare const radioCircleCheckedClasses = "border-primary bg-primary group-hover/radio:border-primary group-hover/radio:bg-primary";
 export declare const radioDotClasses = "rounded-full bg-primary-foreground";
 export declare const radioCircleDisabledClasses = "opacity-50";

package/dist/components/atoms/Radio/radioStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Radio/radioStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,UAAU,uBAAwB,CAAC;AAEhD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG5D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6GACoE,CAAC;AAE7G,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,eAAO,MAAM,eAAe,uCAAuC,CAAC;AAEpE,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,iBAAiB,QAA8B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,QAAiD,CAAC;AAEtF,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,eAAO,MAAM,gCAAgC,QAAyC,CAAC;AAEvF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGhE,CAAC;AAEF,eAAO,MAAM,qCAAqC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3E,CAAC;AAEF,eAAO,MAAM,mBAAmB,oDAAoD,CAAC;AAErF,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,eAAO,MAAM,uBAAuB,uBAAuB,CAAC;AAE5D,eAAO,MAAM,uBAAuB,8FACyD,CAAC;AAE9F,eAAO,MAAM,qBAAqB,sKACmI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CASR;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK1F;AAED,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAKvE"}
+{"version":3,"file":"radioStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Radio/radioStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,UAAU,uBAAwB,CAAC;AAEhD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIzD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI5D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,eAAO,MAAM,2BAA2B,uGAE8D,CAAC;AAEvG,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,eAAO,MAAM,eAAe,uCAAuC,CAAC;AAEpE,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,iBAAiB,QAA8B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,QAAiD,CAAC;AAEtF,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,eAAO,MAAM,gCAAgC,QAAyC,CAAC;AAEvF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGhE,CAAC;AAEF,eAAO,MAAM,qCAAqC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3E,CAAC;AAEF,eAAO,MAAM,mBAAmB,oDAAoD,CAAC;AAErF,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,eAAO,MAAM,uBAAuB,uBAAuB,CAAC;AAE5D,eAAO,MAAM,uBAAuB,8FACyD,CAAC;AAE9F,eAAO,MAAM,qBAAqB,sKACmI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CASR;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK1F;AAED,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAKvE"}

package/dist/components/atoms/Radio/radioStyles.js

@@ -5,18 +5,18 @@ import { motionTransition as n } from "../../../lib/motion.js";
 import { inputStatusBannerSurfaceClasses as r, inputStatusShellClasses as i } from "../Input/inputShellStyles.js";
 //#region src/components/atoms/Radio/radioStyles.ts
 var a = ["sm", "md"], o = {
-	sm: "min-h-7 gap-2",
-	md: "min-h-9 gap-2.5"
+	sm: "min-h-7 gap-2 pointer-coarse:min-h-11",
+	md: "min-h-9 gap-2.5 pointer-coarse:min-h-11"
 }, s = {
-	sm: "size-7",
+	sm: "size-7 pointer-coarse:size-9",
 	md: "size-9"
 }, c = {
-	sm: "size-[18px] rounded-full",
-	md: "size-[22px] rounded-full"
+	sm: "size-[18px] rounded-full pointer-coarse:size-6",
+	md: "size-6 rounded-full"
 }, l = {
 	sm: "size-2",
 	md: "size-2.5"
-}, u = e("pointer-events-none flex items-center justify-center border shadow-none", "transition-[background-color,border-color]", n("fast")), d = "border-border-emphasized bg-surface group-hover/radio:border-border-emphasized group-hover/radio:bg-body", f = "border-primary bg-primary group-hover/radio:border-primary group-hover/radio:bg-primary", p = "rounded-full bg-primary-foreground", m = "opacity-50", h = t("ui-label"), g = e(t("caption"), "leading-snug"), _ = "flex min-w-0 flex-col gap-px", v = e(h, "leading-tight"), y = {
+}, u = e("pointer-events-none flex items-center justify-center border shadow-none", "transition-[background-color,border-color]", n("fast")), d = "border-border-control bg-surface group-hover/radio:border-border-control group-hover/radio:bg-body", f = "border-primary bg-primary group-hover/radio:border-primary group-hover/radio:bg-primary", p = "rounded-full bg-primary-foreground", m = "opacity-50", h = t("ui-label"), g = e(t("caption"), "leading-snug"), _ = "flex min-w-0 flex-col gap-px", v = e(h, "leading-tight"), y = {
 	sm: "flex min-w-0 items-start gap-2",
 	md: "flex min-w-0 items-start gap-2.5"
 }, b = {

package/dist/components/molecules/Card/Card.d.ts

@@ -17,8 +17,17 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
     /** Overrides automatic headerless detection. Normally omitted: Body without Header gets a 2px top inset. */
     headerless?: boolean;
     as?: "div" | "article" | "section";
+    /**
+     * The card's own colour pair, so a card can stand apart from its section (testimonials, offers):
+     * `inverse` (the brand surface, dark roles), `field` (the saturated field colour, flat), or `light` (the
+     * light palette, e.g. a paper card on a dark or toned section). Default: the section's own colours.
+     * Everything inside re-skins, as in **Band** `tone`.
+     */
+    tone?: CardTone;
     className?: CardLayoutClassName;
 }
+export declare const cardTones: readonly ["default", "inverse", "field", "light"];
+export type CardTone = (typeof cardTones)[number];
 export interface CardSectionProps extends HTMLAttributes<HTMLElement> {
     children?: ReactNode;
     className?: CardLayoutClassName;
@@ -50,7 +59,7 @@ export interface CardHeaderProps extends CardSectionProps {
     /** End slot — kebab, chips-as-tabs, Badge, or any trailing cluster. Always packs to the right. */
     end?: ReactNode;
 }
-declare function CardRoot({ shape, variant, padding, bodyTerminal, headerless, as: Component, className, children, ...props }: CardProps): import("react").JSX.Element;
+declare function CardRoot({ shape, variant, padding, bodyTerminal, headerless, as: Component, tone, className, children, ...props }: CardProps): import("react").JSX.Element;
 declare function CardHeader({ className, children, start, end, ...props }: CardHeaderProps): import("react").JSX.Element;
 /** Inset well — composition slot, or a dark embed when `variant="terminal"`. */
 declare function CardBody({ className, children, variant, src, srcDoc, title, height, readOnly, state, message, ...props }: CardBodyProps): import("react").JSX.Element;

package/dist/components/molecules/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Card/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Card/Card.tsx"],"names":[],"mappings":"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"}