@thewhatmatters/wmds 0.4.40 → 0.4.43

package/CHANGELOG.md

@@ -5,7 +5,45 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Versions follow semver.** While the major version is `0`, a minor bump (`0.3.0`) can break an app and a patch bump (`0.2.1`) does not. Apps depend on `^0.2.0`, which accepts patches only.
 - **Every release has a Consumer actions section**: the exact steps an app takes when it moves to that version. It says **None** when there are none. Agents upgrading an app read every Consumer actions section between the old and new version, oldest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
-- **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
+- **How to add an entry** (contributors): don't edit this file on a feature branch. Add a release note as `changes/<topic>.md` (format in `changes/README.md`). The release step, `npm run release:prepare` on its own **Release 0.x.y** branch, folds every note into one new entry here and bumps the version once. `npm run check:changelog` checks this file and the notes.
+
+## 0.4.43
+
+**AppShell `asideMode="inset"` and a `toolbar` slot.** From `lg`, an inset aside is a raised card floating inside the page surface, under the title bar and the toolbar, 12px from the end and bottom edges (radius-surface-md, border, shadow-lg). The page narrows beside it and is never covered. Its header is the title bar's 56px band, with the title and description centred. The new `toolbar` prop / **AppShell.Toolbar** slot is a full-width band under the title bar; with an inset aside it spans above both. Below `lg` the aside is the overlay **Panel**, as in the other modes. New `asideFooter`: actions pinned under the aside's scrolling body (Copy, Reset), in every mode (the **Panel** `footer` in overlay). Fixed for docked and inset asides that start open: the server and the first paint no longer render the overlay **Panel** before the desktop query runs (it caused a hydration mismatch and a flash of the overlay). Story **Components/AppShell → State — aside inset, with a toolbar** (interaction test: inside the surface, under the toolbar, 12px gap, 56px header, page not covered, footer pinned).
+
+**Contributors: release notes as files, and releasing as its own step.**
+
+- Feature branches add a release note as `changes/<topic>.md` instead of editing `CHANGELOG.md` and the version, so two open branches no longer conflict. `npm run release:prepare` folds the notes into one entry and bumps the version once, on its own **Release 0.x.y** branch. `npm run check:changelog` also checks the notes. See `AGENTS.md` → **Releases**.
+- The **report-wmds-gap** skill's contributing steps say to add a `changes/` note.
+- `src/package.manifest.ts` lists one component per line, sorted.
+
+### Consumer actions
+
+None required. For a live-controls panel that should sit inside the page (the patterns gallery's Type panel), pass `asideMode="inset"`, move the view toolbar into `toolbar`, and put the button that opens the aside at the toolbar's end.
+
+## 0.4.42
+
+**Notice: an inline callout for page notes and failed sends.**
+
+- **Notice** (new) — an inline callout for closures, buyouts, "account not connected", "sync failed" and a form that couldn't send. `tone` = `neutral` \| `info` \| `success` \| `warning` \| `error`, with `title`, copy as `children`, and an `action` slot (a **TextLink**, a small **Button**, or a row of them). The fill is the tone mixed into the current surface, so it reads in dark mode and in toned sections. `live` announces a notice that appears after load (`alert` for `error`, `status` otherwise), or pass `live="alert"` / `live="status"` to choose. `dismissible` adds a Dismiss button that hands focus to the next control; `dismissKey` remembers the dismissal in `localStorage` (`wmds-notice:<key>`). See **ADR-0050**.
+- Patterns: **Components/Notice → Pattern — holiday closure**, **Pattern — private buyout**, **Pattern — account not connected**, **Pattern — sync failed**.
+- The sketch request story's failed-send message (IntakeModal) is now an error **Notice** instead of a hand-built red block.
+
+### Consumer actions
+
+- None. Apps with a hand-built `role="alert"` block can swap it for `<Notice tone="error" live>`.
+
+## 0.4.41
+
+**Combobox: a searchable select for long lists.**
+
+- **Combobox** (new): the **Input** pill with a search icon over a **Dropdown** listbox that narrows as people type, for lists of 16 or more (Dropdowns C7): fonts, countries, industries. WAI-ARIA combobox with list autocomplete: focus stays in the field, ↓ / ↑ move, Enter picks, Escape closes and then clears, and a polite live region says how many results there are. Same `label`, `description`, `size`, `width`, `status` and `message` as **Input**; options take **Dropdown.Item** `start` / `end` slots and hidden `keywords`. It renders the first `maxResults` (50) matches, so a list of thousands stays quick, and says how many more there are. `allowCustom` keeps typed text that matches nothing; `name` adds a hidden input for forms. New exports `Combobox`, `filterComboboxOptions`, `ComboboxOption`, `ComboboxProps`.
+- **useDropdownMenu** (internal) `editable`: a text-field trigger keeps its characters, Space, Home and End.
+- Stories **Combobox → Default**, **Long list (1,800 options)**, **Validation**, with interaction tests (keyboard path, filtering, Escape twice, focus stays in the field, a pick leaves other controls alone).
+
+### Consumer actions
+
+- None. To replace an **Input** + `<datalist>`: `<Combobox label="Headings font" options={fonts} value={family} onValueChange={setFamily} />`.
 
 ## 0.4.40
 

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

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+import { type FieldWidth, type InputMessagePosition, type InputSize, type InputStatus } from "../../atoms/Input/Input";
+export { filterComboboxOptions } from "./comboboxFilter";
+/** Layout-only — width, margin, grid placement. */
+export type ComboboxLayoutClassName = string;
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    /** Leading slot — icon, swatch (**Dropdown.Item** `start`). */
+    start?: ReactNode;
+    /** Trailing slot — a category or a count (**Dropdown.Item** `end`); the selected row shows a check instead. */
+    end?: ReactNode;
+    /** Extra words that match the typed text but aren't shown (a category, a former name). */
+    keywords?: readonly string[];
+    disabled?: boolean;
+};
+export interface ComboboxProps {
+    options: readonly ComboboxOption[];
+    /** The chosen option's `value` (or the typed text with `allowCustom`). */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Controlled text in the field while typing. Default: the component keeps it. */
+    inputValue?: string;
+    onInputChange?: (text: string) => void;
+    /** Replace the default filter (starts with, then a word starts with, then contains). */
+    filter?: (options: readonly ComboboxOption[], query: string) => readonly ComboboxOption[];
+    /** Said and shown when nothing matches. */
+    emptyText?: string;
+    /** Rows rendered at once; type to narrow the rest. Default 50, so a list of thousands stays quick. */
+    maxResults?: number;
+    /** Take what was typed as the value when it matches no option (Enter or leaving the field). */
+    allowCustom?: boolean;
+    label?: string;
+    "aria-label"?: string;
+    description?: string;
+    placeholder?: string;
+    size?: InputSize;
+    width?: FieldWidth;
+    status?: InputStatus;
+    message?: string;
+    messagePosition?: InputMessagePosition;
+    disabled?: boolean;
+    required?: boolean;
+    /** Form name: a hidden input carries the chosen value on submit. */
+    name?: string;
+    id?: string;
+    className?: ComboboxLayoutClassName;
+}
+/**
+ * Searchable select — the **Input** pill with a search icon over a **Dropdown** listbox that narrows as
+ * people type (Dropdowns C7: lists of 16 or more). WAI-ARIA combobox with list autocomplete: focus stays
+ * in the field, ↓ / ↑ move through the results, Enter picks, Escape closes and then clears.
+ */
+export declare function Combobox({ options, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, onInputChange, filter, emptyText, maxResults, allowCustom, label, "aria-label": ariaLabel, description, placeholder, size, width, status, message, messagePosition, disabled, required, name, id: idProp, className, }: ComboboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0E,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI/G,OAAO,EAAS,KAAK,UAAU,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO9H,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,mDAAmD;AACnD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+GAA+G;IAC/G,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,wFAAwF;IACxF,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,cAAc,EAAE,CAAC;IAC1F,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sGAAsG;IACtG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,UAAU,EAAE,cAAc,EAC1B,aAAa,EACb,MAA8B,EAC9B,SAAwB,EACxB,UAAe,EACf,WAAmB,EACnB,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,WAAW,EACX,IAAW,EACX,KAAc,EACd,MAAM,EACN,OAAO,EACP,eAAe,EACf,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,SAAS,GACV,EAAE,aAAa,+BAiLf"}

package/dist/components/molecules/Combobox/Combobox.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { Input as n } from "../../atoms/Input/Input.js";
+import { dropdownMenuClasses as r, dropdownMenuListClasses as i } from "../Dropdown/dropdownStyles.js";
+import { Dropdown as a } from "../Dropdown/Dropdown.js";
+import { measureDropdownMenuStyle as ee } from "../Dropdown/dropdownMenuPosition.js";
+import { useDropdownMenu as o } from "../Dropdown/useDropdownMenu.js";
+import { comboboxResultsMessage as s, filterComboboxOptions as c } from "./comboboxFilter.js";
+import { useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { Search as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/molecules/Combobox/Combobox.tsx
+function g({ options: g, value: _, defaultValue: v, onValueChange: y, inputValue: b, onInputChange: x, filter: S = c, emptyText: C = "No matches", maxResults: w = 50, allowCustom: T = !1, label: E, "aria-label": D, description: te, placeholder: ne, size: re = "md", width: ie = "full", status: ae, message: O, messagePosition: k, disabled: A = !1, required: j, name: M, id: N, className: P }) {
+	let F = l(), I = N ?? F, L = `${I}-results`, R = d(null), [z, B] = f(v), [V, H] = f(null);
+	E == null && D == null && console.warn("[WMDS Combobox] Provide `label` or `aria-label`.");
+	let U = _ === void 0 ? z : _, W = g.find((e) => e.value === U)?.label ?? (T ? U ?? "" : ""), G = b ?? V ?? W, K = V ?? "", q = u(() => S(g, K), [
+		S,
+		g,
+		K
+	]), J = u(() => q.slice(0, Math.max(1, w)), [q, w]), oe = s(q.length, J.length, C);
+	function Y(e) {
+		H(e), x?.(e ?? "");
+	}
+	function X(e) {
+		_ === void 0 && B(e), e !== U && y?.(e);
+	}
+	function Z(e) {
+		X(e.value), Y(null), $.close(), R.current?.focus();
+	}
+	function Q() {
+		if (V == null) return;
+		let e = V.trim(), t = g.find((t) => t.label.toLowerCase() === e.toLowerCase() && !t.disabled);
+		t == null ? T && e !== "" ? X(e) : e === "" && !j && X("") : X(t.value), Y(null);
+	}
+	let $ = o({
+		rows: J,
+		triggerRef: R,
+		focus: "trigger",
+		editable: !0,
+		initialIndex: J.findIndex((e) => e.value === U),
+		measure: () => {
+			let e = R.current?.parentElement;
+			return e == null ? null : ee(e, []);
+		},
+		onChoose: (e) => {
+			let t = J[e];
+			t != null && Z(t);
+		}
+	});
+	function se(e) {
+		Y(e.target.value), $.openMenu("first");
+	}
+	function ce(e) {
+		e.nativeEvent.isComposing || (e.key === "Escape" && !$.open && G !== "" ? (e.preventDefault(), Y("")) : e.key === "Enter" && (!$.open || J.length === 0) && (V != null && e.preventDefault(), Q(), $.close()));
+	}
+	let le = $.open && $.activeIndex < J.length ? $.triggerProps["aria-activedescendant"] : void 0;
+	return /* @__PURE__ */ h("div", {
+		...$.rootProps,
+		onBlur: (e) => {
+			$.rootProps.onBlur(e);
+			let t = e.relatedTarget;
+			(t == null || !e.currentTarget.contains(t)) && Q();
+		},
+		className: e("relative min-w-0", P),
+		children: [
+			/* @__PURE__ */ m(n, {
+				ref: R,
+				id: I,
+				role: "combobox",
+				type: "text",
+				autoComplete: "off",
+				autoCorrect: "off",
+				spellCheck: !1,
+				"aria-autocomplete": "list",
+				"aria-expanded": $.open,
+				"aria-controls": $.open ? $.menuProps.id : void 0,
+				"aria-activedescendant": le,
+				"aria-label": E == null ? D : void 0,
+				"aria-describedby": L,
+				"aria-required": j || void 0,
+				label: E,
+				description: te,
+				placeholder: ne,
+				size: re,
+				width: ie,
+				status: ae,
+				message: O,
+				messagePosition: k,
+				disabled: A,
+				icon: /* @__PURE__ */ m(p, { strokeWidth: 2 }),
+				value: G,
+				onChange: se,
+				onKeyDown: ce,
+				onClick: () => {
+					!$.open && !A && $.openMenu("initial");
+				}
+			}),
+			M == null ? null : /* @__PURE__ */ m("input", {
+				type: "hidden",
+				name: M,
+				value: U ?? ""
+			}),
+			/* @__PURE__ */ m("span", {
+				id: L,
+				role: "status",
+				className: "sr-only",
+				children: $.open ? oe : ""
+			}),
+			$.open && $.menuStyle != null ? /* @__PURE__ */ h("div", {
+				ref: $.menuProps.ref,
+				style: $.menuProps.style,
+				className: r,
+				children: [J.length > 0 ? /* @__PURE__ */ m("ul", {
+					id: $.menuProps.id,
+					role: "listbox",
+					"aria-label": E ?? D,
+					className: i,
+					children: J.map((e, t) => {
+						let n = e.value === U;
+						return /* @__PURE__ */ m("li", {
+							role: "presentation",
+							children: /* @__PURE__ */ m(a.Item, {
+								...$.rowProps(t),
+								role: "option",
+								"aria-selected": n,
+								"aria-disabled": e.disabled || void 0,
+								selected: n,
+								disabled: e.disabled,
+								truncate: !1,
+								start: e.start,
+								end: e.end,
+								className: "pointer-coarse:min-h-11",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => Z(e),
+								children: e.label
+							})
+						}, e.value);
+					})
+				}) : /* @__PURE__ */ m("p", {
+					id: $.menuProps.id,
+					className: e(t("body"), "m-0 px-3.5 py-2 text-muted"),
+					children: C
+				}), J.length < q.length ? /* @__PURE__ */ m("p", {
+					"aria-hidden": !0,
+					className: e(t("caption"), "m-0 px-3.5 py-2 text-muted"),
+					children: `${(q.length - J.length).toLocaleString("en-US")} more. Keep typing to narrow.`
+				}) : null]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { g as Combobox, c as filterComboboxOptions };

package/dist/components/molecules/Combobox/comboboxFilter.d.ts

@@ -0,0 +1,14 @@
+export type ComboboxFilterOption = {
+    label: string;
+    /** Extra words that match but aren't shown (a category, a former name). */
+    keywords?: readonly string[];
+};
+/**
+ * Default **Combobox** filter, case-insensitive: labels that start with the query, then labels with a
+ * word that starts with it, then labels that contain it; keywords match after labels. Options keep
+ * their given order within a rank. An empty query returns every option.
+ */
+export declare function filterComboboxOptions<T extends ComboboxFilterOption>(options: readonly T[], query: string): T[];
+/** What the polite live region says after the list changes. */
+export declare function comboboxResultsMessage(total: number, shown: number, emptyText: string): string;
+//# sourceMappingURL=comboboxFilter.d.ts.map

package/dist/components/molecules/Combobox/comboboxFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comboboxFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Combobox/comboboxFilter.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC;AAWF;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,oBAAoB,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,CAa/G;AAED,+DAA+D;AAC/D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAK9F"}

package/dist/components/molecules/Combobox/comboboxFilter.js

@@ -0,0 +1,26 @@
+"use client";
+//#region src/components/molecules/Combobox/comboboxFilter.ts
+function e(e, t) {
+	let n = e.toLowerCase();
+	return n.startsWith(t) ? 0 : n.split(/[\s\-_/]+/).some((e) => e.startsWith(t)) ? 1 : n.includes(t) ? 2 : null;
+}
+function t(t, n) {
+	let r = n.trim().toLowerCase();
+	if (r === "") return [...t];
+	let i = [];
+	return t.forEach((t, n) => {
+		let a = e(t.label, r), o = (t.keywords ?? []).map((t) => e(t, r)).filter((e) => e != null), s = a ?? (o.length > 0 ? 3 + Math.min(...o) : null);
+		s != null && i.push({
+			option: t,
+			rank: s,
+			index: n
+		});
+	}), i.sort((e, t) => e.rank - t.rank || e.index - t.index), i.map((e) => e.option);
+}
+function n(e, t, n) {
+	if (e === 0) return n;
+	let r = e === 1 ? "result" : "results";
+	return t < e ? `${e.toLocaleString("en-US")} ${r}, first ${t} shown. Keep typing to narrow.` : `${e.toLocaleString("en-US")} ${r}`;
+}
+//#endregion
+export { n as comboboxResultsMessage, t as filterComboboxOptions };

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

@@ -24,6 +24,11 @@ export interface DropdownMenuOptions {
     initialIndex?: number;
     /** `trigger` focus only: Enter or Space on the trigger chooses the active row. */
     onChoose?: (index: number) => void;
+    /**
+     * `trigger` focus only: the trigger is a text field (**Combobox**). Typed characters, Space, Home and
+     * End belong to the field, so there is no type-ahead and only ↓ / ↑ open the menu; Enter chooses.
+     */
+    editable?: boolean;
 }
 /**
  * Open state, dismissal, keyboard, and position for every WMDS dropdown menu (Select, MoreMenu,
@@ -33,7 +38,7 @@ export interface DropdownMenuOptions {
  * 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): {
+export declare function useDropdownMenu({ rows, triggerRef, measure, focus, initialIndex, onChoose, editable, }: DropdownMenuOptions): {
     open: boolean;
     activeIndex: number;
     menuStyle: CSSProperties | null;

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

@@ -1 +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"}
+{"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;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAgB,GACjB,EAAE,mBAAmB;;;;oBA8Bb,kBAAkB;8BASG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE;;;oBA+KrC,WAAW,GAAG,IAAI;2BA5GJ,aAAa,CAAC,WAAW,CAAC;wBAgG7B,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

@@ -2,142 +2,168 @@
 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({
+function s({ rows: s, triggerRef: l, measure: u, focus: d, initialIndex: f, onChoose: p, editable: m = !1 }) {
+	let h = n(), g = i(null), _ = i(null), v = i([]), y = i({
 		text: "",
 		at: 0
-	}), [y, b] = a(!1), [x, S] = a(0), [C, w] = a(null), T = i(u);
+	}), [b, x] = a(!1), [S, C] = a(0), [w, T] = a(null), E = i(u);
 	t(() => {
-		T.current = u;
+		E.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 = {
+	let D = e((e) => `${h}-row-${e}`, [h]), O = 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]), k = e((e = "initial") => {
+		T(E.current()), C(O(e)), x(!0);
+	}, [O]), A = e(({ returnFocus: e = !1 } = {}) => {
+		x(!1), T(null), y.current = {
 			text: "",
 			at: 0
 		}, e && l.current?.focus();
-	}, [l]), A = e(() => y ? k() : O(), [
-		k,
-		y,
-		O
+	}, [l]), j = e(() => b ? A() : k(), [
+		A,
+		b,
+		k
 	]);
 	r(() => {
-		if (!y) return;
-		let e = () => w(T.current());
+		if (!b) return;
+		let e = () => T(E.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;
+	}, [b]), t(() => {
+		if (!b) return;
 		function e(e) {
-			j(e.target) || k();
+			M(e.target) || A();
 		}
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
 	}), r(() => {
-		!y || d !== "items" || C == null || _.current[x]?.focus({ preventScroll: !0 });
+		!b || d !== "items" || w == null || v.current[S]?.focus({ preventScroll: !0 });
 	}, [
-		x,
+		S,
 		d,
-		C,
-		y
+		w,
+		b
 	]), r(() => {
-		!y || d !== "trigger" || _.current[x]?.scrollIntoView?.({ block: "nearest" });
+		!b || d !== "trigger" || v.current[S]?.scrollIntoView?.({ block: "nearest" });
 	}, [
-		x,
+		S,
 		d,
-		y
+		b
 	]);
-	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;
+		return e != null && (g.current?.contains(e) === !0 || _.current?.contains(e) === !0);
+	}
+	function N(e) {
+		let t = Date.now(), n = y.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;
+		let r = n.text.toLowerCase(), i = r.length > 1 && [...r].every((e) => e === r[0]), a = i ? r[0] : r, c = b ? S + (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) {
+	function P(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 (m) {
+			F(e, r);
+			return;
+		}
+		if (!b) {
 			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();
+			if (t === "ArrowDown" || t === "ArrowUp") e.preventDefault(), k(d === "trigger" ? "initial" : t === "ArrowDown" ? "first" : "last");
+			else if (d === "trigger" && (t === "Home" || t === "End")) e.preventDefault(), k(t === "Home" ? "first" : "last");
+			else if (d === "trigger" && (t === "Enter" || t === " ")) e.preventDefault(), k();
 			else if (d === "trigger" && n) {
-				let e = M(t);
-				e != null && O(e);
+				let e = N(t);
+				e != null && k(e);
 			}
 			return;
 		}
 		switch (t) {
 			case "Escape":
-				e.preventDefault(), k({ returnFocus: !0 });
+				e.preventDefault(), A({ returnFocus: !0 });
 				return;
 			case "Tab":
-				k();
+				A();
 				return;
 			case "ArrowDown":
 			case "ArrowUp":
-				e.preventDefault(), S((e) => c(s, e, t === "ArrowDown" ? 1 : -1));
+				e.preventDefault(), C((e) => c(s, e, t === "ArrowDown" ? 1 : -1));
 				return;
 			case "Home":
 			case "End":
-				e.preventDefault(), S(D(t === "Home" ? "first" : "last"));
+				e.preventDefault(), C(O(t === "Home" ? "first" : "last"));
 				return;
 			case "Enter":
 			case " ":
-				d === "trigger" ? (e.preventDefault(), s[x]?.disabled || p?.(x)) : t === " " && !r && (e.preventDefault(), _.current[x]?.click());
+				d === "trigger" ? (e.preventDefault(), s[S]?.disabled || p?.(S)) : t === " " && !r && (e.preventDefault(), v.current[S]?.click());
 				return;
 			default: if (n) {
-				let e = M(t);
-				e != null && S(e);
+				let e = N(t);
+				e != null && C(e);
 			}
 		}
 	}
-	function P(e) {
-		y && !j(e.relatedTarget) && k();
+	function F(e, t) {
+		let { key: n } = e;
+		if (!b) {
+			t && (n === "ArrowDown" || n === "ArrowUp") && (e.preventDefault(), k(n === "ArrowDown" ? "initial" : "last"));
+			return;
+		}
+		switch (n) {
+			case "Escape":
+				e.preventDefault(), A({ returnFocus: !0 });
+				return;
+			case "Tab":
+				A();
+				return;
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault(), C((e) => c(s, e, n === "ArrowDown" ? 1 : -1));
+				return;
+			case "Enter":
+				e.preventDefault(), s.length > 0 && !s[S]?.disabled && p?.(S);
+				return;
+		}
+	}
+	function I(e) {
+		b && !M(e.relatedTarget) && A();
 	}
 	return {
-		open: y,
-		activeIndex: x,
-		menuStyle: C,
-		openMenu: O,
-		close: k,
-		toggle: A,
+		open: b,
+		activeIndex: S,
+		menuStyle: w,
+		openMenu: k,
+		close: A,
+		toggle: j,
 		rootProps: {
 			ref: (e) => {
-				h.current = e;
+				g.current = e;
 			},
-			onKeyDown: N,
-			onBlur: P
+			onKeyDown: P,
+			onBlur: I
 		},
 		triggerProps: {
-			"aria-expanded": y,
-			"aria-controls": y ? m : void 0,
-			"aria-activedescendant": d === "trigger" && y ? E(x) : void 0
+			"aria-expanded": b,
+			"aria-controls": b ? h : void 0,
+			"aria-activedescendant": d === "trigger" && b ? D(S) : void 0
 		},
 		menuProps: {
-			id: m,
+			id: h,
 			ref: (e) => {
-				g.current = e;
+				_.current = e;
 			},
-			style: C ?? void 0
+			style: w ?? void 0
 		},
 		rowProps: (e) => ({
-			id: E(e),
+			id: D(e),
 			ref: (t) => {
-				_.current[e] = t;
+				v.current[e] = t;
 			},
 			tabIndex: -1,
-			active: e === x,
+			active: e === S,
 			onMouseEnter: () => {
-				s[e]?.disabled || S(e);
+				s[e]?.disabled || C(e);
 			}
 		})
 	};

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

@@ -1 +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"}
+{"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;;;;;;;;;;uBAmEzE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;IATrB,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/Notice/Notice.d.ts

@@ -0,0 +1,47 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type NoticeTone } from "./noticeStyles";
+export { noticeTones, type NoticeTone } from "./noticeStyles";
+/** Layout-only — width, margin, grid placement. Not for colour or type. */
+export type NoticeLayoutClassName = string;
+/** `localStorage` key prefix for a notice dismissed with `dismissKey`. */
+export declare const noticeStoragePrefix = "wmds-notice:";
+/** `alert` interrupts the screen reader; `status` waits for a pause. */
+export type NoticeLiveRole = "alert" | "status";
+export interface NoticeProps {
+    /** Default `neutral`. `error` is for something that failed, not for emphasis. */
+    tone?: NoticeTone;
+    /** Short lead line in `ui-label`. */
+    title?: ReactNode;
+    /** Supporting copy in `caption`. */
+    children?: ReactNode;
+    /** A **TextLink** or a small **Button** under the copy. */
+    action?: ReactNode;
+    /**
+     * Replace the tone's icon (a Lucide element), or `false` for none. Default: Info, CircleCheck,
+     * TriangleAlert or CircleX by tone.
+     */
+    icon?: ReactElement | false;
+    /** Show a Dismiss button. */
+    dismissible?: boolean;
+    /** Accessible name of the Dismiss button. @default "Dismiss" */
+    dismissLabel?: string;
+    /** Called once when the visitor dismisses the notice. */
+    onDismiss?: () => void;
+    /**
+     * Remember the dismissal in `localStorage` under `wmds-notice:<key>`, so the notice stays hidden
+     * on later visits. Change the key (for example `holiday-2026`) to show a new notice again.
+     * Server HTML always includes the notice; a visitor who dismissed it sees it removed on hydration.
+     */
+    dismissKey?: string;
+    /**
+     * Announce the notice when it appears after load (a sync failure, a form result). `error` uses
+     * `role="alert"`, the others `role="status"`; pass `"alert"` or `"status"` to choose the role
+     * yourself. Leave off for a notice that is part of the page.
+     */
+    live?: boolean | NoticeLiveRole;
+    id?: string;
+    className?: NoticeLayoutClassName;
+}
+/** Inline callout: closures, buyouts, "account not connected", "sync failed". */
+export declare function Notice({ tone, title, children, action, icon, dismissible, dismissLabel, onDismiss, dismissKey, live, id, className, }: NoticeProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Notice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notice.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Notice/Notice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EASL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,2EAA2E;AAC3E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,0EAA0E;AAC1E,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAElD,wEAAwE;AACxE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,iFAAiF;IACjF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC;IAC5B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAgED,iFAAiF;AACjF,wBAAgB,MAAM,CAAC,EACrB,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,WAAmB,EACnB,YAAwB,EACxB,SAAS,EACT,UAAU,EACV,IAAY,EACZ,EAAE,EACF,SAAS,GACV,EAAE,WAAW,sCAmEb"}