@slotted/react 0.1.0-beta.6 → 0.1.0-beta.8

package/dist/{dialog-BHYDDj1S.js → dialog-Ds0LJWE_.js}

@@ -4,13 +4,14 @@ import { createFocusScope as r } from "@slotted/core/focus";
 import { createControllable as i } from "@slotted/core/state";
 import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useImperativeHandle as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { createPresence as ee } from "@slotted/core/presence";
-import { createPortalRoot as v } from "@slotted/core/portal";
-import { createDismissableLayer as y } from "@slotted/core/dismissable-layer";
-import { createPortal as b } from "react-dom";
-import { dialogMessages as te } from "@slotted/core/i18n";
+import { createPresence as v } from "@slotted/core/presence";
+import { createPortalRoot as y } from "@slotted/core/portal";
+import { createDismissableLayer as b } from "@slotted/core/dismissable-layer";
+import { createPortal as x } from "react-dom";
+import { dialogMessages as S } from "@slotted/core/i18n";
+import { observeKeyboardInset as C } from "@slotted/core/measure";
 //#region src/dialog/dialog-defaults.tsx
-var x = a({
+var w = a({
 	back: "close",
 	escape: "close",
 	fullScreen: "narrow",
@@ -22,12 +23,12 @@ var x = a({
 	size: "md",
 	surface: "panel"
 });
-function S() {
-	return s(x);
+function T() {
+	return s(w);
 }
-function C({ children: e, ...t }) {
-	let n = S();
-	return /* @__PURE__ */ g(x.Provider, {
+function ee({ children: e, ...t }) {
+	let n = T();
+	return /* @__PURE__ */ g(w.Provider, {
 		value: {
 			back: t.back ?? n.back,
 			escape: t.escape ?? n.escape,
@@ -45,38 +46,38 @@ function C({ children: e, ...t }) {
 }
 //#endregion
 //#region src/dialog/dialog.tsx
-var w = a(void 0);
-function T() {
-	let e = s(w);
+var E = a(void 0);
+function D() {
+	let e = s(E);
 	if (e === void 0) throw Error("Every dialog part must be rendered inside Dialog or AlertDialog.");
 	return e;
 }
-function E({ back: e, children: t, container: r, defaultFullscreen: a, defaultOpen: s, escape: d, finalFocus: h, fullscreen: _, fullScreen: v, fullscreenToggle: y, initialFocus: b, loading: x, member: C, messages: T, modal: E, mount: D, onFullscreenChange: O, onOpenChange: k, open: A, outsidePress: j, placement: M, ref: ne, scroll: re, size: ie, surface: ae, tone: N }) {
-	let P = S(), F = n(te, T), I = l(), [L, R] = m(s ?? !1), z = A ?? L, B = C === "alertDialog", [V, oe] = m(a ?? !1), H = !B && (_ ?? V), U = !B && y === !0, W = B ? !0 : E ?? P.modal, G = B ? "none" : j ?? P.outsidePress, K = D ?? P.mount, q = ie ?? (B ? "sm" : P.size), J = v ?? (B ? "never" : P.fullScreen), se = b ?? (B ? "cancel" : "first"), ce = d ?? P.escape, le = e ?? P.back, ue = M ?? P.placement, de = re ?? P.scroll, fe = ae ?? P.surface, [Y, pe] = m(z ? "open" : "unmounted"), X = p(null);
-	X.current === null && (X.current = ee({
-		present: z,
-		onStatusChange: pe
+function O({ back: e, children: t, container: r, defaultFullscreen: a, defaultOpen: s, escape: d, finalFocus: h, fullscreen: _, fullScreen: y, fullscreenToggle: b, initialFocus: x, loading: C, member: w, messages: ee, modal: D, mount: O, onFullscreenChange: k, onOpenChange: A, open: j, outsidePress: M, placement: te, ref: ne, scroll: re, size: ie, surface: N, tone: P }) {
+	let F = T(), I = n(S, ee), L = l(), [R, z] = m(s ?? !1), B = j ?? R, V = w === "alertDialog", [H, U] = m(a ?? !1), W = !V && (_ ?? H), G = !V && b === !0, K = V ? !0 : D ?? F.modal, q = V ? "none" : M ?? F.outsidePress, J = O ?? F.mount, Y = ie ?? (V ? "sm" : F.size), ae = y ?? (V ? "never" : F.fullScreen), oe = x ?? (V ? "cancel" : "first"), se = d ?? F.escape, ce = e ?? F.back, le = te ?? F.placement, ue = re ?? F.scroll, de = N ?? F.surface, [X, fe] = m(B ? "open" : "unmounted"), Z = p(null);
+	Z.current === null && (Z.current = v({
+		present: B,
+		onStatusChange: fe
 	})), c(() => {
-		X.current?.sync(z);
-	}, [z]), c(() => {
-		let e = X.current;
-		return () => e?.destroy();
+		Z.current?.sync(B);
+	}, [B]), c(() => {
+		let e = Z.current;
+		return () => e?.stop();
 	}, []);
-	let me = p(z);
-	z && (me.current = !0);
-	let he = K === "eager" ? !0 : K === "lazy" ? me.current : Y !== "unmounted", Z = p({
+	let pe = p(B);
+	B && (pe.current = !0);
+	let me = J === "eager" ? !0 : J === "lazy" ? pe.current : X !== "unmounted", Q = p({
 		cancel: null,
 		content: null,
 		trigger: null
-	}), [ge, _e] = m(!1), [Q, ve] = m(!1), ye = o((e, t) => (e === "cancel" && (Z.current.cancel = t), e === "title" && _e(!0), e === "description" && ve(!0), () => {
-		e === "cancel" && (Z.current.cancel = null), e === "title" && _e(!1), e === "description" && ve(!1);
+	}), [he, ge] = m(!1), [_e, ve] = m(!1), ye = o((e, t) => (e === "cancel" && (Q.current.cancel = t), e === "title" && ge(!0), e === "description" && ve(!0), () => {
+		e === "cancel" && (Q.current.cancel = null), e === "title" && ge(!1), e === "description" && ve(!1);
 	}), []), $ = o((e, t, n, r) => {
-		if (e === z) return;
+		if (e === B) return;
 		let a = !1, o = i({
-			controlled: A,
-			initial: z,
+			controlled: j,
+			initial: B,
 			onRequest: (e) => {
-				a = e.cancelled, k?.(e.value, {
+				a = e.cancelled, A?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -89,17 +90,17 @@ function E({ back: e, children: t, container: r, defaultFullscreen: a, defaultOp
 				});
 			}
 		}).request(e, t, r);
-		a || o && R(e);
+		a || o && z(e);
 	}, [
-		z,
-		k,
-		A
+		B,
+		A,
+		j
 	]), be = o((e, t, n) => {
-		e !== H && i({
+		e !== W && i({
 			controlled: _,
-			initial: H,
+			initial: W,
 			onRequest: (e) => {
-				O?.(e.value, {
+				k?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -110,115 +111,115 @@ function E({ back: e, children: t, container: r, defaultFullscreen: a, defaultOp
 					value: e.value
 				});
 			}
-		}).request(e, t, n) && oe(e);
+		}).request(e, t, n) && U(e);
 	}, [
-		H,
+		W,
 		_,
-		O
+		k
 	]);
 	u(ne, () => ({
 		open: () => $(!0, "programmatic", void 0, void 0),
 		close: (e) => $(!1, "programmatic", e, void 0),
-		focus: () => Z.current.content?.focus(),
+		focus: () => Q.current.content?.focus(),
 		get content() {
-			return Z.current.content;
+			return Q.current.content;
 		}
 	}), [$]);
 	let xe = f(() => ({
 		announce: ye,
 		close: (e, t, n) => $(!1, e, t, n),
 		container: r,
-		descriptionId: Q ? `${I}description` : "",
-		back: le,
-		escape: ce,
+		descriptionId: _e ? `${L}description` : "",
+		back: ce,
+		escape: se,
 		finalFocus: h,
-		fullScreen: J,
-		fullscreen: H,
-		fullscreenToggle: U,
-		initialFocus: se,
+		fullScreen: ae,
+		fullscreen: W,
+		fullscreenToggle: G,
+		initialFocus: oe,
 		setFullscreen: be,
-		loading: x === !0,
-		member: C,
-		modal: W,
-		mount: K,
-		mounted: he,
-		nodes: Z.current,
-		open: z,
+		loading: C === !0,
+		member: w,
+		modal: K,
+		mount: J,
+		mounted: me,
+		nodes: Q.current,
+		open: B,
 		openWith: (e, t) => $(!0, e, void 0, t),
-		outsidePress: G,
-		placement: ue,
+		outsidePress: q,
+		placement: le,
 		registerContent: (e) => {
-			Z.current.content = e;
+			Q.current.content = e;
 		},
-		registerLayer: (e) => X.current?.setNode(e),
+		registerLayer: (e) => Z.current?.setNode(e),
 		registerTrigger: (e) => {
-			Z.current.trigger = e;
+			Q.current.trigger = e;
 		},
-		scroll: de,
-		size: q,
-		surface: fe,
-		t: F,
-		titleId: ge ? `${I}title` : "",
-		tone: B ? N ?? "danger" : void 0,
-		triggerId: `${I}trigger`,
-		visible: Y === "open",
-		interactive: Y === "entering" || Y === "open"
+		scroll: ue,
+		size: Y,
+		surface: de,
+		t: I,
+		titleId: he ? `${L}title` : "",
+		tone: V ? P ?? "danger" : void 0,
+		triggerId: `${L}trigger`,
+		visible: X === "open",
+		interactive: X === "entering" || X === "open"
 	}), [
 		ye,
-		I,
+		L,
 		r,
-		z,
-		H,
-		Q,
-		h,
 		B,
-		x,
+		W,
+		_e,
+		h,
+		V,
 		C,
-		he,
+		w,
+		me,
 		$,
-		le,
 		ce,
-		J,
-		U,
 		se,
-		W,
-		K,
+		ae,
 		G,
-		ue,
-		de,
+		oe,
+		K,
+		J,
 		q,
-		be,
-		fe,
+		le,
+		ue,
 		Y,
-		F,
-		ge,
-		N
+		be,
+		de,
+		X,
+		I,
+		he,
+		P
 	]);
-	return /* @__PURE__ */ g(w.Provider, {
+	return /* @__PURE__ */ g(E.Provider, {
 		value: xe,
 		children: t
 	});
 }
-function D(e) {
-	return /* @__PURE__ */ g(E, {
+function k(e) {
+	return /* @__PURE__ */ g(O, {
 		...e,
 		member: "dialog"
 	});
 }
-function O(e) {
-	return /* @__PURE__ */ g(E, {
+function A(e) {
+	return /* @__PURE__ */ g(O, {
 		...e,
 		member: "alertDialog"
 	});
 }
 //#endregion
 //#region src/dialog/dialog-parts.tsx
-function k(e) {
+function j(e) {
 	return e.detail === 0 ? "keyboard" : "pointer";
 }
-var A = typeof document > "u" ? c : d;
-function j({ children: e, className: t, onClick: n, ref: r, render: i, style: a, ...o }) {
-	let s = T(), c = {
+var M = typeof document > "u" ? c : d;
+function te({ children: e, className: t, onClick: n, ref: r, render: i, style: a, ...o }) {
+	let s = D(), c = {
 		...o,
 		"aria-controls": s.mounted ? `${s.triggerId}-content` : void 0,
 		"aria-expanded": s.open,
@@ -229,7 +230,7 @@ function j({ children: e, className: t, onClick: n, ref: r, render: i, style: a,
 		...s.open ? { "data-open": "" } : {},
 		id: s.triggerId,
 		onClick: (e) => {
-			n?.(e), !e.defaultPrevented && s.openWith(k(e), e);
+			n?.(e), !e.defaultPrevented && s.openWith(j(e), e);
 		},
 		ref: (e) => {
 			s.registerTrigger(e), typeof r == "function" ? r(e) : r && (r.current = e);
@@ -239,11 +240,11 @@ function j({ children: e, className: t, onClick: n, ref: r, render: i, style: a,
 	};
 	return i === void 0 ? /* @__PURE__ */ g("button", { ...c }) : i(c);
 }
-function M(e) {
+function ne(e) {
 	let [t, n] = m(null);
-	return A(() => {
+	return M(() => {
 		if (!e.mounted) return;
-		let t = v({
+		let t = y({
 			origin: e.nodes.trigger,
 			...e.container === void 0 ? {} : { container: e.container }
 		});
@@ -256,15 +257,15 @@ function M(e) {
 		e.nodes
 	]), t;
 }
-function ne({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
-	let s = T(), l = M(s), [u, d] = m(null), f = `${s.triggerId}-content`, p = s.titleId !== "" && o["aria-label"] === void 0, h = s.descriptionId !== "";
-	if (c(() => {
+function re({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
+	let s = D(), l = ne(s), [u, d] = m(null), f = `${s.triggerId}-content`, p = s.titleId !== "" && o["aria-label"] === void 0, h = s.descriptionId !== "";
+	c(() => {
 		if (s.member === "alertDialog" && u !== null && u.querySelector("[data-part=\"description\"]") === null) throw Error("AlertDialog requires a DialogDescription: the alertdialog pattern makes aria-describedby mandatory.");
 	}, [u, s.member]), c(() => {
 		if (u === null || !s.open) return;
 		let e = u.closest("[data-ui=\"dialog\"]");
 		if (e === null) return;
-		let t = s.nodes.trigger === null ? [] : [s.nodes.trigger], n = y(e, {
+		let t = s.nodes.trigger === null ? [] : [s.nodes.trigger], n = b(e, {
 			back: s.modal && s.back === "close",
 			branches: t,
 			content: u,
@@ -284,8 +285,24 @@ function ne({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		return o.enter(), () => {
 			n.destroy(), o.destroy();
 		};
-	}, [u, s]), !s.mounted || l === null) return null;
-	let ee = {
+	}, [u, s]);
+	let v = s.fullScreen !== "never" || s.fullscreen;
+	if (c(() => {
+		if (u === null || !s.open || !v) return;
+		let e = u.closest("[data-ui=\"dialog\"]");
+		if (e === null) return;
+		let t = C(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");
+		};
+	}, [
+		u,
+		v,
+		s.open
+	]), !s.mounted || l === null) return null;
+	let y = {
 		"data-full-screen": s.fullScreen,
 		...s.fullscreen ? { "data-fullscreen": "" } : {},
 		...s.loading ? { "data-loading": "" } : {},
@@ -300,7 +317,7 @@ function ne({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		"data-surface": s.surface,
 		...s.tone === void 0 ? {} : { "data-tone": s.tone },
 		"data-ui": "dialog"
-	}, v = {
+	}, S = {
 		...o,
 		...h ? { "aria-describedby": s.descriptionId } : {},
 		...p ? { "aria-labelledby": s.titleId } : {},
@@ -314,21 +331,21 @@ function ne({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		},
 		role: s.member === "alertDialog" ? "alertdialog" : "dialog",
 		style: a
-	}, te = i === void 0 ? /* @__PURE__ */ g("div", { ...v }) : i(v);
-	return b(/* @__PURE__ */ _("div", {
-		...ee,
+	}, w = i === void 0 ? /* @__PURE__ */ g("div", { ...S }) : i(S);
+	return x(/* @__PURE__ */ _("div", {
+		...y,
 		...s.interactive ? {} : { inert: !0 },
 		ref: s.registerLayer,
 		children: [/* @__PURE__ */ g("div", { "data-part": "backdrop" }), /* @__PURE__ */ g("div", {
 			"data-part": "viewport",
-			children: te
+			children: w
 		})]
 	}), l);
 }
-function re({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = T(), s = {
+function ie({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = D(), s = {
 		...a,
-		children: /* @__PURE__ */ _(h, { children: [e, o.fullscreenToggle ? /* @__PURE__ */ g(ie, {}) : null] }),
+		children: /* @__PURE__ */ _(h, { children: [e, o.fullscreenToggle ? /* @__PURE__ */ g(N, {}) : null] }),
 		className: t,
 		"data-part": "header",
 		style: i
@@ -338,8 +355,8 @@ function re({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		ref: n
 	}) : r(s);
 }
-function ie() {
-	let n = T();
+function N() {
+	let n = D();
 	return /* @__PURE__ */ g("button", {
 		"aria-label": n.t("fullScreen"),
 		"aria-pressed": n.fullscreen,
@@ -351,8 +368,8 @@ function ie() {
 		children: /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: n.fullscreen ? "minimize" : "maximize" }) })
 	});
 }
-function ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = T();
+function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = D();
 	c(() => o.announce("title", null), [o]);
 	let s = {
 		...a,
@@ -367,8 +384,8 @@ function ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		ref: n
 	}) : r(s);
 }
-function N({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = T();
+function F({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = D();
 	c(() => o.announce("description", null), [o]);
 	let s = {
 		...a,
@@ -383,8 +400,8 @@ function N({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		ref: n
 	}) : r(s);
 }
-function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = T(), s = {
+function I({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = D(), s = {
 		...a,
 		...o.loading ? { "aria-busy": !0 } : {},
 		children: e,
@@ -397,7 +414,7 @@ function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		ref: n
 	}) : r(s);
 }
-function F({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function L({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let o = {
 		...a,
 		children: e,
@@ -410,8 +427,8 @@ function F({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		ref: n
 	}) : r(o);
 }
-function I(e, t, n, r) {
-	let i = T();
+function R(e, t, n, r) {
+	let i = D();
 	return {
 		dialog: i,
 		handleClick: (e) => {
@@ -420,8 +437,8 @@ function I(e, t, n, r) {
 		part: e
 	};
 }
-function L({ children: n, className: r, onClick: i, ref: a, render: o, style: s, value: c, ...l }) {
-	let { dialog: u, handleClick: d } = I("close", "dismiss", i, c);
+function z({ children: n, className: r, onClick: i, ref: a, render: o, style: s, value: c, ...l }) {
+	let { dialog: u, handleClick: d } = R("close", "dismiss", i, c);
 	if (u.member === "alertDialog") throw Error("AlertDialog has no close part: a confirmation is answered with AlertDialogCancel or AlertDialogAction, not dismissed by an ✕.");
 	let f = {
 		"aria-label": u.t("close"),
@@ -438,18 +455,18 @@ function L({ children: n, className: r, onClick: i, ref: a, render: o, style: s,
 		ref: a
 	}) : o(f);
 }
-var R = {
+var B = {
 	accent: "circle-info",
 	secondary: "circle-info",
 	success: "circle-check",
 	warning: "triangle-alert",
 	danger: "circle-alert"
 };
-function z({ children: n, className: r, ref: i, render: a, style: o, ...s }) {
-	let c = T(), l = {
+function V({ children: n, className: r, ref: i, render: a, style: o, ...s }) {
+	let c = D(), l = {
 		"aria-hidden": !0,
 		...s,
-		children: n ?? /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: c.tone === void 0 ? "triangle-alert" : R[c.tone] }) }),
+		children: n ?? /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: c.tone === void 0 ? "triangle-alert" : B[c.tone] }) }),
 		className: r,
 		"data-part": "icon",
 		style: o
@@ -459,8 +476,8 @@ function z({ children: n, className: r, ref: i, render: a, style: o, ...s }) {
 		ref: i
 	}) : a(l);
 }
-function B({ children: e, className: t, onClick: n, ref: r, render: i, style: a, value: o, ...s }) {
-	let { dialog: c, handleClick: l } = I("cancel", "dismiss", n, o ?? "cancel"), u = {
+function H({ children: e, className: t, onClick: n, ref: r, render: i, style: a, value: o, ...s }) {
+	let { dialog: c, handleClick: l } = R("cancel", "dismiss", n, o ?? "cancel"), u = {
 		...s,
 		children: e,
 		className: t,
@@ -479,8 +496,8 @@ function B({ children: e, className: t, onClick: n, ref: r, render: i, style: a,
 		ref: d
 	});
 }
-function V({ children: e, className: t, onClick: n, ref: r, render: i, style: a, value: o, ...s }) {
-	let { handleClick: c } = I("action", "submit", n, o ?? "confirm"), l = {
+function U({ children: e, className: t, onClick: n, ref: r, render: i, style: a, value: o, ...s }) {
+	let { handleClick: c } = R("action", "submit", n, o ?? "confirm"), l = {
 		...s,
 		children: e,
 		className: t,
@@ -495,4 +512,4 @@ function V({ children: e, className: t, onClick: n, ref: r, render: i, style: a,
 	}) : i(l);
 }
 //#endregion
-export { L as a, F as c, j as d, O as f, S as g, C as h, P as i, re as l, T as m, B as n, ne as o, D as p, z as r, N as s, V as t, ae as u };
+export { z as a, L as c, te as d, A as f, T as g, ee as h, I as i, ie as l, D as m, H as n, re as o, k as p, V as r, F as s, U 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-BHYDDj1S.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-Ds0LJWE_.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/calendar.json

@@ -114,7 +114,7 @@
           "part": "previous",
           "element": "button",
           "required": true,
-          "purpose": "One page back, in whichever view is showing: a month in the day view, a year in the month view, twelve years in the year view. Its chevron is the next trigger’s artwork turned, so both follow the document direction from one token."
+          "purpose": "One page back, in whichever view is showing: a month in the day view, a year in the month view, twelve years in the year view, and it is named for that step. Its chevron is the next trigger’s artwork turned, so both follow the document direction from one token."
         },
         {
           "part": "next",

package/dist/docs/menu.json

@@ -12,6 +12,10 @@
       "md",
       "lg"
     ],
+    "width": [
+      "content",
+      "anchor"
+    ],
     "side": [
       "bottom",
       "top",
@@ -84,6 +88,7 @@
       "nativeElement": "div",
       "defaults": {
         "size": "md",
+        "width": "content",
         "side": "bottom",
         "align": "start",
         "mount": "active",
@@ -309,6 +314,13 @@
           "appliesTo": "Menu",
           "description": "The width of the surface and the height of its items."
         },
+        {
+          "name": "width",
+          "type": "'content' | 'anchor'",
+          "defaultValue": "content",
+          "appliesTo": "Menu",
+          "description": "content: the surface takes its own measure; anchor: it is exactly as wide as its trigger, capped by the available width. A submenu is always content."
+        },
         {
           "name": "side",
           "type": "'top' | 'bottom' | 'inline-start' | 'inline-end' | 'left' | 'right'",

package/dist/docs/menu.md

@@ -74,6 +74,7 @@ export default function MenuBasic() {
 | `defaultValue` | `string` | — | MenuRadioGroup | The value an uncontrolled group starts with. |
 | `onValueChange` | `(value, request) => void` | — | MenuRadioGroup | Called before the chosen value changes, with pointer or keyboard as the reason. |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | Menu | The width of the surface and the height of its items. |
+| `width` | `'content' \| 'anchor'` | content | Menu | content: the surface takes its own measure; anchor: it is exactly as wide as its trigger, capped by the available width. A submenu is always content. |
 | `side` | `'top' \| 'bottom' \| 'inline-start' \| 'inline-end' \| 'left' \| 'right'` | bottom | Menu | The edge of the trigger the surface opens from. inline-start and inline-end follow the reading direction. |
 | `align` | `'start' \| 'center' \| 'end'` | start | Menu | Where the surface sits along that edge. |
 | `anchor` | `PositionerAnchor \| null` | — | Menu | What the surface is positioned against instead of the trigger, such as a table row or a point. Focus still returns to the trigger. |
@@ -130,6 +131,7 @@ export default function MenuBasic() {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
+| `width` | `content`, `anchor` | `content` |
 | `side` | `bottom`, `top`, `inline-start`, `inline-end`, `left`, `right` | `bottom` |
 | `align` | `start`, `center`, `end` | `start` |
 | `mount` | `active`, `lazy`, `eager` | `active` |

package/dist/docs/side-navigation.json

@@ -429,6 +429,7 @@
     "--slotted-app-shell-row-inset",
     "--slotted-app-shell-row-line-height",
     "--slotted-app-shell-row-mark",
+    "--slotted-app-shell-row-ring-inset",
     "--slotted-border-subtle",
     "--slotted-border-width-thin",
     "--slotted-control-font-family",

package/dist/docs/side-navigation.md

@@ -130,7 +130,7 @@ export default function SideNavigationBasic() {
 
 ## Tokens
 
-`--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-app-shell-row-ring-inset`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples