@slotted/react 0.1.0-beta.2 → 0.1.0-beta.3

package/dist/datetime-range-picker.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./datetime-range-picker-ClnEleth.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./datetime-range-picker-IqOFJtdW.js";
 export { n as DATETIME_RANGE_PICKER_MAX_OPTIONS, e as DATETIME_RANGE_PICKER_MONTHS, a as DATETIME_RANGE_PICKER_STEP, c as DateTimeRangePicker, s as DateTimeRangePickerDefaultsProvider, i as DateTimeRangePickerPreset, t as dateTimeRangePickerLengthLabel, o as isSameDateTimeRange, r as useDateTimeRangePickerDefaults };

package/dist/{dialog-Dmy-m_pe.js → dialog-BHYDDj1S.js}

@@ -1,16 +1,16 @@
-import { t as e } from "./react-dom-DzrKNxo6.js";
-import { n as t, t as n } from "./icon-T9Yt4tnm.js";
-import { r } from "./i18n-DpW8lqJ1.js";
-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 ee, useRef as p, useState as m } from "react";
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+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 v } from "@slotted/core/presence";
-import { createPortalRoot as y } from "@slotted/core/portal";
-import { createDismissableLayer as b } from "@slotted/core/dismissable-layer";
+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";
 //#region src/dialog/dialog-defaults.tsx
-var x = o({
+var x = a({
 	back: "close",
 	escape: "close",
 	fullScreen: "narrow",
@@ -23,7 +23,7 @@ var x = o({
 	surface: "panel"
 });
 function S() {
-	return c(x);
+	return s(x);
 }
 function C({ children: e, ...t }) {
 	let n = S();
@@ -45,38 +45,38 @@ function C({ children: e, ...t }) {
 }
 //#endregion
 //#region src/dialog/dialog.tsx
-var ne = o(void 0);
-function w() {
-	let e = c(ne);
+var w = a(void 0);
+function T() {
+	let e = s(w);
 	if (e === void 0) throw Error("Every dialog part must be rendered inside Dialog or AlertDialog.");
 	return e;
 }
-function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOpen: o, escape: c, finalFocus: f, fullscreen: h, fullScreen: _, fullscreenToggle: y, initialFocus: b, loading: x, member: C, messages: w, modal: T, mount: re, onFullscreenChange: E, onOpenChange: D, open: O, outsidePress: ie, placement: ae, ref: k, scroll: A, size: j, surface: oe, tone: M }) {
-	let N = S(), P = r(te, w), F = u(), [I, L] = m(o ?? !1), R = O ?? I, z = C === "alertDialog", [B, V] = m(i ?? !1), H = !z && (h ?? B), U = !z && y === !0, W = z ? !0 : T ?? N.modal, G = z ? "none" : ie ?? N.outsidePress, K = re ?? N.mount, q = j ?? (z ? "sm" : N.size), J = _ ?? (z ? "never" : N.fullScreen), se = b ?? (z ? "cancel" : "first"), ce = c ?? N.escape, le = e ?? N.back, ue = ae ?? N.placement, de = A ?? N.scroll, fe = oe ?? N.surface, [Y, pe] = m(R ? "open" : "unmounted"), X = p(null);
-	X.current === null && (X.current = v({
-		present: R,
+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
-	})), l(() => {
-		X.current?.sync(R);
-	}, [R]), l(() => {
+	})), c(() => {
+		X.current?.sync(z);
+	}, [z]), c(() => {
 		let e = X.current;
 		return () => e?.destroy();
 	}, []);
-	let me = p(R);
-	R && (me.current = !0);
+	let me = p(z);
+	z && (me.current = !0);
 	let he = K === "eager" ? !0 : K === "lazy" ? me.current : Y !== "unmounted", Z = p({
 		cancel: null,
 		content: null,
 		trigger: null
-	}), [ge, Q] = m(!1), [_e, ve] = m(!1), ye = s((e, t) => (e === "cancel" && (Z.current.cancel = t), e === "title" && Q(!0), e === "description" && ve(!0), () => {
-		e === "cancel" && (Z.current.cancel = null), e === "title" && Q(!1), e === "description" && ve(!1);
-	}), []), $ = s((e, t, n, r) => {
-		if (e === R) return;
-		let i = !1, o = a({
-			controlled: O,
-			initial: R,
+	}), [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);
+	}), []), $ = o((e, t, n, r) => {
+		if (e === z) return;
+		let a = !1, o = i({
+			controlled: A,
+			initial: z,
 			onRequest: (e) => {
-				i = e.cancelled, D?.(e.value, {
+				a = e.cancelled, k?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -89,17 +89,17 @@ function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOp
 				});
 			}
 		}).request(e, t, r);
-		i || o && L(e);
+		a || o && R(e);
 	}, [
-		R,
-		D,
-		O
-	]), be = s((e, t, n) => {
-		e !== H && a({
-			controlled: h,
+		z,
+		k,
+		A
+	]), be = o((e, t, n) => {
+		e !== H && i({
+			controlled: _,
 			initial: H,
 			onRequest: (e) => {
-				E?.(e.value, {
+				O?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -110,13 +110,13 @@ function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOp
 					value: e.value
 				});
 			}
-		}).request(e, t, n) && V(e);
+		}).request(e, t, n) && oe(e);
 	}, [
 		H,
-		h,
-		E
+		_,
+		O
 	]);
-	d(k, () => ({
+	u(ne, () => ({
 		open: () => $(!0, "programmatic", void 0, void 0),
 		close: (e) => $(!1, "programmatic", e, void 0),
 		focus: () => Z.current.content?.focus(),
@@ -124,14 +124,14 @@ function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOp
 			return Z.current.content;
 		}
 	}), [$]);
-	let xe = ee(() => ({
+	let xe = f(() => ({
 		announce: ye,
 		close: (e, t, n) => $(!1, e, t, n),
-		container: n,
-		descriptionId: _e ? `${F}description` : "",
+		container: r,
+		descriptionId: Q ? `${I}description` : "",
 		back: le,
 		escape: ce,
-		finalFocus: f,
+		finalFocus: h,
 		fullScreen: J,
 		fullscreen: H,
 		fullscreenToggle: U,
@@ -143,7 +143,7 @@ function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOp
 		mount: K,
 		mounted: he,
 		nodes: Z.current,
-		open: R,
+		open: z,
 		openWith: (e, t) => $(!0, e, void 0, t),
 		outsidePress: G,
 		placement: ue,
@@ -157,21 +157,21 @@ function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOp
 		scroll: de,
 		size: q,
 		surface: fe,
-		t: P,
-		titleId: ge ? `${F}title` : "",
-		tone: z ? M ?? "danger" : void 0,
-		triggerId: `${F}trigger`,
+		t: F,
+		titleId: ge ? `${I}title` : "",
+		tone: B ? N ?? "danger" : void 0,
+		triggerId: `${I}trigger`,
 		visible: Y === "open",
 		interactive: Y === "entering" || Y === "open"
 	}), [
 		ye,
-		F,
-		n,
-		R,
-		H,
-		_e,
-		f,
+		I,
+		r,
 		z,
+		H,
+		Q,
+		h,
+		B,
 		x,
 		C,
 		he,
@@ -190,36 +190,35 @@ function T({ back: e, children: t, container: n, defaultFullscreen: i, defaultOp
 		be,
 		fe,
 		Y,
-		P,
+		F,
 		ge,
-		M
+		N
 	]);
-	return /* @__PURE__ */ g(ne.Provider, {
+	return /* @__PURE__ */ g(w.Provider, {
 		value: xe,
 		children: t
 	});
 }
-function re(e) {
-	return /* @__PURE__ */ g(T, {
+function D(e) {
+	return /* @__PURE__ */ g(E, {
 		...e,
 		member: "dialog"
 	});
 }
-function E(e) {
-	return /* @__PURE__ */ g(T, {
+function O(e) {
+	return /* @__PURE__ */ g(E, {
 		...e,
 		member: "alertDialog"
 	});
 }
 //#endregion
 //#region src/dialog/dialog-parts.tsx
-var D = e();
-function O(e) {
+function k(e) {
 	return e.detail === 0 ? "keyboard" : "pointer";
 }
-var ie = typeof document > "u" ? l : f;
-function ae({ children: e, className: t, onClick: n, ref: r, render: i, style: a, ...o }) {
-	let s = w(), c = {
+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 = {
 		...o,
 		"aria-controls": s.mounted ? `${s.triggerId}-content` : void 0,
 		"aria-expanded": s.open,
@@ -230,7 +229,7 @@ function ae({ 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(O(e), e);
+			n?.(e), !e.defaultPrevented && s.openWith(k(e), e);
 		},
 		ref: (e) => {
 			s.registerTrigger(e), typeof r == "function" ? r(e) : r && (r.current = e);
@@ -240,11 +239,11 @@ function ae({ children: e, className: t, onClick: n, ref: r, render: i, style: a
 	};
 	return i === void 0 ? /* @__PURE__ */ g("button", { ...c }) : i(c);
 }
-function k(e) {
+function M(e) {
 	let [t, n] = m(null);
-	return ie(() => {
+	return A(() => {
 		if (!e.mounted) return;
-		let t = y({
+		let t = v({
 			origin: e.nodes.trigger,
 			...e.container === void 0 ? {} : { container: e.container }
 		});
@@ -257,15 +256,15 @@ function k(e) {
 		e.nodes
 	]), t;
 }
-function A({ children: e, className: t, ref: n, render: r, style: a, ...o }) {
-	let s = w(), c = k(s), [u, d] = m(null), f = `${s.triggerId}-content`, ee = s.titleId !== "" && o["aria-label"] === void 0, p = s.descriptionId !== "";
-	if (l(() => {
+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(() => {
 		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]), l(() => {
+	}, [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 = b(e, {
+		let t = s.nodes.trigger === null ? [] : [s.nodes.trigger], n = y(e, {
 			back: s.modal && s.back === "close",
 			branches: t,
 			content: u,
@@ -277,16 +276,16 @@ function A({ children: e, className: t, ref: n, render: r, style: a, ...o }) {
 			},
 			outsidePress: s.outsidePress === "close",
 			outsidePressEvent: "click"
-		}), r = s.initialFocus, a = s.finalFocus, o = i(u, {
+		}), i = s.initialFocus, a = s.finalFocus, o = r(u, {
 			contain: s.modal,
-			initial: r === "cancel" ? () => s.nodes.cancel : typeof r == "object" && r ? () => r.current : r,
+			initial: i === "cancel" ? () => s.nodes.cancel : typeof i == "object" && i ? () => i.current : i,
 			...a === void 0 ? {} : { restore: a === !1 ? !1 : () => a.current }
 		});
 		return o.enter(), () => {
 			n.destroy(), o.destroy();
 		};
-	}, [u, s]), !s.mounted || c === null) return null;
-	let h = {
+	}, [u, s]), !s.mounted || l === null) return null;
+	let ee = {
 		"data-full-screen": s.fullScreen,
 		...s.fullscreen ? { "data-fullscreen": "" } : {},
 		...s.loading ? { "data-loading": "" } : {},
@@ -303,8 +302,8 @@ function A({ children: e, className: t, ref: n, render: r, style: a, ...o }) {
 		"data-ui": "dialog"
 	}, v = {
 		...o,
-		...p ? { "aria-describedby": s.descriptionId } : {},
-		...ee ? { "aria-labelledby": s.titleId } : {},
+		...h ? { "aria-describedby": s.descriptionId } : {},
+		...p ? { "aria-labelledby": s.titleId } : {},
 		...s.modal ? { "aria-modal": !0 } : {},
 		children: e,
 		className: t,
@@ -315,21 +314,21 @@ function A({ children: e, className: t, ref: n, render: r, style: a, ...o }) {
 		},
 		role: s.member === "alertDialog" ? "alertdialog" : "dialog",
 		style: a
-	}, y = r === void 0 ? /* @__PURE__ */ g("div", { ...v }) : r(v);
-	return (0, D.createPortal)(/* @__PURE__ */ _("div", {
-		...h,
+	}, te = i === void 0 ? /* @__PURE__ */ g("div", { ...v }) : i(v);
+	return b(/* @__PURE__ */ _("div", {
+		...ee,
 		...s.interactive ? {} : { inert: !0 },
 		ref: s.registerLayer,
 		children: [/* @__PURE__ */ g("div", { "data-part": "backdrop" }), /* @__PURE__ */ g("div", {
 			"data-part": "viewport",
-			children: y
+			children: te
 		})]
-	}), c);
+	}), l);
 }
-function j({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = w(), s = {
+function re({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = T(), s = {
 		...a,
-		children: /* @__PURE__ */ _(h, { children: [e, o.fullscreenToggle ? /* @__PURE__ */ g(oe, {}) : null] }),
+		children: /* @__PURE__ */ _(h, { children: [e, o.fullscreenToggle ? /* @__PURE__ */ g(ie, {}) : null] }),
 		className: t,
 		"data-part": "header",
 		style: i
@@ -339,22 +338,22 @@ function j({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		ref: n
 	}) : r(s);
 }
-function oe() {
-	let e = w();
+function ie() {
+	let n = T();
 	return /* @__PURE__ */ g("button", {
-		"aria-label": e.t("fullScreen"),
-		"aria-pressed": e.fullscreen,
+		"aria-label": n.t("fullScreen"),
+		"aria-pressed": n.fullscreen,
 		"data-part": "fullscreen",
-		onClick: (t) => {
-			t.defaultPrevented || e.setFullscreen(!e.fullscreen, t.detail === 0 ? "keyboard" : "pointer", t);
+		onClick: (e) => {
+			e.defaultPrevented || n.setFullscreen(!n.fullscreen, e.detail === 0 ? "keyboard" : "pointer", e);
 		},
 		type: "button",
-		children: /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: e.fullscreen ? "minimize" : "maximize" }) })
+		children: /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: n.fullscreen ? "minimize" : "maximize" }) })
 	});
 }
-function M({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = w();
-	l(() => o.announce("title", null), [o]);
+function ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = T();
+	c(() => o.announce("title", null), [o]);
 	let s = {
 		...a,
 		children: e,
@@ -369,8 +368,8 @@ function M({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	}) : r(s);
 }
 function N({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = w();
-	l(() => o.announce("description", null), [o]);
+	let o = T();
+	c(() => o.announce("description", null), [o]);
 	let s = {
 		...a,
 		children: e,
@@ -385,7 +384,7 @@ function N({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	}) : r(s);
 }
 function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = w(), s = {
+	let o = T(), s = {
 		...a,
 		...o.loading ? { "aria-busy": !0 } : {},
 		children: e,
@@ -412,7 +411,7 @@ function F({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	}) : r(o);
 }
 function I(e, t, n, r) {
-	let i = w();
+	let i = T();
 	return {
 		dialog: i,
 		handleClick: (e) => {
@@ -421,13 +420,13 @@ function I(e, t, n, r) {
 		part: e
 	};
 }
-function L({ children: e, className: r, onClick: i, ref: a, render: o, style: s, value: c, ...l }) {
+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);
 	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"),
 		...l,
-		children: e ?? /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: "x" }) }),
+		children: n ?? /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: "x" }) }),
 		className: r,
 		"data-part": "close",
 		onClick: d,
@@ -446,11 +445,11 @@ var R = {
 	warning: "triangle-alert",
 	danger: "circle-alert"
 };
-function z({ children: e, className: r, ref: i, render: a, style: o, ...s }) {
-	let c = w(), l = {
+function z({ children: n, className: r, ref: i, render: a, style: o, ...s }) {
+	let c = T(), l = {
 		"aria-hidden": !0,
 		...s,
-		children: e ?? /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { 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" : R[c.tone] }) }),
 		className: r,
 		"data-part": "icon",
 		style: o
@@ -496,4 +495,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, ae as d, E as f, S as g, C as h, P as i, j as l, w as m, B as n, A as o, re as p, z as r, N as s, V as t, M as u };
+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 };

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-BHYDDj1S.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/app-shell.json

@@ -194,7 +194,7 @@
           "part": "nav",
           "element": "nav, or the element render returns",
           "required": false,
-          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
+          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. Its inline axis clips and its block axis scrolls, so a single column taller than the region keeps its foot reachable. A footer that must stay visible goes in nav-footer, between nav-header and a nav-body that scrolls. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
         },
         {
           "part": "nav-rail",

package/dist/docs/button-group.json

@@ -140,6 +140,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-solid-active",
     "--slotted-tone-danger-solid-active",
+    "--slotted-tone-neutral-solid-active",
     "--slotted-tone-secondary-solid-active",
     "--slotted-tone-success-solid-active",
     "--slotted-tone-warning-solid-active"

package/dist/docs/button-group.md

@@ -51,7 +51,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-text-muted`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-text-muted`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-neutral-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
 
 ## Examples