@jonmilner/ui 0.2.5 → 0.2.7

package/dist/Checkbox/Checkbox.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
-@layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}
+@layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}

package/dist/Toast/client.mjs

@@ -11,10 +11,10 @@ import { CircleCheckIcon as c } from "../icons/CircleCheckIcon.mjs";
 import { InfoIcon as l } from "../icons/InfoIcon.mjs";
 import { announcer as u, close as d, content as f, list as p, root as m, toast as h, viewport as g } from "./Toast.css.mjs";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { createContext as y, use as b, useCallback as x, useMemo as S, useRef as C, useState as w } from "react";
-import { Toast as T } from "@base-ui/react/toast";
+import { createContext as y, use as b, useCallback as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
+import { Toast as E } from "@base-ui/react/toast";
 //#region src/Toast/client.tsx
-var E = {
+var D = {
 	info: {
 		Icon: l,
 		color: "fgMuted"
@@ -27,13 +27,13 @@ var E = {
 		Icon: o,
 		color: "danger"
 	}
-}, D = y(null), O = y(null), k = (e) => e !== void 0 && Object.hasOwn(E, e);
-function A({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
-	let { container: c, ref: l } = a(), [u] = w(T.createToastManager);
-	return /* @__PURE__ */ _(T.Provider, {
+}, O = y(null), k = y(null), A = (e) => e !== void 0 && Object.hasOwn(D, e);
+function j({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
+	let { container: c, ref: l } = a(), [u] = T(E.createToastManager);
+	return /* @__PURE__ */ _(E.Provider, {
 		limit: e,
 		toastManager: u,
-		children: /* @__PURE__ */ v(D, {
+		children: /* @__PURE__ */ v(O, {
 			value: u,
 			children: [
 				/* @__PURE__ */ _(t, {
@@ -42,23 +42,23 @@ function A({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifica
 					ref: l
 				}),
 				s,
-				/* @__PURE__ */ _(M, {}),
-				/* @__PURE__ */ _(T.Portal, {
+				/* @__PURE__ */ _(N, {}),
+				/* @__PURE__ */ _(E.Portal, {
 					container: c,
-					children: /* @__PURE__ */ _(j, {
+					children: /* @__PURE__ */ _(M, {
 						className: i,
 						regionLabel: r,
 						style: o,
-						children: /* @__PURE__ */ _(N, { closeLabel: n })
+						children: /* @__PURE__ */ _(P, { closeLabel: n })
 					})
 				})
 			]
 		})
 	});
 }
-function j({ regionLabel: n, className: r, style: i, children: a }) {
-	let o = C(null);
-	return /* @__PURE__ */ _(T.Viewport, {
+function M({ regionLabel: n, className: r, style: i, children: a }) {
+	let o = w(null);
+	return /* @__PURE__ */ _(E.Viewport, {
 		"aria-atomic": void 0,
 		"aria-label": n,
 		"aria-live": "off",
@@ -75,15 +75,15 @@ function j({ regionLabel: n, className: r, style: i, children: a }) {
 		}),
 		children: /* @__PURE__ */ _("div", {
 			className: p,
-			children: /* @__PURE__ */ _(O, {
+			children: /* @__PURE__ */ _(k, {
 				value: o,
 				children: a
 			})
 		})
 	});
 }
-function M() {
-	let { toasts: e } = T.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
+function N() {
+	let { toasts: e } = E.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
 		e.title,
 		" ",
 		e.description
@@ -103,20 +103,29 @@ function M() {
 		})]
 	});
 }
-function N({ closeLabel: e }) {
-	let { toasts: t } = T.useToastManager();
-	return t.map((t) => /* @__PURE__ */ _(P, {
+function P({ closeLabel: e }) {
+	let { toasts: t } = E.useToastManager();
+	return t.map((t) => /* @__PURE__ */ _(F, {
 		closeLabel: e,
 		toast: t
 	}, t.id));
 }
-function P({ toast: a, closeLabel: o }) {
-	let c = k(a.type) ? a.type : "info", { Icon: l, color: u } = E[c], p = b(D), g = b(O), [y, S] = w(!1), C = x((e) => {
-		e && S(getComputedStyle(e).direction === "rtl");
-	}, []);
-	return /* @__PURE__ */ v(T.Root, {
+function F({ toast: a, closeLabel: o }) {
+	let c = A(a.type) ? a.type : "info", { Icon: l, color: u } = D[c], p = b(O), g = b(k), [y, C] = T(!1), j = x((e) => {
+		e && C(getComputedStyle(e).direction === "rtl");
+	}, []), M = w(!1), N = a.transitionStatus === "ending";
+	return S(() => {
+		let e = a.ref?.current, t = e?.ownerDocument.activeElement;
+		if (!N || M.current || !t || !e.contains(t)) return;
+		let n = g?.current;
+		n instanceof HTMLElement && n.isConnected && n.focus({ preventScroll: !0 });
+	}, [
+		N,
+		g,
+		a.ref
+	]), /* @__PURE__ */ v(E.Root, {
 		"aria-modal": void 0,
-		ref: C,
+		ref: j,
 		render: /* @__PURE__ */ _(t, {
 			alignItems: "start",
 			backgroundColor: "bgRaised",
@@ -145,28 +154,28 @@ function P({ toast: a, closeLabel: o }) {
 				flexGrow: 1,
 				gap: "8",
 				children: [
-					/* @__PURE__ */ _(T.Title, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(E.Title, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						weight: "medium"
 					}) }),
-					/* @__PURE__ */ _(T.Description, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(E.Description, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						color: "fgMuted",
 						size: "sm"
 					}) }),
-					/* @__PURE__ */ _(T.Action, { render: /* @__PURE__ */ _(i, {
+					/* @__PURE__ */ _(E.Action, { render: /* @__PURE__ */ _(i, {
 						size: "sm",
 						variant: "secondary"
 					}) })
 				]
 			}),
-			/* @__PURE__ */ _(T.Close, {
+			/* @__PURE__ */ _(E.Close, {
 				"aria-hidden": !1,
 				"aria-label": o,
 				onClick: (e) => {
 					if (e.detail !== 0 || !p) return;
-					let t = a.ref?.current, n = (t && F(t)) ?? g?.current;
-					n instanceof HTMLElement && (e.preventBaseUIHandler(), p.close(a.id), requestAnimationFrame(() => {
+					let t = a.ref?.current, n = (t && I(t)) ?? g?.current;
+					n instanceof HTMLElement && (e.preventBaseUIHandler(), M.current = !0, p.close(a.id), requestAnimationFrame(() => {
 						n.isConnected && n.focus();
 					}));
 				},
@@ -181,14 +190,14 @@ function P({ toast: a, closeLabel: o }) {
 		]
 	});
 }
-function F(e) {
+function I(e) {
 	let t = (e, n) => !e || !e.matches("[data-ending-style]") ? e : t(n ? e.nextElementSibling : e.previousElementSibling, n);
 	return (t(e.nextElementSibling, !0) ?? t(e.previousElementSibling, !1))?.querySelector(`.${d}`);
 }
-function I() {
-	let e = b(D);
+function L() {
+	let e = b(O);
 	if (!e) throw Error("useToast must be called under Toast.Provider.");
-	return S(() => {
+	return C(() => {
 		let t = (t) => e.close(t);
 		return {
 			add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {
@@ -216,4 +225,4 @@ function I() {
 	}, [e]);
 }
 //#endregion
-export { M as ToastAnnouncer, P as ToastItem, A as ToastProvider, j as ToastStack, I as useToast };
+export { N as ToastAnnouncer, F as ToastItem, j as ToastProvider, M as ToastStack, L as useToast };

package/dist/docs/Checkbox.md

@@ -22,13 +22,13 @@ A two-state choice, with a third mixed state for a "select all" over a partly se
 - Put `name` on the `Field` (or on the Checkbox outside one). A checked box submits `value` (default `"on"`); an unchecked one submits nothing unless you set `uncheckedValue`.
 - `checked` with `onCheckedChange` controls it; `defaultChecked` leaves it uncontrolled.
 - `indeterminate` shows the dash and sets `aria-checked="mixed"`, whatever `checked` is. Clear it yourself when the user clicks: Base UI toggles `checked` but leaves `indeterminate` as you pass it.
-- `disabled` takes it out of the tab order and dashes the border; `readOnly` keeps it focusable and announced (`aria-readonly`) but unchangeable; it looks like an editable one apart from the cursor and no hover, so say nearby why it cannot change. Set `disabled` on the `Field` to disable the checkbox and mute the label together.
+- `disabled` takes it out of the tab order and dashes the border; `readOnly` keeps it focusable and announced (`aria-readonly`) but unchangeable, dots the border (disabled's dashes win when both are set) and drops the hover; still say nearby why it cannot change. Set `disabled` on the `Field` to disable the checkbox and mute the label together.
 - Space toggles it; Enter submits the form it is in, as on a native checkbox.
 - For an error, set `invalid` on the `Field` with the message in `Field.Error`; the box border thickens and turns `danger`, and the message says what is wrong.
 - Layout and the target are default style props (`display="inline-flex"`, centered, `flexShrink={0}`, `minInlineSize` and `minBlockSize` `"xs"`, 24px). Raise them freely; never set them below `"xs"`. The box is 16px; there are no sizes yet.
 - `className` is a string and `style` an object (not Base UI's state functions); they go to the span, after the defaults. `render` and `nativeButton` are not accepted.
 - The module has no hooks, so a server component can render it. `onCheckedChange` is a function: set it from a client component.
-- Style states off the ARIA attributes (`[aria-checked='true']`, `'mixed'`, `[aria-disabled='true']`, `[aria-invalid='true']`), not Base UI's `data-*` attributes.
+- Style states off the ARIA attributes (`[aria-checked='true']`, `'mixed'`, `[aria-disabled='true']`, `[aria-readonly='true']`, `[aria-invalid='true']`), not Base UI's `data-*` attributes.
 
 ## Do
 
@@ -77,7 +77,7 @@ A two-state choice, with a third mixed state for a "select all" over a partly se
 
 - Role `checkbox` with `aria-checked` `"true"`, `"false"` or `"mixed"`; `aria-disabled`, `aria-readonly` and `aria-required` follow the props, and `aria-invalid` the `Field`.
 - The label, description and error reach it through `aria-labelledby` and `aria-describedby`, which Base UI adds after hydration; server HTML has the label's `for`.
-- Checked and mixed are a filled box with a tick or a dash, invalid a thicker border, disabled a dashed one, so no state is color alone. The box border is `borderStrong` (3:1 on every surface).
+- Checked and mixed are a filled box with a tick or a dash, invalid a thicker border, disabled a dashed one, read-only a dotted one (the fill stops inside it, so the dots show when checked), so no state is color alone and each survives forced colors. The box border is `borderStrong` (3:1 on every surface).
 - Under forced colors the box keeps its role colors' system mappings: the fill is `LinkText` and the mark `Canvas` when checked, the border `CanvasText`, the focus ring `Highlight`.
 - The target is 24 by 24 CSS px; the focus ring wraps the target, not the box.
 

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "components": [
     {
       "name": "AlertDialog",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"