@thewhatmatters/wmds 0.4.31 → 0.4.32

package/CHANGELOG.md

@@ -7,6 +7,28 @@ 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.**

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

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

@@ -1,84 +1,85 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import "../Input/inputShellStyles.js";
-import { InputStatusBanner as t } from "../inputShared/InputStatusBanner.js";
-import { radioCircleClassesFor as n, radioDescriptionClasses as r, radioDescriptionRowClasses as i, radioDotClasses as a, radioDotSizeClasses as o, radioHiddenInputClasses as s, radioHitTargetDescriptionAlignClasses as c, radioHitTargetSizeClasses as l, radioLabelClassesFor as u, radioRowBaseClasses as d, radioRowSizeClasses as f, radioSizes as p, radioStatusBannerClassesFor as m, radioTextColumnClasses as h } from "./radioStyles.js";
-import { forwardRef as g, useId as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { InputStatusBanner as t, warnStatusWithoutMessage as n } from "../inputShared/InputStatusBanner.js";
+import { radioCircleClassesFor as r, radioDescriptionClasses as i, radioDescriptionRowClasses as a, radioDotClasses as o, radioDotSizeClasses as s, radioHiddenInputClasses as c, radioHitTargetDescriptionAlignClasses as l, radioHitTargetSizeClasses as u, radioLabelClassesFor as d, radioRowBaseClasses as f, radioRowSizeClasses as p, radioSizes as m, radioStatusBannerClassesFor as h, radioTextColumnClasses as g } from "./radioStyles.js";
+import { forwardRef as _, useId as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/atoms/Radio/Radio.tsx
-var S = {
+var C = {
 	sm: "sm",
 	md: "md"
 };
-function C(e) {
+function w(e) {
 	e.message != null && e.status == null && console.warn("[WMDS Radio] `message` requires `status`.");
 }
-var w = g(function({ size: p = "md", label: g, labelHidden: w = !1, description: T, status: E, message: D, className: O, disabled: k, checked: A, defaultChecked: j, id: M, onChange: N, ...P }, F) {
-	let I = _(), L = M ?? I;
-	C({
-		status: E,
-		message: D
+var T = _(function({ size: m = "md", label: _, labelHidden: T = !1, description: E, status: D, message: O, className: k, disabled: A, checked: j, defaultChecked: M, id: N, onChange: P, ...F }, I) {
+	n("Radio", D, O);
+	let L = v(), R = N ?? L;
+	w({
+		status: D,
+		message: O
 	});
-	let R = A !== void 0, [z, B] = v(j ?? !1), V = R ? !!A : z, H = D != null && D.length > 0 && E != null, U = H ? `${L}-message` : void 0, W = T != null && !w ? `${L}-description` : void 0, G = [
-		P["aria-describedby"],
-		W,
-		U
-	].filter(Boolean).join(" ") || void 0, K = (e) => {
-		R || B(e.target.checked), N?.(e);
-	}, q = n(p, V, k, H ? void 0 : E), J = T != null && !w, Y = (t) => /* @__PURE__ */ x("span", {
-		className: e("relative flex shrink-0 items-center justify-center", l[p], t),
-		children: [/* @__PURE__ */ b("input", {
-			...P,
-			ref: F,
-			id: L,
+	let z = j !== void 0, [B, V] = y(M ?? !1), H = z ? !!j : B, U = O != null && O.length > 0 && D != null, W = U ? `${R}-message` : void 0, G = E != null && !T ? `${R}-description` : void 0, K = [
+		F["aria-describedby"],
+		G,
+		W
+	].filter(Boolean).join(" ") || void 0, q = (e) => {
+		z || V(e.target.checked), P?.(e);
+	}, J = r(m, H, A, U ? void 0 : D), Y = E != null && !T, X = (t) => /* @__PURE__ */ S("span", {
+		className: e("relative flex shrink-0 items-center justify-center", u[m], t),
+		children: [/* @__PURE__ */ x("input", {
+			...F,
+			ref: I,
+			id: R,
 			type: "radio",
-			checked: R ? A : void 0,
-			defaultChecked: R ? void 0 : j,
-			disabled: k,
-			"aria-invalid": E === "error" || void 0,
-			"aria-describedby": G,
-			onChange: K,
-			className: s
-		}), /* @__PURE__ */ b("span", {
-			className: q,
+			checked: z ? j : void 0,
+			defaultChecked: z ? void 0 : M,
+			disabled: A,
+			"aria-invalid": D === "error" || void 0,
+			"aria-describedby": K,
+			onChange: q,
+			className: c
+		}), /* @__PURE__ */ x("span", {
+			className: J,
 			"aria-hidden": !0,
-			children: V ? /* @__PURE__ */ b("span", { className: e(o[p], a) }) : null
+			children: H ? /* @__PURE__ */ x("span", { className: e(s[m], o) }) : null
 		})]
-	}), X = /* @__PURE__ */ b("label", {
-		htmlFor: L,
-		className: e(d, !J && "items-center", !J && f[p], k && "cursor-not-allowed", O),
-		children: w ? /* @__PURE__ */ x(y, { children: [Y(), /* @__PURE__ */ b("span", {
+	}), Z = /* @__PURE__ */ x("label", {
+		htmlFor: R,
+		className: e(f, !Y && "items-center", !Y && p[m], A && "cursor-not-allowed", k),
+		children: T ? /* @__PURE__ */ S(b, { children: [X(), /* @__PURE__ */ x("span", {
 			className: "sr-only",
-			children: g
-		})] }) : J ? /* @__PURE__ */ x("span", {
-			className: i[p],
-			children: [Y(c[p]), /* @__PURE__ */ x("span", {
-				className: h,
-				children: [/* @__PURE__ */ b("span", {
-					className: u(k, !0),
-					children: g
-				}), /* @__PURE__ */ b("span", {
-					id: W,
-					className: r,
-					children: T
+			children: _
+		})] }) : Y ? /* @__PURE__ */ S("span", {
+			className: a[m],
+			children: [X(l[m]), /* @__PURE__ */ S("span", {
+				className: g,
+				children: [/* @__PURE__ */ x("span", {
+					className: d(A, !0),
+					children: _
+				}), /* @__PURE__ */ x("span", {
+					id: G,
+					className: i,
+					children: E
 				})]
 			})]
-		}) : /* @__PURE__ */ x(y, { children: [Y(), /* @__PURE__ */ b("span", {
-			className: u(k),
-			children: g
+		}) : /* @__PURE__ */ S(b, { children: [X(), /* @__PURE__ */ x("span", {
+			className: d(A),
+			children: _
 		})] })
 	});
-	return !H || E == null || U == null ? X : /* @__PURE__ */ x("div", {
+	return !U || D == null || W == null ? Z : /* @__PURE__ */ S("div", {
 		className: "flex w-full flex-col gap-1.5",
-		children: [X, /* @__PURE__ */ b(t, {
-			status: E,
-			message: D,
-			messageId: U,
-			size: S[p],
+		children: [Z, /* @__PURE__ */ x(t, {
+			status: D,
+			message: O,
+			messageId: W,
+			size: C[m],
 			messagePosition: "bottom",
-			bannerClassName: m(E)
+			bannerClassName: h(D)
 		})]
 	});
 });
 //#endregion
-export { w as Radio, p as radioSizes };
+export { T as Radio, m as radioSizes };