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

package/dist/detail-panel.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./detail-panel-qOJiNuzr.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./detail-panel-DimjnPI8.js";
 export { t as DetailPanel, o as DetailPanelBody, r as DetailPanelDefaultsProvider, n as DetailPanelSection, i as DetailPanelTabs, e as useDetailPanel, a as useDetailPanelDefaults };

package/dist/dialog-BB5MdJex.js

@@ -0,0 +1,537 @@
+import { r as e } from "./i18n-D7xXDd8-.js";
+import { n as t, t as n } from "./icon-DjqSEQ-o.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 { dialogMessages as y } from "@slotted/core/i18n";
+import { createPortalRoot as b } from "@slotted/core/portal";
+import { createDismissableLayer as te } from "@slotted/core/dismissable-layer";
+import { createPortal as x } from "react-dom";
+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: t, children: n, container: r, defaultFullscreen: i, defaultOpen: o, escape: c, finalFocus: f, fullscreen: g, fullScreen: v, fullscreenToggle: b, initialFocus: te, loading: x, member: S, messages: C, modal: T, mount: D, onFullscreenChange: O, onOpenChange: k, onOpenChangeComplete: A, open: j, outsidePress: M, placement: ne, ref: N, scroll: re, size: ie, surface: ae, tone: P }) {
+	let F = w(), I = e(y, C), L = u(), [R, oe] = h(o ?? !1), z = j ?? R, B = S === "alertDialog", [V, H] = h(i ?? !1), U = !B && (g ?? V), W = !B && b === !0, G = B ? !0 : T ?? F.modal, K = B ? "none" : M ?? F.outsidePress, q = D ?? F.mount, se = ie ?? (B ? "sm" : F.size), ce = v ?? (B ? "never" : F.fullScreen), le = te ?? (B ? "cancel" : "first"), ue = c ?? F.escape, de = t ?? F.back, fe = ne ?? F.placement, pe = re ?? F.scroll, me = ae ?? F.surface, [J, he] = h(z ? "entering" : "unmounted"), Y = m(null), X = m(A);
+	X.current = A, Y.current === null && (Y.current = ee({
+		onEnterComplete: () => X.current?.(!0),
+		onExitComplete: () => X.current?.(!1),
+		onStatusChange: he,
+		present: z,
+		skipInitialAnimation: !1
+	})), l(() => {
+		Y.current?.sync(z);
+	}, [z]), l(() => {
+		let e = Y.current;
+		return () => e?.stop();
+	}, []);
+	let ge = m(z);
+	z && (ge.current = !0);
+	let _e = q === "eager" ? !0 : q === "lazy" ? ge.current : J !== "unmounted", Z = m({
+		cancel: null,
+		content: null,
+		trigger: null
+	}), [Q, ve] = h(!1), [ye, be] = h(!1), xe = s((e, t) => (e === "cancel" && (Z.current.cancel = t), e === "title" && ve(!0), e === "description" && be(!0), () => {
+		e === "cancel" && (Z.current.cancel = null), e === "title" && ve(!1), e === "description" && be(!1);
+	}), []), $ = s((e, t, n, r) => {
+		if (e === z) return;
+		let i = !1, o = a({
+			controlled: j,
+			initial: z,
+			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 && oe(e);
+	}, [
+		z,
+		k,
+		j
+	]), Se = s((e, t, n) => {
+		e !== U && a({
+			controlled: g,
+			initial: U,
+			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) && H(e);
+	}, [
+		U,
+		g,
+		O
+	]);
+	d(N, () => ({
+		open: () => $(!0, "programmatic", void 0, void 0),
+		close: (e) => $(!1, "programmatic", e, void 0),
+		focus: () => Z.current.content?.focus(),
+		get content() {
+			return Z.current.content;
+		}
+	}), [$]);
+	let Ce = p(() => ({
+		announce: xe,
+		close: (e, t, n) => $(!1, e, t, n),
+		container: r,
+		descriptionId: ye ? `${L}description` : "",
+		back: de,
+		escape: ue,
+		finalFocus: f,
+		fullScreen: ce,
+		fullscreen: U,
+		fullscreenToggle: W,
+		initialFocus: le,
+		setFullscreen: Se,
+		loading: x === !0,
+		member: S,
+		modal: G,
+		mount: q,
+		mounted: _e,
+		nodes: Z.current,
+		open: z,
+		openWith: (e, t) => $(!0, e, void 0, t),
+		outsidePress: K,
+		placement: fe,
+		registerContent: (e) => {
+			Z.current.content = e;
+		},
+		registerLayer: (e) => Y.current?.setNode(e),
+		registerTrigger: (e) => {
+			Z.current.trigger = e;
+		},
+		scroll: pe,
+		size: se,
+		surface: me,
+		t: I,
+		titleId: Q ? `${L}title` : "",
+		tone: B ? P ?? "danger" : void 0,
+		triggerId: `${L}trigger`,
+		visible: J === "open",
+		interactive: J === "entering" || J === "open"
+	}), [
+		xe,
+		L,
+		r,
+		z,
+		U,
+		ye,
+		f,
+		B,
+		x,
+		S,
+		_e,
+		$,
+		de,
+		ue,
+		ce,
+		W,
+		le,
+		G,
+		q,
+		K,
+		fe,
+		pe,
+		se,
+		Se,
+		me,
+		J,
+		I,
+		Q,
+		P
+	]);
+	return /* @__PURE__ */ _(E.Provider, {
+		value: Ce,
+		children: n
+	});
+}
+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 ne({ 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 N(e) {
+	let [t, n] = h(null);
+	return M(() => {
+		if (!e.mounted) return;
+		let t = b({
+			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 = N(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: b, 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 && b === "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();
+		};
+	}, [
+		b,
+		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 x(/* @__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__ */ _(ae, {}) : null] }),
+		className: t,
+		"data-part": "header",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ _("header", {
+		...c,
+		ref: n
+	}) : i(c);
+}
+function ae() {
+	let e = D();
+	return /* @__PURE__ */ _("button", {
+		"aria-label": e.t("fullScreen"),
+		"aria-pressed": e.fullscreen,
+		"data-part": "fullscreen",
+		"data-part-fullscreen": "",
+		onClick: (t) => {
+			t.defaultPrevented || e.setFullscreen(!e.fullscreen, t.detail === 0 ? "keyboard" : "pointer", t);
+		},
+		type: "button",
+		children: /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: e.fullscreen ? "minimize" : "maximize" }) })
+	});
+}
+function P({ 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 F({ 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 I({ 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 L({ 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 R(e, t, n, r) {
+	let i = D();
+	return {
+		dialog: i,
+		handleClick: (e) => {
+			n?.(e), !e.defaultPrevented && i.close(t, r, e);
+		},
+		part: e
+	};
+}
+function oe({ children: e, className: i, onClick: a, ref: o, render: s, style: c, value: l, ...u }) {
+	let { dialog: d, handleClick: f } = R("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: e ?? /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { 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 z = {
+	accent: "circle-info",
+	secondary: "circle-info",
+	info: "circle-info",
+	success: "circle-check",
+	warning: "triangle-alert",
+	danger: "circle-alert"
+};
+function B({ children: e, className: i, ref: a, render: o, style: s, ...c }) {
+	let l = D(), u = r({
+		"aria-hidden": !0,
+		...c,
+		children: e ?? /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: l.tone === void 0 ? "triangle-alert" : z[l.tone] }) }),
+		className: i,
+		"data-part": "icon",
+		style: s
+	});
+	return o === void 0 ? /* @__PURE__ */ _("span", {
+		...u,
+		ref: a
+	}) : o(u);
+}
+function V({ children: e, className: t, onClick: n, ref: i, render: a, style: o, value: s, ...c }) {
+	let { dialog: l, handleClick: u } = R("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 H({ children: e, className: t, onClick: n, ref: i, render: a, style: o, value: s, ...c }) {
+	let { handleClick: l } = R("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 { oe as a, L as c, ne as d, A as f, w as g, T as h, I as i, ie as l, D as m, V as n, re as o, k as p, B as r, F as s, H as t, P 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-BB5MdJex.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/action-bar.json

@@ -81,7 +81,7 @@
           "part": "actions",
           "element": "div",
           "required": true,
-          "purpose": "The run that gives way, and the box the collapse measures. It carries margin-inline-start: auto, which anchors it to the bar’s end edge; below 24rem of container it becomes a full-width column with the action that confirms on top."
+          "purpose": "The run that gives way, and the box the collapse measures. It carries margin-inline-start: auto, which anchors it to the bar’s end edge; below 24rem of container, with no overflow control in the bar, it becomes a full-width column with the action that confirms on top."
         },
         {
           "part": "action",
@@ -164,7 +164,7 @@
           "type": "string | ((hidden: number) => string)",
           "defaultValue": "counted",
           "appliesTo": "ActionBarOverflow",
-          "description": "The accessible name of the control that holds what did not fit. The default counts — \"3 more actions\" — because three dots say nothing about how much is behind them"
+          "description": "The accessible name of the control that holds what did not fit. The default counts — \"3 more actions\" — because three dots say nothing about how much is behind them, in the language in force, with its plural"
         },
         {
           "name": "align, side, size",
@@ -244,7 +244,7 @@
         "There is no APG pattern for a bar of actions, and the closest official guidance is the Toolbar pattern (w3.org/WAI/ARIA/apg/patterns/toolbar/). This family departs from it deliberately: there is no roving focus, so Tab reaches every action in the order the author wrote it. The controls here are the page’s own form actions, and a reader walking a form expects to arrive at Cancel and then at Save; a composite would make the whole bar one tab stop and put Save behind an arrow key that announces nothing. The cost is written down — a bar of ten icon-only actions is ten tab stops, and that bar is the Toolbar family.",
         "The role follows the departure. ARIA 1.2 makes toolbar a subclass of group, and the subclass is what is asserted when there is focus management to declare; without it, group is what is true. The bar names itself with the consumer’s aria-label or aria-labelledby, because only the page knows which task it finishes — and a role the consumer wrote on the element survives the family’s own.",
         "The only keyboard this family owns is the overflow trigger’s, and it is the Menu family’s: Enter, Space and ArrowDown open the surface, Escape closes it and returns focus to the trigger. Focus is moved onto the trigger before the action holding it is hidden, so a reader who was on the fifth button lands on the control that now holds it rather than on the document body.",
-        "The trigger’s accessible name carries the count rather than the mark, so a reader hears “3 more actions” instead of three dots — and an application in another language replaces the sentence rather than translating an ellipsis. The count in the DOM, data-collapsed, is the same fact for a stylesheet or a test.",
+        "The trigger’s accessible name carries the count rather than the mark, so a reader hears “3 more actions” instead of three dots, in the language in force with its plural (“Mais 3 ações” in pt-BR). The count in the DOM, data-collapsed, is the same fact for a stylesheet or a test.",
         "A bar out of action is a fieldset around it: the platform disables every control inside and takes them out of the tab order with it. The family writes no data-disabled and declares no disabled state, because it does not own the capability — a container that refused interaction while its controls still looked operable is the defect the state precedence exists to prevent.",
         "A bar that is not present leaves the document once it has left the view, rather than staying mounted and hidden. Carbon’s batch bar writes aria-hidden on its root and leaves the buttons inside reachable by Tab, which puts focus in a region the screen reader announces as absent. Appearing never moves focus either: the bar is not a dialog, and taking focus from a reader who is ticking boxes is exactly the jump a selection bar must not make.",
         "Under forced colours the rule between two runs keeps its own paint, because a background flattens to Canvas and would take the boundary between a destructive action and a frequent one with it. Everything else the reader sees belongs to the controls the consumer placed, and each keeps its own states, its own focus ring and its own contrast."
@@ -393,7 +393,7 @@
     {
       "id": "stacked",
       "title": "The bar on a phone",
-      "note": "Below 24rem of container the run becomes a full-width column with the action that confirms on top, and the collapse stops running — a column has room for everything, so there is no menu. The DOM order does not change, so Tab still reads the form’s order.",
+      "note": "Below 24rem of container a bar with no overflow control becomes a full-width column with the action that confirms on top, and the collapse stops running — a column has room for everything, so there is no menu. A bar with an overflow control keeps one row: the actions without a counterpart stay and the rest fold into the menu. The DOM order does not change, so Tab still reads the form’s order.",
       "language": "tsx",
       "source": "// The breakpoint lives in the stylesheet's container query, and the\n// binding reads back the property that query raises rather than holding\n// a copy of the number.\n<ActionBar aria-label=\"Ações do pedido\" variant=\"raised\">\n  <ActionBarActions>\n    <ActionBarAction>\n      <Button variant=\"ghost\">Descartar alterações</Button>\n    </ActionBarAction>\n    <ActionBarAction>\n      <Button>Guardar alterações</Button>\n    </ActionBarAction>\n  </ActionBarActions>\n</ActionBar>;\n",
       "verdict": "excerpt"

package/dist/docs/action-bar.md

@@ -52,7 +52,7 @@ Excerpt — not a complete module
 | `onOverflowChange` | `(hidden: number) => void` | — | ActionBar | How many actions gave way, once per change. There is no controlled pair over the collapsed set: it is a measurement, and a consumer who owned it could assert that a bar fits when the layout says it does not |
 | `priority` | `'pinned' \| 'high' \| 'low' \| 'hide' \| 'always'` | low with a counterpart, pinned without | ActionBarAction | Where the action stands in the order of giving way. pinned never goes; high goes after low and hide; low is the first into the surface; hide goes first and is not offered in the surface at all; always is never in the bar. A rank that needs a counterpart and has none behaves as pinned, so a consumer error leaves the control on the bar |
 | `counterpart` | `ReactNode` | — | ActionBarAction | What the action becomes in the surface. An action that declares none is pinned — pinning is the absence of a counterpart rather than a second prop, so the two can never disagree. It is not called overflow, because that word names what a container does with more content than it has room for |
-| `label` | `string \| ((hidden: number) => string)` | counted | ActionBarOverflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them |
+| `label` | `string \| ((hidden: number) => string)` | counted | ActionBarOverflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them, in the language in force, with its plural |
 | `align, side, size` | `MenuAlign \| MenuSide \| MenuSize` | from the Menu defaults | ActionBarOverflow | Where the surface sits against the trigger, and its own measure. Everything else about the layer an application sets once with MenuDefaultsProvider |
 | `aria-label` | `string` | — | ActionBar | The name of the bar. The family writes none: only the page knows which task the bar finishes. aria-labelledby works the same way |
 | `role` | `string` | group | ActionBar | group, because there is no roving focus to declare — ARIA makes toolbar a subclass of group, and the subclass is what is asserted when there is focus management. A consumer with ten icon-only actions may write toolbar themselves and keeps it, but that consumer wants the Toolbar family |
@@ -78,7 +78,7 @@ Excerpt — not a complete module
 - There is no APG pattern for a bar of actions, and the closest official guidance is the Toolbar pattern (w3.org/WAI/ARIA/apg/patterns/toolbar/). This family departs from it deliberately: there is no roving focus, so Tab reaches every action in the order the author wrote it. The controls here are the page’s own form actions, and a reader walking a form expects to arrive at Cancel and then at Save; a composite would make the whole bar one tab stop and put Save behind an arrow key that announces nothing. The cost is written down — a bar of ten icon-only actions is ten tab stops, and that bar is the Toolbar family.
 - The role follows the departure. ARIA 1.2 makes toolbar a subclass of group, and the subclass is what is asserted when there is focus management to declare; without it, group is what is true. The bar names itself with the consumer’s aria-label or aria-labelledby, because only the page knows which task it finishes — and a role the consumer wrote on the element survives the family’s own.
 - The only keyboard this family owns is the overflow trigger’s, and it is the Menu family’s: Enter, Space and ArrowDown open the surface, Escape closes it and returns focus to the trigger. Focus is moved onto the trigger before the action holding it is hidden, so a reader who was on the fifth button lands on the control that now holds it rather than on the document body.
-- The trigger’s accessible name carries the count rather than the mark, so a reader hears “3 more actions” instead of three dots — and an application in another language replaces the sentence rather than translating an ellipsis. The count in the DOM, data-collapsed, is the same fact for a stylesheet or a test.
+- The trigger’s accessible name carries the count rather than the mark, so a reader hears “3 more actions” instead of three dots, in the language in force with its plural (“Mais 3 ações” in pt-BR). The count in the DOM, data-collapsed, is the same fact for a stylesheet or a test.
 - A bar out of action is a fieldset around it: the platform disables every control inside and takes them out of the tab order with it. The family writes no data-disabled and declares no disabled state, because it does not own the capability — a container that refused interaction while its controls still looked operable is the defect the state precedence exists to prevent.
 - A bar that is not present leaves the document once it has left the view, rather than staying mounted and hidden. Carbon’s batch bar writes aria-hidden on its root and leaves the buttons inside reachable by Tab, which puts focus in a region the screen reader announces as absent. Appearing never moves focus either: the bar is not a dialog, and taking focus from a reader who is ticking boxes is exactly the jump a selection bar must not make.
 - Under forced colours the rule between two runs keeps its own paint, because a background flattens to Canvas and would take the boundary between a destructive action and a frequent one with it. Everything else the reader sees belongs to the controls the consumer placed, and each keeps its own states, its own focus ring and its own contrast.
@@ -280,7 +280,7 @@ Excerpt — not a complete module
 
 ### The bar on a phone
 
-Below 24rem of container the run becomes a full-width column with the action that confirms on top, and the collapse stops running — a column has room for everything, so there is no menu. The DOM order does not change, so Tab still reads the form’s order.
+Below 24rem of container a bar with no overflow control becomes a full-width column with the action that confirms on top, and the collapse stops running — a column has room for everything, so there is no menu. A bar with an overflow control keeps one row: the actions without a counterpart stay and the rest fold into the menu. The DOM order does not change, so Tab still reads the form’s order.
 
 Excerpt — not a complete module