@thewhatmatters/wmds 0.4.31 → 0.4.33

package/CHANGELOG.md

@@ -7,6 +7,46 @@ 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.33
+
+**Cards can take their own tone, and a Carousel can drift on its own with a Pause button and a follow cursor.**
+
+- **Card** `tone` (new): `inverse`, `field` or `light`, the same scopes **Band** uses, so a card can stand apart from its section (testimonials, offers). Everything inside re-skins. New export `cardTones` / `CardTone`.
+- **`[data-theme="light"]`** now scopes the light palette (colors.css and stateColors.css), so a light card or block works inside a dark or toned section.
+- **Carousel** `autoplay` (new): drifts the row slowly back and forth (`true` or `{ speed }` in px a second). It holds on hover, on focus inside the row, during a drag or a scrub, off screen and in a hidden tab, and never runs under reduced motion. A **Pause** / **Play** button sits beside the scrubber (WCAG 2.2.2).
+- **Carousel** `loop` (new): the items repeat seamlessly. A copy follows the last item (hidden from assistive tech, `inert`), and the row wraps back as it passes one full set, so it never ends; with `autoplay` it drifts one way. No scrubber or counter with a loop.
+- **Carousel** sets **`--carousel-velocity`** on its root while the row moves: -1 to 1, which way and how fast, smoothed by a Motion spring and easing back to 0 when it stops (always 0 under reduced motion). Use it straight, without a CSS transition. Items can lean or skew with it, e.g. `rotate-[calc(var(--carousel-velocity,0)*8deg)]`.
+- **Carousel**: a row you can drag no longer selects text (`select-none` while it overflows), so a press-and-drag doesn't paint selection over the items.
+- **Carousel** `cursor` (new): a decorative badge that follows a mouse over the row (fine pointers that can hover), e.g. a hand icon that says "drag me".
+- **Carousel** reads reduced motion through Motion's config, so a `MotionConfig reducedMotion` around it is respected (no change under the default `user`).
+- New tests: **cardTone.test.ts**, and Carousel interaction tests **autoplay drifts, holds on hover and focus, and pauses**, **autoplay never runs under reduced motion** , **loop repeats the items seamlessly and wraps back** and **--carousel-velocity follows the row's movement and settles to 0**. New stories **Card → Reference — tones** and **Carousel → Reference — autoplay with a follow cursor**.
+
+### Consumer actions
+
+If your brand stylesheet sets colours on `:root` only, also list `[data-theme="light"]` (`:root, [data-theme="light"] { … }`) so a `tone="light"` card picks them up.
+
+## 0.4.32
+
+**Errors and validation: an error summary, errors announced as errors, no lost typing, and no iOS zoom. Labels and placeholders: every field named, the hint above the field, and inset buttons you can tap and see focused.**
+
+- **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/colors.css

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

package/dist/components/atoms/Checkbox/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"}