themelia-ui 2.0.1 → 3.0.0

package/dist/{sidebar-BMgoyRxy.js → sidebar-D0N6ckJL.js}

@@ -1,16 +1,15 @@
-import "./css/sidebar2.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { o as t } from "./typography-BkxEiwQ1.js";
-import { c as n } from "./buttons-riLAPVQV.js";
-import { i as r, n as i, t as a } from "./tooltip-DksScngC.js";
-import { d as o, v as s } from "./display-Dehpw83R.js";
+import { c as n } from "./buttons-CqXKWty3.js";
+import { i as r, n as i, t as a } from "./tooltip-t1VQQ2tZ.js";
+import { d as o, v as s } from "./display-B3Q17h5z.js";
 import { t as c } from "./use-mobile-DwY2vtnf.js";
-import { o as l } from "./skeleton-Bxqw8kwa.js";
+import { o as l } from "./skeleton-DGR9df28.js";
 import { t as u } from "./strings-Co9_qArR.js";
-import { l as d } from "./text-inputs-BBpgIQEI.js";
+import { l as d } from "./text-inputs-DF_lD7pA.js";
 import { t as f } from "./render-with-children-Clu_g9wb.js";
-import { o as p, s as m, t as h } from "./overlay-A5bE-8n5.js";
-import { t as g } from "./sheet-3sbsGFus.js";
+import { o as p, s as m, t as h } from "./overlay-WQOsLd69.js";
+import { t as g } from "./sheet-CKcmRbJ9.js";
 import { PanelLeftIcon as _ } from "lucide-react";
 import { createContext as v, useCallback as y, useContext as b, useEffect as x, useId as S, useMemo as C, useRef as w, useState as T } from "react";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
@@ -68,8 +67,8 @@ var N = {
 	toggle: "Toggle navigation",
 	mobileTitle: "Navigation",
 	mobileDescription: "The application's main navigation."
-}, F = "sidebar:state", ee = "b";
-function I({ defaultOpen: t = !0, open: n, onOpenChange: r, persist: i = !0, keyboardShortcut: a = !0, contained: o = !1, strings: s, className: l, style: u, children: d, ref: f, ...p }) {
+}, F = "sidebar:state", I = "b";
+function L({ defaultOpen: t = !0, open: n, onOpenChange: r, persist: i = !0, keyboardShortcut: a = !0, contained: o = !1, strings: s, className: l, style: u, children: d, ref: f, ...p }) {
 	let m = c(), [h, g] = T(!1), [_, v] = T(m);
 	m !== _ && (v(m), m || g(!1));
 	let b = h && m, [S, D] = T(() => {
@@ -92,26 +91,26 @@ function I({ defaultOpen: t = !0, open: n, onOpenChange: r, persist: i = !0, key
 		i
 	]), j = w(null), M = y((e) => {
 		j.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
-	}, [f]), I = y(() => {
+	}, [f]), L = y(() => {
 		m ? g((e) => !e) : k((e) => !e);
 	}, [m, k]);
 	x(() => {
 		if (!a) return;
 		let e = (e) => {
-			if (e.key !== ee || !(e.metaKey || e.ctrlKey)) return;
+			if (e.key !== I || !(e.metaKey || e.ctrlKey)) return;
 			let t = e.target;
-			t?.isContentEditable || t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement || e.defaultPrevented || (t?.closest?.("[data-slot=\"sidebar-wrapper\"]") ?? document.querySelector("[data-slot=\"sidebar-wrapper\"]")) === j.current && (e.preventDefault(), I());
+			t?.isContentEditable || t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement || e.defaultPrevented || (t?.closest?.("[data-slot=\"sidebar-wrapper\"]") ?? document.querySelector("[data-slot=\"sidebar-wrapper\"]")) === j.current && (e.preventDefault(), L());
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [a, I]);
-	let L = C(() => ({
+	}, [a, L]);
+	let R = C(() => ({
 		state: O ? "expanded" : "collapsed",
 		open: O,
 		setOpen: k,
 		openMobile: b,
 		setOpenMobile: g,
 		isMobile: m,
-		toggleSidebar: I,
+		toggleSidebar: L,
 		strings: {
 			...P,
 			...s
@@ -121,11 +120,11 @@ function I({ defaultOpen: t = !0, open: n, onOpenChange: r, persist: i = !0, key
 		k,
 		b,
 		m,
-		I,
+		L,
 		s
 	]);
 	return /* @__PURE__ */ E(A.Provider, {
-		value: L,
+		value: R,
 		children: /* @__PURE__ */ E("div", {
 			ref: M,
 			"data-slot": "sidebar-wrapper",
@@ -139,7 +138,7 @@ function I({ defaultOpen: t = !0, open: n, onOpenChange: r, persist: i = !0, key
 }
 //#endregion
 //#region src/components/base/sidebar/sidebar.tsx
-function L({ side: t = "left", variant: n = "sidebar", collapsible: r = "offcanvas", className: i, surfaceClassName: a, mobileTitle: s, mobileDescription: c, strings: l, children: d, ...f }) {
+function R({ side: t = "left", variant: n = "sidebar", collapsible: r = "offcanvas", className: i, surfaceClassName: a, mobileTitle: s, mobileDescription: c, strings: l, children: d, ...f }) {
 	let { isMobile: _, state: v, openMobile: y, setOpenMobile: b, strings: x } = j(), C = u(x, l), w = S(), T = S();
 	return r === "none" ? /* @__PURE__ */ E("div", {
 		"data-slot": "sidebar",
@@ -192,23 +191,23 @@ function L({ side: t = "left", variant: n = "sidebar", collapsible: r = "offcanv
 		})]
 	});
 }
-function R({ className: t, onClick: r, ...i }) {
-	let { isMobile: a, openMobile: o, toggleSidebar: s, strings: c } = j();
+function z({ className: t, onClick: r, tone: i = "neutral", buttonStyle: a = "ghost", iconOnly: o = !0, ...s }) {
+	let { isMobile: c, openMobile: l, toggleSidebar: u, strings: d } = j();
 	return /* @__PURE__ */ E(n, {
 		"data-slot": "sidebar-trigger",
-		tone: "neutral",
-		buttonStyle: "ghost",
-		iconOnly: !0,
-		"aria-label": c.toggle,
+		tone: i,
+		buttonStyle: a,
+		iconOnly: o,
+		"aria-label": d.toggle,
 		className: e("sidebar-trigger--component", t),
 		onClick: (e) => {
-			r?.(e), !e.defaultPrevented && (a && !o && e.currentTarget.focus({ preventScroll: !0 }), s());
+			r?.(e), !e.defaultPrevented && (c && !l && e.currentTarget.focus({ preventScroll: !0 }), u());
 		},
-		...i,
+		...s,
 		children: /* @__PURE__ */ E(_, {})
 	});
 }
-function z({ className: t, ...n }) {
+function B({ className: t, ...n }) {
 	let { toggleSidebar: r, strings: i } = j();
 	return /* @__PURE__ */ E("button", {
 		type: "button",
@@ -222,7 +221,7 @@ function z({ className: t, ...n }) {
 		...n
 	});
 }
-function B({ className: t, render: n, ...r }) {
+function V({ className: t, render: n, ...r }) {
 	return k({
 		defaultTagName: "main",
 		props: O({ className: e(N.inset, t) }, r),
@@ -230,49 +229,49 @@ function B({ className: t, render: n, ...r }) {
 		state: { slot: "sidebar-inset" }
 	});
 }
-function V({ className: t, ...n }) {
+function H({ className: t, ...n }) {
 	return /* @__PURE__ */ E("div", {
 		"data-slot": "sidebar-header",
 		className: e("sidebar-header--component", N.header, t),
 		...n
 	});
 }
-function H({ className: t, ...n }) {
+function U({ className: t, ...n }) {
 	return /* @__PURE__ */ E("div", {
 		"data-slot": "sidebar-footer",
 		className: e("sidebar-footer--component", N.footer, t),
 		...n
 	});
 }
-function U({ className: t, ...n }) {
+function W({ className: t, ...n }) {
 	return /* @__PURE__ */ E("div", {
 		"data-slot": "sidebar-content",
 		className: e("sidebar-content--component", N.content, t),
 		...n
 	});
 }
-function W({ className: t, ...n }) {
+function G({ className: t, ...n }) {
 	return /* @__PURE__ */ E(s, {
 		"data-slot": "sidebar-separator",
 		className: e("sidebar-separator--component", N.separator, t),
 		...n
 	});
 }
-function G({ className: t, ...n }) {
+function K({ className: t, ...n }) {
 	return /* @__PURE__ */ E(d, {
 		"data-slot": "sidebar-input",
 		className: e("sidebar-input--component", N.input, t),
 		...n
 	});
 }
-function K({ className: t, ...n }) {
+function q({ className: t, ...n }) {
 	return /* @__PURE__ */ E("div", {
 		"data-slot": "sidebar-group",
 		className: e("sidebar-group--component", N.group, t),
 		...n
 	});
 }
-function q({ className: n, ...r }) {
+function J({ className: n, ...r }) {
 	return /* @__PURE__ */ E(t, {
 		tag: "div",
 		size: "inherit",
@@ -283,7 +282,7 @@ function q({ className: n, ...r }) {
 		...r
 	});
 }
-function J({ className: t, ...n }) {
+function Y({ className: t, ...n }) {
 	return /* @__PURE__ */ E("button", {
 		type: "button",
 		"data-slot": "sidebar-group-action",
@@ -291,34 +290,34 @@ function J({ className: t, ...n }) {
 		...n
 	});
 }
-function Y({ className: t, ...n }) {
+function X({ className: t, ...n }) {
 	return /* @__PURE__ */ E("div", {
 		"data-slot": "sidebar-group-content",
 		className: e("sidebar-group-content--component", N.groupContent, t),
 		...n
 	});
 }
-function X({ className: t, ...n }) {
+function Z({ className: t, ...n }) {
 	return /* @__PURE__ */ E("ul", {
 		"data-slot": "sidebar-menu",
 		className: e("sidebar-menu--component", N.menu, t),
 		...n
 	});
 }
-function Z({ className: t, ...n }) {
+function Q({ className: t, ...n }) {
 	return /* @__PURE__ */ E("li", {
 		"data-slot": "sidebar-menu-item",
 		className: e("sidebar-menu-item--component", N.menuItem, t),
 		...n
 	});
 }
-var Q = {
+var $ = {
 	sm: N.menuButtonSm,
 	md: void 0,
 	lg: N.menuButtonLg
 };
-function $({ size: t = "md", active: n = !1, variant: o = "default", render: s, closeOnSelectMobile: c = !0, tooltip: l, className: u, children: d, onClick: p, ...m }) {
-	let { isMobile: h, setOpenMobile: g, state: _ } = j(), v = e("sidebar-menu-button--component", N.menuButton, Q[t], o === "outline" && N.menuButtonOutline, u), y = k({
+function ee({ size: t = "md", active: n = !1, variant: o = "default", render: s, closeOnSelectMobile: c = !0, tooltip: l, className: u, children: d, onClick: p, ...m }) {
+	let { isMobile: h, setOpenMobile: g, state: _ } = j(), v = e("sidebar-menu-button--component", N.menuButton, $[t], o === "outline" && N.menuButtonOutline, u), y = k({
 		defaultTagName: "button",
 		render: s ? f(s, d) : void 0,
 		props: {
@@ -410,4 +409,4 @@ function oe({ size: t = "md", active: n = !1, closeOnSelectMobile: r = !0, rende
 	});
 }
 //#endregion
-export { I as C, j as E, R as S, M as T, ie as _, J as a, z as b, V as c, X as d, te as f, re as g, Z as h, K as i, G as l, $ as m, U as n, Y as o, ne as p, H as r, q as s, L as t, B as u, oe as v, P as w, W as x, ae as y };
+export { L as C, j as E, z as S, M as T, ie as _, Y as a, B as b, H as c, Z as d, te as f, re as g, Q as h, q as i, K as l, ee as m, W as n, X as o, ne as p, U as r, J as s, R as t, V as u, oe as v, P as w, G as x, ae as y };

package/dist/{skeleton-Bxqw8kwa.js → skeleton-DGR9df28.js}

@@ -1,6 +1,5 @@
-import "./css/skeleton.css";
 import { t as e } from "./cx--CBrhWH0.js";
-import { d as t } from "./display-Dehpw83R.js";
+import { d as t } from "./display-B3Q17h5z.js";
 import { t as n } from "./strings-Co9_qArR.js";
 import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/{spinner-Bv-2R-7S.js → spinner-CUAVFecI.js}

@@ -1,4 +1,3 @@
-import "./css/spinner.css";
 import { t as e } from "./cvm-DtsCA8iZ.js";
 import { t } from "./cx--CBrhWH0.js";
 import "react";
@@ -36,7 +35,7 @@ var i = {
 		tone: "primary"
 	}
 });
-function o({ size: e, tone: o, label: s, className: c, ...l }) {
+function o({ size: e = "md", tone: o = "primary", label: s, className: c, ...l }) {
 	return /* @__PURE__ */ r("span", {
 		"data-slot": "spinner",
 		role: s ? "status" : void 0,

package/dist/structure-D0WGQAP3.js

@@ -1,4 +1,3 @@
-import "./css/structure.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { n as t, r as n } from "./responsive-B4VDcIUK.js";
 import * as r from "react";

package/dist/styles/FACTORS.md

@@ -32,9 +32,5 @@ Every length scaled by `--density-scale` is wrapped in `round(…, 1px)`, so a p
 lands a control or a gap between two pixels: the ladder is 34, 30 and 24px at the default and
 32, 28 and 23px under `compact`.
 
-Per-family factors (`--button-scale` and 44 more) were removed: each needed a named token for
-every measurement it scaled. Scale one region with a scope instead.
-
-`verify factors` (`scripts/verify-css.mjs`) fails when a per-family factor reappears, when a
-length multiplies two factors (the effect squares), when a type token reaches the density
-factor, or when a density-scaled length is not rounded.
+There is no per-component factor: scale one region with a scope instead. Multiply a length by
+one factor only, or the effect squares.

package/dist/styles/SCOPES.md

@@ -68,8 +68,7 @@ or `data-theme="light"`, on the boundary itself or on any ancestor:
 }
 ```
 
-`scripts/gen-theme.mjs` emits both blocks, and `verify dark-overrides` holds a hand-written
-dark override to the same selectors, so write them exactly.
+A dark override of your own needs both blocks, with exactly these selectors.
 
 **The one nesting a descendant selector cannot see.** An explicit light island inside a
 `.dark` tree keeps its own boundary light, but a bare boundary nested inside that island

package/dist/styles/TOKENS.md

@@ -10,10 +10,8 @@ either derived from it or a measurement a rebrand has no opinion about.
 **A component's variables live with the component**: in its own module when one component
 reads them, in `styles/theming/` only when many do.
 
-The package's token checks fail on a dead token, a PASS-THROUGH (a second name for another
-token that does no arithmetic and is never re-pointed), an override nothing reads, a runtime
-token no stylesheet declares, a colour literal outside `tokens/`, and a length off the 2px
-grid.
+The package's token checks fail on a `var()` nothing defines, a token JavaScript reads but no
+stylesheet declares, and a literal colour, radius, spacing or hairline in a component module.
 
 ## What earns a component token
 
@@ -26,15 +24,13 @@ One of three things, and a name that does none of them is noise:
 A name like `--sidebar-p: var(--space-md)` does none: however often it is read, it is one
 name in front of one step, and every reader can say `--space-md`.
 
-Two exemptions. A **family with a member re-declared in another file** is an extension
-point: inlining `--text-role-main` breaks the inverse Alert that re-points it for its own
-subtree. A token **named in TSX or a test** has a reader a `var()` scan cannot see.
+Two exemptions. A **token family with a member re-declared in another file** is an
+extension point: inlining `--text-role-main` breaks the inverse Alert that re-points it for
+its own subtree. A token **named in TSX or a test** has a reader a `var()` scan cannot see.
 
 ## What a theme owns
 
-`themes/default.css` is shadcn-shaped, so a shadcn theme drops in. In the repository it is
-generated from `scripts/theme-manifest.mjs` by `npm run tokens:theme`; edit the manifest,
-not the file.
+`themes/default.css` is shadcn-shaped, so a shadcn theme drops in.
 
 **Colour** resolves through the ramp in `tokens/palette.css`. The theme file holds no
 literals, so a rebrand moves the ramp rather than forty separate values.
@@ -278,7 +274,7 @@ with custom before/after values. Specialized timelines and ledgers keep their ow
 
 `--content-block-p` and `--overlay-region-p` are optional local overrides. They are unset
 (`initial`) by default, so each axis follows the shared surface controls; setting either
-sets both axes for that surface. Do not add another family-specific padding variable for
+sets both axes for that surface. Do not add another component-specific padding variable for
 the same job.
 
 Set fonts at the theme root or an explicit scope. Dark regions inherit the font family;

package/dist/styles/themes/default.css

@@ -61,7 +61,7 @@
 	--sidebar-accent: var(--neutral-75); /* Sidebar hover and selected-row neutral fill. */
 	--sidebar-accent-foreground: var(--neutral-900); /* Text and icons on sidebar accent fills. */
 	--sidebar-border: var(--neutral-200); /* Sidebar dividers and shell border. */
-	--sidebar-ring: var(--neutral-400); /* Focus-visible ring inside the sidebar. */
+	--sidebar-ring: var(--neutral-400); /* The sidebar's focus-ring seed, as --ring is the page's: sidebar surfaces mix it 70/30 toward --sidebar-foreground in light, read it unmixed in dark, and compose --focus-ring, --focus-ring-inset and --field-focus-ring from it. */
 	--shadow-ink: var(--pure-black); /* Ink every elevation tier tints with. */
 	--shadow-2xs: 0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 4%, transparent); /* shadcn compatibility only; no kit surface reads it. Resting lift is --shadow-xs. */
 	--shadow-xs: 0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 6%, transparent), 0 1px 1px -1px color-mix(in oklab, var(--shadow-ink) 6%, transparent); /* Resting lift: a framed card's bezel, a raised chip, a slider thumb, a floating sidebar. */

package/dist/styles/theming/colors.css

@@ -1,13 +1,12 @@
 /*
  * Alpha ladder — the global colour wiring layer.
  *
- *
  * Every colour/alpha pair the components actually use, declared once. Modules
  * reference `var(--border-60)` rather than repeating color-mix() inline, which
  * gives consumers a single override point per pair and keeps modules value-free.
  *
  * `color-mix(in oklab, …)` is exactly what Tailwind v4 emits for `/nn` opacity,
- * so the rendered colour is identical to the source implementation.
+ * so each pair renders the colour the matching Tailwind utility would.
  *
  * 38 pairs across 13 colours.
  *

package/dist/styles/theming/sizing.css

@@ -92,7 +92,7 @@
 	/*
 	 * Menu rows: one rhythm for the dropdown menu, popover menu, command list and select
 	 * list, so menus seen side by side match. The inline inset is --row-px.
-	 * 4px block inset, not 5: verify token-budget holds lengths to a 2px grid.
+	 * A 4px block inset, on the 2px grid.
 	 */
 	--menu-row-py: round(calc(0.25rem * var(--density-scale, var(--scale))), 1px);
 	/*

package/dist/styles/tokens/primitives.css

@@ -6,7 +6,7 @@
 :root {
 	/*
 	 * One height for every control, so a button beside a field matches it. A whole-pixel
-	 * value (34px): a fractional height centres circles on half pixels (tests/geometry.spec.ts).
+	 * value (34px): a fractional height centres circles on half pixels (tests/audit/geometry.spec.ts).
 	 */
 	--height-control: 2.125rem; /* Default height for buttons, inputs, selects and triggers. */
 	--control-x: 0.75rem; /* Default inline padding for buttons and field controls. */

package/dist/{table-BXL7IP5P.js → table-BC4qqsUb.js}

@@ -1,4 +1,3 @@
-import "./css/table.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { i as t, o as n } from "./typography-BkxEiwQ1.js";
 import { i as r } from "./observers-CKohiJqU.js";
@@ -36,7 +35,7 @@ var S = c(null), C = c(y), w = {
 	start: !1,
 	end: !1
 };
-function T({ className: t, containerClassName: n, strings: a, stickyHeader: o, ...s }) {
+function T({ className: t, containerClassName: n, strings: a, stickyHeader: o = !1, ...s }) {
 	let c = p(() => ({
 		...y,
 		...a
@@ -109,7 +108,7 @@ function k({ className: t, ...n }) {
 		...n
 	});
 }
-function A({ className: n, children: r, align: i, wrap: c, sortable: l, sortDirection: u = null, onSort: d, ...f }) {
+function A({ className: n, children: r, align: i, wrap: c = !1, sortable: l, sortDirection: u = null, onSort: d, ...f }) {
 	let p = x(r) ? /* @__PURE__ */ g(t, {
 		className: "table--head-text",
 		children: r
@@ -131,7 +130,7 @@ function A({ className: n, children: r, align: i, wrap: c, sortable: l, sortDire
 		}) : p
 	});
 }
-function j({ className: t, children: r, align: i, wrap: a, ...o }) {
+function j({ className: t, children: r, align: i, wrap: a = !1, ...o }) {
 	return /* @__PURE__ */ g("td", {
 		className: e("table--cell", v.cell, i && b[i], a && v.wrap, t),
 		...o,