@rinzai/zen 0.6.1 → 0.7.1

package/dist/theme.css

@@ -236,6 +236,13 @@
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    /*
+     * The gradient only paints within the box, and at a tight line height
+     * descenders (g, y) and accents hang outside it and would be cut off. The
+     * box reaches past them; the margins take that back, so layout is unchanged.
+     */
+    padding-block: 0.2em;
+    margin-block: -0.2em;
     /* Light theme: start from the ink colour, since near-white would vanish. */
     &:where(.light *, [data-theme='light'] *) {
         background-image: linear-gradient(100deg, oklch(var(--foreground)), oklch(var(--primary)) 85%);
@@ -439,6 +446,52 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         zen-aurora-c 52s steps(26) infinite alternate;
 }
 
+/*
+ * A track's sliding indicator is placed by measuring, which can't happen until
+ * the page's script runs. Until then (server HTML, before hydration) the active
+ * item wears the indicator's look itself, in the same place, so it shows at
+ * once: the pill of Pills (and TabList variant="pills"), the bar of underline tabs.
+ */
+:has(> .zen__pill-indicator[data-pending]) :is([aria-current='page'], [aria-selected='true']) {
+    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    box-shadow:
+        inset 0 0 0 1px oklch(var(--glow) / 0.35),
+        0 0 24px -4px oklch(var(--glow) / 0.6);
+}
+:has(> .zen__tab-bar[data-pending]) > [role='tab'][aria-selected='true'] {
+    /* The bar straddles the track's bottom border: 1px above its edge, 1px below. */
+    box-shadow:
+        inset 0 -1px 0 var(--color-primary),
+        0 1px 0 var(--color-primary);
+}
+
+/* The page's <main>, focused by Header's skip link: no ring round the whole page. */
+main[data-zen-skip-target]:focus {
+    outline: none;
+}
+
+/*
+ * themeWave() (utils/theme-wave.ts): the new theme spreads over the old one,
+ * which holds still, through a clip on the new page (or, into a dark theme,
+ * the old one closes in over the new). The water is a canvas
+ * drawn over both, in a layer of its own that shows as it is (no fade). A
+ * theme on one element (themeWave's target) changes in its own layer.
+ */
+html.zen-theme-waving::view-transition-old(root),
+html.zen-theme-waving::view-transition-new(root),
+html.zen-theme-waving::view-transition-group(zen-theme-area),
+html.zen-theme-waving::view-transition-old(zen-theme-area),
+html.zen-theme-waving::view-transition-new(zen-theme-area),
+html.zen-theme-waving::view-transition-new(zen-theme-water) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+/* Into a dark theme, the old one closes in over the new. */
+html.zen-theme-closing::view-transition-old(root),
+html.zen-theme-closing::view-transition-old(zen-theme-area) {
+    z-index: 1;
+}
+
 /*
  * Contour lines (image from <Backdrop topoSrc>), faint everywhere… The image
  * is used as a mask over the tint, so its strokes are white on dark and ink
@@ -775,7 +828,17 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     }
 }
 
-/* Popovers scale and fade in from their top-layer entry, and back out. */
+/*
+ * Popovers scale and fade in from their top-layer entry, and back out. They
+ * stay on a GPU layer of their own after too: while animating they're drawn as
+ * one, and a popup at a fractional position (under a trigger that is) would
+ * otherwise be repainted when the animation ends, its icons snapping a pixel
+ * away from the text.
+ */
+.zen__popover,
+.zen__dialog {
+    will-change: scale;
+}
 .zen__popover {
     transition:
         opacity 150ms,
@@ -819,6 +882,9 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         overlay 320ms allow-discrete,
         display 320ms allow-discrete;
 }
+.zen__dialog[data-side] {
+    will-change: translate;
+}
 .zen__dialog[data-side]:not([open]) {
     scale: none;
 }

package/dist/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA4IhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA7LoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAiMpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA8JhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA/MoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAmNpF"}

package/dist/toast/index.js

@@ -2,86 +2,97 @@
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
 import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
-import { createContext as a, useCallback as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createPortal as p } from "react-dom";
+import a from "../icons/micro/x-mark.js";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
 //#region packages/toast/index.tsx
-var m = 5e3, h = 3, g = 300, _ = 14, v = .05, y = 10, b = 60, x = .45, S = a(null), C = a(null);
-function w({ children: n, offset: r, viewportClassName: i }) {
+var g = 5e3, _ = 3, v = 300, y = 14, b = .05, x = 10, S = 60, C = .45, w = o(null), T = o(null);
+function E({ children: n, offset: r, viewportClassName: i }) {
 	t();
-	let [a, s] = u([]), b = l(0), x = l(/* @__PURE__ */ new Map()), w = l(/* @__PURE__ */ new Set()), [T, D] = u([]), [O, A] = u(!1);
-	c(() => A(!0), []);
-	let j = o((e) => (D((t) => [...t, e]), () => D((t) => t.filter((t) => t !== e))), []), M = T.at(-1) ?? (O ? document.body : null), [N, P] = u({}), F = o((e, t) => P((n) => n[e] === t ? n : {
+	let [a, o] = d([]), c = u(0), f = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
+	l(() => k(!0), []);
+	let A = s((e) => (E((t) => [...t, e]), () => E((t) => t.filter((t) => t !== e))), []), M = C.at(-1) ?? (D ? document.body : null), [N, P] = d({}), F = s((e, t) => P((n) => n[e] === t ? n : {
 		...n,
 		[e]: t
-	}), []), [I, L] = u(!1), [R, z] = u(!1), B = o((e, t = "fade") => {
-		s((n) => n.map((n) => n.id === e ? {
+	}), []), [I, L] = d(!1), [R, z] = d(!1), B = u(null), V = s((e) => {
+		B.current = e, O(e);
+	}, []);
+	l(() => {
+		let e = (e) => {
+			e.key === "F8" && B.current?.querySelector(".zen__toast:not([inert])") && (e.preventDefault(), B.current.focus());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []);
+	let H = s((e, t = "fade") => {
+		o((n) => n.map((n) => n.id === e ? {
 			...n,
 			leaving: t
 		} : n)), setTimeout(() => {
-			s((t) => {
+			o((t) => {
 				let n = t.filter((t) => t.id !== e);
 				return n.length || L(!1), n;
-			}), P(({ [e]: t, ...n }) => n), x.current.delete(e), w.current.delete(e);
-		}, g);
-	}, []), V = o((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
-		let a = b.current++, o = {
+			}), P(({ [e]: t, ...n }) => n), f.current.delete(e), S.current.delete(e);
+		}, v);
+	}, []), U = s((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
+		let a = c.current++, s = {
 			id: a,
 			title: e,
 			description: t,
 			tone: n,
 			action: r,
-			timeout: i ?? (r ? 1e4 : m)
+			timeout: i ?? (r ? 1e4 : g)
 		};
-		return s((e) => [...e, o]), a;
-	}, []), H = a.filter((e) => !e.leaving), U = (I || R) && H.length > 0, W = H.at(-1), G = W ? N[W.id] : void 0, K = H.slice(-3), q = U ? K.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * (K.length - 1) : (G ?? 0) + _ * (K.length - 1), J = (e) => {
-		let t = H.filter((t) => t.id > e.id), n = t.length;
+		return o((e) => [...e, s]), a;
+	}, []), W = a.filter((e) => !e.leaving), G = (I || R) && W.length > 0, K = W.at(-1), q = K ? N[K.id] : void 0, J = W.slice(-3), Y = G ? J.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * (J.length - 1) : (q ?? 0) + y * (J.length - 1), X = (e) => {
+		let t = W.filter((t) => t.id > e.id), n = t.length;
 		return {
 			index: n,
 			front: n === 0,
-			hidden: n >= h,
-			y: U ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + y * n) : -14 * Math.min(n, 2),
-			scale: U ? 1 : 1 - v * Math.min(n, 2),
-			height: !U && n > 0 ? G : void 0
+			hidden: n >= _,
+			y: G ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * n) : -14 * Math.min(n, 2),
+			scale: G ? 1 : 1 - b * Math.min(n, 2),
+			height: !G && n > 0 ? q : void 0
 		};
 	};
-	return /* @__PURE__ */ f(S.Provider, {
-		value: V,
-		children: [/* @__PURE__ */ d(C.Provider, {
-			value: j,
+	return /* @__PURE__ */ m(w.Provider, {
+		value: U,
+		children: [/* @__PURE__ */ p(T.Provider, {
+			value: A,
 			children: n
-		}), M && p(/* @__PURE__ */ d("section", {
-			ref: E,
+		}), M && h(/* @__PURE__ */ p("section", {
+			ref: V,
 			popover: "manual",
-			"aria-label": "Notifications",
-			"data-expanded": U || void 0,
+			tabIndex: -1,
+			"aria-label": "Notifications (F8)",
+			"data-expanded": G || void 0,
 			onMouseEnter: () => L(!0),
 			onMouseLeave: () => L(!1),
 			onFocus: () => z(!0),
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || z(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
+			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
 			style: {
-				height: q,
+				height: Y,
 				...r && { "--zen-toast-offset": r }
 			},
-			children: a.map((e, t) => /* @__PURE__ */ d(k, {
+			children: a.map((e, t) => /* @__PURE__ */ p(j, {
 				toast: e,
-				layout: J(e),
+				layout: X(e),
 				z: t + 1,
-				paused: U,
-				onDismiss: B,
+				paused: G,
+				onDismiss: H,
 				onHeight: F,
-				clocks: x.current,
-				entered: w.current
+				clocks: f.current,
+				entered: S.current
 			}, e.id))
 		}), M)]
 	});
 }
-function T(e, t) {
-	let n = s(C);
-	c(() => {
+function D(e, t) {
+	let n = c(T);
+	l(() => {
 		let r = e.current;
 		if (n && t && r) return n(r);
 	}, [
@@ -90,17 +101,17 @@ function T(e, t) {
 		e
 	]);
 }
-function E(e) {
+function O(e) {
 	if (e?.showPopover) try {
 		e.showPopover();
 	} catch {}
 }
-function D() {
-	let e = s(S);
+function k() {
+	let e = c(w);
 	if (!e) throw Error("useToast() needs a <ToastProvider> above it");
 	return e;
 }
-var O = {
+var A = {
 	success: {
 		icon: r,
 		ring: "border-primary/30",
@@ -123,126 +134,128 @@ var O = {
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function k({ toast: t, layout: n, z: r, paused: i, onDismiss: a, onHeight: o, clocks: s, entered: p }) {
-	let m = O[t.tone] ?? O.info, h = m.icon, g = l(null), _ = l(null), [v] = u(() => !p.has(t.id));
-	c(() => {
-		g.current?.isConnected && p.add(t.id);
-	}, [p, t.id]), s.has(t.id) || s.set(t.id, {
+function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: h }) {
+	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !h.has(t.id));
+	l(() => {
+		v.current?.isConnected && h.add(t.id);
+	}, [h, t.id]);
+	let [x, w] = d(!1);
+	l(() => {
+		if (!b) return;
+		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => w(!0)));
+		return () => cancelAnimationFrame(e);
+	}, [b]), c.has(t.id) || c.set(t.id, {
 		spent: 0,
 		since: null
 	});
-	let y = s.get(t.id), [S] = u(() => y.spent + (y.since === null ? 0 : Date.now() - y.since));
-	c(() => {
-		let e = _.current;
+	let T = c.get(t.id), [E] = d(() => T.spent + (T.since === null ? 0 : Date.now() - T.since));
+	l(() => {
+		let e = y.current;
 		if (!e) return;
-		let n = () => o(t.id, e.offsetHeight);
+		let n = () => s(t.id, e.offsetHeight);
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(e), () => r.disconnect();
-	}, [o, t.id]), c(() => {
+	}, [s, t.id]), l(() => {
 		if (!t.timeout || i || t.leaving) return;
-		y.since = Date.now();
-		let e = setTimeout(() => a(t.id), Math.max(0, t.timeout - y.spent));
+		T.since = Date.now();
+		let e = setTimeout(() => o(t.id), Math.max(0, t.timeout - T.spent));
 		return () => {
-			clearTimeout(e), y.since !== null && (y.spent += Date.now() - y.since), y.since = null;
+			clearTimeout(e), T.since !== null && (T.spent += Date.now() - T.since), T.since = null;
 		};
 	}, [
 		i,
 		t.id,
 		t.timeout,
 		t.leaving,
-		a,
-		y
+		o,
+		T
 	]);
-	let C = l(null), w = (e) => {
-		t.leaving || e.button !== 0 || e.target.closest("button") || (C.current = {
+	let D = u(null), O = (e) => {
+		t.leaving || e.button !== 0 || e.target.closest("button") || (D.current = {
 			x: e.clientX,
 			dx: 0,
 			t: e.timeStamp,
 			speed: 0
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.dataset.swiping = "");
-	}, T = (e) => {
-		if (!C.current) return;
-		let t = C.current, n = e.clientX - t.x;
+	}, k = (e) => {
+		if (!D.current) return;
+		let t = D.current, n = e.clientX - t.x;
 		t.speed = (n - t.dx) / Math.max(1, e.timeStamp - t.t), t.dx = n, t.t = e.timeStamp, e.currentTarget.style.setProperty("--zen-swipe", `${n > 0 ? n : n / 6}px`);
-	}, E = (e) => {
-		let n = C.current;
-		n && (C.current = null, delete e.currentTarget.dataset.swiping, n.dx > b || n.dx > 0 && n.speed > x ? a(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+	}, j = (e) => {
+		let n = D.current;
+		n && (D.current = null, delete e.currentTarget.dataset.swiping, n.dx > S || n.dx > 0 && n.speed > C ? o(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
-	return /* @__PURE__ */ f("div", {
-		ref: g,
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+		ref: v,
 		role: t.tone === "error" ? "alert" : "status",
-		"aria-atomic": "true",
+		"aria-live": "off",
 		"data-front": n.front || void 0,
 		"data-behind": !n.front && n.height !== void 0 || void 0,
 		inert: n.hidden || !!t.leaving,
-		onPointerDown: w,
-		onPointerMove: T,
-		onPointerUp: E,
-		onPointerCancel: E,
-		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", v && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", m.ring, m.glow),
+		onPointerDown: O,
+		onPointerMove: k,
+		onPointerUp: j,
+		onPointerCancel: j,
+		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
 		style: {
 			zIndex: r,
 			height: n.height,
 			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
 		},
-		children: [/* @__PURE__ */ f("div", {
-			ref: _,
+		children: [/* @__PURE__ */ m("div", {
+			ref: y,
 			className: "flex items-start gap-3 p-3.5 pr-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
-				/* @__PURE__ */ d("span", {
-					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", m.badge),
+				/* @__PURE__ */ p("span", {
+					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", g.badge),
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ d(h, { className: "size-4" })
+					children: /* @__PURE__ */ p(_, { className: "size-4" })
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
 					children: [
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ p("div", {
 							className: "text-sm font-semibold",
 							children: t.title
 						}),
-						t.description && /* @__PURE__ */ d("div", {
+						t.description && /* @__PURE__ */ p("div", {
 							className: "text-muted-foreground text-sm leading-5",
 							children: t.description
 						}),
-						t.action && /* @__PURE__ */ d("button", {
+						t.action && /* @__PURE__ */ p("button", {
 							type: "button",
 							onClick: () => {
-								t.action?.onClick(), a(t.id);
+								t.action?.onClick(), o(t.id);
 							},
-							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
+							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
 							children: t.action.label
 						})
 					]
 				}),
-				/* @__PURE__ */ d("button", {
+				/* @__PURE__ */ p("button", {
 					type: "button",
 					"aria-label": "Dismiss",
-					onClick: () => a(t.id),
-					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
-					children: /* @__PURE__ */ d("svg", {
-						viewBox: "0 0 16 16",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "1.8",
-						strokeLinecap: "round",
-						className: "size-3.5",
-						"aria-hidden": !0,
-						children: /* @__PURE__ */ d("path", { d: "m4 4 8 8M12 4l-8 8" })
-					})
+					onClick: () => o(t.id),
+					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
+					children: /* @__PURE__ */ p(a, { className: "size-3.5" })
 				})
 			]
-		}), t.timeout > 0 && /* @__PURE__ */ d("span", {
+		}), t.timeout > 0 && /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
-			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", m.bar),
+			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", g.bar),
 			style: {
 				animationDuration: `${t.timeout}ms`,
-				animationDelay: `${-S}ms`,
+				animationDelay: `${-E}ms`,
 				animationPlayState: i ? "paused" : void 0
 			}
 		})]
-	});
+	}), /* @__PURE__ */ p("span", {
+		className: "sr-only",
+		"aria-live": t.tone === "error" ? "assertive" : "polite",
+		"aria-atomic": "true",
+		children: x && [t.title, t.description].filter(Boolean).join(". ")
+	})] });
 }
 //#endregion
-export { w as default, D as useToast, T as useToastHost };
+export { E as default, k as useToast, D as useToastHost };

package/dist/tree/index.d.ts

@@ -1,5 +1,5 @@
 import { TableCellProps } from '../table';
-import { ComponentProps, CSSProperties, ReactNode } from 'react';
+import { ComponentProps, CSSProperties, FocusEvent, KeyboardEvent, ReactNode } from 'react';
 /** One visible row of a tree. */
 export interface TreeRowData<T> {
     item: T;
@@ -9,11 +9,19 @@ export interface TreeRowData<T> {
     parentKey: string | null;
     hasChildren: boolean;
     expanded: boolean;
+    /** Its place among its siblings (1-based), and how many siblings there are. */
+    position: number;
+    siblings: number;
 }
 /**
  * Headless tree for tables and lists: turns nested items into the rows that
  * are visible (children of collapsed rows are skipped), and expands/collapses
  * them. With the Tree* parts, children grow in and shrink away smoothly.
+ *
+ * Put `tree.tableProps` on the Table: it's then a tree grid (WAI-ARIA), one tab
+ * stop whose rows the keyboard moves between. Up and Down go row to row, Home
+ * and End to the first and last, Right opens a row (or goes to its first
+ * child), Left closes it (or goes to its parent).
  */
 export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded, rowHeight }: UseTreeOptions<T>): {
     rows: TreeRowData<T>[];
@@ -25,10 +33,20 @@ export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded
     expandAll: () => void;
     /** Closes every row. */
     collapseAll: () => void;
+    /** For the Table: a tree grid. */
+    tableProps: {
+        role: "treegrid";
+    };
     rowProps: (row: TreeRowData<T>) => {
         'aria-level': number;
         'aria-expanded': boolean | undefined;
+        'aria-posinset': number;
+        'aria-setsize': number;
         'data-depth': number;
+        'data-tree-key': string;
+        tabIndex: number;
+        onFocus: (e: FocusEvent<HTMLElement>) => void;
+        onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
         className: string;
         style: CSSProperties;
         onAnimationEnd: (e: {
@@ -38,12 +56,13 @@ export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded
     toggleProps: (row: TreeRowData<T>) => {
         expanded: boolean;
         onToggle: () => void;
+        tabIndex: number;
     };
     rowHeight: number;
 };
 export type Tree<T> = ReturnType<typeof useTree<T>>;
-/** A table row wired to useTree: tree semantics (aria-level, aria-expanded) and the open/close animation. */
-export declare function TreeRow<T>({ row, tree, className, style, ...rest }: TreeRowProps<T>): import('react').JSX.Element;
+/** A table row wired to useTree: tree semantics, the keyboard and the open/close animation. */
+export declare function TreeRow<T>({ row, tree, className, style, onFocus, onKeyDown, ...rest }: TreeRowProps<T>): import('react').JSX.Element;
 /** A cell in a TreeRow: its content sits in a box whose height animates as groups open and close. */
 export declare function TreeCell({ numeric, className, children, ...rest }: TableCellProps): import('react').JSX.Element;
 /** The first column's content: indented by depth, with the row's toggle (or a spacer, so labels line up). */

package/dist/tree/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}