@thewhatmatters/wmds 0.4.27 → 0.4.28

package/dist/components/molecules/Dropdown/DropdownItem.js

@@ -1,52 +1,55 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { dropdownItemButtonClasses as t, dropdownItemEndClasses as n, dropdownItemLabelClasses as r, dropdownItemLabelFullClasses as i, dropdownItemSelectedCheckClasses as a, dropdownItemStartClasses as o } from "./dropdownStyles.js";
-import { Check as s } from "lucide-react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useRender as d } from "@base-ui/react/use-render";
+import { forwardRef as s } from "react";
+import { Check as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useRender as f } from "@base-ui/react/use-render";
 //#region src/components/molecules/Dropdown/DropdownItem.tsx
-function f({ children: d, start: f, end: m, selected: h = !1, active: g = !1, truncate: _ = !0, disabled: v, className: y, type: b = "button", render: x, ...S }) {
-	let C = h ? /* @__PURE__ */ l("span", {
+var p = s(function({ children: s, start: f, end: p, selected: h = !1, active: g = !1, truncate: _ = !0, disabled: v, className: y, type: b = "button", render: x, ...S }, C) {
+	let w = h ? /* @__PURE__ */ u("span", {
 		className: a,
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ l(s, { strokeWidth: 2 })
-	}) : m == null ? null : /* @__PURE__ */ l("span", {
+		children: /* @__PURE__ */ u(c, { strokeWidth: 2 })
+	}) : p == null ? null : /* @__PURE__ */ u("span", {
 		className: n,
-		children: m
-	}), w = e(t, h && "hover:bg-transparent focus-visible:bg-transparent", g && !h && "bg-accent-muted", v && "pointer-events-none opacity-50", y), T = /* @__PURE__ */ u(c, { children: [
-		f == null ? null : /* @__PURE__ */ l("span", {
+		children: p
+	}), T = e(t, h && !g && "hover:bg-transparent", g && "bg-accent-muted", v && "pointer-events-none opacity-50", y), E = /* @__PURE__ */ d(l, { children: [
+		f == null ? null : /* @__PURE__ */ u("span", {
 			className: o,
 			"aria-hidden": !0,
 			children: f
 		}),
-		/* @__PURE__ */ l("span", {
+		/* @__PURE__ */ u("span", {
 			className: _ ? r : i,
-			children: d
+			children: s
 		}),
-		C
+		w
 	] });
-	return /* @__PURE__ */ l(p, {
+	return /* @__PURE__ */ u(m, {
 		...S,
+		elementRef: C,
 		render: x,
 		type: b,
 		disabled: v,
-		className: w,
-		children: T
+		className: T,
+		children: E
 	});
-}
-function p({ render: e, type: t, disabled: n, ...r }) {
-	return d({
-		render: e,
+});
+function m({ elementRef: e, render: t, type: n, disabled: r, ...i }) {
+	return f({
+		render: t,
+		ref: e,
 		defaultTagName: "button",
-		props: e ? {
-			...r,
-			"aria-disabled": n ? !0 : void 0
+		props: t ? {
+			...i,
+			"aria-disabled": r ? !0 : void 0
 		} : {
-			...r,
-			type: t,
-			disabled: n
+			...i,
+			type: n,
+			disabled: r
 		}
 	});
 }
 //#endregion
-export { f as DropdownItem };
+export { p as DropdownItem };

package/dist/components/molecules/Dropdown/dropdownStyles.js

@@ -3,6 +3,6 @@ import { cn as e } from "../../../lib/cn.js";
 import { typographyClass as t } from "../../../lib/typography.js";
 import { motionTransition as n } from "../../../lib/motion.js";
 //#region src/components/molecules/Dropdown/dropdownStyles.ts
-var r = e("z-50 max-h-60 overflow-y-auto rounded-2xl border border-elevation-edge bg-surface p-0.5 shadow-soft-sm", n("fast")), i = "m-0 flex list-none flex-col gap-0.5 p-0", a = e(t("body"), "cursor-pointer items-center gap-2 rounded-[14px] px-3.5 py-2 text-left text-fg", "transition-[color,background-color] hover:bg-accent-muted focus-visible:outline-none focus-visible:bg-accent-muted", n("fast")), o = e(a, "flex w-full"), s = e(a, "inline-flex w-max max-w-none"), c = "bg-accent-muted", l = "pointer-events-none opacity-50", u = "flex shrink-0 items-center text-muted [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current", d = "min-w-0 flex-1 truncate text-left", f = "min-w-0 flex-1 whitespace-nowrap text-left", p = e(t("body"), "whitespace-nowrap text-left"), m = e(t("caption"), "shrink-0 font-mono tabular-nums text-muted"), h = "flex shrink-0 items-center text-fg [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current";
+var r = e("z-50 max-h-60 overflow-y-auto rounded-[var(--radius-surface)] border border-elevation-edge bg-surface p-0.5 shadow-soft-sm", n("fast")), i = "m-0 flex list-none flex-col gap-0.5 p-0", a = e(t("body"), "cursor-pointer items-center gap-2 rounded-[14px] px-3.5 py-2 text-left text-fg", "transition-[color,background-color] hover:bg-accent-muted focus-visible:outline-none focus-visible:bg-accent-muted", n("fast")), o = e(a, "flex w-full"), s = e(a, "inline-flex w-max max-w-none"), c = "bg-accent-muted", l = "pointer-events-none opacity-50", u = "flex shrink-0 items-center text-muted [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current", d = "min-w-0 flex-1 truncate text-left", f = "min-w-0 flex-1 whitespace-nowrap text-left", p = e(t("body"), "whitespace-nowrap text-left"), m = e(t("caption"), "shrink-0 font-mono tabular-nums text-muted"), h = "flex shrink-0 items-center text-fg [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current";
 //#endregion
 export { c as dropdownItemActiveClasses, o as dropdownItemButtonClasses, l as dropdownItemDisabledClasses, m as dropdownItemEndClasses, d as dropdownItemLabelClasses, f as dropdownItemLabelFullClasses, s as dropdownItemMeasureButtonClasses, p as dropdownItemMeasureLabelClasses, a as dropdownItemRowClasses, h as dropdownItemSelectedCheckClasses, u as dropdownItemStartClasses, r as dropdownMenuClasses, i as dropdownMenuListClasses };

package/dist/components/molecules/Dropdown/resolveOverflow.d.ts

@@ -0,0 +1,14 @@
+export interface OverflowItem {
+    value: string;
+    width: number;
+}
+export interface OverflowResult {
+    visibleValues: string[];
+    overflowValues: string[];
+}
+/**
+ * Fits a stable prefix plus More. When the active item came from overflow, it
+ * occupies the final visible slot immediately before More. Shared by **Tab** and **SiteNav**.
+ */
+export declare function resolveOverflow(items: OverflowItem[], activeValue: string, availableWidth: number, moreWidth: number, trackInset?: number): OverflowResult;
+//# sourceMappingURL=resolveOverflow.d.ts.map

package/dist/components/molecules/Dropdown/resolveOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/resolveOverflow.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,YAAY,EAAE,EACrB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,MAAM,EACjB,UAAU,SAAI,GACb,cAAc,CA+ChB"}

package/dist/components/{organisms/Tab/tabOverflow.js → molecules/Dropdown/resolveOverflow.js}

@@ -1,5 +1,5 @@
 "use client";
-//#region src/components/organisms/Tab/tabOverflow.ts
+//#region src/components/molecules/Dropdown/resolveOverflow.ts
 function e(e, t, n, r, i = 0) {
 	let a = Math.max(n - i, 0);
 	if (e.reduce((e, t) => e + t.width, 0) <= a) return {
@@ -23,4 +23,4 @@ function e(e, t, n, r, i = 0) {
 	};
 }
 //#endregion
-export { e as resolveTabOverflow };
+export { e as resolveOverflow };

package/dist/components/molecules/Dropdown/useDropdownMenu.d.ts

@@ -0,0 +1,70 @@
+import { type CSSProperties, type FocusEvent, type KeyboardEvent, type RefObject } from "react";
+export type DropdownMenuRow = {
+    label: string;
+    disabled?: boolean;
+};
+/**
+ * Where keyboard focus lives while the menu is open.
+ * - `trigger`: focus stays on the trigger, which names the active row with `aria-activedescendant`
+ *   (a select-only combobox: **Select**).
+ * - `items`: focus moves onto the rows (roving focus: the menu-button pattern for action menus and
+ *   menus of links). `aria-activedescendant` is not allowed on a `button`.
+ */
+export type DropdownMenuFocus = "trigger" | "items";
+export type DropdownMenuOpenAt = "first" | "last" | "initial" | number;
+export interface DropdownMenuOptions {
+    /** Rows in order. Labels drive type-ahead; disabled rows are skipped by the keyboard. */
+    rows: readonly DropdownMenuRow[];
+    /** The focusable trigger. Focus returns here on Escape. */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** Positions the menu against the trigger (or a wider shell); called on open, scroll and resize. */
+    measure: () => CSSProperties | null;
+    focus: DropdownMenuFocus;
+    /** Row the menu opens on with `"initial"`: the selected option of a Select. Default: first enabled. */
+    initialIndex?: number;
+    /** `trigger` focus only: Enter or Space on the trigger chooses the active row. */
+    onChoose?: (index: number) => void;
+}
+/**
+ * Open state, dismissal, keyboard, and position for every WMDS dropdown menu (Select, MoreMenu,
+ * Breadcrumb, Tab and SiteNav More). Spread `rootProps` on an element that wraps the trigger and the
+ * menu (a portaled menu still counts: React events bubble through portals).
+ *
+ * Dismissal: Escape (handled here, `preventDefault` so an enclosing Dialog or Sheet stays open), a
+ * pointer press outside, focus leaving (Tab), and choosing a row. Scroll and resize reposition the menu.
+ */
+export declare function useDropdownMenu({ rows, triggerRef, measure, focus, initialIndex, onChoose, }: DropdownMenuOptions): {
+    open: boolean;
+    activeIndex: number;
+    menuStyle: CSSProperties | null;
+    openMenu: (at?: DropdownMenuOpenAt) => void;
+    close: ({ returnFocus }?: {
+        returnFocus?: boolean;
+    }) => void;
+    toggle: () => void;
+    rootProps: {
+        ref: (node: HTMLElement | null) => void;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+    };
+    triggerProps: {
+        "aria-expanded": boolean;
+        "aria-controls": string | undefined;
+        "aria-activedescendant": string | undefined;
+    };
+    menuProps: {
+        id: string;
+        ref: (node: HTMLElement | null) => void;
+        style: CSSProperties | undefined;
+    };
+    rowProps: (index: number) => {
+        id: string;
+        ref: (node: HTMLElement | null) => void;
+        tabIndex: number;
+        active: boolean;
+        onMouseEnter: () => void;
+    };
+};
+/** The next enabled row from `from` in `direction`, wrapping; `from` itself if none is enabled. */
+export declare function stepEnabled(rows: readonly DropdownMenuRow[], from: number, direction: 1 | -1): number;
+//# sourceMappingURL=useDropdownMenu.d.ts.map

package/dist/components/molecules/Dropdown/useDropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/useDropdownMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,yFAAyF;IACzF,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,2DAA2D;IAC3D,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,oGAAoG;IACpG,OAAO,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAID;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,GACT,EAAE,mBAAmB;;;;oBA8Bb,kBAAkB;8BASG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE;;;oBA4IrC,WAAW,GAAG,IAAI;2BAzEJ,aAAa,CAAC,WAAW,CAAC;wBA6D7B,UAAU,CAAC,WAAW,CAAC;;;;;;;;;oBAyBlC,WAAW,GAAG,IAAI;;;sBAKd,MAAM;;oBAEV,WAAW,GAAG,IAAI;;;;;EAUnC;AAED,mGAAmG;AACnG,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,eAAe,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAQrG"}

package/dist/components/molecules/Dropdown/useDropdownMenu.js

@@ -0,0 +1,155 @@
+"use client";
+import { useCallback as e, useEffect as t, useId as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+//#region src/components/molecules/Dropdown/useDropdownMenu.ts
+var o = 500;
+function s({ rows: s, triggerRef: l, measure: u, focus: d, initialIndex: f, onChoose: p }) {
+	let m = n(), h = i(null), g = i(null), _ = i([]), v = i({
+		text: "",
+		at: 0
+	}), [y, b] = a(!1), [x, S] = a(0), [C, w] = a(null), T = i(u);
+	t(() => {
+		T.current = u;
+	});
+	let E = e((e) => `${m}-row-${e}`, [m]), D = e((e) => typeof e == "number" ? e : e === "last" ? c(s, s.length, -1) : e === "initial" && f != null && f >= 0 && !s[f]?.disabled ? f : c(s, -1, 1), [f, s]), O = e((e = "initial") => {
+		w(T.current()), S(D(e)), b(!0);
+	}, [D]), k = e(({ returnFocus: e = !1 } = {}) => {
+		b(!1), w(null), v.current = {
+			text: "",
+			at: 0
+		}, e && l.current?.focus();
+	}, [l]), A = e(() => y ? k() : O(), [
+		k,
+		y,
+		O
+	]);
+	r(() => {
+		if (!y) return;
+		let e = () => w(T.current());
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [y]), t(() => {
+		if (!y) return;
+		function e(e) {
+			j(e.target) || k();
+		}
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}), r(() => {
+		!y || d !== "items" || C == null || _.current[x]?.focus({ preventScroll: !0 });
+	}, [
+		x,
+		d,
+		C,
+		y
+	]), r(() => {
+		!y || d !== "trigger" || _.current[x]?.scrollIntoView?.({ block: "nearest" });
+	}, [
+		x,
+		d,
+		y
+	]);
+	function j(e) {
+		return e != null && (h.current?.contains(e) === !0 || g.current?.contains(e) === !0);
+	}
+	function M(e) {
+		let t = Date.now(), n = v.current;
+		n.text = t - n.at > o ? e : n.text + e, n.at = t;
+		let r = n.text.toLowerCase(), i = r.length > 1 && [...r].every((e) => e === r[0]), a = i ? r[0] : r, c = y ? x + (i || r.length === 1 ? 1 : 0) : 0;
+		for (let e = 0; e < s.length; e += 1) {
+			let t = (c + e) % s.length, n = s[t];
+			if (n != null && !n.disabled && n.label.toLowerCase().startsWith(a)) return t;
+		}
+		return null;
+	}
+	function N(e) {
+		if (e.nativeEvent.isComposing) return;
+		let { key: t } = e, n = t.length === 1 && t !== " " && !e.metaKey && !e.ctrlKey && !e.altKey, r = l.current?.contains(e.target) === !0;
+		if (!y) {
+			if (!r) return;
+			if (t === "ArrowDown" || t === "ArrowUp") e.preventDefault(), O(d === "trigger" ? "initial" : t === "ArrowDown" ? "first" : "last");
+			else if (d === "trigger" && (t === "Home" || t === "End")) e.preventDefault(), O(t === "Home" ? "first" : "last");
+			else if (d === "trigger" && (t === "Enter" || t === " ")) e.preventDefault(), O();
+			else if (d === "trigger" && n) {
+				let e = M(t);
+				e != null && O(e);
+			}
+			return;
+		}
+		switch (t) {
+			case "Escape":
+				e.preventDefault(), k({ returnFocus: !0 });
+				return;
+			case "Tab":
+				k();
+				return;
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault(), S((e) => c(s, e, t === "ArrowDown" ? 1 : -1));
+				return;
+			case "Home":
+			case "End":
+				e.preventDefault(), S(D(t === "Home" ? "first" : "last"));
+				return;
+			case "Enter":
+			case " ":
+				d === "trigger" ? (e.preventDefault(), s[x]?.disabled || p?.(x)) : t === " " && !r && (e.preventDefault(), _.current[x]?.click());
+				return;
+			default: if (n) {
+				let e = M(t);
+				e != null && S(e);
+			}
+		}
+	}
+	function P(e) {
+		y && !j(e.relatedTarget) && k();
+	}
+	return {
+		open: y,
+		activeIndex: x,
+		menuStyle: C,
+		openMenu: O,
+		close: k,
+		toggle: A,
+		rootProps: {
+			ref: (e) => {
+				h.current = e;
+			},
+			onKeyDown: N,
+			onBlur: P
+		},
+		triggerProps: {
+			"aria-expanded": y,
+			"aria-controls": y ? m : void 0,
+			"aria-activedescendant": d === "trigger" && y ? E(x) : void 0
+		},
+		menuProps: {
+			id: m,
+			ref: (e) => {
+				g.current = e;
+			},
+			style: C ?? void 0
+		},
+		rowProps: (e) => ({
+			id: E(e),
+			ref: (t) => {
+				_.current[e] = t;
+			},
+			tabIndex: -1,
+			active: e === x,
+			onMouseEnter: () => {
+				s[e]?.disabled || S(e);
+			}
+		})
+	};
+}
+function c(e, t, n) {
+	let r = e.length;
+	if (r === 0) return 0;
+	for (let i = 1; i <= r; i += 1) {
+		let a = ((t + n * i) % r + r) % r;
+		if (!e[a]?.disabled) return a;
+	}
+	return Math.min(Math.max(t, 0), r - 1);
+}
+//#endregion
+export { c as stepEnabled, s as useDropdownMenu };

package/dist/components/molecules/Dropdown/useOverflowMenu.d.ts

@@ -0,0 +1,71 @@
+import { type ReactNode } from "react";
+import { type DropdownMenuMeasureRow } from "./dropdownMenuPosition";
+import { type DropdownMenuRow } from "./useDropdownMenu";
+export interface OverflowMenuOptions {
+    /** Every item's stable id, in order. */
+    ids: readonly string[];
+    /** The current item: it stays visible, promoted into the last slot before More. */
+    activeId: string;
+    /** The More menu's rows for the items that don't fit (a SiteNav menu flattens into several). */
+    toMenuRows: (overflowIds: readonly string[]) => DropdownMenuRow[];
+    /** How to size the menu (slots, counts, a check). Default: the rows' labels. */
+    toMeasureRows?: (overflowIds: readonly string[]) => DropdownMenuMeasureRow[];
+}
+/**
+ * A row of items that folds what doesn't fit into a More menu: **Tab** and **SiteNav**.
+ *
+ * Owns the measuring (an offscreen rail of every item plus More, a ResizeObserver on the row, a
+ * remeasure once fonts load), the fit ({@link resolveOverflow}), and the More menu's behaviour
+ * ({@link useDropdownMenu}, roving focus). Callers render their own items, More button, and rows.
+ */
+export declare function useOverflowMenu({ ids, activeId, toMenuRows, toMeasureRows }: OverflowMenuOptions): {
+    visibleIds: readonly string[];
+    overflowIds: readonly string[];
+    menuRows: DropdownMenuRow[];
+    menu: {
+        open: boolean;
+        activeIndex: number;
+        menuStyle: import("react").CSSProperties | null;
+        openMenu: (at?: import("./useDropdownMenu").DropdownMenuOpenAt) => void;
+        close: ({ returnFocus }?: {
+            returnFocus?: boolean;
+        }) => void;
+        toggle: () => void;
+        rootProps: {
+            ref: (node: HTMLElement | null) => void;
+            onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+            onBlur: (event: import("react").FocusEvent<HTMLElement>) => void;
+        };
+        triggerProps: {
+            "aria-expanded": boolean;
+            "aria-controls": string | undefined;
+            "aria-activedescendant": string | undefined;
+        };
+        menuProps: {
+            id: string;
+            ref: (node: HTMLElement | null) => void;
+            style: import("react").CSSProperties | undefined;
+        };
+        rowProps: (index: number) => {
+            id: string;
+            ref: (node: HTMLElement | null) => void;
+            tabIndex: number;
+            active: boolean;
+            onMouseEnter: () => void;
+        };
+    };
+    moreRef: import("react").RefObject<HTMLButtonElement | null>;
+    /** Spread on the element whose width the items share; it also wraps More and its menu. */
+    rowProps: {
+        ref: (node: HTMLElement | null) => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+        onBlur: (event: import("react").FocusEvent<HTMLElement>) => void;
+    };
+    /** Ref for an item's copy in the offscreen measure rail. */
+    measureRef: (id: string) => (node: HTMLElement | null) => void;
+    /** Ref for More's copy in the offscreen measure rail. */
+    moreMeasureRef: (node: HTMLElement | null) => void;
+};
+/** Plain text of a label, for type-ahead in a More menu. */
+export declare function textOf(node: ReactNode): string;
+//# sourceMappingURL=useOverflowMenu.d.ts.map

package/dist/components/molecules/Dropdown/useOverflowMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvG,OAAO,EAA4B,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAE/F,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,wCAAwC;IACxC,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,UAAU,EAAE,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,KAAK,eAAe,EAAE,CAAC;IAClE,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,KAAK,sBAAsB,EAAE,CAAC;CAC9E;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,mBAAmB;;;;;;;;;;uBA0DR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAtF,0FAA0F;;oBAG5E,WAAW,GAAG,IAAI;;;;IAKhC,4DAA4D;qBAC3C,MAAM,MAAM,MAAM,WAAW,GAAG,IAAI;IAIrD,yDAAyD;2BAClC,WAAW,GAAG,IAAI;EAI5C;AAED,4DAA4D;AAC5D,wBAAgB,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAK9C"}

package/dist/components/molecules/Dropdown/useOverflowMenu.js

@@ -0,0 +1,61 @@
+"use client";
+import { measureDropdownMenuStyle as e } from "./dropdownMenuPosition.js";
+import { useDropdownMenu as t } from "./useDropdownMenu.js";
+import { resolveOverflow as n } from "./resolveOverflow.js";
+import { isValidElement as r, useCallback as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+//#region src/components/molecules/Dropdown/useOverflowMenu.ts
+function c({ ids: r, activeId: c, toMenuRows: l, toMeasureRows: u }) {
+	let d = o(null), f = o(null), p = o(null), m = o(/* @__PURE__ */ new Map()), [h, g] = s(r), [_, v] = s([]), y = l(_), b = t({
+		rows: y,
+		triggerRef: f,
+		focus: "items",
+		measure: () => f.current == null ? null : e(f.current, u?.(_) ?? y.map((e) => ({ label: e.label })), {
+			align: "end",
+			widthMode: "content"
+		})
+	}), { close: x } = b, S = r.join("\0"), C = i(() => {
+		let e = d.current, t = p.current;
+		if (e == null || t == null) return;
+		let r = S.split("\0").map((e) => ({
+			value: e,
+			width: Math.ceil(m.current.get(e)?.getBoundingClientRect().width ?? 0)
+		}));
+		if (r.some((e) => e.width === 0)) return;
+		let i = n(r, c, e.clientWidth, Math.ceil(t.getBoundingClientRect().width));
+		g(i.visibleValues), v(i.overflowValues), i.overflowValues.length === 0 && x();
+	}, [
+		c,
+		x,
+		S
+	]);
+	return a(() => {
+		C();
+		let e = d.current;
+		if (e == null) return;
+		let t = new ResizeObserver(C);
+		return t.observe(e), document.fonts?.ready.then(C), () => t.disconnect();
+	}, [C]), {
+		visibleIds: h,
+		overflowIds: _,
+		menuRows: y,
+		menu: b,
+		moreRef: f,
+		rowProps: {
+			...b.rootProps,
+			ref: (e) => {
+				d.current = e, b.rootProps.ref(e);
+			}
+		},
+		measureRef: (e) => (t) => {
+			t == null ? m.current.delete(e) : m.current.set(e, t);
+		},
+		moreMeasureRef: (e) => {
+			p.current = e;
+		}
+	};
+}
+function l(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(l).join("") : r(e) ? l(e.props.children) : "";
+}
+//#endregion
+export { l as textOf, c as useOverflowMenu };

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAQL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEzE,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UAAU;IACzB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AA8BD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,WAAwB,EACxB,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,UAAU,+BAwFZ"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAQL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEzE,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UAAU;IACzB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AA8BD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,WAAwB,EACxB,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,UAAU,+BAsFZ"}

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

@@ -16,13 +16,13 @@ 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: d = "vertical", htmlFor: v, disabled: y = !1, children: b, className: x }) {
+function v({ label: s, description: l, orientation: u = "vertical", htmlFor: d, disabled: v = !1, children: b, className: x }) {
 	let S = f();
 	_({
 		label: s,
 		children: b
 	});
-	let C = h(b), w = g(b), T = v ?? 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 && T != null && w.props.id == null ? u(w, { id: T }) : w, k = C > 1 ? /* @__PURE__ */ p("div", {
+	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", {
 		className: o,
 		children: b
 	}) : O ?? b, A = l == null ? null : /* @__PURE__ */ p("p", {
@@ -35,8 +35,7 @@ function v({ label: s, description: l, orientation: d = "vertical", htmlFor: v,
 		children: b
 	}) : s == null ? /* @__PURE__ */ m("div", {
 		className: e(c, x),
-		"aria-describedby": E,
-		children: [b, A]
+		children: [C > 1 ? b : O ?? b, A]
 	}) : C > 1 ? /* @__PURE__ */ m("div", {
 		role: "group",
 		"aria-labelledby": D,
@@ -45,18 +44,17 @@ function v({ label: s, description: l, orientation: d = "vertical", htmlFor: v,
 		children: [
 			/* @__PURE__ */ p("span", {
 				id: D,
-				className: a(y),
+				className: a(v),
 				children: s
 			}),
 			k,
 			A
 		]
-	}) : d === "horizontal" ? /* @__PURE__ */ m("div", {
+	}) : u === "horizontal" ? /* @__PURE__ */ m("div", {
 		className: e(i, x),
-		"aria-describedby": E,
 		children: [/* @__PURE__ */ p("label", {
 			htmlFor: T,
-			className: e(r, a(y)),
+			className: e(r, a(v)),
 			children: s
 		}), /* @__PURE__ */ m("div", {
 			className: n,
@@ -64,11 +62,10 @@ function v({ label: s, description: l, orientation: d = "vertical", htmlFor: v,
 		})]
 	}) : /* @__PURE__ */ m("div", {
 		className: e(c, x),
-		"aria-describedby": E,
 		children: [
 			/* @__PURE__ */ p("label", {
 				htmlFor: T,
-				className: a(y),
+				className: a(v),
 				children: s
 			}),
 			k,
@@ -76,5 +73,9 @@ function v({ label: s, description: l, orientation: d = "vertical", htmlFor: v,
 		]
 	});
 }
+function y(e, t, n) {
+	let r = e.props, i = {};
+	return r.id == null && t != null && (i.id = t), n != null && (i["aria-describedby"] = [r["aria-describedby"], n].filter(Boolean).join(" ")), Object.keys(i).length > 0 ? u(e, i) : e;
+}
 //#endregion
 export { v as Field, s as fieldOrientations };

package/dist/components/molecules/LogView/logViewStyles.d.ts

@@ -1,4 +1,4 @@
-export declare const logViewRootClasses = "flex min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-surface";
+export declare const logViewRootClasses = "flex min-h-0 flex-col overflow-hidden rounded-[var(--radius-surface-md)] border border-border bg-surface";
 export declare const logViewToolbarClasses = "flex h-9 shrink-0 items-center gap-2 border-b border-border px-3";
 export declare const logViewCountClasses: string;
 export declare const logViewActionsClasses = "ml-auto flex items-center gap-2";

package/dist/components/molecules/LogView/logViewStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logViewStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LogView/logViewStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,qFACqD,CAAC;AAErF,eAAO,MAAM,qBAAqB,qEACkC,CAAC;AAErE,eAAO,MAAM,mBAAmB,QAA0D,CAAC;AAE3F,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,gDAAgD,CAAC;AAEpF,eAAO,MAAM,kBAAkB,oBAAoB,CAAC;AAEpD,eAAO,MAAM,oBAAoB,4DAC0B,CAAC;AAE5D,eAAO,MAAM,kBAAkB,2DAA2D,CAAC;AAE3F,eAAO,MAAM,mBAAmB,QAAuD,CAAC;AAExF,eAAO,MAAM,sBAAsB,QAAQ,CAAC"}
+{"version":3,"file":"logViewStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LogView/logViewStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,6GAC6E,CAAC;AAE7G,eAAO,MAAM,qBAAqB,qEACkC,CAAC;AAErE,eAAO,MAAM,mBAAmB,QAA0D,CAAC;AAE3F,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,gDAAgD,CAAC;AAEpF,eAAO,MAAM,kBAAkB,oBAAoB,CAAC;AAEpD,eAAO,MAAM,oBAAoB,4DAC0B,CAAC;AAE5D,eAAO,MAAM,kBAAkB,2DAA2D,CAAC;AAE3F,eAAO,MAAM,mBAAmB,QAAuD,CAAC;AAExF,eAAO,MAAM,sBAAsB,QAAQ,CAAC"}

package/dist/components/molecules/LogView/logViewStyles.js

@@ -1,6 +1,6 @@
 "use client";
 import { typographyClass as e } from "../../../lib/typography.js";
 //#region src/components/molecules/LogView/logViewStyles.ts
-var t = "flex min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-surface", n = "flex h-9 shrink-0 items-center gap-2 border-b border-border px-3", r = `${e("caption")} tabular-nums text-muted`, i = "ml-auto flex items-center gap-2", a = "min-h-40 flex-1 overflow-auto scroll-fade-y", o = "flex gap-3 px-3", s = "type-code w-8 shrink-0 text-end text-muted tabular-nums", c = "type-code min-w-0 flex-1 whitespace-pre-wrap break-all", l = `${e("caption")} px-3 py-4 text-muted`;
+var t = "flex min-h-0 flex-col overflow-hidden rounded-[var(--radius-surface-md)] border border-border bg-surface", n = "flex h-9 shrink-0 items-center gap-2 border-b border-border px-3", r = `${e("caption")} tabular-nums text-muted`, i = "ml-auto flex items-center gap-2", a = "min-h-40 flex-1 overflow-auto scroll-fade-y", o = "flex gap-3 px-3", s = "type-code w-8 shrink-0 text-end text-muted tabular-nums", c = "type-code min-w-0 flex-1 whitespace-pre-wrap break-all", l = `${e("caption")} px-3 py-4 text-muted`;
 //#endregion
 export { i as logViewActionsClasses, r as logViewCountClasses, l as logViewEmptyClasses, o as logViewLineClasses, s as logViewNumberClasses, t as logViewRootClasses, a as logViewScrollerClasses, c as logViewTextClasses, n as logViewToolbarClasses };

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

@@ -2,6 +2,6 @@
 import { cn as e } from "../../../lib/cn.js";
 import { badgeBaseClasses as t, badgeMutedClasses as n, badgeSolidClasses as r } 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-full 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 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");
 //#endregion
 export { i as pillGroupClasses, o as pillGroupIdleClasses, s as pillGroupMutedClasses, c as pillGroupSelectedClasses, a as pillGroupShapeClasses };

package/dist/components/molecules/Search/searchStyles.js

@@ -1,7 +1,7 @@
 "use client";
 import { focusRingTransitionClasses as e } from "../../../lib/motion.js";
 //#region src/components/molecules/Search/searchStyles.ts
-var t = ["sm", "md"], n = "flex w-full items-center rounded-full border border-border-control bg-surface focus-within:outline-none focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-2 focus-within:ring-offset-body " + e, r = {
+var t = ["sm", "md"], n = "flex w-full items-center rounded-[var(--radius-control)] border border-border-control bg-surface focus-within:outline-none focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-2 focus-within:ring-offset-body " + e, r = {
 	sm: `${n} h-10 gap-1.5 p-1 pl-2`,
 	md: `${n} h-11 gap-2 p-1 pl-2`
 }, i = {

package/dist/components/molecules/SegmentedControl/segmentedControlStyles.d.ts

@@ -27,5 +27,5 @@ export declare const segmentedControlItemSelectedClasses = "text-fg";
 /** Idle segment — `text-muted` (secondary text); hover promotes to primary ink. */
 export declare const segmentedControlItemUnselectedClasses = "text-muted hover:text-fg";
 /** Sliding selected segment — raised surface pill inside the body well. */
-export declare const segmentedControlThumbClasses = "pointer-events-none absolute inset-0 rounded-full bg-surface shadow-raised";
+export declare const segmentedControlThumbClasses = "pointer-events-none absolute inset-0 rounded-[var(--radius-control-inner)] bg-surface shadow-raised";
 //# sourceMappingURL=segmentedControlStyles.d.ts.map

package/dist/components/molecules/SegmentedControl/segmentedControlStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmentedControlStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/segmentedControlStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,6BAA8B,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,6BAA8B,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,6FAA6F;AAC7F,eAAO,MAAM,4BAA4B,QAGxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,wBAAwB,CAAC;AAEzE,qFAAqF;AACrF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIjF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,2BAA2B,QAIvC,CAAC;AAEF,eAAO,MAAM,kCAAkC,mBAAmB,CAAC;AAEnE,eAAO,MAAM,+BAA+B,kEACqB,CAAC;AAElE,eAAO,MAAM,sCAAsC,WAAW,CAAC;AAE/D,iFAAiF;AACjF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAI/E,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIjF,CAAC;AAEF,eAAO,MAAM,gCAAgC,qBAAqB,CAAC;AAEnE,8FAA8F;AAC9F,eAAO,MAAM,8BAA8B,0EAC8B,CAAC;AAE1E,eAAO,MAAM,mCAAmC,YAAY,CAAC;AAE7D,mFAAmF;AACnF,eAAO,MAAM,qCAAqC,6BAA6B,CAAC;AAEhF,2EAA2E;AAC3E,eAAO,MAAM,4BAA4B,+EACqC,CAAC"}
+{"version":3,"file":"segmentedControlStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/segmentedControlStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,6BAA8B,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,6BAA8B,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,6FAA6F;AAC7F,eAAO,MAAM,4BAA4B,QAGxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,wBAAwB,CAAC;AAEzE,qFAAqF;AACrF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIjF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,2BAA2B,QAIvC,CAAC;AAEF,eAAO,MAAM,kCAAkC,mBAAmB,CAAC;AAEnE,eAAO,MAAM,+BAA+B,kEACqB,CAAC;AAElE,eAAO,MAAM,sCAAsC,WAAW,CAAC;AAE/D,iFAAiF;AACjF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAI/E,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIjF,CAAC;AAEF,eAAO,MAAM,gCAAgC,qBAAqB,CAAC;AAEnE,8FAA8F;AAC9F,eAAO,MAAM,8BAA8B,0EAC8B,CAAC;AAE1E,eAAO,MAAM,mCAAmC,YAAY,CAAC;AAE7D,mFAAmF;AACnF,eAAO,MAAM,qCAAqC,6BAA6B,CAAC;AAEhF,2EAA2E;AAC3E,eAAO,MAAM,4BAA4B,wGAC8D,CAAC"}