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

package/dist/{dialog-B6MP7GYI.js → dialog-BB5MdJex.js}

@@ -1,15 +1,15 @@
-import { n as e, t } from "./icon-DjqSEQ-o.js";
-import { r as n } from "./i18n-DpW8lqJ1.js";
+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 { createPortalRoot as y } from "@slotted/core/portal";
+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 b } from "react-dom";
-import { dialogMessages as x } from "@slotted/core/i18n";
+import { createPortal as x } from "react-dom";
 import { observeKeyboardInset as S } from "@slotted/core/measure";
 //#region src/dialog/dialog-defaults.tsx
 var C = o({
@@ -53,33 +53,33 @@ function D() {
 	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,
+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(() => {
-		X.current?.sync(B);
-	}, [B]), l(() => {
-		let e = X.current;
+		Y.current?.sync(z);
+	}, [z]), l(() => {
+		let e = Y.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({
+	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
-	}), [_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);
+	}), [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 === B) return;
+		if (e === z) return;
 		let i = !1, o = a({
 			controlled: j,
-			initial: B,
+			initial: z,
 			onRequest: (e) => {
 				i = e.cancelled, k?.(e.value, {
 					get cancelled() {
@@ -94,15 +94,15 @@ function O({ back: e, children: t, container: r, defaultFullscreen: i, defaultOp
 				});
 			}
 		}).request(e, t, r);
-		i || o && ae(e);
+		i || o && oe(e);
 	}, [
-		B,
+		z,
 		k,
 		j
 	]), Se = s((e, t, n) => {
-		e !== W && a({
+		e !== U && a({
 			controlled: g,
-			initial: W,
+			initial: U,
 			onRequest: (e) => {
 				O?.(e.value, {
 					get cancelled() {
@@ -115,93 +115,93 @@ function O({ back: e, children: t, container: r, defaultFullscreen: i, defaultOp
 					value: e.value
 				});
 			}
-		}).request(e, t, n) && U(e);
+		}).request(e, t, n) && H(e);
 	}, [
-		W,
+		U,
 		g,
 		O
 	]);
-	d(ne, () => ({
+	d(N, () => ({
 		open: () => $(!0, "programmatic", void 0, void 0),
 		close: (e) => $(!1, "programmatic", e, void 0),
-		focus: () => Q.current.content?.focus(),
+		focus: () => Z.current.content?.focus(),
 		get content() {
-			return Q.current.content;
+			return Z.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,
+		descriptionId: ye ? `${L}description` : "",
+		back: de,
+		escape: ue,
 		finalFocus: f,
-		fullScreen: se,
-		fullscreen: W,
-		fullscreenToggle: G,
-		initialFocus: ce,
+		fullScreen: ce,
+		fullscreen: U,
+		fullscreenToggle: W,
+		initialFocus: le,
 		setFullscreen: Se,
-		loading: b === !0,
+		loading: x === !0,
 		member: S,
-		modal: K,
-		mount: J,
-		mounted: ge,
-		nodes: Q.current,
-		open: B,
+		modal: G,
+		mount: q,
+		mounted: _e,
+		nodes: Z.current,
+		open: z,
 		openWith: (e, t) => $(!0, e, void 0, t),
-		outsidePress: q,
-		placement: de,
+		outsidePress: K,
+		placement: fe,
 		registerContent: (e) => {
-			Q.current.content = e;
+			Z.current.content = e;
 		},
-		registerLayer: (e) => X.current?.setNode(e),
+		registerLayer: (e) => Y.current?.setNode(e),
 		registerTrigger: (e) => {
-			Q.current.trigger = e;
+			Z.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"
+		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,
-		R,
+		L,
 		r,
-		B,
-		W,
+		z,
+		U,
 		ye,
 		f,
-		V,
-		b,
+		B,
+		x,
 		S,
-		ge,
+		_e,
 		$,
+		de,
 		ue,
+		ce,
+		W,
 		le,
-		se,
 		G,
-		ce,
-		K,
-		J,
 		q,
-		de,
+		K,
 		fe,
-		oe,
-		Se,
 		pe,
-		Y,
-		L,
-		_e,
-		F
+		se,
+		Se,
+		me,
+		J,
+		I,
+		Q,
+		P
 	]);
 	return /* @__PURE__ */ _(E.Provider, {
 		value: Ce,
-		children: t
+		children: n
 	});
 }
 function k(e) {
@@ -222,7 +222,7 @@ 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 }) {
+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,
@@ -244,11 +244,11 @@ function N({ children: e, className: t, onClick: n, ref: i, render: a, style: o,
 	});
 	return a === void 0 ? /* @__PURE__ */ _("button", { ...l }) : a(l);
 }
-function ne(e) {
+function N(e) {
 	let [t, n] = h(null);
 	return M(() => {
 		if (!e.mounted) return;
-		let t = y({
+		let t = b({
 			origin: e.nodes.trigger,
 			...e.container === void 0 ? {} : { container: e.container }
 		});
@@ -262,19 +262,19 @@ function ne(e) {
 	]), 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 !== "";
+	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: x, escape: C, modal: w, open: T, outsidePress: E } = c, O = c.nodes.trigger;
+	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 && x === "close",
+			back: w && b === "close",
 			branches: O === null ? [] : [O],
 			content: d,
 			escape: C === "close",
@@ -294,7 +294,7 @@ function re({ children: e, className: t, ref: n, render: a, style: o, ...s }) {
 			t.destroy(), a.destroy();
 		};
 	}, [
-		x,
+		b,
 		d,
 		C,
 		w,
@@ -348,7 +348,7 @@ function re({ children: e, className: t, ref: n, render: a, style: o, ...s }) {
 		role: c.member === "alertDialog" ? "alertdialog" : "dialog",
 		style: o
 	}), M = a === void 0 ? /* @__PURE__ */ _("div", { ...j }) : a(j);
-	return b(/* @__PURE__ */ v("div", {
+	return x(/* @__PURE__ */ v("div", {
 		...A,
 		...c.interactive ? {} : { inert: !0 },
 		ref: c.registerLayer,
@@ -365,7 +365,7 @@ function re({ children: e, className: t, ref: n, render: a, style: o, ...s }) {
 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] }),
+		children: /* @__PURE__ */ v(g, { children: [e, s.fullscreenToggle ? /* @__PURE__ */ _(ae, {}) : null] }),
 		className: t,
 		"data-part": "header",
 		style: a
@@ -375,21 +375,21 @@ function ie({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		ref: n
 	}) : i(c);
 }
-function P() {
-	let n = D();
+function ae() {
+	let e = D();
 	return /* @__PURE__ */ _("button", {
-		"aria-label": n.t("fullScreen"),
-		"aria-pressed": n.fullscreen,
+		"aria-label": e.t("fullScreen"),
+		"aria-pressed": e.fullscreen,
 		"data-part": "fullscreen",
 		"data-part-fullscreen": "",
-		onClick: (e) => {
-			e.defaultPrevented || n.setFullscreen(!n.fullscreen, e.detail === 0 ? "keyboard" : "pointer", e);
+		onClick: (t) => {
+			t.defaultPrevented || e.setFullscreen(!e.fullscreen, t.detail === 0 ? "keyboard" : "pointer", t);
 		},
 		type: "button",
-		children: /* @__PURE__ */ _(t, { children: /* @__PURE__ */ _(e, { name: n.fullscreen ? "minimize" : "maximize" }) })
+		children: /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: e.fullscreen ? "minimize" : "maximize" }) })
 	});
 }
-function F({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+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({
@@ -405,7 +405,7 @@ function F({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		ref: n
 	}) : i(c);
 }
-function I({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+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({
@@ -421,7 +421,7 @@ function I({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		ref: n
 	}) : i(c);
 }
-function L({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+function I({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 	let s = D(), c = r({
 		...o,
 		...s.loading ? { "aria-busy": !0 } : {},
@@ -435,7 +435,7 @@ function L({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		ref: n
 	}) : i(c);
 }
-function R({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+function L({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 	let s = r({
 		...o,
 		children: e,
@@ -448,7 +448,7 @@ function R({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		ref: n
 	}) : i(s);
 }
-function z(e, t, n, r) {
+function R(e, t, n, r) {
 	let i = D();
 	return {
 		dialog: i,
@@ -458,13 +458,13 @@ function z(e, t, n, r) {
 		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);
+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: n ?? /* @__PURE__ */ _(t, { children: /* @__PURE__ */ _(e, { name: "x" }) }),
+		children: e ?? /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: "x" }) }),
 		className: i,
 		"data-part": "close",
 		onClick: f,
@@ -476,7 +476,7 @@ function ae({ children: n, className: i, onClick: a, ref: o, render: s, style: c
 		ref: o
 	}) : s(p);
 }
-var B = {
+var z = {
 	accent: "circle-info",
 	secondary: "circle-info",
 	info: "circle-info",
@@ -484,11 +484,11 @@ var B = {
 	warning: "triangle-alert",
 	danger: "circle-alert"
 };
-function V({ children: n, className: i, ref: a, render: o, style: s, ...c }) {
+function B({ children: e, 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] }) }),
+		children: e ?? /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: l.tone === void 0 ? "triangle-alert" : z[l.tone] }) }),
 		className: i,
 		"data-part": "icon",
 		style: s
@@ -498,8 +498,8 @@ function V({ children: n, className: i, ref: a, render: o, style: s, ...c }) {
 		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({
+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,
@@ -518,8 +518,8 @@ function H({ children: e, className: t, onClick: n, ref: i, render: a, style: o,
 		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({
+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,
@@ -534,4 +534,4 @@ function U({ children: e, className: t, onClick: n, ref: i, render: a, style: o,
 	}) : 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 };
+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-B6MP7GYI.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/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
 

package/dist/docs/calendar.md

@@ -87,8 +87,8 @@ Excerpt — not a complete module
 | `selectionMode` | `single`, `range`, `multiple` | `single` |
 | `view` | `day`, `month`, `year` | `day` |
 | `calendar` | `gregory` | `gregory` |
-| `weekNumbers` | `off`, `on` | `false` |
-| `fixedWeeks` | `off`, `on` | `false` |
+| `weekNumbers` | `off`, `on` | false |
+| `fixedWeeks` | `off`, `on` | false |
 | `outsideDays` | `shown`, `selectable`, `hidden` | `shown` |
 
 ## Rules

package/dist/docs/command-palette.json

@@ -597,6 +597,7 @@
     "--slotted-border-subtle",
     "--slotted-border-width-thin",
     "--slotted-command-palette-active",
+    "--slotted-command-palette-backdrop-filter",
     "--slotted-command-palette-border-color",
     "--slotted-command-palette-footer-surface",
     "--slotted-command-palette-highlight",

package/dist/docs/command-palette.md

@@ -130,7 +130,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-command-palette-active`, `--slotted-command-palette-border-color`, `--slotted-command-palette-footer-surface`, `--slotted-command-palette-highlight`, `--slotted-command-palette-highlight-ring`, `--slotted-command-palette-hover`, `--slotted-command-palette-item-radius`, `--slotted-command-palette-list-max-block-size`, `--slotted-command-palette-list-padding`, `--slotted-command-palette-measure`, `--slotted-command-palette-page-surface`, `--slotted-command-palette-placeholder-fade`, `--slotted-command-palette-radius`, `--slotted-command-palette-separator-color`, `--slotted-command-palette-shadow`, `--slotted-command-palette-surface`, `--slotted-command-palette-text`, `--slotted-command-palette-text-muted`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-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-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-lg`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-command-palette-active`, `--slotted-command-palette-backdrop-filter`, `--slotted-command-palette-border-color`, `--slotted-command-palette-footer-surface`, `--slotted-command-palette-highlight`, `--slotted-command-palette-highlight-ring`, `--slotted-command-palette-hover`, `--slotted-command-palette-item-radius`, `--slotted-command-palette-list-max-block-size`, `--slotted-command-palette-list-padding`, `--slotted-command-palette-measure`, `--slotted-command-palette-page-surface`, `--slotted-command-palette-placeholder-fade`, `--slotted-command-palette-radius`, `--slotted-command-palette-separator-color`, `--slotted-command-palette-shadow`, `--slotted-command-palette-surface`, `--slotted-command-palette-text`, `--slotted-command-palette-text-muted`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-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-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-lg`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/data-grid.examples.md

@@ -788,6 +788,7 @@ const COLUMNS: GridColumn<Shipment>[] = [
 ];
 
 const ROWS = shipments(12);
+const DISABLED = ['SH-3305'];
 
 export default function DataGridSelection() {
   const [value, setValue] = useState<string | readonly string[] | null>(['SH-3302', 'SH-3303']);
@@ -799,7 +800,7 @@ export default function DataGridSelection() {
       columns={COLUMNS}
       rowKey="id"
       rows={ROWS}
-      disabledKeys={['SH-3305']}
+      disabledKeys={DISABLED}
       footer={
         <Text size="sm" tone="muted">
           {count} selected
@@ -2328,6 +2329,11 @@ A renderer draws anything: an avatar beside the name, a thumbnail in a custom co
 Excerpt — not a complete module
 
 ```tsx
+const MEDIA_COLUMNS: DataGridColumn<Shipment>[] = [
+  ...columns,
+  { id: 'photo', label: 'Cargo', kind: 'custom', sortable: false },
+];
+
 <DataGrid
   cellRenderers={{
     customer: ({ row }) => (
@@ -2338,7 +2344,7 @@ Excerpt — not a complete module
     ),
     photo: ({ row }) => <Image alt="" radius="sm" ratio="landscape" src={row.photo} />,
   }}
-  columns={[...columns, { id: 'photo', label: 'Cargo', kind: 'custom', sortable: false }]}
+  columns={MEDIA_COLUMNS}
   rowHeight={56}
 />;
 ```