@thewhatmatters/wmds 0.4.30 → 0.4.32

package/CHANGELOG.md

@@ -7,6 +7,51 @@ 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.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.**
+
+- **ErrorSummary** (new): "There's a problem" at the top of a form after a failed submit, one link per error in the field's own words. It takes focus when it appears, and each link moves focus to its field (V5). Story **Components/ErrorSummary → Pattern — form with an error summary**; interaction test **Internal/Interactions/ErrorSummary**.
+- **Input, TextArea, Checkbox, Radio, Switch, CheckboxGroup, RadioGroup**: the status band reads a visually hidden "Error:" or "Warning:" before the message, so screen readers hear what kind of message it is (V6).
+- **Status without a message** (V10): those components warn in the console when `status="error"` or `"warning"` has no `message`. **wmds-check** `status-without-message` (new, error) catches it in app code. A status-only success tick is fine.
+- **Input** keeps the same `<input>` when a status appears. It used to swap its wrapper and remount the field, which dropped focus and, in an uncontrolled field, **what people had typed** (V4).
+- **No iOS zoom:** Input, TextArea and Search (`sm` and `md`) and PromptBar set 16px text on touch screens (`pointer: coarse`), so Safari doesn't zoom the page when a field gets focus. Fine pointers keep 12px / 14px.
+- **IntakeForm** default messages follow V1: "Enter your email address." for an empty field, "Enter an email address like name@example.com." and "Enter a website address like example.com." for a broken rule (were "Please enter a valid email address." / "…URL.").
+- Unit test: every status band's message clears 4.5:1 on its band in light and dark (V7: 4.62–6.97:1 measured).
+- **A success tick only** (V8): a status-only `success` on Input or TextArea shows the tick and keeps the normal border (it also turned the border green).
+- **The hint sits above the field** (Labels F8): Input and TextArea render `description` between the label and the field, and keep it when a status message shows (it used to sit below and hide behind the message). Story **Components/Input → Pattern — hint with an error**.
+- **Label required** (F7): **wmds-check** `missing-label` (new, error) fails an Input, TextArea, Select or Search with no `label`, `aria-label` or `aria-labelledby`. Hide a label (`aria-label`) only on a field alone with its button: search, a one-field newsletter.
+- **Search** takes a `label` prop: the field's name for screen readers, which may stay hidden (F10). It warns in the console when there's no label at all.
+- **Inset buttons** (F10) in Search, PromptBar and CopyField get a 44px tap area on touch screens, and show their own focus ring. The pill's ring now marks only the field (Search used to ring the whole pill for the button too; PromptBar and CopyField hid the button's ring).
+- **No placeholders in forms** (F9): IntakeForm drops its placeholders ("https://", "What should feel different…"), and the stories no longer put examples in placeholders. Search keeps one, naming the action.
+
+### Consumer actions
+
+None required. Fix any `status="error"` / `"warning"` without a `message` that `npx wmds-check` reports; say what's wrong and how to fix it. After a failed submit, add **ErrorSummary** at the top of the form (copy the Pattern). On phones and tablets, field text is now 16px. Give every field a `label` (fix what `npx wmds-check` reports as `missing-label`); pass `label` to Search; move examples and formats out of placeholders into `description`. If you style around the hint, it now renders above the field.
+
+## 0.4.31
+
+**SiteNav's phone menu follows the Header rule: a "Menu" button that becomes "Close", a full-height panel under the bar, and a link tap closes it.**
+
+- **HeroIntro** `actions` (new): the CTA row under the heading and description, one primary and an optional secondary (Hero rule R2); left on phones, centred from `md`. New story **Pattern — with description and actions**. Story copy is shorter, so the intro holds 3 lines at 390: "A design studio in Austin. / We help brands stand out online." (**HeroIntro**, **HeroTileStack**, **FooterReveal** stories).
+- **SiteNav** `mobile` menu (below `md`), rebuilt to Header and mobile menu rules N5–N8:
+  - The trigger is a **Button** with an icon and a visible word, "☰ Menu", that becomes "✕ Close" in the same place (QA #28). The word is the accessible name (was an icon-only button named "Open menu" / "Close menu"). At least 44px tall.
+  - The menu opens as a full-height panel **under the bar**, not a side **Sheet**. The bar stays live, so Close sits where Menu was. The panel is a dialog: focus moves to its first link, Tab cycles through the bar and the panel, the page behind is inert and doesn't scroll, Escape or Close closes it, and focus returns to Menu. It closes when the window widens past `md`.
+  - **Tapping any link in the menu closes it** (QA #25; it used to stay open over the page).
+  - **SiteNav.MobileLink** rows are 56px and full width. The current page is marked by weight and the selected fill plus `aria-current="page"`, not colour alone.
+  - `mobileAction` (new): the main action, pinned to the bottom of the open menu.
+  - With `mobile`, the bar's `end` actions give way when brand + actions + Menu don't fit (measured, not a fixed width), so Menu keeps its word; `mobileAction` carries the main button there. Below `md` the actions and Menu sit at the trailing edge.
+  - `mobileTitle` is now a string (the dialog's accessible name).
+  - New interaction tests **Internal/Interactions/SiteNav → phone menu…** (390), **phone menu at 320** (N7) and **phone bar: trailing edge**.
+- **SiteNav** full bar: a wordmark **SiteNav.Brand** and the Menu button pull their own 16px padding past the edges, so the wordmark and the Menu word line up with the content edges (hit areas unchanged; the compact pill keeps its padding). The bar's give-way check measures the slots' margin boxes instead of `scrollWidth`, so that pull doesn't hide a CTA that fits: "Get my free sketch" stays in the bar from 390 (N9). The Menu/Close button is quiet in both states (ghost hover and press fill only). While the phone menu is open, the bar's actions hide, so the menu's own action is the one CTA on screen. New interaction test **phone bar: wordmark and Menu word sit on the content edges**.
+- **Breakpoints rule P5:** every `sm:` (640px) variant in WMDS moves to `md:` (768px): **Field** label column, **TileGrid** `--tile-grid-cols-sm` (now from `md`), **Breadcrumb** gap and label width, **FooterReveal** wordmark size, **Carousel** `--carousel-item-sm` and caption width, the Post page / Resource detail / Filter panel / Profile typography guides, and story Show code. Layout changes only between 640 and 767px, where these now keep their phone layout. New unit test: no `sm:` and no one-off `min-[…]` / `max-[…]` breakpoints anywhere in `src`.
+- `lib/dialogOverlay` exports `tabbablesIn` and `inertAllBut` (internal helpers, also used by SiteNav).
+- **ChatDock**: its 40rem chat column is documented as the text-only exception to Container width W5.
+
+### Consumer actions
+
+If you pass `mobile` to **SiteNav**, also pass `mobileAction` (usually the same **Button** as your bar CTA) so small phones still reach it when the bar is too tight for it. Keep the bar's CTA label short (about 12 characters) so it fits beside Menu at 390. Tests that find the trigger by `aria-label="Open menu"` now find it by its text, `getByRole("button", { name: "Menu" })`, and the open menu is a `dialog` named by `mobileTitle` (default "Menu"). `mobileTitle` must be a string. Re-copy any **Pattern** whose Show code used `sm:` (the generated `docs/patterns` show which changed). `--tile-grid-cols-sm` and `--carousel-item-sm` keep their names but now apply from 768px.
+
 ## 0.4.30
 
 **Capitals are tracked 0.08–0.12em (Eyebrow rule E3).**

package/bin/wmds-check.mjs

@@ -18,6 +18,10 @@
  *                             content, data, handlers, and exports may change
  *   pattern-stale     warn   a pasted pattern's header names an older package version
  *   pattern-removed   error  a pasted pattern's id no longer ships
+ *   status-without-message error  a WMDS field with status="error" or "warning" and no message
+ *                             (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)
  *   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
@@ -235,6 +239,40 @@ for (const file of files) {
     }
   });
 
+  // Reads a JSX element whole from its "<" (it may span lines), counting braces so `=>` and `{…}`
+  // values don't end it early.
+  const elementFrom = (start) => {
+    let depth = 0;
+    let end = start + 1;
+    for (; end < source.length; end++) {
+      const char = source[end];
+      if (char === "{") depth++;
+      else if (char === "}") depth--;
+      else if (char === ">" && depth === 0 && source[end - 1] !== "=") break;
+    }
+    return source.slice(start, end + 1);
+  };
+
+  // F7: every field has a name. A hidden one (aria-label) is the app's call; none at all fails.
+  if (/from\s+["']@thewhatmatters\/wmds["']/.test(source)) {
+    for (const match of source.matchAll(/<(Input|TextArea|Select|Search)(?=[\s/>])/g)) {
+      const element = elementFrom(match.index);
+      if (/\b(label|aria-label|aria-labelledby)=|\{\s*\.\.\./.test(element)) continue;
+      const line = source.slice(0, match.index).split("\n").length;
+      if (ignored(lines, line - 1, "missing-label")) continue;
+      report(file, line, "missing-label", "error", `<${match[1]}> has no label — add label (or aria-label when it sits alone with its button)`);
+    }
+  }
+
+  // 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));
+    if (!/^<[A-Z]/.test(element) || /\bmessage=/.test(element)) continue;
+    const line = source.slice(0, match.index).split("\n").length;
+    if (ignored(lines, line - 1, "status-without-message")) continue;
+    report(file, line, "status-without-message", "error", `status="${match[1] ?? match[2]}" with no message — say what's wrong and how to fix it`);
+  }
+
   // Pasted patterns.
   // The header is the file's first comment line. A "use client" / "use server" directive or blank
   // lines may come before it.

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAoBL,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4GAgNnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAoBL,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4GAiNnB,CAAC"}

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

@@ -1,119 +1,120 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import "../Input/inputShellStyles.js";
-import { InputStatusBanner as t } from "../inputShared/InputStatusBanner.js";
-import { checkboxBoxClassesFor as ee, checkboxCheckIconSizeClasses as n, checkboxCountClasses as te, checkboxCountTitleLineClasses as r, checkboxDescriptionClasses as i, checkboxDescriptionRowClasses as ne, checkboxHiddenInputClasses as re, checkboxHitTargetDescriptionAlignClasses as ie, checkboxHitTargetSizeClasses as ae, checkboxIndeterminateBarSizeClasses as oe, checkboxLabelClassesFor as a, checkboxMarkClasses as o, checkboxRowBaseClasses as s, checkboxRowSizeClasses as c, checkboxSizes as l, checkboxStatusBannerClassesFor as u, checkboxTextColumnClasses as d } from "./checkboxStyles.js";
-import { forwardRef as f, useCallback as p, useId as m, useState as se } from "react";
-import { Check as ce, Loader2 as le } from "lucide-react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { InputStatusBanner as t, warnStatusWithoutMessage as ee } from "../inputShared/InputStatusBanner.js";
+import { checkboxBoxClassesFor as n, checkboxCheckIconSizeClasses as r, checkboxCountClasses as te, checkboxCountTitleLineClasses as i, checkboxDescriptionClasses as a, checkboxDescriptionRowClasses as ne, checkboxHiddenInputClasses as re, checkboxHitTargetDescriptionAlignClasses as ie, checkboxHitTargetSizeClasses as ae, checkboxIndeterminateBarSizeClasses as o, checkboxLabelClassesFor as s, checkboxMarkClasses as c, checkboxRowBaseClasses as oe, checkboxRowSizeClasses as se, checkboxSizes as l, checkboxStatusBannerClassesFor as u, checkboxTextColumnClasses as d } from "./checkboxStyles.js";
+import { forwardRef as f, useCallback as p, useId as ce, useState as le } from "react";
+import { Check as ue, Loader2 as de } from "lucide-react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/atoms/Checkbox/Checkbox.tsx
-var v = {
+var _ = {
 	sm: "sm",
 	md: "md"
 };
-function y(e) {
+function v(e) {
 	e.message != null && e.status == null && console.warn("[WMDS Checkbox] `message` requires `status`.");
 }
-var b = f(function({ size: l = "md", label: f, labelHidden: b = !1, description: x, count: S, countLabel: C, indeterminate: w = !1, status: T, message: E, loading: D = !1, className: ue, disabled: O, readOnly: k, checked: A, defaultChecked: j, id: M, onChange: N, ...P }, F) {
-	let I = m(), L = M ?? I;
-	y({
-		status: T,
-		message: E
+var y = f(function({ size: l = "md", label: f, labelHidden: y = !1, description: b, count: x, countLabel: fe, indeterminate: S = !1, status: C, message: w, loading: T = !1, className: E, disabled: D, readOnly: O, checked: k, defaultChecked: A, id: j, onChange: M, ...N }, P) {
+	ee("Checkbox", C, w);
+	let F = ce(), I = j ?? F;
+	v({
+		status: C,
+		message: w
 	});
-	let R = A !== void 0, [z, B] = se(j ?? !1), V = R ? !!A : z, H = O || D, U = D && !O, W = E != null && E.length > 0 && T != null, G = W ? `${L}-message` : void 0, K = x != null && !b ? `${L}-description` : void 0, de = [
-		P["aria-describedby"],
-		K,
-		G
-	].filter(Boolean).join(" ") || void 0, fe = p((e) => {
-		e && (e.indeterminate = w), typeof F == "function" ? F(e) : F != null && (F.current = e);
-	}, [w, F]), pe = (e) => {
-		if (k || U) {
+	let L = k !== void 0, [R, z] = le(A ?? !1), B = L ? !!k : R, V = D || T, H = T && !D, U = w != null && w.length > 0 && C != null, W = U ? `${I}-message` : void 0, G = b != null && !y ? `${I}-description` : void 0, pe = [
+		N["aria-describedby"],
+		G,
+		W
+	].filter(Boolean).join(" ") || void 0, me = p((e) => {
+		e && (e.indeterminate = S), typeof P == "function" ? P(e) : P != null && (P.current = e);
+	}, [S, P]), K = (e) => {
+		if (O || H) {
 			e.preventDefault();
 			return;
 		}
-		R || B(e.target.checked), N?.(e);
-	}, me = ee(l, V, w, H, W ? void 0 : T), q = x != null && !b, J = S != null, Y = S?.toLocaleString("en-US"), X = J ? /* @__PURE__ */ g("span", {
+		L || z(e.target.checked), M?.(e);
+	}, he = n(l, B, S, V, U ? void 0 : C), q = b != null && !y, J = x != null, Y = x?.toLocaleString("en-US"), X = J ? /* @__PURE__ */ h("span", {
 		className: "sr-only",
-		children: ` (${C ?? Y})`
-	}) : null, Z = J ? /* @__PURE__ */ g("span", {
+		children: ` (${fe ?? Y})`
+	}) : null, Z = J ? /* @__PURE__ */ h("span", {
 		className: te,
 		"aria-hidden": !0,
 		children: Y
-	}) : null, Q = (t) => /* @__PURE__ */ _("span", {
+	}) : null, Q = (t) => /* @__PURE__ */ g("span", {
 		className: e("relative flex shrink-0 items-center justify-center", ae[l], t),
-		children: [/* @__PURE__ */ g("input", {
-			...P,
-			ref: fe,
-			id: L,
+		children: [/* @__PURE__ */ h("input", {
+			...N,
+			ref: me,
+			id: I,
 			type: "checkbox",
-			checked: R ? A : void 0,
-			defaultChecked: R ? void 0 : j,
-			disabled: O,
-			"aria-disabled": U || void 0,
-			readOnly: k,
-			"aria-invalid": T === "error" || void 0,
-			"aria-describedby": de,
-			"aria-checked": w ? "mixed" : void 0,
-			"aria-busy": D || void 0,
-			onChange: pe,
+			checked: L ? k : void 0,
+			defaultChecked: L ? void 0 : A,
+			disabled: D,
+			"aria-disabled": H || void 0,
+			readOnly: O,
+			"aria-invalid": C === "error" || void 0,
+			"aria-describedby": pe,
+			"aria-checked": S ? "mixed" : void 0,
+			"aria-busy": T || void 0,
+			onChange: K,
 			className: re
-		}), /* @__PURE__ */ g("span", {
-			className: me,
+		}), /* @__PURE__ */ h("span", {
+			className: he,
 			"aria-hidden": !0,
-			children: D ? /* @__PURE__ */ g(le, {
-				className: e(n[l], o, "animate-spin"),
+			children: T ? /* @__PURE__ */ h(de, {
+				className: e(r[l], c, "animate-spin"),
 				strokeWidth: 2
-			}) : w ? /* @__PURE__ */ g("span", { className: e(oe[l], o, "rounded-full bg-current") }) : V ? /* @__PURE__ */ g(ce, {
-				className: e(n[l], o),
+			}) : S ? /* @__PURE__ */ h("span", { className: e(o[l], c, "rounded-full bg-current") }) : B ? /* @__PURE__ */ h(ue, {
+				className: e(r[l], c),
 				strokeWidth: 3,
 				"aria-hidden": !0
 			}) : null
 		})]
-	}), $ = /* @__PURE__ */ g("label", {
-		htmlFor: L,
-		className: e(s, !q && "items-center", !q && c[l], H && "cursor-not-allowed", ue),
-		children: b ? /* @__PURE__ */ _(h, { children: [Q(), /* @__PURE__ */ _("span", {
+	}), $ = /* @__PURE__ */ h("label", {
+		htmlFor: I,
+		className: e(oe, !q && "items-center", !q && se[l], V && "cursor-not-allowed", E),
+		children: y ? /* @__PURE__ */ g(m, { children: [Q(), /* @__PURE__ */ g("span", {
 			className: "sr-only",
 			children: [f, X]
-		})] }) : q ? /* @__PURE__ */ _("span", {
+		})] }) : q ? /* @__PURE__ */ g("span", {
 			className: e(ne[l], J && "flex-1"),
-			children: [Q(ie[l]), /* @__PURE__ */ _("span", {
+			children: [Q(ie[l]), /* @__PURE__ */ g("span", {
 				className: e(d, J && "flex-1"),
-				children: [J ? /* @__PURE__ */ _("span", {
-					className: r,
-					children: [/* @__PURE__ */ _("span", {
-						className: a(H, !0),
+				children: [J ? /* @__PURE__ */ g("span", {
+					className: i,
+					children: [/* @__PURE__ */ g("span", {
+						className: s(V, !0),
 						children: [f, X]
 					}), Z]
-				}) : /* @__PURE__ */ g("span", {
-					className: a(H, !0),
+				}) : /* @__PURE__ */ h("span", {
+					className: s(V, !0),
 					children: f
-				}), /* @__PURE__ */ g("span", {
-					id: K,
-					className: i,
-					children: x
+				}), /* @__PURE__ */ h("span", {
+					id: G,
+					className: a,
+					children: b
 				})]
 			})]
-		}) : /* @__PURE__ */ _(h, { children: [
+		}) : /* @__PURE__ */ g(m, { children: [
 			Q(),
-			/* @__PURE__ */ _("span", {
-				className: a(H),
+			/* @__PURE__ */ g("span", {
+				className: s(V),
 				children: [f, X]
 			}),
 			Z
 		] })
 	});
-	return !W || T == null || G == null ? $ : /* @__PURE__ */ _("div", {
+	return !U || C == null || W == null ? $ : /* @__PURE__ */ g("div", {
 		className: "flex w-full flex-col gap-1.5",
-		children: [$, /* @__PURE__ */ g(t, {
-			status: T,
-			message: E,
-			messageId: G,
-			size: v[l],
+		children: [$, /* @__PURE__ */ h(t, {
+			status: C,
+			message: w,
+			messageId: W,
+			size: _[l],
 			messagePosition: "bottom",
-			bannerClassName: u(T)
+			bannerClassName: u(C)
 		})]
 	});
 });
 //#endregion
-export { b as Checkbox, l as checkboxSizes };
+export { y as Checkbox, l as checkboxSizes };

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,yGAuKhB,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,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"}

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

@@ -1,10 +1,10 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { typographyClass as t } from "../../../lib/typography.js";
-import { inputAttachedFieldClasses as n, inputAttachedInputClasses as r, inputBaseClasses as i, inputCompoundInnerFieldClassesFor as a, inputCompoundShellClassesFor as o, inputControlStackClasses as s, inputDisabledClasses as c, inputEndBadgeAndStatusGapClasses as l, inputEndBadgeGapClasses as u, inputEndBadgeWrapperClasses as ee, inputFieldStackClasses as te, inputIconGapClasses as d, inputIconPositionClasses as f, inputIconSizeClasses as p, inputInlineClasses as m, inputMessagePositions as h, inputShellClasses as g, inputSizeClasses as _, inputSizes as v, inputSoloFocusRingBaseClasses as y, inputSoloFocusRingColorClasses as b, inputSoloRadiusClasses as x, inputStatusGapClasses as S, inputStatusShellClasses as C, inputStatuses as w, inputTrailingInsetClasses as ne, inputTrailingInsetPositionClasses as re } from "./inputShellStyles.js";
-import { InputStatusBanner as ie } from "../inputShared/InputStatusBanner.js";
-import { InputTrailingAffordance as ae } from "../inputShared/InputTrailingAffordance.js";
-import { forwardRef as T, useId as oe } from "react";
+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";
 //#region src/components/atoms/Input/Input.tsx
 function k(e) {
@@ -14,30 +14,31 @@ function A(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 ? l[e] : t ? u[e] : n ? S[e] : !1;
+	return t && n ? s[e] : t ? c[e] : n ? y[e] : !1;
 }
-var M = T(function({ size: l = "md", label: u, description: h, status: v, message: S, messagePosition: w = "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) {
-	let H = oe(), U = R ?? H;
+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({
-		label: u,
+		label: c,
 		"aria-label": B["aria-label"],
 		"aria-labelledby": B["aria-labelledby"]
 	}), A({
-		status: v,
-		message: S,
-		messagePosition: w,
+		status: _,
+		message: y,
+		messagePosition: b,
 		loading: T,
 		inline: F,
-		label: u,
-		description: h
+		label: c,
+		description: m
 	});
-	let W = S != null && S.length > 0 && v != null, G = N != null, K = !W && (T || v != null), q = M != null, J = j(l, G, K), Y = h != null && !W ? `${U}-description` : void 0, X = W ? `${U}-message` : void 0, se = [
+	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, Z = /* @__PURE__ */ O(E, { children: [
+	].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", f[l], p[l]),
+			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]),
 			"aria-hidden": !0,
 			children: M
 		}) : null,
@@ -46,60 +47,54 @@ var M = T(function({ size: l = "md", label: u, description: h, status: v, messag
 			ref: V,
 			id: U,
 			disabled: L,
-			"aria-invalid": v === "error" || void 0,
-			"aria-describedby": se,
-			className: e(c, P && "type-code !font-mono !leading-none", W ? e(n, _[l], q && d[l], J, r) : e(i, F ? e(m, q && d[l], I ?? _[l]) : e(_[l], q && d[l], J, v == null ? g[l] : e("border", C[v]), x[l], y, v == null ? b.default : b[v], I)))
+			"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)))
 		}),
 		G || K ? /* @__PURE__ */ O("span", {
-			className: e(ne, re[l]),
+			className: e(x, S[s]),
 			children: [G ? /* @__PURE__ */ D("span", {
-				className: ee,
+				className: ne,
 				children: N
-			}) : null, K ? /* @__PURE__ */ D(ae, {
-				size: l,
-				status: T ? void 0 : v,
+			}) : null, K ? /* @__PURE__ */ D(oe, {
+				size: s,
+				status: T ? void 0 : _,
 				loading: T
 			}) : null]
 		}) : null
-	] }), Q = W && v != null && X != null ? /* @__PURE__ */ D(ie, {
-		status: v,
-		message: S,
+	] }), Z = W && _ != null && X != null ? /* @__PURE__ */ D(C, {
+		status: _,
+		message: y,
 		messageId: X,
-		size: l,
-		messagePosition: w
-	}) : null, $ = W && v != null ? /* @__PURE__ */ O("div", {
-		className: o(l, v),
+		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),
 		children: [
-			w === "top" ? Q : null,
+			Q && b === "top" ? Z : null,
 			/* @__PURE__ */ D("div", {
-				className: a(l, v, w),
-				children: Z
+				className: Q ? i(s, _, b) : "relative flex w-full items-center",
+				children: le
 			}),
-			w === "bottom" ? Q : null
+			Q && b === "bottom" ? Z : null
 		]
-	}) : /* @__PURE__ */ D("div", {
-		className: e(F ? "relative flex min-w-0 flex-1 items-center" : s),
-		children: /* @__PURE__ */ D("div", {
-			className: "relative flex w-full items-center",
-			children: Z
-		})
 	});
-	return F || u == null && h == null ? $ : /* @__PURE__ */ O("div", {
-		className: te,
+	return F || c == null && m == null ? $ : /* @__PURE__ */ O("div", {
+		className: l,
 		children: [
-			u == null ? null : /* @__PURE__ */ D("label", {
+			c == null ? null : /* @__PURE__ */ D("label", {
 				htmlFor: U,
 				className: e(t("ui-label"), L && "opacity-50"),
-				children: u
+				children: c
 			}),
-			$,
 			Y == null ? null : /* @__PURE__ */ D("p", {
 				id: Y,
 				className: t("caption"),
-				children: h
-			})
+				children: m
+			}),
+			$
 		]
 	});
 });
 //#endregion
-export { M as Input, h as inputMessagePositions, v as inputSizes, w as inputStatuses };
+export { M as Input, m as inputMessagePositions, _ as inputSizes, b as inputStatuses };

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

@@ -20,8 +20,8 @@ var n = [
 	warning: "focus-within:outline-none focus-within:ring-2 focus-within:ring-warning-focus-ring",
 	success: "focus-within:outline-none focus-within:ring-2 focus-within:ring-success-focus-ring"
 }, d = {
-	sm: "h-8 px-2.5 text-xs leading-none",
-	md: "h-11 px-3 text-sm leading-none",
+	sm: "h-8 px-2.5 text-xs pointer-coarse:text-base leading-none",
+	md: "h-11 px-3 text-sm pointer-coarse:text-base leading-none",
 	lg: "min-h-12 px-4 text-base leading-none"
 }, f = "border border-border-control", p = "shadow-raised", m = {
 	sm: e(f, p),

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAGf,OAAO,EAgBL,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAiIhB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAGf,OAAO,EAgBL,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAkIhB,CAAC"}