@thewhatmatters/wmds 0.4.32 → 0.4.34

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

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type SelectSize } from "./selectStyles";
+import { type FieldWidth } from "../../atoms/Input/fieldWidth";
 export type { SelectSize } from "./selectStyles";
 export { selectSizes } from "./selectStyles";
 /** Layout-only — width, margin in toolbars and Card headers. */
@@ -25,6 +26,23 @@ export interface SelectProps {
     className?: SelectLayoutClassName;
     id?: string;
     "aria-label"?: string;
+    /**
+     * Trigger width in characters for short fixed answers (a US state `2ch`); default `full` (Form layout L7).
+     */
+    width?: FieldWidth;
+    /**
+     * The browser's own `<select>` in the WMDS shell (Dropdowns C8): the phone's picker, type-to-jump,
+     * autofill, and plain form submit. Default: on when `name` or `autoComplete` is set (a form field),
+     * off otherwise (toolbars, filters, menus with icons or counts keep the custom listbox). Native options
+     * show text only, so `start` / `end` are dropped.
+     */
+    native?: boolean;
+    /** Form name (turns native mode on by default). */
+    name?: string;
+    /** e.g. `address-level1` for a State select (turns native mode on by default). */
+    autoComplete?: string;
+    /** Required in a form: sets `required` on the native select, `aria-required` on the listbox trigger. */
+    required?: boolean;
     /** Extra ids that describe the trigger (Field passes its description here); joined with `description`. */
     "aria-describedby"?: string;
 }
@@ -32,5 +50,5 @@ export interface SelectProps {
  * Pill select — Input-matched trigger + floating listbox panel.
  * Compose in forms and Card headers (period filters).
  */
-export declare function Select({ options, value: valueProp, defaultValue, onValueChange, placeholder, label, description, disabled, size, className, id: idProp, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SelectProps): import("react").JSX.Element;
+export declare function Select({ options, value: valueProp, defaultValue, onValueChange, placeholder, label, description, disabled, size, className, width, native: nativeProp, name, autoComplete, required, id: idProp, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SelectProps): import("react").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhE,OAAO,EAcL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,gEAAgE;AAChE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0GAA0G;IAC1G,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAqBD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,WAAuB,EACvB,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,IAAW,EACX,SAAS,EACT,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,GACpC,EAAE,WAAW,+BAqIb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhE,OAAO,EAgBL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAmB,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAEhF,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,gEAAgE;AAChE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0GAA0G;IAC1G,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA4BD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,WAAuB,EACvB,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,IAAW,EACX,SAAS,EACT,KAAc,EACd,MAAM,EAAE,UAAU,EAClB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,GACpC,EAAE,WAAW,+BAiLb"}