@thewhatmatters/wmds 0.4.43 → 0.4.46

package/dist/components/atoms/IconButton/IconButton.js

@@ -2,90 +2,91 @@
 import { cn as e } from "../../../lib/cn.js";
 import { buttonBaseClasses as t, buttonRoleClasses as n, iconButtonSizeClasses as r } from "../Button/buttonStyles.js";
 import { ButtonIcon as i } from "../Button/ButtonIcon.js";
-import { ButtonSpinner as a } from "../Button/ButtonSpinner.js";
-import { iconButtonExpandedStyle as o, iconButtonInsetHitClasses as s, iconButtonInsetIconSizeClasses as c, iconButtonPressedClasses as l, iconButtonShapeClass as u } from "./iconButtonStyles.js";
-import { forwardRef as d } from "react";
-import { jsx as f } from "react/jsx-runtime";
-import { useRender as p } from "@base-ui/react/use-render";
+import { useDelayedLoading as a } from "../../../lib/useDelayedLoading.js";
+import { ButtonSpinner as o } from "../Button/ButtonSpinner.js";
+import { iconButtonExpandedStyle as s, iconButtonInsetHitClasses as c, iconButtonInsetIconSizeClasses as l, iconButtonPressedClasses as u, iconButtonShapeClass as d } from "./iconButtonStyles.js";
+import { forwardRef as f } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import { useRender as m } from "@base-ui/react/use-render";
 //#region src/components/atoms/IconButton/IconButton.tsx
-function m(e) {
+function h(e) {
 	e.fab && e.role != null && e.role !== "primary" && console.warn("[WMDS IconButton] `fab` uses primary role — omit `role` or set `primary`."), e.render != null && (e.fab || e.inset) && console.warn("[WMDS IconButton] `render` is not supported with `fab` or `inset`."), e.pressed !== void 0 && (e.fab || e.inset) && console.warn("[WMDS IconButton] `pressed` (toggle) is not supported with `fab` or `inset`.");
 }
-var h = d(function({ icon: d, "aria-label": h, role: g, size: _ = "md", inset: v = !1, title: y, fab: b = !1, loading: x = !1, pressed: S, disabled: C, type: w = "button", render: T, className: E, onClick: D, onKeyDown: O, "aria-current": k, "aria-haspopup": A, "aria-expanded": j, "aria-controls": M, id: N, name: P, form: F, ...I }, L) {
-	m({
-		fab: b,
-		role: g,
-		render: T,
-		inset: v,
-		pressed: S
+var g = f(function({ icon: f, "aria-label": g, role: _, size: v = "md", inset: y = !1, title: b, fab: x = !1, loading: S = !1, pressed: C, disabled: w, type: T = "button", render: E, className: D, onClick: O, onKeyDown: k, "aria-current": A, "aria-haspopup": j, "aria-expanded": M, "aria-controls": N, id: P, name: F, form: I, ...L }, R) {
+	h({
+		fab: x,
+		role: _,
+		render: E,
+		inset: y,
+		pressed: C
 	});
-	let R = b ? "primary" : g ?? "ghost", z = C || x, B = z, V = B ? (e) => {
+	let z = x ? "primary" : _ ?? "ghost", B = w || S, V = a(S), H = B, U = H ? (e) => {
 		e.preventDefault(), e.stopPropagation();
-	} : D, H = y === void 0 ? h : y, U = v ? _ : null, W = v ? s[U ?? "md"] : r[_], G = e(t, "justify-center", S === !0 ? l : n[R], W, u, v && "focus-visible:ring-offset-1 focus-visible:ring-offset-surface", b && "shadow-soft-card", E), K = x ? /* @__PURE__ */ f(a, { size: v ? "xs" : _ }) : v ? /* @__PURE__ */ f("span", {
-		className: e("inline-flex shrink-0 items-center justify-center text-inherit [&>svg]:size-full", c[U ?? "md"]),
+	} : O, W = b === void 0 ? g : b, G = y ? v : null, K = y ? c[G ?? "md"] : r[v], q = e(t, "justify-center", C === !0 ? u : n[z], K, d, y && "focus-visible:ring-offset-1 focus-visible:ring-offset-surface", x && "shadow-soft-card", D), J = V ? /* @__PURE__ */ p(o, { size: y ? "xs" : v }) : y ? /* @__PURE__ */ p("span", {
+		className: e("inline-flex shrink-0 items-center justify-center text-inherit [&>svg]:size-full", l[G ?? "md"]),
 		"aria-hidden": !0,
-		children: d
-	}) : /* @__PURE__ */ f(i, {
-		size: _,
-		children: d
+		children: f
+	}) : /* @__PURE__ */ p(i, {
+		size: v,
+		children: f
 	});
-	return p({
-		render: T,
-		ref: L,
+	return m({
+		render: E,
+		ref: R,
 		defaultTagName: "button",
-		props: T ? {
-			...I,
-			className: G,
-			"aria-label": h,
-			"aria-current": k,
-			"aria-haspopup": A,
-			"aria-expanded": j,
-			"aria-controls": M,
-			"aria-pressed": S ?? I["aria-pressed"],
-			"data-pressed": S === !0 ? "" : void 0,
-			"aria-busy": x || void 0,
-			"aria-disabled": z ? !0 : void 0,
-			"data-disabled": z ? "" : void 0,
-			"data-role": R,
-			"data-size": _,
-			"data-pattern": b ? "fab" : v ? "inset" : "icon",
-			"data-loading": x || void 0,
-			title: H === "" ? void 0 : H,
-			onClick: V,
-			onKeyDown: O,
-			id: N,
-			name: P,
-			form: F,
-			style: j && R === "ghost" ? o : void 0,
-			children: K
+		props: E ? {
+			...L,
+			className: q,
+			"aria-label": g,
+			"aria-current": A,
+			"aria-haspopup": j,
+			"aria-expanded": M,
+			"aria-controls": N,
+			"aria-pressed": C ?? L["aria-pressed"],
+			"data-pressed": C === !0 ? "" : void 0,
+			"aria-busy": S || void 0,
+			"aria-disabled": B ? !0 : void 0,
+			"data-disabled": B ? "" : void 0,
+			"data-role": z,
+			"data-size": v,
+			"data-pattern": x ? "fab" : y ? "inset" : "icon",
+			"data-loading": S || void 0,
+			title: W === "" ? void 0 : W,
+			onClick: U,
+			onKeyDown: k,
+			id: P,
+			name: F,
+			form: I,
+			style: M && z === "ghost" ? s : void 0,
+			children: J
 		} : {
-			...I,
-			className: G,
-			type: w,
-			"aria-disabled": B || void 0,
-			"data-disabled": z ? "" : void 0,
-			"aria-busy": x || void 0,
-			"aria-label": h,
-			"aria-current": k,
-			"aria-haspopup": A,
-			"aria-expanded": j,
-			"aria-controls": M,
-			"aria-pressed": S ?? I["aria-pressed"],
-			"data-pressed": S === !0 ? "" : void 0,
-			title: H === "" ? void 0 : H,
-			onClick: V,
-			onKeyDown: O,
-			id: N,
-			name: P,
-			form: F,
-			style: j && R === "ghost" ? o : void 0,
-			"data-role": R,
-			"data-size": _,
-			"data-pattern": b ? "fab" : v ? "inset" : "icon",
-			"data-loading": x || void 0,
-			children: K
+			...L,
+			className: q,
+			type: T,
+			"aria-disabled": H || void 0,
+			"data-disabled": B ? "" : void 0,
+			"aria-busy": S || void 0,
+			"aria-label": g,
+			"aria-current": A,
+			"aria-haspopup": j,
+			"aria-expanded": M,
+			"aria-controls": N,
+			"aria-pressed": C ?? L["aria-pressed"],
+			"data-pressed": C === !0 ? "" : void 0,
+			title: W === "" ? void 0 : W,
+			onClick: U,
+			onKeyDown: k,
+			id: P,
+			name: F,
+			form: I,
+			style: M && z === "ghost" ? s : void 0,
+			"data-role": z,
+			"data-size": v,
+			"data-pattern": x ? "fab" : y ? "inset" : "icon",
+			"data-loading": S || void 0,
+			children: J
 		}
 	});
 });
 //#endregion
-export { h as IconButton };
+export { g as IconButton };

package/dist/components/atoms/Input/Input.d.ts

@@ -23,6 +23,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     messagePosition?: InputMessagePosition;
     /** Trailing spinner — async validation. Combinable with `endBadge`. */
     loading?: boolean;
+    /** Read out while `loading` (Loading states Y4). Default "Checking…". */
+    loadingLabel?: string;
     /** Leading Lucide icon. */
     icon?: ReactElement;
     /** Monospace value — `type-code` instead of the sans face. For a read-only key or id. */

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,OAAO,EAAwC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE5D,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,GAAG,OAAO,CAAC;IACrE,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;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wGAAwG;IACxG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAyED;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAgMhB,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,OAAO,EAAwC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE5D,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,GAAG,OAAO,CAAC;IACrE,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,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yFAAyF;IACzF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wGAAwG;IACxG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAyED;;;GAGG;AACH,eAAO,MAAM,KAAK,yGAwMhB,CAAC"}

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

@@ -1,135 +1,141 @@
 "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 ee, inputCompoundShellClassesFor as te, inputControlStackClasses as a, inputDisabledClasses as o, inputEndBadgeAndStatusGapClasses as s, inputEndBadgeGapClasses as c, inputEndBadgeWrapperClasses as ne, inputFieldStackClasses as re, inputIconGapClasses as l, inputIconPositionClasses as ie, inputIconSizeClasses as ae, inputInlineClasses as u, inputMessagePositions as d, inputShellClasses as f, inputSizeClasses as p, inputSizes as m, inputSoloFocusRingBaseClasses as oe, inputSoloFocusRingColorClasses as h, inputSoloRadiusClasses as se, inputStatusGapClasses as g, inputStatusShellClasses as ce, inputStatuses as _, inputTrailingInsetClasses as le, inputTrailingInsetPositionClasses as ue } from "./inputShellStyles.js";
-import { InputStatusBanner as de, warnStatusWithoutMessage as fe } from "../inputShared/InputStatusBanner.js";
-import { InputTrailingAffordance as v } from "../inputShared/InputTrailingAffordance.js";
-import { isAutofillField as y } from "./autofillFields.js";
-import { fieldWidthBandStyle as b, fieldWidthStyle as x, fieldWidths as S } from "./fieldWidth.js";
-import { forwardRef as C, useId as pe } from "react";
-import { Fragment as me, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { inputAttachedFieldClasses as n, inputAttachedInputClasses as r, inputBaseClasses as ee, inputCompoundInnerFieldClassesFor as te, inputCompoundShellClassesFor as ne, inputControlStackClasses as i, inputDisabledClasses as a, inputEndBadgeAndStatusGapClasses as o, inputEndBadgeGapClasses as s, inputEndBadgeWrapperClasses as re, inputFieldStackClasses as ie, inputIconGapClasses as c, inputIconPositionClasses as ae, inputIconSizeClasses as oe, inputInlineClasses as l, inputMessagePositions as u, inputShellClasses as d, inputSizeClasses as f, inputSizes as p, inputSoloFocusRingBaseClasses as se, inputSoloFocusRingColorClasses as m, inputSoloRadiusClasses as ce, inputStatusGapClasses as h, inputStatusShellClasses as le, inputStatuses as g, inputTrailingInsetClasses as ue, inputTrailingInsetPositionClasses as de } from "./inputShellStyles.js";
+import { InputStatusBanner as fe, warnStatusWithoutMessage as _ } from "../inputShared/InputStatusBanner.js";
+import { InputTrailingAffordance as pe } from "../inputShared/InputTrailingAffordance.js";
+import { isAutofillField as v } from "./autofillFields.js";
+import { fieldWidthBandStyle as y, fieldWidthStyle as b, fieldWidths as x } from "./fieldWidth.js";
+import { forwardRef as S, useId as me } from "react";
+import { Fragment as he, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/atoms/Input/Input.tsx
-function E(e) {
+function T(e) {
 	e.label == null && e["aria-label"] == null && e["aria-labelledby"] == null && console.warn("[WMDS Input] Provide `label`, `aria-label`, or `aria-labelledby`.");
 }
-function D(e, t) {
-	e && y(t) && console.warn(`[WMDS Input] No \`endBadge\` on an autofill field (autocomplete="${t}"): put "(optional)" in the label.`);
+function E(e, t) {
+	e && v(t) && console.warn(`[WMDS Input] No \`endBadge\` on an autofill field (autocomplete="${t}"): put "(optional)" in the label.`);
 }
-function O(e) {
+function D(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.");
 }
-var k = {
+var O = {
 	sm: .625,
 	md: .75,
 	lg: 1
-}, A = {
+}, k = {
 	sm: 2,
 	md: 2.5,
 	lg: 2.75
-}, j = {
-	[g.sm]: 2,
-	[g.md]: 2.5,
-	[g.lg]: 2.75,
-	[c.sm]: 4.5,
-	[c.md]: 5,
-	[c.lg]: 6,
-	[s.sm]: 6.5,
-	[s.md]: 7,
-	[s.lg]: 8
+}, A = {
+	[h.sm]: 2,
+	[h.md]: 2.5,
+	[h.lg]: 2.75,
+	[s.sm]: 4.5,
+	[s.md]: 5,
+	[s.lg]: 6,
+	[o.sm]: 6.5,
+	[o.md]: 7,
+	[o.lg]: 8
 };
-function M(e, t, n) {
-	let r = k[e];
-	return `${(t ? A[e] : r) + (n === !1 ? r : j[n] ?? r)}rem + 2px`;
+function j(e, t, n) {
+	let r = O[e];
+	return `${(t ? k[e] : r) + (n === !1 ? r : A[n] ?? r)}rem + 2px`;
 }
-function N(e, t, n) {
-	return t && n ? s[e] : t ? c[e] : n ? g[e] : !1;
+function M(e, t, n) {
+	return t && n ? o[e] : t ? s[e] : n ? h[e] : !1;
 }
-var P = C(function({ size: s = "md", label: c, description: d, status: m, message: g, messagePosition: _ = "bottom", loading: y = !1, icon: S, endBadge: C, width: k = "full", mono: A = !1, inline: j = !1, className: P, disabled: F, id: I, "aria-describedby": L, ...R }, z) {
-	fe("Input", m, g);
-	let he = pe(), B = I ?? he;
-	E({
-		label: c,
+var N = S(function({ size: o = "md", label: s, description: u, status: p, message: h, messagePosition: g = "bottom", loading: v = !1, loadingLabel: x = "Checking…", icon: S, endBadge: O, width: k = "full", mono: A = !1, inline: N = !1, className: P, disabled: F, id: I, "aria-describedby": L, ...R }, z) {
+	_("Input", p, h);
+	let ge = me(), B = I ?? ge;
+	T({
+		label: s,
 		"aria-label": R["aria-label"],
 		"aria-labelledby": R["aria-labelledby"]
-	}), O({
-		status: m,
-		message: g,
-		messagePosition: _,
-		loading: y,
-		inline: j,
-		label: c,
-		description: d
+	}), D({
+		status: p,
+		message: h,
+		messagePosition: g,
+		loading: v,
+		inline: N,
+		label: s,
+		description: u
 	});
-	let V = g != null && g.length > 0 && m != null, H = C != null;
-	D(H, R.autoComplete);
-	let U = !V && (y || m != null), W = S != null, G = N(s, H, U), K = d == null ? void 0 : `${B}-description`, q = V ? `${B}-message` : void 0, J = H ? `${B}-badge` : void 0, ge = [
+	let V = h != null && h.length > 0 && p != null, H = O != null;
+	E(H, R.autoComplete);
+	let U = !V && (v || p != null), W = S != null, G = M(o, H, U), K = u == null ? void 0 : `${B}-description`, q = V ? `${B}-message` : void 0, J = H ? `${B}-badge` : void 0, _e = [
 		L,
 		K,
 		J,
 		q
-	].filter(Boolean).join(" ") || void 0, _e = /* @__PURE__ */ T(me, { children: [
-		W ? /* @__PURE__ */ w("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", ie[s], ae[s]),
+	].filter(Boolean).join(" ") || void 0, ve = /* @__PURE__ */ w(he, { children: [
+		W ? /* @__PURE__ */ C("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", ae[o], oe[o]),
 			"aria-hidden": !0,
 			children: S
 		}) : null,
-		/* @__PURE__ */ w("input", {
+		/* @__PURE__ */ C("input", {
 			...R,
 			ref: z,
 			id: B,
 			disabled: F,
-			"aria-invalid": m === "error" || void 0,
-			"aria-describedby": ge,
-			className: e(o, A && "type-code !font-mono !leading-none", V ? e(n, p[s], W && l[s], G, r) : e(i, j ? e(u, W && l[s], P ?? p[s]) : e(p[s], W && l[s], G, m != null && m !== "success" ? e("border", ce[m]) : f[s], se[s], oe, m != null && m !== "success" ? h[m] : h.default, P)))
+			"aria-invalid": p === "error" || void 0,
+			"aria-busy": v || void 0,
+			"aria-describedby": _e,
+			className: e(a, A && "type-code !font-mono !leading-none", V ? e(n, f[o], W && c[o], G, r) : e(ee, N ? e(l, W && c[o], P ?? f[o]) : e(f[o], W && c[o], G, p != null && p !== "success" ? e("border", le[p]) : d[o], ce[o], se, p != null && p !== "success" ? m[p] : m.default, P)))
 		}),
-		H || U ? /* @__PURE__ */ T("span", {
-			className: e(le, ue[s]),
-			children: [U ? /* @__PURE__ */ w(v, {
-				size: s,
-				status: y ? void 0 : m,
-				loading: y
-			}) : null, H ? /* @__PURE__ */ w("span", {
+		v ? /* @__PURE__ */ C("span", {
+			role: "status",
+			className: "sr-only",
+			children: x
+		}) : null,
+		H || U ? /* @__PURE__ */ w("span", {
+			className: e(ue, de[o]),
+			children: [U ? /* @__PURE__ */ C(pe, {
+				size: o,
+				status: v ? void 0 : p,
+				loading: v
+			}) : null, H ? /* @__PURE__ */ C("span", {
 				id: J,
-				className: ne,
-				children: C
+				className: re,
+				children: O
 			}) : null]
 		}) : null
-	] }), Y = V && m != null && q != null ? /* @__PURE__ */ w(de, {
-		status: m,
-		message: g,
+	] }), Y = V && p != null && q != null ? /* @__PURE__ */ C(fe, {
+		status: p,
+		message: h,
 		messageId: q,
-		size: s,
-		messagePosition: _,
-		className: k === "full" ? void 0 : _ === "bottom" ? "rounded-tr-[1.375rem]" : "rounded-br-[1.375rem]"
-	}) : null, X = V && m != null, Z = M(s, W, G), Q = j ? void 0 : x(k, Z), $ = /* @__PURE__ */ T("div", {
-		style: X && !j ? b(k, Z) : Q,
-		className: X ? te(s, m) : e(j ? "relative flex min-w-0 flex-1 items-center" : a),
+		size: o,
+		messagePosition: g,
+		className: k === "full" ? void 0 : g === "bottom" ? "rounded-tr-[1.375rem]" : "rounded-br-[1.375rem]"
+	}) : null, X = V && p != null, Z = j(o, W, G), Q = N ? void 0 : b(k, Z), $ = /* @__PURE__ */ w("div", {
+		style: X && !N ? y(k, Z) : Q,
+		className: X ? ne(o, p) : e(N ? "relative flex min-w-0 flex-1 items-center" : i),
 		children: [
-			X && _ === "top" ? Y : null,
-			/* @__PURE__ */ w("div", {
+			X && g === "top" ? Y : null,
+			/* @__PURE__ */ C("div", {
 				style: X ? Q : void 0,
-				className: X ? ee(s, m, _) : "relative flex w-full items-center",
-				children: _e
+				className: X ? te(o, p, g) : "relative flex w-full items-center",
+				children: ve
 			}),
-			X && _ === "bottom" ? Y : null
+			X && g === "bottom" ? Y : null
 		]
 	});
-	return j || c == null && d == null ? $ : /* @__PURE__ */ T("div", {
-		className: re,
+	return N || s == null && u == null ? $ : /* @__PURE__ */ w("div", {
+		className: ie,
 		children: [
-			c == null ? null : /* @__PURE__ */ w("label", {
+			s == null ? null : /* @__PURE__ */ C("label", {
 				htmlFor: B,
 				className: e(t("ui-label"), F && "opacity-50"),
-				children: c
+				children: s
 			}),
-			K == null ? null : /* @__PURE__ */ w("p", {
+			K == null ? null : /* @__PURE__ */ C("p", {
 				id: K,
 				className: t("caption"),
-				children: d
+				children: u
 			}),
 			$
 		]
 	});
 });
 //#endregion
-export { P as Input, S as fieldWidths, d as inputMessagePositions, m as inputSizes, _ as inputStatuses };
+export { N as Input, x as fieldWidths, u as inputMessagePositions, p as inputSizes, g as inputStatuses };

package/dist/components/atoms/Status/Status.js

@@ -31,7 +31,7 @@ function h({ active: t = !1, step: n, label: r, besideLabel: s = !1, className:
 		children: [/* @__PURE__ */ f("svg", {
 			width: 24,
 			height: 24,
-			className: e(l, t && "animate-spin"),
+			className: e(l, t && "animate-spin motion-reduce:animate-none"),
 			"aria-hidden": !0,
 			children: [/* @__PURE__ */ d("circle", {
 				cx: 12,

package/dist/components/atoms/Status/statusRingStyles.d.ts

@@ -5,7 +5,7 @@ export declare const statusRingStrokePx = 2;
 export declare const statusRingArcVisibleRatio = 0.28;
 export declare const statusRingShellClasses = "relative inline-flex shrink-0 items-center justify-center";
 export declare const statusRingSvgClasses = "absolute inset-0";
-export declare const statusRingSvgActiveClasses = "animate-spin";
+export declare const statusRingSvgActiveClasses = "animate-spin motion-reduce:animate-none";
 export declare const statusRingTrackClasses = "stroke-border";
 export declare const statusRingArcClasses = "stroke-muted";
 export declare const statusRingStepClasses: string;

package/dist/components/atoms/Status/statusRingStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"statusRingStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Status/statusRingStyles.ts"],"names":[],"mappings":"AAEA,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,eAAO,MAAM,sBAAsB,8DAC0B,CAAC;AAE9D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,iBAAiB,CAAC;AAEzD,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AAEtD,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AAEnD,eAAO,MAAM,qBAAqB,QAAgG,CAAC"}
+{"version":3,"file":"statusRingStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Status/statusRingStyles.ts"],"names":[],"mappings":"AAEA,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,eAAO,MAAM,sBAAsB,8DAC0B,CAAC;AAE9D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,4CAA4C,CAAC;AAEpF,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AAEtD,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AAEnD,eAAO,MAAM,qBAAqB,QAAgG,CAAC"}

package/dist/components/atoms/Status/statusRingStyles.js

@@ -1,6 +1,6 @@
 "use client";
 import { typographyClass as e } from "../../../lib/typography.js";
 //#region src/components/atoms/Status/statusRingStyles.ts
-var t = 24, n = .28, r = "relative inline-flex shrink-0 items-center justify-center", i = "absolute inset-0", a = "animate-spin", o = "stroke-border", s = "stroke-muted", c = `${e("caption")} relative font-semibold tabular-nums text-fg text-[0.65625rem]`;
+var t = 24, n = .28, r = "relative inline-flex shrink-0 items-center justify-center", i = "absolute inset-0", a = "animate-spin motion-reduce:animate-none", o = "stroke-border", s = "stroke-muted", c = `${e("caption")} relative font-semibold tabular-nums text-fg text-[0.65625rem]`;
 //#endregion
 export { s as statusRingArcClasses, n as statusRingArcVisibleRatio, r as statusRingShellClasses, t as statusRingSizePx, c as statusRingStepClasses, a as statusRingSvgActiveClasses, i as statusRingSvgClasses, o as statusRingTrackClasses };

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAMf,OAAO,EAkBL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAaD;;;GAGG;AACH,eAAO,MAAM,MAAM,0GAgLjB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAMf,OAAO,EAkBL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAaD;;;GAGG;AACH,eAAO,MAAM,MAAM,0GAkLjB,CAAC"}

package/dist/components/atoms/Switch/Switch.js

@@ -1,41 +1,42 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { motionTransitionProp as t } from "../../../lib/motion.js";
+import { useDelayedLoading as n } from "../../../lib/useDelayedLoading.js";
 import "../Input/inputShellStyles.js";
-import { InputStatusBanner as ee, warnStatusWithoutMessage as n } from "../inputShared/InputStatusBanner.js";
-import { switchDescriptionClasses as te, switchDescriptionRowClasses as r, switchHiddenInputClasses as i, switchHitTargetDescriptionAlignClasses as ne, switchHitTargetSizeClasses as re, switchLabelClassesFor as a, switchLayouts as o, switchRowBaseClasses as ie, switchRowLabelOnlyClasses as s, switchRowSizeClasses as ae, switchSettingsRowClasses as oe, switchSizes as c, switchStatusBannerClassesFor as l, switchTextColumnClasses as u, switchThumbClasses as d, switchThumbOffsetPx as f, switchThumbSizeClasses as p, switchTrackClassesFor as se } from "./switchStyles.js";
-import { forwardRef as m, useId as ce, useState as h } from "react";
-import { Loader2 as g } from "lucide-react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { motion as b } from "motion/react";
+import { InputStatusBanner as r, warnStatusWithoutMessage as ee } from "../inputShared/InputStatusBanner.js";
+import { switchDescriptionClasses as i, switchDescriptionRowClasses as a, switchHiddenInputClasses as o, switchHitTargetDescriptionAlignClasses as te, switchHitTargetSizeClasses as ne, switchLabelClassesFor as s, switchLayouts as c, switchRowBaseClasses as l, switchRowLabelOnlyClasses as u, switchRowSizeClasses as d, switchSettingsRowClasses as f, switchSizes as p, switchStatusBannerClassesFor as m, switchTextColumnClasses as h, switchThumbClasses as re, switchThumbOffsetPx as ie, switchThumbSizeClasses as g, switchTrackClassesFor as ae } from "./switchStyles.js";
+import { forwardRef as _, useId as v, useState as oe } from "react";
+import { Loader2 as se } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { motion as S } from "motion/react";
 //#region src/components/atoms/Switch/Switch.tsx
-var x = {
+var ce = {
 	sm: "sm",
 	md: "md"
 };
-function S(e) {
+function le(e) {
 	e.message != null && e.status == null && console.warn("[WMDS Switch] `message` requires `status`.");
 }
-var C = m(function({ size: o = "md", layout: c = "inline", label: m, labelHidden: C = !1, description: w, status: T, message: E, loading: D = !1, className: O, disabled: k, readOnly: A, checked: j, defaultChecked: M, id: N, onChange: P, ...F }, I) {
-	n("Switch", T, E);
-	let L = ce(), R = N ?? L;
-	S({
+var C = _(function({ size: c = "md", layout: p = "inline", label: _, labelHidden: C = !1, description: w, status: T, message: E, loading: D = !1, className: O, disabled: k, readOnly: A, checked: j, defaultChecked: M, id: N, onChange: P, ...F }, I) {
+	ee("Switch", T, E);
+	let L = v(), R = N ?? L;
+	le({
 		status: T,
 		message: E
 	});
-	let z = j !== void 0, [B, V] = h(M ?? !1), H = z ? !!j : B, U = k || D, W = D && !k, G = E != null && E.length > 0 && T != null, K = G ? `${R}-message` : void 0, q = w != null && !C ? `${R}-description` : void 0, le = [
+	let z = j !== void 0, [B, V] = oe(M ?? !1), H = z ? !!j : B, U = k || D, W = D && !k, ue = n(D), G = E != null && E.length > 0 && T != null, K = G ? `${R}-message` : void 0, q = w != null && !C ? `${R}-description` : void 0, de = [
 		F["aria-describedby"],
 		q,
 		K
-	].filter(Boolean).join(" ") || void 0, ue = (e) => {
+	].filter(Boolean).join(" ") || void 0, fe = (e) => {
 		if (A || W) {
 			e.preventDefault();
 			return;
 		}
 		z || V(e.target.checked), P?.(e);
-	}, de = se(o, H, U, G ? void 0 : T), J = w != null && !C, Y = t("fast"), X = f[o], Z = (t) => /* @__PURE__ */ y("span", {
-		className: e("relative flex shrink-0 items-center justify-center", re[o], t),
-		children: [/* @__PURE__ */ v("input", {
+	}, pe = ae(c, H, U, G ? void 0 : T), J = w != null && !C, Y = t("fast"), X = ie[c], Z = (t) => /* @__PURE__ */ x("span", {
+		className: e("relative flex shrink-0 items-center justify-center", ne[c], t),
+		children: [/* @__PURE__ */ b("input", {
 			...F,
 			ref: I,
 			id: R,
@@ -47,65 +48,65 @@ var C = m(function({ size: o = "md", layout: c = "inline", label: m, labelHidden
 			"aria-disabled": W || void 0,
 			readOnly: A,
 			"aria-invalid": T === "error" || void 0,
-			"aria-describedby": le,
+			"aria-describedby": de,
 			"aria-busy": D || void 0,
-			onChange: ue,
-			className: i
-		}), /* @__PURE__ */ v("span", {
-			className: de,
+			onChange: fe,
+			className: o
+		}), /* @__PURE__ */ b("span", {
+			className: pe,
 			"aria-hidden": !0,
-			children: D ? /* @__PURE__ */ v(b.span, {
-				className: e(p[o], "flex items-center justify-center"),
+			children: ue ? /* @__PURE__ */ b(S.span, {
+				className: e(g[c], "flex items-center justify-center"),
 				animate: { x: H ? X : 0 },
 				transition: Y,
-				children: /* @__PURE__ */ v(g, {
-					className: "size-full animate-spin text-fg",
+				children: /* @__PURE__ */ b(se, {
+					className: "size-full animate-spin motion-reduce:animate-none text-fg",
 					strokeWidth: 2
 				})
-			}) : /* @__PURE__ */ v(b.span, {
-				className: e(d, p[o]),
+			}) : /* @__PURE__ */ b(S.span, {
+				className: e(re, g[c]),
 				animate: { x: H ? X : 0 },
 				transition: Y
 			})
 		})]
-	}), Q = C ? /* @__PURE__ */ v("span", {
+	}), Q = C ? /* @__PURE__ */ b("span", {
 		className: "sr-only",
-		children: m
-	}) : /* @__PURE__ */ y("span", {
-		className: u,
-		children: [/* @__PURE__ */ v("span", {
-			className: a(U, J),
-			children: m
-		}), J ? /* @__PURE__ */ v("span", {
+		children: _
+	}) : /* @__PURE__ */ x("span", {
+		className: h,
+		children: [/* @__PURE__ */ b("span", {
+			className: s(U, J),
+			children: _
+		}), J ? /* @__PURE__ */ b("span", {
 			id: q,
-			className: te,
+			className: i,
 			children: w
 		}) : null]
-	}), $ = /* @__PURE__ */ v("label", {
+	}), $ = /* @__PURE__ */ b("label", {
 		htmlFor: R,
-		className: e(ie, c === "settings" ? oe : s, c === "inline" && !J && ae[o], c === "inline" && J && void 0, U && "cursor-not-allowed", O),
-		children: C ? /* @__PURE__ */ y(_, { children: [Z(), /* @__PURE__ */ v("span", {
+		className: e(l, p === "settings" ? f : u, p === "inline" && !J && d[c], p === "inline" && J && void 0, U && "cursor-not-allowed", O),
+		children: C ? /* @__PURE__ */ x(y, { children: [Z(), /* @__PURE__ */ b("span", {
 			className: "sr-only",
-			children: m
-		})] }) : c === "settings" ? /* @__PURE__ */ y(_, { children: [Q, Z()] }) : J ? /* @__PURE__ */ y("span", {
-			className: r[o],
-			children: [Z(ne[o]), Q]
-		}) : /* @__PURE__ */ y(_, { children: [Z(), C ? null : /* @__PURE__ */ v("span", {
-			className: a(U),
-			children: m
+			children: _
+		})] }) : p === "settings" ? /* @__PURE__ */ x(y, { children: [Q, Z()] }) : J ? /* @__PURE__ */ x("span", {
+			className: a[c],
+			children: [Z(te[c]), Q]
+		}) : /* @__PURE__ */ x(y, { children: [Z(), C ? null : /* @__PURE__ */ b("span", {
+			className: s(U),
+			children: _
 		})] })
 	});
-	return !G || T == null || K == null ? $ : /* @__PURE__ */ y("div", {
+	return !G || T == null || K == null ? $ : /* @__PURE__ */ x("div", {
 		className: "flex w-full flex-col gap-1.5",
-		children: [$, /* @__PURE__ */ v(ee, {
+		children: [$, /* @__PURE__ */ b(r, {
 			status: T,
 			message: E,
 			messageId: K,
-			size: x[o],
+			size: ce[c],
 			messagePosition: "bottom",
-			bannerClassName: l(T)
+			bannerClassName: m(T)
 		})]
 	});
 });
 //#endregion
-export { C as Switch, o as switchLayouts, c as switchSizes };
+export { C as Switch, c as switchLayouts, p as switchSizes };