themelia-ui 2.0.0 → 3.0.0

package/dist/styles/theming/colors.css

@@ -1,15 +1,14 @@
 /*
  * 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.
  *
- * 45 pairs across 12 colours.
+ * 38 pairs across 13 colours.
  *
  * Declared at every scope boundary rather than `:root`, so a scope that rethemes a colour
  * re-derives its whole ladder. See styles/SCOPES.md.
@@ -21,72 +20,78 @@
 .light,
 .dark {
 
-	/* border — 3 steps, 161 uses */
-	--border-50: color-mix(in oklab, var(--border) 50%, transparent);
+	/* border — 1 step */
 	--border-60: color-mix(in oklab, var(--border) 60%, transparent);
-	--border-70: color-mix(in oklab, var(--border) 70%, transparent);
 
-	/* muted — 7 steps, 149 uses */
+	/* muted — 5 steps */
 	--muted-20: color-mix(in oklab, var(--muted) 20%, transparent);
-	--muted-30: color-mix(in oklab, var(--muted) 30%, transparent);
-	--muted-35: color-mix(in oklab, var(--muted) 35%, transparent);
 	--muted-40: color-mix(in oklab, var(--muted) 40%, transparent);
 	--muted-50: color-mix(in oklab, var(--muted) 50%, transparent);
 	--muted-60: color-mix(in oklab, var(--muted) 60%, transparent);
 	--muted-80: color-mix(in oklab, var(--muted) 80%, transparent);
 
-	/* destructive — 5 steps, 104 uses */
+	/* destructive — 5 steps */
 	--destructive-5: color-mix(in oklab, var(--destructive) 5%, transparent);
 	--destructive-10: color-mix(in oklab, var(--destructive) 10%, transparent);
 	--destructive-20: color-mix(in oklab, var(--destructive) 20%, transparent);
 	--destructive-30: color-mix(in oklab, var(--destructive) 30%, transparent);
 	--destructive-40: color-mix(in oklab, var(--destructive) 40%, transparent);
 
-	/* primary — 8 steps, 62 uses */
+	/* primary — 7 steps */
 	--primary-5: color-mix(in oklab, var(--primary) 5%, transparent);
 	--primary-10: color-mix(in oklab, var(--primary) 10%, transparent);
-	--primary-12: color-mix(in oklab, var(--primary) 12%, transparent);
 	--primary-15: color-mix(in oklab, var(--primary) 15%, transparent);
 	--primary-20: color-mix(in oklab, var(--primary) 20%, transparent);
 	--primary-25: color-mix(in oklab, var(--primary) 25%, transparent);
 	--primary-30: color-mix(in oklab, var(--primary) 30%, transparent);
 	--primary-40: color-mix(in oklab, var(--primary) 40%, transparent);
 
-	/* foreground — 3 steps, 40 uses */
+	/* foreground — 3 steps */
 	--foreground-8: color-mix(in oklab, var(--foreground) 8%, transparent);
 	--foreground-10: color-mix(in oklab, var(--foreground) 10%, transparent);
 	--foreground-20: color-mix(in oklab, var(--foreground) 20%, transparent);
 
-	/* warning — 5 steps, 34 uses */
+	/* warning — 4 steps */
 	--warning-10: color-mix(in oklab, var(--warning) 10%, transparent);
 	--warning-20: color-mix(in oklab, var(--warning) 20%, transparent);
 	--warning-30: color-mix(in oklab, var(--warning) 30%, transparent);
 	--warning-40: color-mix(in oklab, var(--warning) 40%, transparent);
-	--warning-50: color-mix(in oklab, var(--warning) 50%, transparent);
 
-	/* success — 3 steps, 30 uses */
+	/* success — 3 steps */
+	--success-5: color-mix(in oklab, var(--success) 5%, transparent);
 	--success-10: color-mix(in oklab, var(--success) 10%, transparent);
-	--success-15: color-mix(in oklab, var(--success) 15%, transparent);
 	--success-30: color-mix(in oklab, var(--success) 30%, transparent);
 
-	/* info — 5 steps, 24 uses */
+	/* info — 3 steps */
 	--info-5: color-mix(in oklab, var(--info) 5%, transparent);
 	--info-10: color-mix(in oklab, var(--info) 10%, transparent);
-	--info-15: color-mix(in oklab, var(--info) 15%, transparent);
 	--info-30: color-mix(in oklab, var(--info) 30%, transparent);
-	--info-40: color-mix(in oklab, var(--info) 40%, transparent);
 
-	/* muted-foreground — 2 steps, 20 uses */
+	/* muted-foreground — 2 steps */
 	--muted-foreground-40: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
 	--muted-foreground-70: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
 
-	/* background — 2 steps, 9 uses */
+	/* background — 2 steps */
 	--background-70: color-mix(in oklab, var(--background) 70%, transparent);
 	--background-80: color-mix(in oklab, var(--background) 80%, transparent);
 
-	/* input — 1 step, 4 uses */
+	/* input — 1 step */
 	--input-30: color-mix(in oklab, var(--input) 30%, transparent);
 
-	/* accent — 1 step, 1 use */
+	/* accent — 1 step */
 	--accent-50: color-mix(in oklab, var(--accent) 50%, transparent);
+
+	/* sidebar-accent — the --accent-50 row hover on the sidebar palette */
+	--sidebar-accent-50: color-mix(in oklab, var(--sidebar-accent) 50%, transparent);
+}
+
+/*
+ * --surface-ground: "the surface I sit on", for sticky cells, cut-out rings, opaque halos
+ * and fades. A surface that paints a ground (Card, popups, the sidebar, table and data-view
+ * frames) sets it; readers write var(--surface-ground, var(--background)). A colour island
+ * resets it so the fallback re-derives in the island's mode instead of inheriting a ground
+ * resolved outside it. Zero specificity, so any surface inside the island still wins.
+ */
+:where([data-theme], .light, .dark) {
+	--surface-ground: initial;
 }

package/dist/styles/theming/feedback.css

@@ -11,7 +11,6 @@
 	/* Empty state illustration height. */
 	--empty-art-h: round(calc(6rem * var(--density-scale, var(--scale))), 1px);
 
-	--alert-meta-label-fg: var(--muted-foreground);
 	/* Progress bar fill; the .tone* classes re-point it. */
 	--progress-fill: var(--primary);
 

package/dist/styles/theming/focus.css

@@ -22,8 +22,9 @@
 	/*
 	 * One edge for every control that sits in a row with others (fields, selects, pickers,
 	 * triggers, filter pills, outline buttons). Derived so scoped --input/--foreground
-	 * overrides recompute it. 30% foreground sits deliberately below WCAG 1.4.11's 3:1; the
-	 * hover edge, focus ring and invalid border clear it. tests/tokens.spec.ts holds its floor.
+	 * overrides recompute it. The idle edge (30% foreground here, re-mixed for dark below) sits
+	 * deliberately below WCAG 1.4.11's 3:1; the hover edge, focus ring and invalid border clear
+	 * it. tests/tokens.spec.ts holds its floor.
 	 */
 	--control-border: color-mix(in oklab, var(--input) 70%, var(--foreground) 30%);
 	--control-border-hover: color-mix(in oklab, var(--input) 45%, var(--foreground) 55%);
@@ -59,23 +60,29 @@
 
 /*
  * Dark: the unmixed ring seed, which clears 3:1 against the canvas. The invalid border is
- * lifted toward the ink so it stays stronger than the idle border.
+ * the destructive ink, lifted toward the foreground so it stays stronger than the idle border.
+ * Dark --input is translucent white, so the light mixes would land the control edges at
+ * about 3.8:1; these hold the same 2.4:1 idle and 4.3:1 hover as light.
  */
 .dark,
 [data-theme="dark"],
 :is(.dark, [data-theme="dark"]) :is([data-ui-scope], [data-density]):not(.light, [data-theme="light"]) {
+	--control-border: color-mix(in oklab, var(--input) 85%, var(--foreground) 15%);
+	--control-border-hover: color-mix(in oklab, var(--input) 65%, var(--foreground) 35%);
 	--focus-ring-color: var(--ring);
 	--invalid-ring-color: var(--destructive-40);
-	--invalid-ring-border: color-mix(in oklab, var(--destructive) 85%, var(--foreground));
+	--invalid-ring-border: var(--destructive-accent);
 }
 
 /* The same values under the OS preference (`colorScheme: "system"`); verify dark-overrides keeps both in step. */
 @media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]),
-	[data-ui-scope]:not([data-theme="light"]),
-	[data-density]:not([data-theme="light"]) {
+	:root:not(.light, [data-theme="light"]),
+	[data-ui-scope]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *),
+	[data-density]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *) {
+		--control-border: color-mix(in oklab, var(--input) 85%, var(--foreground) 15%);
+		--control-border-hover: color-mix(in oklab, var(--input) 65%, var(--foreground) 35%);
 		--focus-ring-color: var(--ring);
 		--invalid-ring-color: var(--destructive-40);
-		--invalid-ring-border: color-mix(in oklab, var(--destructive) 85%, var(--foreground));
+		--invalid-ring-border: var(--destructive-accent);
 	}
 }

package/dist/styles/theming/motion.css

@@ -22,12 +22,15 @@
 [data-theme],
 .light,
 .dark {
-	/* The default interactive transition: colour and elevation only. */
+	/*
+	 * The default interactive transition: colour and elevation only, on the same ease-out
+	 * as every other state change, so a button and the row beside it settle together.
+	 */
 	--transition-control:
-		background-color var(--duration-fast) var(--ease-in-out),
-		border-color var(--duration-fast) var(--ease-in-out),
-		color var(--duration-fast) var(--ease-in-out),
-		box-shadow var(--duration-fast) var(--ease-in-out);
+		background-color var(--duration-fast) var(--ease-out),
+		border-color var(--duration-fast) var(--ease-out),
+		color var(--duration-fast) var(--ease-out),
+		box-shadow var(--duration-fast) var(--ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles/theming/overlay.css

@@ -11,6 +11,13 @@
 	--overlay-edge-md: 75%;
 	--overlay-edge-lg: 90%;
 	--overlay-edge-full: 100%;
+
+	/*
+	 * A tooltip arrow: a 45°-rotated square centred on the edge, so half shows and it protrudes
+	 * size × 0.707. Global because Tooltip and the map's tooltip both draw one. Keep in step
+	 * with `sideOffset` in tooltip.tsx.
+	 */
+	--tooltip-arrow-size: 0.5rem;
 }
 
 /*

package/dist/styles/theming/sizing.css

@@ -76,19 +76,23 @@
 	--size-avatar: round(calc(var(--avatar) * var(--density-scale, var(--scale))), 1px);
 	--size-avatar-lg: round(calc(var(--avatar) * 1.25 * var(--density-scale, var(--scale))), 1px);
 
-	/* Surface padding for cards and multi-content surfaces, from --surface-x / --surface-y. */
+	/*
+	 * Surface padding for cards and multi-content surfaces, from --surface-x / --surface-y:
+	 * 8, 16, 28px at the defaults. Table cells take --surface-px inline too, so they align
+	 * with the table's toolbar and footer.
+	 */
 	--surface-px-xs: round(calc(var(--surface-x) * 0.5 * var(--density-scale, var(--scale))), 1px);
 	--surface-px: round(calc(var(--surface-x) * var(--density-scale, var(--scale))), 1px);
-	--surface-px-lg: round(calc(var(--surface-x) * 1.8 * var(--density-scale, var(--scale))), 1px);
+	--surface-px-lg: round(calc(var(--surface-x) * 1.75 * var(--density-scale, var(--scale))), 1px);
 	--surface-py-xs: round(calc(var(--surface-y) * 0.5 * var(--density-scale, var(--scale))), 1px);
 	--surface-py: round(calc(var(--surface-y) * var(--density-scale, var(--scale))), 1px);
-	--surface-py-lg: round(calc(var(--surface-y) * 1.8 * var(--density-scale, var(--scale))), 1px);
+	--surface-py-lg: round(calc(var(--surface-y) * 1.75 * var(--density-scale, var(--scale))), 1px);
 
 
 	/*
 	 * 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);
 	/*
@@ -102,7 +106,7 @@
 	 * (--space-md at the defaults) so they sit concentric in it.
 	 */
 
-	/* Row insets for list, menu, command and table rows, from --row-x / --row-y. */
+	/* Row insets for list, menu and command rows, from --row-x / --row-y. */
 	--row-px: round(calc(var(--row-x) * var(--density-scale, var(--scale))), 1px);
 	--row-py: round(calc(var(--row-y) * var(--density-scale, var(--scale))), 1px);
 

package/dist/styles/theming/text.css

@@ -2,6 +2,8 @@
 :root {
 	--rich-text-list-indent: 1.5em;
 	--rich-text-quote-indent: 1em;
+	/* Every underlined link and link-like action: TextLink, RichText, Item titles, TextButton. */
+	--link-underline-offset: 3px;
 }
 
 /*
@@ -15,7 +17,7 @@
 .light,
 .dark {
 		/*
-		 * Roles. An inverting surface (the auth panel) overrides these in its own scope and
+		 * Roles. An inverting surface (the inverse Alert) overrides these in its own scope and
 		 * every Text inside follows; keep them indirect.
 		 */
 		--text-role-main: var(--foreground);

package/dist/styles/theming/typography.css

@@ -13,7 +13,10 @@
 	--leading-normal: 1.5;
 	--leading-relaxed: 1.625;
 
+	/* Uppercase labels and shortcuts. */
 	--tracking-widest: 0.1em;
+	/* Heading xl and 2xl only: large display type tightens; body and small titles do not. */
+	--tracking-tight: -0.025em;
 }
 
 /*

package/dist/styles/tokens/components.css

@@ -5,7 +5,7 @@
 
 :root {
 	/* Rows */
-	--row-x: 0.75rem; /* Shared inline inset for list, menu, command, and table rows. */
+	--row-x: 0.75rem; /* Shared inline inset for list, menu, and command rows; table cells use the surface inset. */
 	--row-y: 0.5rem; /* Default vertical row inset with an 8px breathing floor. */
 
 	/* Surface insets; theming/sizing.css derives the scaled steps. */

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/styles/tokens/states.css

@@ -18,7 +18,7 @@
 	--info: var(--info-600); /* Semantic informational fill, border, and foreground accent. */
 	--info-foreground: var(--neutral-25); /* Text and icons on solid informational fills. */
 	--link-color: var(--link-600); /* Inline links and link-like copyable values. */
-	--primary-accent: var(--brand-600); /* Brand color drawn AS foreground — icons, spinners, active marks — on the app surface. Matches --primary here; lightens in dark, where --primary stays put so primary fills keep the kit color. Not shadcn's --accent, which is a muted hover surface. */
+	--primary-accent: var(--brand-600); /* Brand color drawn AS foreground — text, icons, spinners, active marks — on the app surface or a primary tint. Matches --primary here; in dark it steps one lighter than --primary, which is tuned as a fill for --primary-foreground ink. Read this, not --primary, wherever the brand is ink. Not shadcn's --accent, which is a muted hover surface. */
 	--warning: var(--warning-500); /* Semantic warning fill, border, and foreground accent. */
 	--warning-foreground: var(--warning-900); /* Text and icons on solid warning fills. */
 	--warning-accent: var(--warning-700); /* Warning colour drawn AS foreground — icons and marks — on a tinted warning surface. Darkens here and brightens in dark, where --warning stays a light fill so solid warning chips keep the amber. */
@@ -61,9 +61,9 @@
  * Emitted rather than hand-written so it cannot drift from the block above.
  */
 @media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]),
-	[data-ui-scope]:not([data-theme="light"]),
-	[data-density]:not([data-theme="light"]) {
+	:root:not(.light, [data-theme="light"]),
+	[data-ui-scope]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *),
+	[data-density]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *) {
 		--success: var(--success-400);
 		--success-foreground: var(--success-950);
 		--info: var(--info-400);

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

@@ -1,6 +1,5 @@
-import "./css/table.css";
 import { t as e } from "./cx--CBrhWH0.js";
-import { i as t, o as n } from "./typography-B8Iurhy1.js";
+import { i as t, o as n } from "./typography-BkxEiwQ1.js";
 import { i as r } from "./observers-CKohiJqU.js";
 import { t as i } from "./scroll-edges-CWjEJktN.js";
 import { ArrowDownIcon as a, ArrowUpDownIcon as o, ArrowUpIcon as s } from "lucide-react";
@@ -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,