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

package/README.md

@@ -14,11 +14,11 @@ npm install @slotted/react @slotted/core @slotted/theme @slotted/themes
 
 ## Use
 
-Load the component stylesheet and one theme once, then import each component from its subpath:
+Load one theme and the stylesheet of each family the application renders, then import each component from its subpath:
 
 ```tsx
 import '@slotted/themes/default.css';
-import '@slotted/react/styles.css';
+import '@slotted/react/button/styles.css';
 import { Button } from '@slotted/react/button';
 
 export function Actions() {
@@ -26,6 +26,8 @@ export function Actions() {
 }
 ```
 
+`@slotted/react/<family>/styles.css` holds the family and every family it renders. `@slotted/react/styles.css` holds every family in one sheet, 1.5 MB. The modules import no stylesheet, so server rendering and test runners load them unbundled.
+
 Every rule the library ships lives in the `slotted` cascade layer. An application that keeps its own CSS in layers declares `@layer slotted, app;` before the first import ([styling](https://github.com/andrelopes-code/slotted/blob/main/docs/styling.md)).
 
 ## Language
@@ -41,6 +43,25 @@ import { PT_BR } from '@slotted/core/i18n/pt-BR';
 </SlottedProvider>;
 ```
 
+## Agents
+
+`dist/docs/AGENTS.snippet.md` is the section an application adds to the instructions its coding agent reads. It points the agent at the family pages, the guidelines and the skills of the installed version. The `slotted-agent-docs` command keeps it there, and keeps the skills where the agent finds them:
+
+```sh
+# Writes the snippet between <!-- slotted:begin --> and <!-- slotted:end --> in the file; the rest of the file is left as it is.
+slotted-agent-docs instructions write --file AGENTS.md
+# An instruction file outside the directory that holds node_modules names that directory, relative to the file.
+slotted-agent-docs instructions write --file ../AGENTS.md --app-root web
+# An application with its own theme.
+slotted-agent-docs instructions write --file AGENTS.md --theme brand --theme-css @acme/brand/theme.css
+# One entry per skill: a relative link, or a copy for an agent that does not follow links.
+slotted-agent-docs skills link --dir .agents/skills [--mode copy]
+```
+
+`instructions check` and `skills check` take the same arguments, print what differs, and exit 1 when the file or the directory is not what the matching write would produce: a `prepare` script runs the writes, CI runs the checks.
+
+Skill directories known to agents, as documentation only: `.agents/skills`, `.claude/skills`, `.github/skills`. Instruction files: `AGENTS.md`, `CLAUDE.md`, `.github/copilot-instructions.md`, `GEMINI.md`.
+
 ## License
 
 MIT

package/dist/accordion-n5D6mcmS.js

@@ -0,0 +1,144 @@
+import { keyedProps as e } from "@slotted/core/selector-key";
+import { isHeldOpen as t, nextOpenValues as n, sameOpenValues as r } from "@slotted/core/disclosure";
+import { createArrowNavigation as i } from "@slotted/core/focus";
+import { createControllable as a } from "@slotted/core/state";
+import { createContext as o, useContext as s, useEffect as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
+import { jsx as f } from "react/jsx-runtime";
+//#region src/accordion/accordion-defaults.tsx
+var p = o({
+	headingLevel: "3",
+	indicator: "chevron",
+	loop: !0,
+	mount: "eager",
+	multiple: !1,
+	requireOpen: !1,
+	size: "md",
+	togglePlacement: "end",
+	truncate: !1,
+	variant: "ruled"
+});
+function m() {
+	return s(p);
+}
+function h({ children: e, ...t }) {
+	let n = m();
+	return /* @__PURE__ */ f(p.Provider, {
+		value: {
+			headingLevel: t.headingLevel ?? n.headingLevel,
+			indicator: t.indicator ?? n.indicator,
+			loop: t.loop ?? n.loop,
+			mount: t.mount ?? n.mount,
+			multiple: t.multiple ?? n.multiple,
+			requireOpen: t.requireOpen ?? n.requireOpen,
+			size: t.size ?? n.size,
+			togglePlacement: t.togglePlacement ?? n.togglePlacement,
+			truncate: t.truncate ?? n.truncate,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/accordion/accordion.tsx
+var g = ":scope > * > [data-part=\"header\"] > [data-part=\"trigger\"]", _ = {
+	plain: "plain",
+	ruled: "ruled",
+	framed: "ruled",
+	separated: "framed"
+}, v = o(void 0);
+function y(e) {
+	return e === null ? [] : [...e.querySelectorAll(":scope > [data-value]")].map((e) => ({
+		disabled: e.hasAttribute("data-disabled"),
+		value: e.getAttribute("data-value") ?? ""
+	}));
+}
+function b() {
+	return s(v);
+}
+function x({ children: o, className: s, defaultValue: p, disabled: h, handle: b, headingLevel: x, indicator: S, loop: C, mount: w, multiple: T, onValueChange: E, ref: D, render: O, requireOpen: ee, size: te, style: k, togglePlacement: A, truncate: j, value: M, variant: N, ...P }) {
+	let F = m(), [I, L] = d(p ?? []), R = M ?? I, z = u(null), B = h === !0, V = x ?? F.headingLevel, H = S ?? F.indicator, U = C ?? F.loop, W = w ?? F.mount, G = T ?? F.multiple, K = ee ?? F.requireOpen, q = te ?? F.size, J = A ?? F.togglePlacement, Y = j ?? F.truncate, X = N ?? F.variant, Z = {
+		multiple: G,
+		requireOpen: K
+	};
+	c(() => {
+		let e = z.current;
+		if (e === null) return;
+		let t = i(e, {
+			itemSelector: g,
+			loop: U,
+			orientation: () => "vertical"
+		}), n = new MutationObserver(() => t.refresh());
+		return n.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			n.disconnect(), t.destroy();
+		};
+	}, [U]);
+	function Q(e, t, n) {
+		let i = !1, o = a({
+			controlled: M,
+			equals: r,
+			initial: R,
+			onRequest: (e) => {
+				i = e.cancelled, E?.(e.value, e);
+			}
+		}).request(e, t, n);
+		i || o && L(e);
+	}
+	let ne = {
+		disabled: B,
+		indicator: H,
+		isHeld: (e) => t(R, e, Z),
+		isOpen: (e) => R.includes(e),
+		level: V,
+		mount: W,
+		size: q,
+		togglePlacement: J,
+		toggle: (e, t, r) => {
+			let i = n(R, e, Z);
+			i !== R && Q(i, t, r);
+		},
+		truncate: Y,
+		variant: _[X]
+	};
+	l(b, () => ({
+		openAll: () => {
+			let e = y(z.current).filter((e) => !e.disabled).map((e) => e.value);
+			Q(G ? e : e.slice(0, 1), "programmatic", void 0);
+		},
+		closeAll: () => {
+			if (K && R.length > 0) {
+				Q(R.slice(0, 1), "programmatic", void 0);
+				return;
+			}
+			Q([], "programmatic", void 0);
+		}
+	}), [
+		R,
+		G,
+		K
+	]);
+	let $ = e({
+		...P,
+		children: o,
+		className: s,
+		...B ? { "data-disabled": "" } : {},
+		"data-part": "root",
+		"data-size": q,
+		"data-ui": "accordion",
+		"data-variant": X,
+		style: k
+	});
+	return /* @__PURE__ */ f(v.Provider, {
+		value: ne,
+		children: O === void 0 ? /* @__PURE__ */ f("div", {
+			...$,
+			ref: (e) => {
+				z.current = e, typeof D == "function" ? D(e) : D != null && (D.current = e);
+			}
+		}) : O($)
+	});
+}
+//#endregion
+export { m as a, h as i, x as n, b as r, g as t };

package/dist/accordion.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./accordion-D-YuMJzk.js";
+import { a as e, i as t, n, r, t as i } from "./accordion-n5D6mcmS.js";
 export { i as ACCORDION_TRIGGER_SELECTOR, n as Accordion, t as AccordionDefaultsProvider, r as useAccordion, e as useAccordionDefaults };

package/dist/{action-bar-C7cGnEyJ.js → action-bar-CJgBierN.js}

@@ -1,11 +1,12 @@
 import { t as e } from "./button-defaults-DNq_DDJh.js";
-import { n as t, t as n } from "./icon-T9Yt4tnm.js";
-import { _ as r, g as i, n as a, t as o } from "./menu-parts-BQej6eU9.js";
-import { Fragment as s, createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { createCollapse as v } from "@slotted/core/overflow";
-import { createPresence as y } from "@slotted/core/presence";
-var b = c({
+import { n as t, t as n } from "./icon-DjqSEQ-o.js";
+import { _ as r, g as i, n as a, t as o } from "./menu-parts-DS9JEUCt.js";
+import { keyedProps as s } from "@slotted/core/selector-key";
+import { Fragment as c, createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { createCollapse as y } from "@slotted/core/overflow";
+import { createPresence as b } from "@slotted/core/presence";
+var x = l({
 	counterpart: () => null,
 	declare: () => void 0,
 	registerActions: () => void 0,
@@ -13,10 +14,10 @@ var b = c({
 	release: () => void 0,
 	surface: []
 });
-function x() {
-	return u(b);
+function S() {
+	return d(x);
 }
-var S = "data-unit", C = "data-priority", w = "--_stacked", T = Object.freeze({
+var C = "data-unit", w = "data-priority", T = "--_stacked", ee = Object.freeze({
 	always: 0,
 	hide: 0,
 	high: 2,
@@ -28,18 +29,18 @@ function E(e, t) {
 }
 //#endregion
 //#region src/action-bar/action-bar-defaults.tsx
-var D = c({
+var D = l({
 	align: "end",
 	size: "md",
 	sticky: !1,
 	variant: "plain"
 });
 function O() {
-	return u(D);
+	return d(D);
 }
 function k({ children: e, ...t }) {
 	let n = O();
-	return /* @__PURE__ */ g(D.Provider, {
+	return /* @__PURE__ */ _(D.Provider, {
 		value: {
 			align: t.align ?? n.align,
 			size: t.size ?? n.size,
@@ -75,21 +76,21 @@ function P(e, t) {
 function F(e, t) {
 	return e.length === t.length && e.every((e, n) => e.id === t[n]?.id && e.separatorBefore === t[n]?.separatorBefore);
 }
-function I({ align: t, children: n, className: r, onOverflowChange: i, present: a, ref: o, render: s, size: c, sticky: u, style: f, variant: _, ...x }) {
-	let E = O(), D = m(null), k = m(/* @__PURE__ */ new Map()), N = m([]), I = m(null), [L, R] = h(null), [z, B] = h(null), [V, H] = h(!1), [U, W] = h(A), G = m(i);
+function I({ align: t, children: n, className: r, onOverflowChange: i, present: a, ref: o, render: c, size: l, sticky: d, style: p, variant: v, ...S }) {
+	let E = O(), D = h(null), k = h(/* @__PURE__ */ new Map()), N = h([]), I = h(null), [L, R] = g(null), [z, B] = g(null), [V, H] = g(!1), [U, W] = g(A), G = h(i);
 	G.current = i;
-	let ee = t ?? E.align, K = c ?? E.size, te = u ?? E.sticky, ne = _ ?? E.variant, q = a ?? !0, [J, re] = h(q ? "open" : "unmounted"), Y = m(null);
-	Y.current ??= y({
-		onStatusChange: re,
+	let te = t ?? E.align, K = l ?? E.size, ne = d ?? E.sticky, re = v ?? E.variant, q = a ?? !0, [J, ie] = g(q ? "open" : "unmounted"), Y = h(null);
+	Y.current ??= b({
+		onStatusChange: ie,
 		present: q,
 		skipInitialAnimation: !0
-	}), d(() => {
+	}), f(() => {
 		Y.current?.sync(q);
-	}, [q]), d(() => {
+	}, [q]), f(() => {
 		let e = Y.current;
-		return () => e?.destroy();
+		return () => e?.stop();
 	}, []);
-	let X = l((e) => R(e), []), Z = l((e) => B(e), []), ie = p(() => ({
+	let X = u((e) => R(e), []), Z = u((e) => B(e), []), ae = m(() => ({
 		counterpart: (e) => k.current.get(e) ?? null,
 		declare: (e, t) => {
 			k.current.set(e, t);
@@ -104,35 +105,35 @@ function I({ align: t, children: n, className: r, onOverflowChange: i, present:
 		X,
 		Z,
 		U
-	]), Q = l((e) => {
+	]), Q = u((e) => {
 		if (D.current = e, Y.current?.setNode(e), typeof o == "function") return o(e);
 		o && (o.current = e);
 	}, [o]);
-	if (d(() => {
+	if (f(() => {
 		let e = L;
 		if (e === null) return;
 		let t = () => {
-			let t = (e.ownerDocument?.defaultView)?.getComputedStyle(e).getPropertyValue(w).trim() === "1";
+			let t = (e.ownerDocument?.defaultView)?.getComputedStyle(e).getPropertyValue(T).trim() === "1";
 			H((e) => e === t ? e : t);
 		};
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [L]), d(() => {
+	}, [L]), f(() => {
 		let e = L;
 		if (e === null || V) return;
 		let t = () => {
 			let t = P(e, N.current);
 			W((e) => F(e, t) ? e : t);
-		}, n = v(e, {
+		}, n = y(e, {
 			collapsible: (e) => M(e) !== "pinned",
 			divides: (e) => e.getAttribute("data-part") === "separator",
 			onChange: (e) => {
-				N.current = e, t(), G.current?.(e.filter((e) => e.hasAttribute(S)).length);
+				N.current = e, t(), G.current?.(e.filter((e) => e.hasAttribute(C)).length);
 			},
-			rank: (e) => T[M(e)],
+			rank: (e) => ee[M(e)],
 			trigger: () => z,
-			triggerAlways: () => e.querySelector(`[${C}='always']`) !== null,
+			triggerAlways: () => e.querySelector(`[${w}='always']`) !== null,
 			units: () => j(e)
 		});
 		I.current = n, t();
@@ -150,30 +151,30 @@ function I({ align: t, children: n, className: r, onOverflowChange: i, present:
 		V,
 		z
 	]), J === "unmounted") return null;
-	let ae = N.current.length, $ = {
+	let oe = N.current.length, $ = s({
 		role: "group",
-		...x,
-		children: /* @__PURE__ */ g(e, {
+		...S,
+		children: /* @__PURE__ */ _(e, {
 			size: K,
 			children: n
 		}),
 		className: r,
-		"data-align": ee,
-		...z === null ? {} : { "data-collapsed": String(ae) },
+		"data-align": te,
+		...z === null ? {} : { "data-collapsed": String(oe) },
 		"data-part": "root",
 		"data-size": K,
 		...J === "open" ? {} : { "data-status": J },
-		...te ? { "data-sticky": "" } : {},
+		...ne ? { "data-sticky": "" } : {},
 		"data-ui": "action-bar",
-		"data-variant": ne,
-		style: f
-	};
-	return /* @__PURE__ */ g(b.Provider, {
-		value: ie,
-		children: s === void 0 ? /* @__PURE__ */ g("div", {
+		"data-variant": re,
+		style: p
+	});
+	return /* @__PURE__ */ _(x.Provider, {
+		value: ae,
+		children: c === void 0 ? /* @__PURE__ */ _("div", {
 			...$,
 			ref: Q
-		}) : s({
+		}) : c({
 			...$,
 			ref: Q
 		})
@@ -187,60 +188,60 @@ function L(e, ...t) {
 function R(e, t) {
 	return typeof e == "function" ? e(t) : e === void 0 ? `${t} more ${t === 1 ? "action" : "actions"}` : e;
 }
-function z({ align: e, label: c, menuRef: u, ref: d, render: f, side: p, size: h, ...v }) {
-	let y = x(), b = y.surface, { registerTrigger: S } = y, C = m(void 0), w = l((e) => {
-		S(e), L(e, C.current, d);
-	}, [d, S]);
-	return /* @__PURE__ */ _(r, {
+function z({ align: e, label: l, menuRef: d, ref: f, render: p, side: m, size: g, ...y }) {
+	let b = S(), x = b.surface, { registerTrigger: C } = b, w = h(void 0), T = u((e) => {
+		C(e), L(e, w.current, f);
+	}, [f, C]);
+	return /* @__PURE__ */ v(r, {
 		...e === void 0 ? {} : { align: e },
-		...u === void 0 ? {} : { ref: u },
-		...p === void 0 ? {} : { side: p },
-		...h === void 0 ? {} : { size: h },
-		children: [/* @__PURE__ */ g(a, { render: ({ ref: e, ...r }) => {
-			C.current = e;
-			let i = {
+		...d === void 0 ? {} : { ref: d },
+		...m === void 0 ? {} : { side: m },
+		...g === void 0 ? {} : { size: g },
+		children: [/* @__PURE__ */ _(a, { render: ({ ref: e, ...r }) => {
+			w.current = e;
+			let i = s({
 				...r,
-				...v,
-				"aria-label": R(c, b.length),
-				children: /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: "ellipsis" }) }),
+				...y,
+				"aria-label": R(l, x.length),
+				children: /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: "ellipsis" }) }),
 				"data-part": "overflow"
-			};
-			return f === void 0 ? /* @__PURE__ */ g("button", {
+			});
+			return p === void 0 ? /* @__PURE__ */ _("button", {
 				...i,
-				ref: w,
+				ref: T,
 				type: "button"
-			}) : f({
+			}) : p({
 				...i,
-				ref: w
+				ref: T
 			});
-		} }), /* @__PURE__ */ g(o, { children: b.map((e) => /* @__PURE__ */ _(s, { children: [e.separatorBefore ? /* @__PURE__ */ g(i, {}) : null, y.counterpart(e.id)] }, e.id)) })]
+		} }), /* @__PURE__ */ _(o, { children: x.map((e) => /* @__PURE__ */ v(c, { children: [e.separatorBefore ? /* @__PURE__ */ _(i, {}) : null, b.counterpart(e.id)] }, e.id)) })]
 	});
 }
 //#endregion
 //#region src/action-bar/action-bar-parts.tsx
 function B({ children: e, ref: t, render: n, ...r }) {
-	let i = {
+	let i = s({
 		...r,
 		children: e,
 		"data-part": "status"
-	};
-	return n === void 0 ? /* @__PURE__ */ g("div", {
+	});
+	return n === void 0 ? /* @__PURE__ */ _("div", {
 		...i,
 		ref: t
 	}) : n(i);
 }
 function V({ children: e, ref: t, render: n, ...r }) {
-	let { registerActions: i } = x(), a = l((e) => {
+	let { registerActions: i } = S(), a = u((e) => {
 		if (i(e), typeof t == "function") return t(e);
 		t && (t.current = e);
 	}, [t, i]);
-	d(() => () => i(null), [i]);
-	let o = {
+	f(() => () => i(null), [i]);
+	let o = s({
 		...r,
 		children: e,
 		"data-part": "actions"
-	};
-	return n === void 0 ? /* @__PURE__ */ g("div", {
+	});
+	return n === void 0 ? /* @__PURE__ */ _("div", {
 		...o,
 		ref: a
 	}) : n({
@@ -249,34 +250,34 @@ function V({ children: e, ref: t, render: n, ...r }) {
 	});
 }
 function H({ children: e, counterpart: t, priority: n, ref: r, render: i, ...a }) {
-	let o = x(), s = f(), c = t != null && t !== !1, l = E(n, c);
-	c && o.declare(s, t);
-	let { release: u } = o;
-	d(() => () => u(s), [s, u]);
-	let p = {
+	let o = S(), c = p(), l = t != null && t !== !1, u = E(n, l);
+	l && o.declare(c, t);
+	let { release: d } = o;
+	f(() => () => d(c), [c, d]);
+	let m = s({
 		...a,
-		...c ? { [S]: s } : {},
-		...l === "always" ? { hidden: !0 } : {},
+		...l ? { [C]: c } : {},
+		...u === "always" ? { hidden: !0 } : {},
 		children: e,
 		"data-part": "action",
-		"data-priority": l
-	};
-	return i === void 0 ? /* @__PURE__ */ g("div", {
-		...p,
+		"data-priority": u
+	});
+	return i === void 0 ? /* @__PURE__ */ _("div", {
+		...m,
 		ref: r
-	}) : i(p);
+	}) : i(m);
 }
 function U({ ref: e, render: t, ...n }) {
-	let r = {
+	let r = s({
 		"aria-orientation": "vertical",
 		...n,
 		"data-part": "separator",
 		role: "separator"
-	};
-	return t === void 0 ? /* @__PURE__ */ g("div", {
+	});
+	return t === void 0 ? /* @__PURE__ */ _("div", {
 		...r,
 		ref: e
 	}) : t(r);
 }
 //#endregion
-export { z as a, O as c, B as i, x as l, V as n, I as o, U as r, k as s, H as t };
+export { z as a, O as c, B as i, S as l, V as n, I as o, U as r, k as s, H as t };

package/dist/action-bar.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 "./action-bar-C7cGnEyJ.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 "./action-bar-CJgBierN.js";
 export { a as ActionBar, c as ActionBarAction, i as ActionBarActions, s as ActionBarDefaultsProvider, e as ActionBarOverflow, o as ActionBarSeparator, n as ActionBarStatus, t as useActionBarDefaults, r as useActionBarOverflow };