@rozie-ui/data-table-solid 0.3.2 → 0.5.0

package/src/themes/base.css

@@ -1,21 +1,35 @@
 /*
  * @rozie-ui/data-table — base token reference.
  *
- * Every COSMETIC value the table renders flows through a `--rozie-data-table-*`
- * PUBLIC token. The component's scoped `<style>` reads short internal `--rdt-*`
- * tokens with inline `var(--rdt-x, <fallback>)` defaults, so the table renders
- * ZERO-CONFIG without importing this file — it already paints a sensible default.
- * Importing this file simply makes the full public token surface explicit in one
- * place and wires each public `--rozie-data-table-*` token onto the internal
- * `--rdt-*` the component consumes, so a design-system bridge (shadcn / material /
- * bootstrap) can re-skin the whole table by remapping ONLY the public tokens.
+ * This file is the PUBLIC token reference. It declares 18 `--rozie-data-table-*`
+ * tokens and wires each onto the short internal `--rdt-*` token the component's
+ * scoped `<style>` actually reads. The component reads 82 internal `--rdt-*`
+ * tokens in total, each with an inline `var(--rdt-x, <fallback>)` default, so the
+ * table renders ZERO-CONFIG without importing this file.
  *
- * NOTE the split (CONTEXT "Claude's Discretion" + the slider D-08 precedent): the
- * STRUCTURAL rules — `border-collapse`, the keyed-r-for layout, `position: sticky`
- * for the header + pinned columns, the resize-handle positioning, the
- * `<details>` disclosure box — are behavior-critical and live in the component's
- * scoped `<style>` (per-leaf, NOT consumer-overridable). Only the values below
- * flow through tokens.
+ * Scope, stated plainly: remapping the public tokens re-skins the table's primary
+ * surfaces — type, borders, background, header, row, cell padding, accent, and the
+ * max-height. It does NOT reach every cosmetic value. 58 of the 82 internal tokens
+ * have no public counterpart today, including the grid active-cell ring, the range
+ * highlight, the fill handle, the invalid-cell outline, the group tokens, the filter
+ * row, the per-header column ⋯ menu, most of the pagination bar (only
+ * --rozie-data-table-control-border-color, --rozie-data-table-radius, and
+ * --rozie-data-table-disabled-opacity are public — its background, padding, and
+ * status-text size are not), and the chrome column widths. Those remain internal
+ * and may be renamed; a design system that needs them should set the `--rdt-*`
+ * name directly and accept that it is not yet a stable API. One Lit-specific rule: set
+ * the public tokens at or ABOVE the `<rozie-data-table>` element (`:root`, a wrapper, or
+ * the element itself), never on the `.rozie-data-table` / `.rozie-data-table-wrap`
+ * classes — on that target both of those render inside the component's shadow root,
+ * where a document stylesheet cannot reach them. The tokens themselves inherit across
+ * the boundary, and the component carries the mapping internally, so every one of the 18
+ * works there.
+ *
+ * NOTE the split: the STRUCTURAL rules — `border-collapse`, the keyed-r-for
+ * layout, `position: sticky` for the header + pinned columns, the
+ * resize-handle positioning, the `<details>` disclosure box — are
+ * behavior-critical and live in the component's scoped `<style>` (per-leaf,
+ * NOT consumer-overridable). Only the values below flow through tokens.
  *
  * Override any token at any ancestor scope (`:root`, `.dark`, a wrapper, or the
  * `.rozie-data-table` / `.rozie-data-table-wrap` element). See
@@ -24,12 +38,11 @@
  */
 .rozie-data-table-wrap,
 .rozie-data-table {
-  /* NOTE (see file-head comment): most of the tokens below are declared but
-     never read via a CSS var() inside THIS component's own scoped <style> —
-     that is by design. This is the public surface; the "Wire the PUBLIC
-     tokens..." block further down assigns each one onto the short internal
-     --rdt-* custom property the component actually reads. A future audit
-     must not delete these as dead — they are the intended public API. */
+  /* These public tokens aren't read directly by a CSS var() inside this
+     component's own scoped <style> — that is by design. This is the public
+     surface; the "Wire the PUBLIC tokens..." block further down assigns each
+     one onto the short internal --rdt-* custom property the component
+     actually reads. */
 
   /* ── palette (the few values most consumers will set) ───────────────────── */
   --rozie-data-table-fg: inherit;
@@ -52,24 +65,24 @@
   /* ── sort indicator ─────────────────────────────────────────────────────── */
   --rozie-data-table-sort-indicator-opacity: 0.7;
 
-  /* ── resize handle (req-9) ──────────────────────────────────────────────── */
+  /* ── resize handle ──────────────────────────────────────────────────────── */
   --rozie-data-table-resize-grip-color: rgba(0, 0, 0, 0.12);
   --rozie-data-table-resize-grip-active: var(--rozie-data-table-accent);
 
-  /* ── pin controls (req-11) ──────────────────────────────────────────────── */
+  /* ── pin controls ───────────────────────────────────────────────────────── */
   --rozie-data-table-pin-active-bg: rgba(0, 0, 0, 0.1);
 
-  /* ── column-visibility menu (req-8) ─────────────────────────────────────── */
+  /* ── column-visibility menu ─────────────────────────────────────────────── */
   --rozie-data-table-menu-bg: #fff;
   --rozie-data-table-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 
-  /* ── selection checkboxes (req-7) ───────────────────────────────────────── */
+  /* ── selection checkboxes ───────────────────────────────────────────────── */
   --rozie-data-table-select-accent: var(--rozie-data-table-accent);
 
   /* ── disabled pagination controls ──────────────────────────────────────── */
   --rozie-data-table-disabled-opacity: 0.4;
 
-  /* ── virtual scroll (row windowing, req-3/D-06) ─────────────────────────── */
+  /* ── virtual scroll (row windowing) ─────────────────────────────────────── */
   /* Read with NO fallback at its one use site (`max-height: var(--rozie-data-table-max-height);`
      on `.rdt-scroll`) — when unset the property is invalid at computed-value
      time and the rule behaves as if `max-height` were never declared there,

package/src/themes/bootstrap.css

@@ -11,7 +11,18 @@
  *
  *   import '@rozie-ui/data-table-react/themes/base.css';
  *   import '@rozie-ui/data-table-react/themes/bootstrap.css';
+ *
+ * SCOPE (changed 2026-09-12, F-01). This bridge assigns its tokens at `:root` as well as on
+ * the table's own classes. A design-system bridge is an app-wide skin by nature, and `:root`
+ * is the only scope that reaches the Lit leaf: there, `.rozie-data-table-wrap` and
+ * `.rozie-data-table` both render INSIDE the component's shadow root, where a document-level
+ * class selector can never match — so before this change all four bridges were inert on Lit.
+ * Trade-off, stated rather than buried: two tables on one page can no longer take DIFFERENT
+ * bridges by ancestor class alone. Per-instance overrides still work on the five light-DOM
+ * targets via the class selectors below, and on all six by setting the public tokens on any
+ * ancestor of the table.
  */
+:root,
 .rozie-data-table-wrap,
 .rozie-data-table {
   --rozie-data-table-fg: var(--bs-body-color, #212529);

package/src/themes/material.css

@@ -11,7 +11,18 @@
  *
  *   import '@rozie-ui/data-table-react/themes/base.css';
  *   import '@rozie-ui/data-table-react/themes/material.css';
+ *
+ * SCOPE (changed 2026-09-12, F-01). This bridge assigns its tokens at `:root` as well as on
+ * the table's own classes. A design-system bridge is an app-wide skin by nature, and `:root`
+ * is the only scope that reaches the Lit leaf: there, `.rozie-data-table-wrap` and
+ * `.rozie-data-table` both render INSIDE the component's shadow root, where a document-level
+ * class selector can never match — so before this change all four bridges were inert on Lit.
+ * Trade-off, stated rather than buried: two tables on one page can no longer take DIFFERENT
+ * bridges by ancestor class alone. Per-instance overrides still work on the five light-DOM
+ * targets via the class selectors below, and on all six by setting the public tokens on any
+ * ancestor of the table.
  */
+:root,
 .rozie-data-table-wrap,
 .rozie-data-table {
   --rozie-data-table-fg: var(--md-sys-color-on-surface, #1d1b20);

package/src/themes/shadcn.css

@@ -17,7 +17,18 @@
  *
  * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
  * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
+ *
+ * SCOPE (changed 2026-09-12, F-01). This bridge assigns its tokens at `:root` as well as on
+ * the table's own classes. A design-system bridge is an app-wide skin by nature, and `:root`
+ * is the only scope that reaches the Lit leaf: there, `.rozie-data-table-wrap` and
+ * `.rozie-data-table` both render INSIDE the component's shadow root, where a document-level
+ * class selector can never match — so before this change all four bridges were inert on Lit.
+ * Trade-off, stated rather than buried: two tables on one page can no longer take DIFFERENT
+ * bridges by ancestor class alone. Per-instance overrides still work on the five light-DOM
+ * targets via the class selectors below, and on all six by setting the public tokens on any
+ * ancestor of the table.
  */
+:root,
 .rozie-data-table-wrap,
 .rozie-data-table {
   --rozie-data-table-fg: hsl(var(--foreground, 222.2 47.4% 11.2%));