@thewhatmatters/wmds 0.4.33 → 0.4.34

package/dist/components/molecules/Field/Field.js

@@ -16,60 +16,75 @@ function _(e) {
 	let t = g(e.children);
 	t != null && t.props.label != null && console.warn("[WMDS Field] Child has its own `label` — omit one label source (Field or control).");
 }
-function v({ label: s, description: l, orientation: u = "vertical", htmlFor: d, disabled: v = !1, children: b, className: x }) {
-	let S = f();
+function v({ label: s, description: l, counter: u, orientation: d = "vertical", htmlFor: v, disabled: b = !1, children: x, className: S }) {
+	let C = f();
 	_({
 		label: s,
-		children: b
+		children: x
 	});
-	let C = h(b), w = g(b), T = d ?? w?.props.id ?? (w == null ? void 0 : `${S}-control`), E = l == null ? void 0 : `${S}-description`, D = s == null ? void 0 : `${S}-legend`, O = w == null ? w : y(w, T, E), k = C > 1 ? /* @__PURE__ */ p("div", {
+	let w = h(x), T = g(x), E = v ?? T?.props.id ?? (T == null ? void 0 : `${C}-control`), D = l == null ? void 0 : `${C}-description`, O = u == null ? void 0 : `${C}-counter`, k = [D, O].filter(Boolean).join(" ") || void 0, A = s == null ? void 0 : `${C}-legend`, j = T == null ? T : y(T, E, k), M = w > 1 ? /* @__PURE__ */ p("div", {
 		className: o,
-		children: b
-	}) : O ?? b, A = l == null ? null : /* @__PURE__ */ p("p", {
-		id: E,
+		children: x
+	}) : j ?? x, N = l == null ? null : /* @__PURE__ */ p("p", {
+		id: D,
 		className: t,
 		children: l
+	}), P = u == null ? null : /* @__PURE__ */ p("p", {
+		id: O,
+		className: t,
+		"data-field-counter": "",
+		children: u
 	});
-	return s == null && l == null ? /* @__PURE__ */ p("div", {
-		className: e("w-full", x),
-		children: b
+	return s == null && l == null && u == null ? /* @__PURE__ */ p("div", {
+		className: e("w-full", S),
+		children: x
 	}) : s == null ? /* @__PURE__ */ m("div", {
-		className: e(c, x),
-		children: [C > 1 ? b : O ?? b, A]
-	}) : C > 1 ? /* @__PURE__ */ m("div", {
+		className: e(c, S),
+		children: [
+			N,
+			w > 1 ? x : j ?? x,
+			P
+		]
+	}) : w > 1 ? /* @__PURE__ */ m("div", {
 		role: "group",
-		"aria-labelledby": D,
-		"aria-describedby": E,
-		className: e(c, x),
+		"aria-labelledby": A,
+		"aria-describedby": k,
+		className: e(c, S),
 		children: [
 			/* @__PURE__ */ p("span", {
-				id: D,
-				className: a(v),
+				id: A,
+				className: a(b),
 				children: s
 			}),
-			k,
-			A
+			N,
+			M,
+			P
 		]
-	}) : u === "horizontal" ? /* @__PURE__ */ m("div", {
-		className: e(i, x),
+	}) : d === "horizontal" ? /* @__PURE__ */ m("div", {
+		className: e(i, S),
 		children: [/* @__PURE__ */ p("label", {
-			htmlFor: T,
-			className: e(r, a(v)),
+			htmlFor: E,
+			className: e(r, a(b)),
 			children: s
 		}), /* @__PURE__ */ m("div", {
 			className: n,
-			children: [k, A]
+			children: [
+				N,
+				M,
+				P
+			]
 		})]
 	}) : /* @__PURE__ */ m("div", {
-		className: e(c, x),
+		className: e(c, S),
 		children: [
 			/* @__PURE__ */ p("label", {
-				htmlFor: T,
-				className: a(v),
+				htmlFor: E,
+				className: a(b),
 				children: s
 			}),
-			k,
-			A
+			N,
+			M,
+			P
 		]
 	});
 }

package/dist/components/molecules/Field/fieldStyles.d.ts

@@ -2,12 +2,15 @@ export declare const fieldOrientations: readonly ["vertical", "horizontal"];
 export type FieldOrientation = (typeof fieldOrientations)[number];
 /** Vertical label → control → description — matches Input field stack rhythm. */
 export declare const fieldVerticalStackClasses = "flex w-full flex-col gap-1.5";
-/** Label beside control — Stripe-style two-column row. */
-export declare const fieldHorizontalStackClasses = "flex w-full items-start gap-4";
-/** Left label column — fixed band; control column flexes. */
-export declare const fieldHorizontalLabelColumnClasses = "w-[7.5rem] shrink-0 pt-2.5 md:w-32";
-/** Right control column in horizontal layout. */
-export declare const fieldHorizontalControlColumnClasses = "flex min-w-0 flex-1 flex-col gap-1.5";
+/**
+ * Label beside control — Stripe-style two-column row, from `lg` (1024) only. Below that it stacks like
+ * the vertical Field, since a side label squeezes the control on phones and tablets (Form layout L8).
+ */
+export declare const fieldHorizontalStackClasses = "flex w-full flex-col gap-1.5 lg:flex-row lg:items-start lg:gap-4";
+/** Left label column from `lg` — fixed band; control column flexes. Stacked above the control below `lg`. */
+export declare const fieldHorizontalLabelColumnClasses = "lg:w-32 lg:shrink-0 lg:pt-2.5";
+/** Right control column in horizontal layout (full width while stacked). */
+export declare const fieldHorizontalControlColumnClasses = "flex w-full min-w-0 flex-col gap-1.5 lg:flex-1";
 /** Gap between multiple controls under one label. */
 export declare const fieldMultiControlStackClasses = "flex w-full flex-col gap-2";
 export declare const fieldLabelClasses: string;

package/dist/components/molecules/Field/fieldStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Field/fieldStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,qCAAsC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,iFAAiF;AACjF,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE,0DAA0D;AAC1D,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAE3E,6DAA6D;AAC7D,eAAO,MAAM,iCAAiC,uCACR,CAAC;AAEvC,iDAAiD;AACjD,eAAO,MAAM,mCAAmC,yCACR,CAAC;AAEzC,qDAAqD;AACrD,eAAO,MAAM,6BAA6B,+BAA+B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,QAA8B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,QAA6B,CAAC;AAElE,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAE/D"}
+{"version":3,"file":"fieldStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Field/fieldStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,qCAAsC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,iFAAiF;AACjF,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,2BAA2B,qEAAqE,CAAC;AAE9G,6GAA6G;AAC7G,eAAO,MAAM,iCAAiC,kCAAkC,CAAC;AAEjF,4EAA4E;AAC5E,eAAO,MAAM,mCAAmC,mDACE,CAAC;AAEnD,qDAAqD;AACrD,eAAO,MAAM,6BAA6B,+BAA+B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,QAA8B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,QAA6B,CAAC;AAElE,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAE/D"}

package/dist/components/molecules/Field/fieldStyles.js

@@ -3,7 +3,7 @@ import { cn as e } from "../../../lib/cn.js";
 import { typographyClass as t } from "../../../lib/typography.js";
 import "../../atoms/Input/inputShellStyles.js";
 //#region src/components/molecules/Field/fieldStyles.ts
-var n = ["vertical", "horizontal"], r = "flex w-full flex-col gap-1.5", i = "flex w-full items-start gap-4", a = "w-[7.5rem] shrink-0 pt-2.5 md:w-32", o = "flex min-w-0 flex-1 flex-col gap-1.5", s = "flex w-full flex-col gap-2", c = t("ui-label"), l = t("caption");
+var n = ["vertical", "horizontal"], r = "flex w-full flex-col gap-1.5", i = "flex w-full flex-col gap-1.5 lg:flex-row lg:items-start lg:gap-4", a = "lg:w-32 lg:shrink-0 lg:pt-2.5", o = "flex w-full min-w-0 flex-col gap-1.5 lg:flex-1", s = "flex w-full flex-col gap-2", c = t("ui-label"), l = t("caption");
 function u(t) {
 	return e(c, t && "opacity-50");
 }

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

@@ -16,27 +16,37 @@ export interface IntakeFormProps {
     /** Character ceiling for project details. Default 400. */
     detailsMax?: number;
     /**
-     * Shows the optional Company field. Default `true`. Left out, the form closes up and
+     * Shows the optional Company field. Default `false` (Required and optional Q9: ask less). Left out, the form closes up and
      * `values.company` keeps its value (empty), so `isIntakeAboutValid` and the app's submit code are
      * unchanged.
      */
     company?: boolean;
     /**
-     * Shows the optional Link field. Default `true`. Left out, the form closes up and `values.url`
+     * Shows the optional website field ("Your website", with an Optional badge). Default `true`. Left out, the form closes up and `values.url`
      * keeps its value (empty, which is valid).
      */
     link?: boolean;
+    /**
+     * How many times Continue was pressed on this step (the caller counts; Buttons U6: Continue stays
+     * enabled). From 1 on, every field shows its error. Two or more errors put an **ErrorSummary** at the
+     * top and focus it; one error focuses its field (Errors and validation V5). Default 0.
+     */
+    submitCount?: number;
     className?: IntakeFormLayoutClassName;
 }
 /** Empty link is fine. A filled value must be an http(s) URL. */
 export declare function isIntakeUrlValid(value: string | null | undefined): boolean;
 /** Name, a real email, and details within the counter. Company and link stay optional. */
 export declare function isIntakeAboutValid(values: IntakeAboutValues, detailsMax?: number): boolean;
+/** Form layout L9: what the counter says. People may type past the limit; the counter tells them by how much. */
+export declare function intakeCounterText(length: number, max: number): string;
 /**
  * About-you step — **Field** rows for name, email, company, link, and project details.
  * Required fields show **Input** / **TextArea** `status` + `message` on blur when invalid.
- * Company and link stay optional; `company={false}` and `link={false}` leave them out (the short
- * form: name, email, details). The details description is the character counter.
+ * Name, email and details are required (`aria-required`); the website is optional and says so with a
+ * badge. Company is off by default (`company` shows it, labelled "Company (optional)"); `link={false}`
+ * leaves the website out (the short form: name, email, details). Hints sit above their fields; the details
+ * counter sits below the box, next to what it counts.
  */
-export declare function IntakeForm({ values, onChange, detailsMax, company, link, className, }: IntakeFormProps): import("react").JSX.Element;
+export declare function IntakeForm({ values, onChange, detailsMax, company, link, submitCount, className, }: IntakeFormProps): import("react").JSX.Element;
 //# sourceMappingURL=IntakeForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntakeForm.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IntakeForm/IntakeForm.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,qCAAqC;AACrC,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAM9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAMD,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAW1E;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,iBAAiB,EACzB,UAAU,GAAE,MAAyB,GACpC,OAAO,CAQT;AA+BD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,UAA6B,EAC7B,OAAc,EACd,IAAW,EACX,SAAS,GACV,EAAE,eAAe,+BAuFjB"}
+{"version":3,"file":"IntakeForm.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IntakeForm/IntakeForm.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,qCAAqC;AACrC,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAM9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAMD,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAW1E;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,iBAAiB,EACzB,UAAU,GAAE,MAAyB,GACpC,OAAO,CAQT;AAID,iHAAiH;AACjH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AA0CD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,UAA6B,EAC7B,OAAe,EACf,IAAW,EACX,WAAe,EACf,SAAS,GACV,EAAE,eAAe,+BA+HjB"}

package/dist/components/molecules/IntakeForm/IntakeForm.js

@@ -1,20 +1,22 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { Input as t } from "../../atoms/Input/Input.js";
-import { TextArea as n } from "../../atoms/TextArea/TextArea.js";
-import { Field as r } from "../Field/Field.js";
-import { intakeDetailsMax as i, intakeFormClasses as a } from "./intakeFormStyles.js";
-import { useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Badge as t } from "../../atoms/Badge/Badge.js";
+import { Input as n } from "../../atoms/Input/Input.js";
+import { TextArea as r } from "../../atoms/TextArea/TextArea.js";
+import { Field as i } from "../Field/Field.js";
+import { ErrorSummary as a } from "../ErrorSummary/ErrorSummary.js";
+import { intakeDetailsMax as o, intakeFormClasses as s } from "./intakeFormStyles.js";
+import { useEffect as c, useId as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/molecules/IntakeForm/IntakeForm.tsx
-var l = {
+var p = {
 	name: "",
 	email: "",
 	company: "",
 	url: "",
 	details: ""
-}, u = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function d(e) {
+}, m = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function h(e) {
 	let t = (e ?? "").trim();
 	if (t.length === 0) return !0;
 	try {
@@ -24,112 +26,150 @@ function d(e) {
 		return !1;
 	}
 }
-function f(e, t = 400) {
-	return e.name.trim().length > 0 && u.test(e.email.trim()) && d(e.url) && e.details.trim().length > 0 && e.details.length <= t;
+function g(e, t = 400) {
+	return e.name.trim().length > 0 && m.test(e.email.trim()) && h(e.url) && e.details.trim().length > 0 && e.details.length <= t;
 }
-function p(e, t, n) {
+var _ = (e) => `${e} character${e === 1 ? "" : "s"}`;
+function v(e, t) {
+	return e > t ? `You have ${_(e - t)} too many` : `${_(t - e)} left`;
+}
+function y(e, t = 1e3) {
+	let [n, r] = u(e);
+	return c(() => {
+		let n = setTimeout(() => r(e), t);
+		return () => clearTimeout(n);
+	}, [e, t]), n;
+}
+function b(e, t, n) {
 	if (e === "name") return t.name.trim().length === 0 ? "Enter your name." : void 0;
-	if (e === "email") return t.email.trim().length === 0 ? "Enter your email address." : u.test(t.email.trim()) ? void 0 : "Enter an email address like name@example.com.";
-	if (e === "url") return d(t.url) ? void 0 : "Enter a website address like example.com.";
+	if (e === "email") return t.email.trim().length === 0 ? "Enter your email address." : m.test(t.email.trim()) ? void 0 : "Enter an email address like name@example.com.";
+	if (e === "url") return h(t.url) ? void 0 : "Enter a website address like example.com.";
 	if (t.details.trim().length === 0) return "Tell us a bit about the project.";
-	if (t.details.length > n) return `Keep project details to ${n} characters.`;
+	if (t.details.length > n) return v(t.details.length, n);
 }
-function m({ values: i, onChange: l, detailsMax: u = 400, company: d = !0, link: f = !0, className: m }) {
-	let [h, g] = o({});
-	function _(e) {
-		g((t) => t[e] ? t : {
+function x({ values: o, onChange: p, detailsMax: m = 400, company: h = !1, link: g = !0, submitCount: _ = 0, className: x }) {
+	let [S, C] = u({}), w = l(), T = (e) => `${w}-${e}`, E = _ > 0;
+	function D(e) {
+		C((t) => t[e] ? t : {
 			...t,
 			[e]: !0
 		});
 	}
-	function v(e) {
-		if (h[e]) return p(e, i, u);
+	function O(e) {
+		if (!(!S[e] && !E)) return b(e, o, m);
 	}
-	let y = v("name"), b = v("email"), x = v("url"), S = v("details");
-	return /* @__PURE__ */ c("div", {
-		className: e(a, m),
+	let k = O("name"), A = O("email"), j = O("url"), M = O("details"), N = v(o.details.length, m), P = y(N), F = E ? [
+		["name", k],
+		["email", A],
+		...g ? [["url", j]] : [],
+		["details", M]
+	].filter(([, e]) => e != null).map(([e, t]) => ({
+		field: T(e),
+		message: t
+	})) : [], I = F.length === 1 ? F[0].field : void 0;
+	return c(() => {
+		_ > 0 && I != null && document.getElementById(I)?.focus();
+	}, [_]), /* @__PURE__ */ f("div", {
+		className: e(s, x),
 		children: [
-			/* @__PURE__ */ s(r, {
+			F.length >= 2 ? /* @__PURE__ */ d(a, { errors: F }, _) : null,
+			/* @__PURE__ */ d(i, {
 				label: "Name",
-				children: /* @__PURE__ */ s(t, {
+				children: /* @__PURE__ */ d(n, {
+					id: T("name"),
 					"aria-label": "Name",
+					"aria-required": !0,
 					autoComplete: "name",
-					value: i.name,
-					status: y == null ? void 0 : "error",
-					message: y,
-					onBlur: () => _("name"),
-					onChange: (e) => l({
-						...i,
+					value: o.name,
+					status: k == null ? void 0 : "error",
+					message: k,
+					onBlur: () => D("name"),
+					onChange: (e) => p({
+						...o,
 						name: e.target.value
 					})
 				})
 			}),
-			/* @__PURE__ */ s(r, {
+			/* @__PURE__ */ d(i, {
 				label: "Email",
-				children: /* @__PURE__ */ s(t, {
+				children: /* @__PURE__ */ d(n, {
+					id: T("email"),
 					"aria-label": "Email",
+					"aria-required": !0,
 					type: "email",
 					autoComplete: "email",
-					value: i.email,
-					status: b == null ? void 0 : "error",
-					message: b,
-					onBlur: () => _("email"),
-					onChange: (e) => l({
-						...i,
+					value: o.email,
+					status: A == null ? void 0 : "error",
+					message: A,
+					onBlur: () => D("email"),
+					onChange: (e) => p({
+						...o,
 						email: e.target.value
 					})
 				})
 			}),
-			d ? /* @__PURE__ */ s(r, {
-				label: "Company",
-				description: "Optional",
-				children: /* @__PURE__ */ s(t, {
-					"aria-label": "Company",
+			h ? /* @__PURE__ */ d(i, {
+				label: "Company (optional)",
+				description: "So we can read up on you first.",
+				children: /* @__PURE__ */ d(n, {
+					"aria-label": "Company (optional)",
 					autoComplete: "organization",
-					value: i.company,
-					onChange: (e) => l({
-						...i,
+					value: o.company,
+					onChange: (e) => p({
+						...o,
 						company: e.target.value
 					})
 				})
 			}) : null,
-			f ? /* @__PURE__ */ s(r, {
-				label: "Link",
-				description: "Optional",
-				children: /* @__PURE__ */ s(t, {
-					"aria-label": "Link",
+			g ? /* @__PURE__ */ d(i, {
+				label: "Your website",
+				description: "So we can see what you have now.",
+				children: /* @__PURE__ */ d(n, {
+					id: T("url"),
+					"aria-label": "Your website",
+					endBadge: /* @__PURE__ */ d(t, {
+						size: "sm",
+						children: "Optional"
+					}),
 					type: "url",
 					inputMode: "url",
 					autoComplete: "url",
-					value: i.url,
-					status: x == null ? void 0 : "error",
-					message: x,
-					onBlur: () => _("url"),
-					onChange: (e) => l({
-						...i,
+					value: o.url,
+					status: j == null ? void 0 : "error",
+					message: j,
+					onBlur: () => D("url"),
+					onChange: (e) => p({
+						...o,
 						url: e.target.value
 					})
 				})
 			}) : null,
-			/* @__PURE__ */ s(r, {
+			/* @__PURE__ */ d(i, {
 				label: "What should feel different when this work is done?",
-				description: S == null ? `${i.details.length} / ${u}` : void 0,
-				children: /* @__PURE__ */ s(n, {
+				counter: M == null ? N : void 0,
+				children: /* @__PURE__ */ d(r, {
+					id: T("details"),
 					"aria-label": "What should feel different when this work is done?",
+					"aria-required": !0,
 					rows: 5,
-					maxLength: u,
-					value: i.details,
-					status: S == null ? void 0 : "error",
-					message: S,
-					onBlur: () => _("details"),
-					onChange: (e) => l({
-						...i,
+					value: o.details,
+					status: M == null ? void 0 : "error",
+					message: M,
+					onBlur: () => D("details"),
+					onChange: (e) => p({
+						...o,
 						details: e.target.value
 					})
 				})
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"data-intake-counter-live": "",
+				children: P
 			})
 		]
 	});
 }
 //#endregion
-export { m as IntakeForm, l as intakeAboutEmpty, i as intakeDetailsMax, f as isIntakeAboutValid, d as isIntakeUrlValid };
+export { x as IntakeForm, p as intakeAboutEmpty, v as intakeCounterText, o as intakeDetailsMax, g as isIntakeAboutValid, h as isIntakeUrlValid };

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

@@ -4,8 +4,12 @@ export type PillGroupLayoutClassName = string;
 export declare const pillGroupEmphases: readonly ["solid", "muted"];
 export type PillGroupEmphasis = (typeof pillGroupEmphases)[number];
 export interface PillGroupProps {
-    /** Accessible name for the radio group. */
-    "aria-label": string;
+    /**
+     * The question, shown above the pills and naming the group (Dropdowns C2, C9). Prefer it to `aria-label`.
+     */
+    label?: ReactNode;
+    /** Accessible name when the question is visible elsewhere (a heading right above). */
+    "aria-label"?: string;
     value: string | null;
     onValueChange: (value: string) => void;
     children: ReactNode;
@@ -21,7 +25,7 @@ export interface PillGroupItemProps {
     emphasis?: PillGroupEmphasis;
     className?: PillGroupLayoutClassName;
 }
-declare function PillGroupRoot({ "aria-label": ariaLabel, value, onValueChange, children, className, }: PillGroupProps): import("react").JSX.Element;
+declare function PillGroupRoot({ label, "aria-label": ariaLabel, value, onValueChange, children, className, }: PillGroupProps): import("react").JSX.Element;
 /** One radio pill. Wraps with its siblings. */
 declare function PillGroupItem({ value, children, emphasis, className, }: PillGroupItemProps): import("react").JSX.Element;
 export declare const PillGroup: typeof PillGroupRoot & {

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

@@ -1 +1 @@
-{"version":3,"file":"PillGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PillGroup/PillGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,qCAAqC;AACrC,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,iBAAiB,6BAA8B,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAkBnE,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD,iBAAS,aAAa,CAAC,EACrB,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAchB;AAED,+CAA+C;AAC/C,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAkB,EAClB,SAAS,GACV,EAAE,kBAAkB,+BAiBpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"PillGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PillGroup/PillGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAWf,qCAAqC;AACrC,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,iBAAiB,6BAA8B,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAkBnE,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAgChB;AAED,+CAA+C;AAC/C,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAkB,EAClB,SAAS,GACV,EAAE,kBAAkB,+BAiBpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/dist/components/molecules/PillGroup/PillGroup.js

@@ -1,53 +1,63 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { pillGroupClasses as t, pillGroupIdleClasses as n, pillGroupMutedClasses as r, pillGroupSelectedClasses as i } from "./pillGroupStyles.js";
-import { createContext as a, useContext as o, useId as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { pillGroupClasses as t, pillGroupFieldClasses as n, pillGroupIdleClasses as r, pillGroupLabelClasses as i, pillGroupMutedClasses as a, pillGroupSelectedClasses as o } from "./pillGroupStyles.js";
+import { createContext as s, useContext as c, useId as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/molecules/PillGroup/PillGroup.tsx
-var u = ["solid", "muted"], d = a(null);
-function f(e) {
-	let t = o(d);
+var f = ["solid", "muted"], p = s(null);
+function m(e) {
+	let t = c(p);
 	if (t == null) throw Error(`${e} must be used inside PillGroup.`);
 	return t;
 }
-function p(e, t) {
-	return e ? i : t === "muted" ? r : n;
+function h(e, t) {
+	return e ? o : t === "muted" ? a : r;
 }
-function m({ "aria-label": n, value: r, onValueChange: i, children: a, className: o }) {
-	let l = s();
-	return /* @__PURE__ */ c(d.Provider, {
+function g({ label: r, "aria-label": a, value: o, onValueChange: s, children: c, className: f }) {
+	let m = l(), h = `${m}-label`;
+	r == null && a == null && console.warn("[WMDS PillGroup] Provide `label` (the question) or `aria-label`.");
+	let g = /* @__PURE__ */ u("div", {
+		role: "radiogroup",
+		"aria-label": r == null ? a : void 0,
+		"aria-labelledby": r == null ? void 0 : h,
+		className: e(t, r == null && f),
+		children: c
+	});
+	return /* @__PURE__ */ u(p.Provider, {
 		value: {
-			name: l,
-			value: r,
-			onValueChange: i
+			name: m,
+			value: o,
+			onValueChange: s
 		},
-		children: /* @__PURE__ */ c("div", {
-			role: "radiogroup",
-			"aria-label": n,
-			className: e(t, o),
-			children: a
+		children: r == null ? g : /* @__PURE__ */ d("div", {
+			className: e(n, f),
+			children: [/* @__PURE__ */ u("span", {
+				id: h,
+				className: i,
+				children: r
+			}), g]
 		})
 	});
 }
-function h({ value: t, children: n, emphasis: r = "solid", className: i }) {
-	let a = f("PillGroup.Item"), o = a.value === t;
-	return /* @__PURE__ */ l("label", {
+function _({ value: t, children: n, emphasis: r = "solid", className: i }) {
+	let a = m("PillGroup.Item"), o = a.value === t;
+	return /* @__PURE__ */ d("label", {
 		className: "inline-flex",
 		"data-emphasis": r,
 		"data-value": t,
-		children: [/* @__PURE__ */ c("input", {
+		children: [/* @__PURE__ */ u("input", {
 			type: "radio",
 			className: "peer sr-only",
 			name: a.name,
 			value: t,
 			checked: o,
 			onChange: () => a.onValueChange(t)
-		}), /* @__PURE__ */ c("span", {
-			className: e(p(o, r), i),
+		}), /* @__PURE__ */ u("span", {
+			className: e(h(o, r), i),
 			children: n
 		})]
 	});
 }
-var g = Object.assign(m, { Item: h });
+var v = Object.assign(g, { Item: _ });
 //#endregion
-export { g as PillGroup, u as pillGroupEmphases };
+export { v as PillGroup, f as pillGroupEmphases };

package/dist/components/molecules/PillGroup/pillGroupStyles.d.ts

@@ -10,4 +10,7 @@ export declare const pillGroupIdleClasses: string;
 export declare const pillGroupMutedClasses: string;
 /** Selected pill — brand navy fill. Owned by PillGroup, not a Badge variant. */
 export declare const pillGroupSelectedClasses: string;
+/** Question above the pills (Dropdowns C2, C9). */
+export declare const pillGroupFieldClasses = "flex flex-col gap-2";
+export declare const pillGroupLabelClasses: string;
 //# sourceMappingURL=pillGroupStyles.d.ts.map

package/dist/components/molecules/PillGroup/pillGroupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pillGroupStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PillGroup/pillGroupStyles.ts"],"names":[],"mappings":"AAGA,4FAA4F;AAC5F,eAAO,MAAM,gBAAgB,yBAAyB,CAAC;AAEvD,eAAO,MAAM,qBAAqB,QAIjC,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,oBAAoB,QAAuD,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAAuD,CAAC;AAE1F,gFAAgF;AAChF,eAAO,MAAM,wBAAwB,QAGpC,CAAC"}
+{"version":3,"file":"pillGroupStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PillGroup/pillGroupStyles.ts"],"names":[],"mappings":"AAIA,4FAA4F;AAC5F,eAAO,MAAM,gBAAgB,yBAAyB,CAAC;AAEvD,eAAO,MAAM,qBAAqB,QAIjC,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,oBAAoB,QAAuD,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAAuD,CAAC;AAE1F,gFAAgF;AAChF,eAAO,MAAM,wBAAwB,QAGpC,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,eAAO,MAAM,qBAAqB,QAA8B,CAAC"}

package/dist/components/molecules/PillGroup/pillGroupStyles.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { badgeBaseClasses as t, badgeMutedClasses as n, badgeSolidClasses as r } from "../../atoms/Badge/badgeStyles.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { badgeBaseClasses as n, badgeMutedClasses as r, badgeSolidClasses as i } from "../../atoms/Badge/badgeStyles.js";
 //#region src/components/molecules/PillGroup/pillGroupStyles.ts
-var i = "flex flex-wrap gap-2", a = e(t, "min-h-11 cursor-pointer rounded-[var(--radius-control)] px-4", "peer-focus-visible:ring-2 peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-body"), o = e(a, r.neutral), s = e(a, n.neutral), c = e(a, "border border-transparent bg-brand text-on-brand");
+var a = "flex flex-wrap gap-2", o = e(n, "min-h-11 cursor-pointer rounded-[var(--radius-control)] px-4", "peer-focus-visible:ring-2 peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-body"), s = e(o, i.neutral), c = e(o, r.neutral), l = e(o, "border border-transparent bg-brand text-on-brand"), u = "flex flex-col gap-2", d = t("ui-label");
 //#endregion
-export { i as pillGroupClasses, o as pillGroupIdleClasses, s as pillGroupMutedClasses, c as pillGroupSelectedClasses, a as pillGroupShapeClasses };
+export { a as pillGroupClasses, u as pillGroupFieldClasses, s as pillGroupIdleClasses, d as pillGroupLabelClasses, c as pillGroupMutedClasses, l as pillGroupSelectedClasses, o as pillGroupShapeClasses };

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

@@ -5,7 +5,7 @@ export type { SearchSize } from "./searchStyles";
 export { searchSizes } from "./searchStyles";
 /** Layout-only — width, margin, flex placement. */
 export type SearchLayoutClassName = string;
-export interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+export interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "width"> {
     size?: SearchSize;
     /**
      * The field's name, read by screen readers (Labels and placeholders F7, F10). It may stay visually

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,0GA4CjB,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,0GA4CjB,CAAC"}