@thewhatmatters/wmds 0.4.33 → 0.4.35

package/CHANGELOG.md

@@ -7,6 +7,76 @@ 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.35
+
+**Contact and booking forms: two steps, booking after the request, a way out above the calendar, and nothing lost on close.**
+
+- **IntakeModal** (Contact and booking forms T7, T9):
+  - Two steps by default (`steps` was 4): details, then the optional booking. The confirmation isn't counted.
+  - New `hasAnswers`: with typed answers, Close and Escape ask "Discard your answers?" (Keep editing, focused / Discard).
+  - New **useIntakeUrlState**: keeps `?sketch` in the URL while the modal is open. The link can be shared, a refresh reopens it, and Back closes it.
+- **CalEmbed** (T8): the "Skip, just email me" link sits **above** the calendar, so on a phone it's visible without scrolling past the month. With no embed (not set up, or it failed), the email route shows inside the empty state straight away.
+- **CalEmbed stories:** "Pattern — skip in footer" is replaced by **Pattern — skip above the calendar** (`CalEmbed.Skip` in `Card.Header`). The pasted pattern id changes, so `wmds-check` reports `pattern-removed` for copies of the old one: move the skip above the calendar.
+- **IntakeConfirmation** (T2, T3): one "what happens next and when" sentence: `email` and `replyWithin` (default "within one business day") give "We'll email you at {email} within one business day with a few times that fit."; the booked variant names `bookingTime` in it. `summary` shows as "You told us: “…”". Then `contact`, then Done. New export `intakeConfirmationReplyWithin`.
+- **IntakeModal**: no Back on step 1; the WM mark and wordmark take the ink in dark mode (navy on near-black failed 3:1).
+- **IntakeHoneypot** and `isIntakeHoneypotFilled` (new, T4): a spam trap people never see or reach (`aria-hidden`, `tabindex="-1"`, no autofill). Drop requests where it's filled, on the server, with rate limits. No CAPTCHA.
+- Stories **Components/IntakeModal → Pattern — sketch request** (details → optional booking → confirmation; "Send my request"; reply time under the form; contact details on the confirmation) and **Pattern — send failed** (answers kept, Try again, email route; T5, T6). Interaction tests cover the URL, the discard question, both steps, Back keeping answers, the skip above the calendar, the failure and the honeypot.
+
+### Consumer actions
+
+- Pass `steps={2}` or drop `steps`, and move the booking after the details are sent.
+- Pass `hasAnswers` while the visitor has typed something, and keep answers in your state.
+- Open the modal with `useIntakeUrlState`, and give the form its own page too (see wmds-patterns Contact — Sketch Page).
+- Add **IntakeHoneypot** and check it on the server.
+- On the confirmation, pass `summary` and `contact`. Pass `email` so the sentence names it, and change `replyWithin` if one business day isn't true for you.
+- If you placed `CalEmbed.Skip` after the calendar (for example in `Card.Footer`), move it to `Card.Header`, above the calendar.
+
+## 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.**

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/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/CalEmbed/CalEmbed.d.ts

@@ -4,7 +4,7 @@ export type CalEmbedLayoutClassName = string;
 export declare const calEmbedSkipHref = "#email";
 export declare const calEmbedSkipLabel = "Skip, just email me";
 export declare const calEmbedEmptyTitle = "Booking isn\u2019t available right now";
-export declare const calEmbedEmptyDescription = "Skip this step and we\u2019ll follow up by email.";
+export declare const calEmbedEmptyDescription = "We\u2019ll follow up by email with a few times instead.";
 export interface CalEmbedSkipProps {
     /** Skip destination. Default `#email`. */
     skipHref?: string;
@@ -26,10 +26,10 @@ export interface CalEmbedProps {
     /** Empty-state supporting line. Default points visitors at the skip. */
     emptyDescription?: ReactNode;
     /**
-     * Skip slot. Omit to render the default **TextLink** after the frame.
-     * Pass `false` or **CalEmbed.Skip** when you place the skip yourself
-     * (typically **Card.Footer**). CalEmbed does not render an in-body skip
-     * when this slot is used.
+     * Skip slot. Omit to render the default **TextLink** above the frame (or inside the empty state).
+     * Pass `false` or **CalEmbed.Skip** when you place the skip yourself. Keep it visible without
+     * scrolling past the calendar at 390 (T8): above the frame or in a pinned footer, not after a month
+     * grid. CalEmbed does not render an in-body skip when this slot is used.
      */
     skip?: ReactNode | false;
     /** Skip destination when the in-body skip is shown. Default `#email`. */
@@ -41,7 +41,7 @@ export interface CalEmbedProps {
     className?: CalEmbedLayoutClassName;
 }
 /**
- * Same **TextLink** CalEmbed uses after the frame. Place it in **Card.Footer**
+ * Same **TextLink** CalEmbed uses above the frame. Place it in **Card.Header** (above the calendar, T8)
  * and pass `skip={false}` (or `skip={<CalEmbed.Skip />}`) so the in-body link is omitted.
  */
 export declare function CalEmbedSkip({ skipHref, skipLabel, onSkip, className, }: CalEmbedSkipProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"CalEmbed.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CalEmbed/CalEmbed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAUnD,qCAAqC;AACrC,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,eAAO,MAAM,gBAAgB,WAAW,CAAC;AACzC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AACvD,eAAO,MAAM,kBAAkB,2CAAsC,CAAC;AACtE,eAAO,MAAM,wBAAwB,sDAAiD,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iGAAiG;IACjG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAA2B,EAC3B,SAA6B,EAC7B,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,+BAWnB;AAED;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAA+B,EAC/B,gBAA2C,EAC3C,IAAI,EACJ,QAA2B,EAC3B,SAA6B,EAC7B,MAAM,EACN,SAAS,GACV,EAAE,aAAa,+BAkBf;AAED,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
+{"version":3,"file":"CalEmbed.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CalEmbed/CalEmbed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAUnD,qCAAqC;AACrC,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,eAAO,MAAM,gBAAgB,WAAW,CAAC;AACzC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AACvD,eAAO,MAAM,kBAAkB,2CAAsC,CAAC;AACtE,eAAO,MAAM,wBAAwB,4DAAuD,CAAC;AAE7F,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iGAAiG;IACjG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAA2B,EAC3B,SAA6B,EAC7B,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,+BAWnB;AAED;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAA+B,EAC/B,gBAA2C,EAC3C,IAAI,EACJ,QAA2B,EAC3B,SAA6B,EAC7B,MAAM,EACN,SAAS,GACV,EAAE,aAAa,+BAsBf;AAED,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}