@polyxd/react 0.1.1 → 0.2.1

package/dist/components/inputs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { createElement, useContext, useEffect, useId, useRef, useState } from "react";
 import { Checkbox, RadioGroup, Slider, Switch } from "radix-ui";
-import { resolveFormat, useBindings, useSurface } from "../context.js";
+import { HeadingContext, resolveFormat, useBindings, useSurface } from "../context.js";
 import { asList, absolute, childPointer, get } from "../data.js";
 import { currencySymbol, formatValue } from "../format.js";
 import { Render, useA11y } from "../surface.js";
@@ -52,6 +52,23 @@ export function TextInput({ node }) {
             e.currentTarget.setCustomValidity(b.text(v.message));
     };
     const clear = (e) => e.currentTarget.setCustomValidity("");
+    const label = b.text(node.label);
+    const field = { label, help, required: node.required, id, helpId };
+    if (kind === "suggestions" || kind === "mentions")
+        return _jsx(CompletingInput, { node: node, field: field, common: common, mentions: kind === "mentions" });
+    if (kind === "tags")
+        return _jsx(TagsInput, { node: node, field: field, common: common });
+    if (kind === "richtext")
+        return _jsx(RichTextInput, { node: node, field: field, common: common });
+    if (kind === "inline")
+        return _jsx(InlineInput, { node: node, field: field, common: common });
+    if (kind === "masked") {
+        const mask = typeof node.mask === "string" ? node.mask : "";
+        return (_jsx(Field, { ...field, children: _jsx("input", { ...common, className: "pxd-input pxd-input-masked", type: "text", inputMode: /[A*]/.test(mask) ? undefined : "numeric", placeholder: mask || undefined, value: stored, maxLength: mask.length || undefined, onChange: (e) => b.write(node.value, applyMask(mask, e.target.value, e.target.value.length < stored.length)), onInvalid: invalid, onInput: clear }) }));
+    }
+    if (kind === "code") {
+        return (_jsx(Field, { ...field, children: _jsx("textarea", { ...common, className: "pxd-input pxd-input-code", rows: 4, spellCheck: false, autoCorrect: "off", autoCapitalize: "off", value: shown, maxLength: v.maxLength, minLength: v.minLength, onChange: (e) => onChange(e.target.value), onInvalid: invalid, onInput: clear }) }));
+    }
     if (kind === "search") {
         // A search field: icon and placeholder inside a pill; the label remains its accessible name.
         const placeholder = node.placeholder !== undefined ? b.text(node.placeholder) : undefined;
@@ -62,7 +79,212 @@ export function TextInput({ node }) {
         return (_jsxs("div", { className: "pxd-hero-field", children: [_jsx("label", { className: "pxd-hero-label", htmlFor: id, children: b.text(node.label) }), _jsxs("div", { className: "pxd-hero-input", children: [kind === "currency" && (_jsx("span", { className: "pxd-hero-symbol", "aria-hidden": "true", children: currencySymbol(b.text(node.currency) || "USD", s.locale) })), _jsx("input", { ...common, className: "pxd-hero-value", type: "text", inputMode: kind === "currency" ? "decimal" : "numeric", pattern: "-?[0-9]*[.,]?[0-9]*", placeholder: "0", size: Math.max(1, shown.length || 1), value: shown, onChange: (e) => onChange(e.target.value), onBlur: () => setDraft(null), onInvalid: invalid, onInput: clear })] }), help && (_jsx("p", { className: "pxd-field-help pxd-hero-help", id: helpId, children: help }))] }));
     }
     const control = kind === "multiline" ? (_jsx("textarea", { ...common, rows: 3, value: shown, maxLength: v.maxLength, minLength: v.minLength, onChange: (e) => onChange(e.target.value), onInvalid: invalid, onInput: clear })) : (_jsxs("div", { className: kind === "currency" ? "pxd-input-adorned" : undefined, children: [kind === "currency" && (_jsx("span", { className: "pxd-input-prefix", "aria-hidden": "true", children: currencySymbol(b.text(node.currency) || "USD", s.locale) })), _jsx("input", { ...common, type: INPUT_TYPE[kind] ?? "text", inputMode: kind === "currency" ? "decimal" : kind === "number" ? "numeric" : undefined, pattern: numeric ? "-?[0-9]*[.,]?[0-9]*" : undefined, value: shown, maxLength: v.maxLength, minLength: v.minLength, onChange: (e) => onChange(e.target.value), onBlur: () => setDraft(null), onInvalid: invalid, onInput: clear })] }));
-    return (_jsx(Field, { label: b.text(node.label), help: help, required: node.required, id: id, helpId: helpId, children: control }));
+    return (_jsx(Field, { label: label, help: help, required: node.required, id: id, helpId: helpId, children: control }));
+}
+/** Fills a mask as you type: # takes a digit, A a letter, * either; other characters are typed for you. */
+export function applyMask(mask, text, deleting = false) {
+    const chars = text.replace(/[^A-Za-z0-9]/g, "").split("");
+    let out = "";
+    let ci = 0;
+    for (const m of mask) {
+        if (ci >= chars.length)
+            break;
+        if (m === "#" || m === "A" || m === "*") {
+            const ok = m === "#" ? /\d/ : m === "A" ? /[A-Za-z]/ : /./;
+            while (ci < chars.length && !ok.test(chars[ci]))
+                ci++;
+            if (ci >= chars.length)
+                break;
+            out += chars[ci++];
+        }
+        else
+            out += m;
+    }
+    // Deleting past a literal would put it straight back; drop trailing literals so Backspace moves on.
+    if (deleting)
+        while (out.length && !/[#A*]/.test(mask[out.length - 1]))
+            out = out.slice(0, -1);
+    return out;
+}
+/** A listbox under a text field, driven by the arrow keys; the option under the cursor is announced through aria-activedescendant. */
+function useCombobox(options, pick) {
+    const listId = useId();
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(-1);
+    const shown = open && options.length > 0;
+    const onKeyDown = (e) => {
+        if (!shown) {
+            if (e.key === "ArrowDown" && options.length)
+                (setOpen(true), setActive(0), e.preventDefault());
+            return;
+        }
+        if (e.key === "ArrowDown")
+            (setActive((a) => (a + 1) % options.length), e.preventDefault());
+        else if (e.key === "ArrowUp")
+            (setActive((a) => (a - 1 + options.length) % options.length), e.preventDefault());
+        else if (e.key === "Enter" && active >= 0)
+            (pick(options[active]), setOpen(false), e.preventDefault());
+        else if (e.key === "Escape")
+            setOpen(false);
+    };
+    const inputProps = {
+        role: "combobox",
+        "aria-expanded": shown,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": shown && active >= 0 ? `${listId}-${active}` : undefined,
+        autoComplete: "off",
+        onKeyDown,
+        onBlur: () => setOpen(false),
+    };
+    const list = shown ? (_jsx("ul", { id: listId, role: "listbox", className: "pxd-combobox-list", children: options.map((o, i) => (_jsxs("li", { id: `${listId}-${i}`, role: "option", "aria-selected": i === active, className: `pxd-combobox-option${i === active ? " pxd-combobox-active" : ""}`, onMouseDown: (e) => (e.preventDefault(), pick(o), setOpen(false)), children: [o.label, o.description && _jsx("span", { className: "pxd-option-description", children: o.description })] }, String(o.value)))) })) : null;
+    return { list, inputProps, show: (on) => (setOpen(on), setActive(-1)) };
+}
+/** Free text with completions ('suggestions'), or an @ that offers people ('mentions'). */
+function CompletingInput({ node, field, common, mentions }) {
+    const b = useBindings();
+    const all = useOptions(node);
+    const text = String(b.value(node.value) ?? "");
+    // What is being completed: the whole value, or the word after the last @.
+    const at = mentions ? /@([^\s@]*)$/.exec(text) : null;
+    const query = mentions ? (at ? at[1] : null) : text;
+    const options = query === null ? [] : all.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())).slice(0, 8);
+    const combo = useCombobox(options, (o) => b.write(node.value, mentions && at ? `${text.slice(0, at.index)}@${o.label} ` : o.label));
+    return (_jsx(Field, { ...field, children: _jsxs("div", { className: "pxd-combobox", children: [_jsx("input", { ...common, ...combo.inputProps, type: "text", value: text, onChange: (e) => {
+                        b.write(node.value, e.target.value);
+                        combo.show(mentions ? /@[^\s@]*$/.test(e.target.value) : e.target.value.length > 0);
+                    }, onFocus: () => combo.show(!mentions && text.length > 0) }), combo.list] }) }));
+}
+/** Several short values: Enter or a comma makes a chip of what was typed; Backspace in an empty field removes the last one. */
+function TagsInput({ node, field, common }) {
+    const b = useBindings();
+    const raw = b.value(node.value);
+    const tags = Array.isArray(raw) ? raw.map(String) : [];
+    const [draft, setDraft] = useState("");
+    const add = () => {
+        const t = draft.trim().replace(/,$/, "").trim();
+        if (t && !tags.includes(t))
+            b.write(node.value, [...tags, t]);
+        setDraft("");
+    };
+    const remove = (i) => b.write(node.value, tags.filter((_, j) => j !== i));
+    return (_jsx(Field, { ...field, children: _jsxs("div", { className: "pxd-tags", role: "group", "aria-label": field.label, children: [_jsx("ul", { className: "pxd-tags-list", children: tags.map((t, i) => (_jsxs("li", { className: "pxd-tag-chip", children: [t, _jsx("button", { type: "button", className: "pxd-tag-remove", "aria-label": `Remove ${t}`, onClick: () => remove(i), children: _jsx(Icon, { name: "close", size: 14 }) })] }, `${t}-${i}`))) }), _jsx("input", { ...common, className: "pxd-tags-input", type: "text", value: draft, onChange: (e) => (e.target.value.endsWith(",") ? (setDraft(e.target.value), add()) : setDraft(e.target.value)), onKeyDown: (e) => {
+                        if (e.key === "Enter")
+                            (e.preventDefault(), add());
+                        else if (e.key === "Backspace" && draft === "" && tags.length)
+                            remove(tags.length - 1);
+                    }, onBlur: add })] }) }));
+}
+/** Inline emphasis and lists to and from the markdown-ish text a 'richtext' value holds. */
+function toMarkup(n) {
+    if (n.nodeType === 3)
+        return n.textContent ?? "";
+    if (n.nodeType !== 1)
+        return "";
+    const el = n;
+    const inner = (x = el) => Array.from(x.childNodes).map(toMarkup).join("");
+    switch (el.tagName.toLowerCase()) {
+        case "b":
+        case "strong":
+            return `**${inner()}**`;
+        case "i":
+        case "em":
+            return `*${inner()}*`;
+        case "br":
+            return "\n";
+        case "ul":
+            return Array.from(el.children).map((li) => `- ${inner(li)}`).join("\n") + "\n";
+        case "ol":
+            return Array.from(el.children).map((li, i) => `${i + 1}. ${inner(li)}`).join("\n") + "\n";
+        case "div":
+        case "p":
+        case "li":
+            return inner() + "\n";
+        default:
+            return inner();
+    }
+}
+function inlineNodes(text) {
+    const out = [];
+    const re = /\*\*([^*]+)\*\*|\*([^*]+)\*/g;
+    let last = 0;
+    for (let m = re.exec(text); m; m = re.exec(text)) {
+        if (m.index > last)
+            out.push(document.createTextNode(text.slice(last, m.index)));
+        const el = document.createElement(m[1] ? "strong" : "em");
+        el.textContent = m[1] ?? m[2];
+        out.push(el);
+        last = m.index + m[0].length;
+    }
+    if (last < text.length)
+        out.push(document.createTextNode(text.slice(last)));
+    return out;
+}
+function fromMarkup(text) {
+    const out = [];
+    let list = null;
+    for (const line of text.split("\n")) {
+        const item = /^(-|\d+\.)\s+(.*)$/.exec(line);
+        if (item) {
+            const tag = item[1] === "-" ? "ul" : "ol";
+            if (!list || list.tagName.toLowerCase() !== tag)
+                (list = document.createElement(tag), out.push(list));
+            const li = document.createElement("li");
+            li.append(...inlineNodes(item[2]));
+            list.append(li);
+            continue;
+        }
+        list = null;
+        const div = document.createElement("div");
+        if (line)
+            div.append(...inlineNodes(line));
+        else
+            div.append(document.createElement("br"));
+        out.push(div);
+    }
+    return out;
+}
+/** A small editable area with Bold, Italic and List; the value is text with **bold**, *italic* and '- ' items. */
+function RichTextInput({ node, field, common }) {
+    const b = useBindings();
+    const ref = useRef(null);
+    const stored = String(b.value(node.value) ?? "");
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || el.dataset.ready)
+            return;
+        el.dataset.ready = "1";
+        el.replaceChildren(...fromMarkup(stored));
+    }, [stored]);
+    const commit = () => ref.current && b.write(node.value, toMarkup(ref.current).replace(/\n+$/, ""));
+    const exec = (command) => (e) => {
+        e.preventDefault();
+        ref.current?.focus();
+        document.execCommand(command);
+        commit();
+    };
+    const { id, className: _c, required: _r, autoComplete: _a, ...rest } = common;
+    return (_jsx(Field, { ...field, children: _jsxs("div", { className: "pxd-richtext", children: [_jsxs("div", { className: "pxd-richtext-toolbar", role: "toolbar", "aria-label": "Formatting", children: [_jsx("button", { type: "button", className: "pxd-richtext-control", "aria-label": "Bold", onMouseDown: exec("bold"), children: _jsx("strong", { children: "B" }) }), _jsx("button", { type: "button", className: "pxd-richtext-control", "aria-label": "Italic", onMouseDown: exec("italic"), children: _jsx("em", { children: "I" }) }), _jsx("button", { type: "button", className: "pxd-richtext-control", "aria-label": "Bulleted list", onMouseDown: exec("insertUnorderedList"), children: _jsx(Icon, { name: "menu", size: 16 }) })] }), _jsx("div", { ...rest, id: id, ref: ref, className: "pxd-input pxd-richtext-area", contentEditable: true, role: "textbox", "aria-multiline": "true", "aria-label": field.label, onInput: commit, onBlur: commit })] }) }));
+}
+/** Reads as text until Edit is chosen; Enter saves, Escape restores what was there. */
+function InlineInput({ node, field, common }) {
+    const b = useBindings();
+    const stored = String(b.value(node.value) ?? "");
+    const [draft, setDraft] = useState(null);
+    const save = () => {
+        if (draft !== null)
+            b.write(node.value, draft);
+        setDraft(null);
+    };
+    if (draft === null) {
+        return (_jsxs("div", { className: "pxd-inline-edit", children: [_jsx("span", { className: "pxd-field-label", children: field.label }), _jsxs("button", { type: "button", className: "pxd-inline-value", "aria-label": `Edit ${field.label}`, onClick: () => setDraft(stored), children: [_jsx("span", { className: stored ? undefined : "pxd-inline-empty", children: stored || "Not set" }), _jsx("span", { className: "pxd-inline-hint", "aria-hidden": "true", children: "Edit" })] })] }));
+    }
+    return (_jsx(Field, { ...field, children: _jsx("input", { ...common, type: "text", autoFocus: true, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: save, onKeyDown: (e) => {
+                if (e.key === "Enter")
+                    (e.preventDefault(), save());
+                else if (e.key === "Escape")
+                    setDraft(null);
+            } }) }));
 }
 /** A Choice's options, from literal options or host data. */
 export function optionsOf(node, data, scope, text) {
@@ -106,6 +328,8 @@ export function Choice({ node }) {
     const multiple = node.mode === "multiple";
     const value = b.value(node.value);
     const key = (v) => JSON.stringify(v);
+    // Element ids from a value: JSON is exact but not id-safe ("p_tom" has quotes), so encode it.
+    const idOf = (v) => `${labelId}-${encodeURIComponent(key(v)).replace(/%/g, "_")}`;
     const help = node.help !== undefined ? b.text(node.help) : undefined;
     const withFaces = options.some((o) => o.avatar !== undefined);
     const searchable = options.length > 10 || (withFaces && options.length > 6);
@@ -127,12 +351,12 @@ export function Choice({ node }) {
             const recent = query ? [] : options.filter((o) => o.recent);
             const rest = options.filter((o) => (query ? matches(o) : !o.recent));
             return (_jsxs("fieldset", { className: "pxd-field pxd-choice pxd-people", "aria-describedby": help ? helpId : undefined, ...a11y, children: [_jsx("legend", { className: "pxd-field-label", id: labelId, children: label }), help && _jsx("p", { className: "pxd-field-help", id: helpId, children: help }), search, _jsxs("div", { className: "pxd-people-group", children: [recent.length > 0 && (_jsx("div", { className: "pxd-people-recent", children: recent.map((o) => (_jsxs(Checkbox.Root, { className: "pxd-person-tile", checked: isOn(o.value), onCheckedChange: () => toggle(o.value), "aria-label": o.label, children: [_jsxs("span", { className: "pxd-person-face", children: [_jsx(Avatar, { value: o.avatar, name: o.label, size: 56 }), _jsx(Checkbox.Indicator, { className: "pxd-person-tick", children: _jsx(Icon, { name: "check", size: 14 }) })] }), _jsx("span", { className: "pxd-person-name", "aria-hidden": "true", children: o.label.split(" ")[0] })] }, key(o.value)))) })), _jsx("div", { className: "pxd-people-list", children: rest.map((o) => {
-                                    const cid = `${labelId}-${key(o.value)}`;
+                                    const cid = idOf(o.value);
                                     return (_jsxs(Checkbox.Root, { id: cid, className: "pxd-person-row", checked: isOn(o.value), onCheckedChange: () => toggle(o.value), "aria-labelledby": `${cid}-name`, "aria-describedby": o.description ? `${cid}-desc` : undefined, children: [_jsx(Avatar, { value: o.avatar, name: o.label }), _jsxs("span", { className: "pxd-person-text", children: [_jsx("span", { id: `${cid}-name`, children: o.label }), o.description && (_jsx("span", { className: "pxd-option-description", id: `${cid}-desc`, children: o.description }))] }), _jsx(Checkbox.Indicator, { className: "pxd-person-check", children: _jsx(Icon, { name: "check" }) })] }, key(o.value)));
                                 }) })] })] }));
         }
         return (_jsxs("fieldset", { className: "pxd-field pxd-choice", "aria-describedby": help ? helpId : undefined, ...a11y, children: [_jsx("legend", { className: "pxd-field-label", id: labelId, children: label }), help && _jsx("p", { className: "pxd-field-help", id: helpId, children: help }), search, _jsx("div", { className: `pxd-choice-list${searchable ? " pxd-choice-scroll" : ""}`, children: options.filter(matches).map((o) => {
-                        const cid = `${labelId}-${key(o.value)}`;
+                        const cid = idOf(o.value);
                         return (_jsxs("div", { className: "pxd-choice-option", children: [o.avatar !== undefined && _jsx(Avatar, { value: o.avatar, name: o.label, size: 32 }), _jsx(Checkbox.Root, { id: cid, className: "pxd-checkbox", checked: isOn(o.value), onCheckedChange: () => toggle(o.value), "aria-describedby": o.description ? `${cid}-desc` : undefined, children: _jsx(Checkbox.Indicator, { className: "pxd-checkbox-indicator", children: "\u2713" }) }), _jsx(OptionText, { id: cid, label: o.label, description: o.description })] }, key(o.value)));
                     }) })] }));
     }
@@ -147,12 +371,12 @@ export function Choice({ node }) {
         const recent = query ? [] : options.filter((o) => o.recent);
         const rest = options.filter((o) => (query ? matches(o) : !o.recent));
         return (_jsxs("div", { className: "pxd-field pxd-choice pxd-people", ...a11y, children: [heading, help && _jsx("p", { className: "pxd-field-help", id: helpId, children: help }), search, _jsxs(RadioGroup.Root, { "aria-labelledby": labelId, "aria-describedby": help ? helpId : undefined, "aria-required": node.required || undefined, value: current, onValueChange: onValueChange, className: "pxd-people-group", children: [recent.length > 0 && (_jsx("div", { className: "pxd-people-recent", role: "presentation", children: recent.map((o) => (_jsxs(RadioGroup.Item, { value: key(o.value), className: "pxd-person-tile", "aria-label": o.label, children: [_jsx(Avatar, { value: o.avatar, name: o.label, size: 56 }), _jsx("span", { className: "pxd-person-name", "aria-hidden": "true", children: o.label.split(" ")[0] })] }, key(o.value)))) })), _jsx("div", { className: "pxd-people-list", role: "presentation", children: rest.map((o) => {
-                                const cid = `${labelId}-${key(o.value)}`;
+                                const cid = idOf(o.value);
                                 return (_jsxs(RadioGroup.Item, { id: cid, value: key(o.value), className: "pxd-person-row", "aria-labelledby": `${cid}-name`, "aria-describedby": o.description ? `${cid}-desc` : undefined, children: [_jsx(Avatar, { value: o.avatar, name: o.label }), _jsxs("span", { className: "pxd-person-text", children: [_jsx("span", { id: `${cid}-name`, children: o.label }), o.description && (_jsx("span", { className: "pxd-option-description", id: `${cid}-desc`, children: o.description }))] }), _jsx(RadioGroup.Indicator, { className: "pxd-person-check", children: _jsx(Icon, { name: "check" }) })] }, key(o.value)));
                             }) })] })] }));
     }
     return (_jsxs("div", { className: "pxd-field pxd-choice", ...a11y, children: [heading, help && _jsx("p", { className: "pxd-field-help", id: helpId, children: help }), search, _jsx(RadioGroup.Root, { className: `pxd-choice-list${searchable ? " pxd-choice-scroll" : ""}`, "aria-labelledby": labelId, "aria-describedby": help ? helpId : undefined, "aria-required": node.required || undefined, value: current, onValueChange: onValueChange, orientation: "vertical", children: options.filter(matches).map((o) => {
-                    const cid = `${labelId}-${key(o.value)}`;
+                    const cid = idOf(o.value);
                     return (_jsxs("div", { className: "pxd-choice-option", children: [_jsx(RadioGroup.Item, { id: cid, value: key(o.value), className: "pxd-radio", "aria-describedby": o.description ? `${cid}-desc` : undefined, children: _jsx(RadioGroup.Indicator, { className: "pxd-radio-indicator" }) }), _jsx(OptionText, { id: cid, label: o.label, description: o.description })] }, key(o.value)));
                 }) })] }));
 }
@@ -176,10 +400,11 @@ export function Toggle({ node }) {
     const a11y = useA11y(node);
     return (_jsxs("div", { className: "pxd-toggle", children: [node.action ? (_jsx(Switch.Root, { id: id, className: "pxd-switch", checked: checked, onCheckedChange: change, "aria-describedby": description ? descId : undefined, ...a11y, children: _jsx(Switch.Thumb, { className: "pxd-switch-thumb" }) })) : (_jsx(Checkbox.Root, { id: id, className: "pxd-checkbox", checked: checked, onCheckedChange: (c) => change(c === true), "aria-describedby": description ? descId : undefined, ...a11y, children: _jsx(Checkbox.Indicator, { className: "pxd-checkbox-indicator", children: "\u2713" }) })), _jsxs("div", { className: "pxd-toggle-text", children: [_jsx("label", { htmlFor: id, className: "pxd-toggle-label", children: b.text(node.label) }), description && (_jsx("p", { className: "pxd-field-help", id: descId, children: description }))] })] }));
 }
-const DATE_TYPE = { date: "date", time: "time", datetime: "datetime-local" };
+const DATE_TYPE = { date: "date", time: "time", datetime: "datetime-local", month: "month" };
 /** Native date/time inputs: typing is always possible, and pickers are platform-native. */
 export function DateInput({ node }) {
     const b = useBindings();
+    const s = useSurface();
     const id = useId();
     const helpId = useId();
     const kind = node.kind ?? "date";
@@ -188,6 +413,16 @@ export function DateInput({ node }) {
     const min = node.min !== undefined ? b.text(node.min) : undefined;
     const max = node.max !== undefined ? b.text(node.max) : undefined;
     const a11y = useA11y(node);
+    if (node.multiple && kind !== "dateRange") {
+        // Each chosen date is a chip; the field adds another.
+        const dates = Array.isArray(value) ? value.map(String) : [];
+        const spoken = (d) => formatValue(d, { type: kind === "month" ? "date" : kind === "time" ? "time" : kind === "datetime" ? "datetime" : "date" }, s.locale);
+        const add = (d) => d && !dates.includes(d) && b.write(node.value, [...dates, d].sort());
+        return (_jsxs("fieldset", { className: "pxd-field pxd-date-multiple", ...a11y, children: [_jsxs("legend", { className: "pxd-field-label", children: [b.text(node.label), node.required && _jsx(RequiredMark, {})] }), help && _jsx("p", { className: "pxd-field-help", id: helpId, children: help }), dates.length > 0 && (_jsx("ul", { className: "pxd-tags-list", "aria-label": `Chosen ${b.text(node.label)}`, children: dates.map((d) => (_jsxs("li", { className: "pxd-tag-chip", children: [kind === "year" || kind === "month" ? d : spoken(d), _jsx("button", { type: "button", className: "pxd-tag-remove", "aria-label": `Remove ${d}`, onClick: () => b.write(node.value, dates.filter((x) => x !== d)), children: _jsx(Icon, { name: "close", size: 14 }) })] }, d))) })), _jsxs("label", { className: "pxd-date-add", htmlFor: id, children: [_jsx("span", { className: "pxd-sr-only", children: "Add a date" }), kind === "year" ? (_jsx("input", { id: id, className: "pxd-input pxd-input-year", inputMode: "numeric", pattern: "[0-9]{4}", maxLength: 4, placeholder: "YYYY", "aria-describedby": help ? helpId : undefined, onKeyDown: (e) => e.key === "Enter" && (e.preventDefault(), add(e.currentTarget.value), (e.currentTarget.value = "")), onBlur: (e) => (add(e.currentTarget.value), (e.currentTarget.value = "")) })) : (_jsx("input", { id: id, className: "pxd-input pxd-input-date", type: DATE_TYPE[kind], min: min, max: max, "aria-describedby": help ? helpId : undefined, onChange: (e) => (add(e.target.value), (e.target.value = "")) }))] })] }));
+    }
+    if (kind === "year") {
+        return (_jsx(Field, { label: b.text(node.label), help: help, required: node.required, id: id, helpId: helpId, children: _jsx("input", { id: id, className: "pxd-input pxd-input-year", inputMode: "numeric", pattern: "[0-9]{4}", maxLength: 4, placeholder: "YYYY", value: value ?? "", min: min, max: max, required: node.required, "aria-describedby": help ? helpId : undefined, onChange: (e) => b.write(node.value, e.target.value.replace(/\D/g, "").slice(0, 4) || null), ...a11y }) }));
+    }
     if (kind === "dateRange") {
         const [start, end] = Array.isArray(value) ? value : [];
         const setAt = (i, v) => {
@@ -197,7 +432,7 @@ export function DateInput({ node }) {
         };
         return (_jsxs("fieldset", { className: "pxd-field", ...a11y, children: [_jsx("legend", { className: "pxd-field-label", children: b.text(node.label) }), help && _jsx("p", { className: "pxd-field-help", children: help }), _jsxs("div", { className: "pxd-date-range", children: [_jsxs("label", { children: ["From", _jsx("input", { className: "pxd-input", type: "date", value: start ?? "", min: min, max: max, required: node.required, onChange: (e) => setAt(0, e.target.value) })] }), _jsxs("label", { children: ["To", _jsx("input", { className: "pxd-input", type: "date", value: end ?? "", min: start ?? min, max: max, required: node.required, onChange: (e) => setAt(1, e.target.value) })] })] })] }));
     }
-    return (_jsx(Field, { label: b.text(node.label), help: help, required: node.required, id: id, helpId: helpId, children: _jsx("input", { id: id, className: "pxd-input pxd-input-date", type: DATE_TYPE[kind], value: value ?? "", min: min, max: max, required: node.required, "aria-describedby": help ? helpId : undefined, onChange: (e) => b.write(node.value, e.target.value || null), ...a11y }) }));
+    return (_jsx(Field, { label: b.text(node.label), help: help, required: node.required, id: id, helpId: helpId, children: _jsx("input", { id: id, className: `pxd-input pxd-input-date${kind === "month" ? " pxd-input-month" : ""}`, type: DATE_TYPE[kind], value: value ?? "", min: min, max: max, required: node.required, "aria-describedby": help ? helpId : undefined, onChange: (e) => b.write(node.value, e.target.value || null), ...a11y }) }));
 }
 export function RangeInput({ node }) {
     const b = useBindings();
@@ -216,15 +451,103 @@ export function RangeInput({ node }) {
     const value = Number(b.value(node.value) ?? node.min);
     return (_jsxs("div", { className: "pxd-field pxd-range", ...a11y, children: [_jsxs("div", { className: "pxd-range-header", children: [_jsx("span", { className: "pxd-field-label", id: labelId, children: b.text(node.label) }), _jsx("output", { className: "pxd-range-value", "aria-live": "polite", children: fmt(value) })] }), _jsxs(Slider.Root, { className: "pxd-slider", min: node.min, max: node.max, step: node.step ?? 1, value: [value], onValueChange: ([v]) => b.write(node.value, v), children: [_jsx(Slider.Track, { className: "pxd-slider-track", children: _jsx(Slider.Range, { className: "pxd-slider-range" }) }), _jsx(Slider.Thumb, { className: "pxd-slider-thumb", "aria-labelledby": labelId, "aria-valuetext": fmt(value) })] }), _jsxs("div", { className: "pxd-range-bounds", "aria-hidden": "true", children: [_jsx("span", { children: fmt(node.min) }), _jsx("span", { children: fmt(node.max) })] })] }));
 }
+/** What a control is called, as the summary says it: its label, else its aria-label, else its field's. */
+function controlName(control) {
+    const own = control.labels?.[0]?.textContent ?? control.getAttribute("aria-label") ?? control.closest(".pxd-field")?.querySelector(".pxd-field-label, legend")?.textContent ?? "";
+    return own.replace(/\*\s*$/, "").trim(); // the required mark is for the eye, not the summary
+}
+/** The controls that failed, in DOM order, one per radio group. Each gets an id the summary can link to. */
+function collectProblems(form, base) {
+    const seen = new Set();
+    const out = [];
+    for (const el of Array.from(form.elements)) {
+        if (!el.willValidate || el.validity.valid)
+            continue;
+        if (el.type === "radio" && el.name) {
+            if (seen.has(el.name))
+                continue;
+            seen.add(el.name);
+        }
+        if (!el.id)
+            el.id = `${base}-${out.length}`;
+        out.push(el);
+    }
+    return out;
+}
+/**
+ * Submits through checkValidity, so every control's own message is set (onInvalid) without the
+ * browser's bubbles. When something fails, a summary at the top of the fields says what, in plain
+ * words, and links to each control; each control is marked and, if its field says nothing yet, the
+ * message is said under it. The marks are undone on the next submit and redone from scratch.
+ */
 export function Form({ node }) {
     const b = useBindings();
     const s = useSurface();
+    const level = Math.min(useContext(HeadingContext), 6);
+    const summaryId = useId();
+    const summary = useRef(null);
+    const marked = useRef([]);
+    const [problems, setProblems] = useState([]);
     // An asterisk has to say what it means, once, before the fields it marks.
     const anyRequired = (node.children ?? []).some((id) => s.byId.get(id)?.required);
-    return (_jsxs("form", { className: `pxd-form${node.aside ? " pxd-form-with-aside" : ""}${node.layout === "horizontal" ? " pxd-form-horizontal" : ""}`, onSubmit: (e) => {
+    useEffect(() => {
+        if (problems.length)
+            summary.current?.focus();
+    }, [problems]);
+    const unmark = () => {
+        for (const c of marked.current) {
+            c.removeAttribute("aria-invalid");
+            if (c.pxdDescribed)
+                c.setAttribute("aria-describedby", c.pxdDescribed);
+            else
+                c.removeAttribute("aria-describedby");
+            c.pxdNote?.remove();
+            c.pxdNote = undefined;
+        }
+        marked.current = [];
+    };
+    const mark = (controls) => {
+        for (const c of controls) {
+            c.setAttribute("aria-invalid", "true");
+            const field = c.closest(".pxd-field");
+            if (field && !field.querySelector(".pxd-field-error")) {
+                const note = field.ownerDocument.createElement("p");
+                note.className = "pxd-field-error";
+                note.id = `${c.id}-error`;
+                note.textContent = c.validationMessage;
+                field.append(note);
+                c.pxdNote = note;
+                c.pxdDescribed = c.getAttribute("aria-describedby");
+                c.setAttribute("aria-describedby", [c.pxdDescribed, note.id].filter(Boolean).join(" "));
+            }
+        }
+        marked.current = controls;
+    };
+    const goTo = (id) => {
+        const el = summary.current?.ownerDocument.getElementById(id);
+        if (!el)
+            return;
+        el.scrollIntoView({ block: "center" });
+        el.focus();
+        // A Radix group's native input is hidden; the group's first real control takes the focus.
+        if (el.ownerDocument.activeElement !== el)
+            el.closest(".pxd-field")?.querySelector("[role='radio'], button, input:not([aria-hidden]), textarea, select")?.focus();
+    };
+    return (_jsxs("form", { className: `pxd-form${node.aside ? " pxd-form-with-aside" : ""}${node.layout === "horizontal" ? " pxd-form-horizontal" : ""}`, noValidate: true, onSubmit: (e) => {
             e.preventDefault();
+            const form = e.currentTarget;
+            unmark();
+            if (!form.checkValidity()) {
+                const failed = collectProblems(form, summaryId);
+                mark(failed);
+                return setProblems(failed.map((c) => ({ id: c.id, label: controlName(c), message: c.validationMessage })));
+            }
+            setProblems([]);
             s.dispatch(node.submit.action, b.scope, node.id);
-        }, ...useA11y(node), children: [node.aside && (_jsx("aside", { className: "pxd-form-aside", children: _jsx(Render, { id: node.aside }) })), _jsxs("div", { className: "pxd-stack pxd-form-fields", children: [anyRequired && (_jsxs("p", { className: "pxd-required-legend", children: [_jsx("span", { className: "pxd-required", "aria-hidden": "true", children: "*" }), " ", "Required"] })), _jsx(Children, { ids: node.children })] }), _jsxs("div", { className: "pxd-action-bar", children: [_jsx("button", { type: "submit", className: "pxd-button pxd-button-primary", children: b.text(node.submit.label) }), node.cancel && (_jsx("button", { type: "button", className: "pxd-button pxd-button-secondary", onClick: () => s.dispatch(node.cancel.action, b.scope, node.id), children: b.text(node.cancel.label) }))] })] }));
+        }, ...useA11y(node), children: [node.aside && (_jsx("aside", { className: "pxd-form-aside", children: _jsx(Render, { id: node.aside }) })), _jsxs("div", { className: "pxd-stack pxd-form-fields", children: [problems.length > 0 && (_jsxs("section", { ref: summary, className: "pxd-error-summary", role: "alert", tabIndex: -1, "aria-labelledby": summaryId, children: [createElement(`h${level}`, { id: summaryId, className: "pxd-error-summary-title" }, "Check these fields before continuing"), _jsx("ul", { className: "pxd-error-summary-list", children: problems.map((p) => (_jsx("li", { children: _jsx("a", { href: `#${p.id}`, className: "pxd-link", onClick: (e) => {
+                                            e.preventDefault();
+                                            goTo(p.id);
+                                        }, children: p.label ? `${p.label}: ${p.message}` : p.message }) }, p.id))) })] })), anyRequired && (_jsxs("p", { className: "pxd-required-legend", children: [_jsx("span", { className: "pxd-required", "aria-hidden": "true", children: "*" }), " ", "Required"] })), _jsx(Children, { ids: node.children })] }), _jsxs("div", { className: "pxd-action-bar", children: [_jsx("button", { type: "submit", className: "pxd-button pxd-button-primary", children: b.text(node.submit.label) }), node.cancel && (_jsx("button", { type: "button", className: "pxd-button pxd-button-secondary", onClick: () => s.dispatch(node.cancel.action, b.scope, node.id), children: b.text(node.cancel.label) }))] })] }));
 }
 export { Render };
 //# sourceMappingURL=inputs.js.map