@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/dialog-B6MP7GYI.js

@@ -0,0 +1,537 @@
+import { n as e, t } from "./icon-DjqSEQ-o.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as r } from "@slotted/core/selector-key";
+import { createFocusScope as i } from "@slotted/core/focus";
+import { createControllable as a } from "@slotted/core/state";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { createPresence as ee } from "@slotted/core/presence";
+import { createPortalRoot as y } from "@slotted/core/portal";
+import { createDismissableLayer as te } from "@slotted/core/dismissable-layer";
+import { createPortal as b } from "react-dom";
+import { dialogMessages as x } from "@slotted/core/i18n";
+import { observeKeyboardInset as S } from "@slotted/core/measure";
+//#region src/dialog/dialog-defaults.tsx
+var C = o({
+	back: "close",
+	escape: "close",
+	fullScreen: "narrow",
+	modal: !0,
+	mount: "active",
+	outsidePress: "close",
+	placement: "center",
+	scroll: "content",
+	size: "md",
+	surface: "panel"
+});
+function w() {
+	return c(C);
+}
+function T({ children: e, ...t }) {
+	let n = w();
+	return /* @__PURE__ */ _(C.Provider, {
+		value: {
+			back: t.back ?? n.back,
+			escape: t.escape ?? n.escape,
+			fullScreen: t.fullScreen ?? n.fullScreen,
+			modal: t.modal ?? n.modal,
+			mount: t.mount ?? n.mount,
+			outsidePress: t.outsidePress ?? n.outsidePress,
+			placement: t.placement ?? n.placement,
+			scroll: t.scroll ?? n.scroll,
+			size: t.size ?? n.size,
+			surface: t.surface ?? n.surface
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/dialog/dialog.tsx
+var E = o(void 0);
+function D() {
+	let e = c(E);
+	if (e === void 0) throw Error("Every dialog part must be rendered inside Dialog or AlertDialog.");
+	return e;
+}
+function O({ back: e, children: t, container: r, defaultFullscreen: i, defaultOpen: o, escape: c, finalFocus: f, fullscreen: g, fullScreen: v, fullscreenToggle: y, initialFocus: te, loading: b, member: S, messages: C, modal: T, mount: D, onFullscreenChange: O, onOpenChange: k, onOpenChangeComplete: A, open: j, outsidePress: M, placement: N, ref: ne, scroll: re, size: ie, surface: P, tone: F }) {
+	let I = w(), L = n(x, C), R = u(), [z, ae] = h(o ?? !1), B = j ?? z, V = S === "alertDialog", [H, U] = h(i ?? !1), W = !V && (g ?? H), G = !V && y === !0, K = V ? !0 : T ?? I.modal, q = V ? "none" : M ?? I.outsidePress, J = D ?? I.mount, oe = ie ?? (V ? "sm" : I.size), se = v ?? (V ? "never" : I.fullScreen), ce = te ?? (V ? "cancel" : "first"), le = c ?? I.escape, ue = e ?? I.back, de = N ?? I.placement, fe = re ?? I.scroll, pe = P ?? I.surface, [Y, me] = h(B ? "entering" : "unmounted"), X = m(null), Z = m(A);
+	Z.current = A, X.current === null && (X.current = ee({
+		onEnterComplete: () => Z.current?.(!0),
+		onExitComplete: () => Z.current?.(!1),
+		onStatusChange: me,
+		present: B,
+		skipInitialAnimation: !1
+	})), l(() => {
+		X.current?.sync(B);
+	}, [B]), l(() => {
+		let e = X.current;
+		return () => e?.stop();
+	}, []);
+	let he = m(B);
+	B && (he.current = !0);
+	let ge = J === "eager" ? !0 : J === "lazy" ? he.current : Y !== "unmounted", Q = m({
+		cancel: null,
+		content: null,
+		trigger: null
+	}), [_e, ve] = h(!1), [ye, be] = h(!1), xe = s((e, t) => (e === "cancel" && (Q.current.cancel = t), e === "title" && ve(!0), e === "description" && be(!0), () => {
+		e === "cancel" && (Q.current.cancel = null), e === "title" && ve(!1), e === "description" && be(!1);
+	}), []), $ = s((e, t, n, r) => {
+		if (e === B) return;
+		let i = !1, o = a({
+			controlled: j,
+			initial: B,
+			onRequest: (e) => {
+				i = e.cancelled, k?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					result: n,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(e, t, r);
+		i || o && ae(e);
+	}, [
+		B,
+		k,
+		j
+	]), Se = s((e, t, n) => {
+		e !== W && a({
+			controlled: g,
+			initial: W,
+			onRequest: (e) => {
+				O?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(e, t, n) && U(e);
+	}, [
+		W,
+		g,
+		O
+	]);
+	d(ne, () => ({
+		open: () => $(!0, "programmatic", void 0, void 0),
+		close: (e) => $(!1, "programmatic", e, void 0),
+		focus: () => Q.current.content?.focus(),
+		get content() {
+			return Q.current.content;
+		}
+	}), [$]);
+	let Ce = p(() => ({
+		announce: xe,
+		close: (e, t, n) => $(!1, e, t, n),
+		container: r,
+		descriptionId: ye ? `${R}description` : "",
+		back: ue,
+		escape: le,
+		finalFocus: f,
+		fullScreen: se,
+		fullscreen: W,
+		fullscreenToggle: G,
+		initialFocus: ce,
+		setFullscreen: Se,
+		loading: b === !0,
+		member: S,
+		modal: K,
+		mount: J,
+		mounted: ge,
+		nodes: Q.current,
+		open: B,
+		openWith: (e, t) => $(!0, e, void 0, t),
+		outsidePress: q,
+		placement: de,
+		registerContent: (e) => {
+			Q.current.content = e;
+		},
+		registerLayer: (e) => X.current?.setNode(e),
+		registerTrigger: (e) => {
+			Q.current.trigger = e;
+		},
+		scroll: fe,
+		size: oe,
+		surface: pe,
+		t: L,
+		titleId: _e ? `${R}title` : "",
+		tone: V ? F ?? "danger" : void 0,
+		triggerId: `${R}trigger`,
+		visible: Y === "open",
+		interactive: Y === "entering" || Y === "open"
+	}), [
+		xe,
+		R,
+		r,
+		B,
+		W,
+		ye,
+		f,
+		V,
+		b,
+		S,
+		ge,
+		$,
+		ue,
+		le,
+		se,
+		G,
+		ce,
+		K,
+		J,
+		q,
+		de,
+		fe,
+		oe,
+		Se,
+		pe,
+		Y,
+		L,
+		_e,
+		F
+	]);
+	return /* @__PURE__ */ _(E.Provider, {
+		value: Ce,
+		children: t
+	});
+}
+function k(e) {
+	return /* @__PURE__ */ _(O, {
+		...e,
+		member: "dialog"
+	});
+}
+function A(e) {
+	return /* @__PURE__ */ _(O, {
+		...e,
+		member: "alertDialog"
+	});
+}
+//#endregion
+//#region src/dialog/dialog-parts.tsx
+function j(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+var M = typeof document > "u" ? l : f;
+function N({ children: e, className: t, onClick: n, ref: i, render: a, style: o, ...s }) {
+	let c = D(), l = r({
+		...s,
+		"aria-controls": c.mounted ? `${c.triggerId}-content` : void 0,
+		"aria-expanded": c.open,
+		"aria-haspopup": "dialog",
+		children: e,
+		className: t,
+		"data-part": "trigger",
+		...c.open ? { "data-open": "" } : {},
+		id: c.triggerId,
+		onClick: (e) => {
+			n?.(e), !e.defaultPrevented && c.openWith(j(e), e);
+		},
+		ref: (e) => {
+			c.registerTrigger(e), typeof i == "function" ? i(e) : i && (i.current = e);
+		},
+		style: o,
+		type: "button"
+	});
+	return a === void 0 ? /* @__PURE__ */ _("button", { ...l }) : a(l);
+}
+function ne(e) {
+	let [t, n] = h(null);
+	return M(() => {
+		if (!e.mounted) return;
+		let t = y({
+			origin: e.nodes.trigger,
+			...e.container === void 0 ? {} : { container: e.container }
+		});
+		return n(t.container), () => {
+			n(null), t.release();
+		};
+	}, [
+		e.container,
+		e.mounted,
+		e.nodes
+	]), t;
+}
+function re({ children: e, className: t, ref: n, render: a, style: o, ...s }) {
+	let c = D(), u = ne(c), [d, f] = h(null), p = `${c.triggerId}-content`, g = c.titleId !== "" && s["aria-label"] === void 0, ee = c.descriptionId !== "";
+	l(() => {
+		if (c.member === "alertDialog" && d !== null && d.querySelector("[data-part=\"description\"]") === null) throw Error("AlertDialog requires a DialogDescription: the alertdialog pattern makes aria-describedby mandatory.");
+	}, [d, c.member]);
+	let y = m(c);
+	y.current = c;
+	let { back: x, escape: C, modal: w, open: T, outsidePress: E } = c, O = c.nodes.trigger;
+	l(() => {
+		if (d === null || !T) return;
+		let e = d.closest("[data-ui=\"dialog\"]");
+		if (e === null) return;
+		let t = te(e, {
+			back: w && x === "close",
+			branches: O === null ? [] : [O],
+			content: d,
+			escape: C === "close",
+			modal: w,
+			onDismiss: (e) => {
+				if (e.reason === "outsidePress" && E === "none") return e.cancel();
+				y.current.close(e.reason, void 0, e.source);
+			},
+			outsidePress: E === "close",
+			outsidePressEvent: "click"
+		}), n = y.current.initialFocus, r = y.current.finalFocus, a = i(d, {
+			contain: w,
+			initial: n === "cancel" ? () => y.current.nodes.cancel : typeof n == "object" && n ? () => n.current : n,
+			...r === void 0 ? {} : { restore: r === !1 ? !1 : () => r.current }
+		});
+		return a.enter(), () => {
+			t.destroy(), a.destroy();
+		};
+	}, [
+		x,
+		d,
+		C,
+		w,
+		T,
+		E,
+		O
+	]);
+	let k = c.fullScreen !== "never" || c.fullscreen;
+	if (l(() => {
+		if (d === null || !c.open || !k) return;
+		let e = d.closest("[data-ui=\"dialog\"]");
+		if (e === null) return;
+		let t = S(e.ownerDocument.defaultView, (t) => {
+			t === 0 ? e.style.removeProperty("--slotted-keyboard-inset") : e.style.setProperty("--slotted-keyboard-inset", `${t}px`);
+		});
+		return () => {
+			t(), e.style.removeProperty("--slotted-keyboard-inset");
+		};
+	}, [
+		d,
+		k,
+		c.open
+	]), !c.mounted || u === null) return null;
+	let A = r({
+		"data-full-screen": c.fullScreen,
+		...c.fullscreen ? { "data-fullscreen": "" } : {},
+		...c.loading ? { "data-loading": "" } : {},
+		...c.modal ? { "data-modal": "" } : {},
+		"data-mount": c.mount,
+		...c.visible ? { "data-open": "" } : {},
+		"data-outside-press": c.outsidePress,
+		"data-part": "root",
+		"data-placement": c.placement,
+		"data-scroll": c.scroll,
+		"data-size": c.size,
+		"data-surface": c.surface,
+		...c.tone === void 0 ? {} : { "data-tone": c.tone },
+		"data-ui": "dialog"
+	}), j = r({
+		...s,
+		...ee ? { "aria-describedby": c.descriptionId } : {},
+		...g ? { "aria-labelledby": c.titleId } : {},
+		...c.modal ? { "aria-modal": !0 } : {},
+		children: e,
+		className: t,
+		"data-part": "content",
+		id: p,
+		ref: (e) => {
+			f(e), c.registerContent(e), typeof n == "function" ? n(e) : n && (n.current = e);
+		},
+		role: c.member === "alertDialog" ? "alertdialog" : "dialog",
+		style: o
+	}), M = a === void 0 ? /* @__PURE__ */ _("div", { ...j }) : a(j);
+	return b(/* @__PURE__ */ v("div", {
+		...A,
+		...c.interactive ? {} : { inert: !0 },
+		ref: c.registerLayer,
+		children: [/* @__PURE__ */ _("div", {
+			"data-part": "backdrop",
+			"data-part-backdrop": ""
+		}), /* @__PURE__ */ _("div", {
+			"data-part": "viewport",
+			"data-part-viewport": "",
+			children: M
+		})]
+	}), u);
+}
+function ie({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = D(), c = r({
+		...o,
+		children: /* @__PURE__ */ v(g, { children: [e, s.fullscreenToggle ? /* @__PURE__ */ _(P, {}) : null] }),
+		className: t,
+		"data-part": "header",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ _("header", {
+		...c,
+		ref: n
+	}) : i(c);
+}
+function P() {
+	let n = D();
+	return /* @__PURE__ */ _("button", {
+		"aria-label": n.t("fullScreen"),
+		"aria-pressed": n.fullscreen,
+		"data-part": "fullscreen",
+		"data-part-fullscreen": "",
+		onClick: (e) => {
+			e.defaultPrevented || n.setFullscreen(!n.fullscreen, e.detail === 0 ? "keyboard" : "pointer", e);
+		},
+		type: "button",
+		children: /* @__PURE__ */ _(t, { children: /* @__PURE__ */ _(e, { name: n.fullscreen ? "minimize" : "maximize" }) })
+	});
+}
+function F({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = D();
+	l(() => s.announce("title", null), [s]);
+	let c = r({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "title",
+		id: s.titleId === "" ? void 0 : s.titleId,
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ _("h2", {
+		...c,
+		ref: n
+	}) : i(c);
+}
+function I({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = D();
+	l(() => s.announce("description", null), [s]);
+	let c = r({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "description",
+		id: s.descriptionId === "" ? void 0 : s.descriptionId,
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ _("p", {
+		...c,
+		ref: n
+	}) : i(c);
+}
+function L({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = D(), c = r({
+		...o,
+		...s.loading ? { "aria-busy": !0 } : {},
+		children: e,
+		className: t,
+		"data-part": "body",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ _("div", {
+		...c,
+		ref: n
+	}) : i(c);
+}
+function R({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = r({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "footer",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ _("footer", {
+		...s,
+		ref: n
+	}) : i(s);
+}
+function z(e, t, n, r) {
+	let i = D();
+	return {
+		dialog: i,
+		handleClick: (e) => {
+			n?.(e), !e.defaultPrevented && i.close(t, r, e);
+		},
+		part: e
+	};
+}
+function ae({ children: n, className: i, onClick: a, ref: o, render: s, style: c, value: l, ...u }) {
+	let { dialog: d, handleClick: f } = z("close", "dismiss", a, l);
+	if (d.member === "alertDialog") throw Error("AlertDialog has no close part: a confirmation is answered with AlertDialogCancel or AlertDialogAction, not dismissed by an ✕.");
+	let p = r({
+		"aria-label": d.t("close"),
+		...u,
+		children: n ?? /* @__PURE__ */ _(t, { children: /* @__PURE__ */ _(e, { name: "x" }) }),
+		className: i,
+		"data-part": "close",
+		onClick: f,
+		style: c,
+		type: "button"
+	});
+	return s === void 0 ? /* @__PURE__ */ _("button", {
+		...p,
+		ref: o
+	}) : s(p);
+}
+var B = {
+	accent: "circle-info",
+	secondary: "circle-info",
+	info: "circle-info",
+	success: "circle-check",
+	warning: "triangle-alert",
+	danger: "circle-alert"
+};
+function V({ children: n, className: i, ref: a, render: o, style: s, ...c }) {
+	let l = D(), u = r({
+		"aria-hidden": !0,
+		...c,
+		children: n ?? /* @__PURE__ */ _(t, { children: /* @__PURE__ */ _(e, { name: l.tone === void 0 ? "triangle-alert" : B[l.tone] }) }),
+		className: i,
+		"data-part": "icon",
+		style: s
+	});
+	return o === void 0 ? /* @__PURE__ */ _("span", {
+		...u,
+		ref: a
+	}) : o(u);
+}
+function H({ children: e, className: t, onClick: n, ref: i, render: a, style: o, value: s, ...c }) {
+	let { dialog: l, handleClick: u } = z("cancel", "dismiss", n, s ?? "cancel"), d = r({
+		...c,
+		children: e,
+		className: t,
+		"data-part": "cancel",
+		onClick: u,
+		style: o,
+		type: "button"
+	}), f = (e) => {
+		l.announce("cancel", e), typeof i == "function" ? i(e) : i && (i.current = e);
+	};
+	return a === void 0 ? /* @__PURE__ */ _("button", {
+		...d,
+		ref: f
+	}) : a({
+		...d,
+		ref: f
+	});
+}
+function U({ children: e, className: t, onClick: n, ref: i, render: a, style: o, value: s, ...c }) {
+	let { handleClick: l } = z("action", "submit", n, s ?? "confirm"), u = r({
+		...c,
+		children: e,
+		className: t,
+		"data-part": "action",
+		onClick: l,
+		style: o,
+		type: "button"
+	});
+	return a === void 0 ? /* @__PURE__ */ _("button", {
+		...u,
+		ref: i
+	}) : a(u);
+}
+//#endregion
+export { ae as a, R as c, N as d, A as f, w as g, T as h, L as i, ie as l, D as m, H as n, re as o, k as p, V as r, I as s, U as t, F as u };

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./dialog-Dmy-m_pe.js";
+import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./dialog-B6MP7GYI.js";
 export { r as AlertDialog, m as AlertDialogAction, l as AlertDialogCancel, f as AlertDialogIcon, d as Dialog, o as DialogBody, e as DialogClose, u as DialogContent, a as DialogDefaultsProvider, p as DialogDescription, t as DialogFooter, s as DialogHeader, h as DialogTitle, n as DialogTrigger, c as useDialog, i as useDialogDefaults };

package/dist/divider-ryFeK0Pi.js

@@ -0,0 +1,35 @@
+import { keyedProps as e } from "@slotted/core/selector-key";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/divider/divider.tsx
+function n({ align: n = "center", decorative: i = !1, inset: a = !1, label: o, orientation: s = "horizontal", render: c, role: l, ...u }) {
+	let d = o !== void 0, f = c === void 0 && !d, p = e({
+		...u,
+		...d && !i ? { "aria-label": o } : {},
+		...s === "vertical" && !i ? { "aria-orientation": "vertical" } : {},
+		...d ? {
+			"data-align": n,
+			"data-labelled": ""
+		} : {},
+		...a ? { "data-inset": "" } : {},
+		"data-orientation": s,
+		"data-part": "root",
+		"data-ui": "divider",
+		role: l ?? (i ? "none" : f ? void 0 : "separator")
+	});
+	return c === void 0 ? d ? /* @__PURE__ */ t("div", {
+		...p,
+		children: r(o)
+	}) : /* @__PURE__ */ t("hr", { ...p }) : c(d ? {
+		...p,
+		children: r(o)
+	} : p);
+}
+function r(e) {
+	return /* @__PURE__ */ t("span", {
+		"data-part": "label",
+		"data-part-label": "",
+		children: e
+	});
+}
+//#endregion
+export { n as t };

package/dist/divider.js

@@ -1,2 +1,2 @@
-import { t as e } from "./divider-D36Jqo0J.js";
+import { t as e } from "./divider-ryFeK0Pi.js";
 export { e as Divider };

package/dist/docs/AGENTS.snippet.md

@@ -1,5 +1,7 @@
 ## Slotted UI (@slotted/react)
 
+Paths below are relative to the directory that holds node_modules.
+
 Before writing or changing UI, read `node_modules/@slotted/react/dist/docs/index.md`, then the file of each family you use. These files match the installed version: prefer them over prior knowledge of the library.
 
 - Import components from `@slotted/react` or the family subpath that each file's Import section shows.
@@ -9,3 +11,13 @@ Before writing or changing UI, read `node_modules/@slotted/react/dist/docs/index
 - Application CSS uses `var(--slotted-*)` tokens for color, spacing and radius, inside a layer declared after the library's: `@layer slotted, app;`.
 - To render a family as another element, such as a router link or a trigger, pass `render`.
 - In CSS and tests, select a family by `[data-ui="<family>"]` and its parts by `[data-part="<part>"]`.
+
+### Tasks
+
+Read the skill before the task:
+
+- Compose or change a screen — a list, a record, a form, an overview: `node_modules/@slotted/react/dist/docs/skills/compose-screen/SKILL.md`
+- Show what a screen draws while it waits, and its empty and error states: `node_modules/@slotted/react/dist/docs/skills/waiting-states/SKILL.md`
+- Review a screen against the guidelines, or fix what a review found: `node_modules/@slotted/react/dist/docs/skills/review-screen/SKILL.md`
+- Write a component or element that no family draws: `node_modules/@slotted/react/dist/docs/skills/build-own-element/SKILL.md`
+- Change the brand colour, the scheme, the density or a control's shape: `node_modules/@slotted/react/dist/docs/skills/theme-app/SKILL.md`

package/dist/docs/alert.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -118,7 +119,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "accent",
           "appliesTo": "Alert",
           "description": "Which of the five semantic colours the message speaks in, and which mark it draws: circle-info, none for secondary, circle-check, circle-alert, circle-x"
@@ -304,6 +305,11 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid",

package/dist/docs/alert.md

@@ -45,7 +45,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | accent | Alert | Which of the five semantic colours the message speaks in, and which mark it draws: circle-info, none for secondary, circle-check, circle-alert, circle-x |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | accent | Alert | Which of the five semantic colours the message speaks in, and which mark it draws: circle-info, none for secondary, circle-check, circle-alert, circle-x |
 | `variant` | `'soft' \| 'outline' \| 'solid'` | soft | Alert | How that colour is painted. soft carries the tone’s surface and its border, outline the border alone, solid the tone’s fill and the ink the theme measures against it |
 | `reach` | `'inline' \| 'section' \| 'page'` | section | Alert | The scope the message applies to. inline is tightest and sits beside a field group; page loses its corners and its inline edges because it runs to both edges of what holds it |
 | `live` | `'off' \| 'polite' \| 'assertive'` | off | Alert | Whether the text announces itself. polite writes role="status" on the content part and assertive writes role="alert"; both imply aria-live and aria-atomic, and neither is written on the box |
@@ -71,7 +71,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `soft`, `outline`, `solid` | `soft` |
 | `reach` | `inline`, `section`, `page` | `section` |
 | `live` | `off`, `polite`, `assertive` | `off` |
@@ -89,7 +89,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-alert-actions-gap`, `--slotted-alert-border-width`, `--slotted-alert-column-gap`, `--slotted-alert-dismiss-radius`, `--slotted-alert-dismiss-size`, `--slotted-alert-font-family`, `--slotted-alert-padding-block`, `--slotted-alert-padding-inline`, `--slotted-alert-radius`, `--slotted-alert-row-gap`, `--slotted-alert-state-layer-active`, `--slotted-alert-state-layer-hover`, `--slotted-alert-text-gap`, `--slotted-alert-title-font-family`, `--slotted-alert-title-font-weight`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-alert-actions-gap`, `--slotted-alert-border-width`, `--slotted-alert-column-gap`, `--slotted-alert-dismiss-radius`, `--slotted-alert-dismiss-size`, `--slotted-alert-font-family`, `--slotted-alert-padding-block`, `--slotted-alert-padding-inline`, `--slotted-alert-radius`, `--slotted-alert-row-gap`, `--slotted-alert-state-layer-active`, `--slotted-alert-state-layer-hover`, `--slotted-alert-text-gap`, `--slotted-alert-title-font-family`, `--slotted-alert-title-font-weight`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/app-shell.examples.md

@@ -304,7 +304,7 @@ const navigation = useNavigation();
 
 ### The first thing a keyboard meets
 
-Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The content region carries tabindex="-1", so the link moves the focus as well as the scroll.
+Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The link makes the content region focusable for that one focus, so it moves the focus as well as the scroll.
 
 Excerpt — not a complete module