@rozie-ui/data-table-lit 0.2.3 → 0.2.5

package/README.md

@@ -10,6 +10,8 @@ npm i @rozie-ui/data-table-lit
 
 Peer dependencies: `lit + @lit/context + @lit-labs/preact-signals + @preact/signals-core + @tanstack/table-core + @tanstack/virtual-core + @rozie-ui/popover-lit`. Install them alongside this package.
 
+Also installed: `@rozie/runtime-lit` — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. Your bundler keeps only the helpers this component actually uses — typically a few hundred bytes to a few KB, minified and gzipped. [What's in it and what it costs](https://github.com/One-Learning-Community/rozie.js/blob/main/docs/guide/output-and-runtime.md).
+
 ## Usage
 
 Columns may be declared as a `:columns` config array **or** as `<Column>` children (or both — an id-keyed last-write-wins union). Per-cell rendering is one parent `#cell` / `#colHeader` renderer on `<DataTable>`, dispatched by `columnId`, so it works the same with either column form.

package/dist/index.cjs

@@ -205,6 +205,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 				}
 			}))(this)
 		});
+		this._rozieSlotDistributor = new _rozie_runtime_lit.RozieSlotDistributor(this);
 		this._hasSlotDefault = false;
 		this._hasSlotGroupBar = false;
 		this._hasSlotSelectAll = false;
@@ -3167,6 +3168,12 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			return col.getFacetedMinMaxValues() || null;
 		};
 	}
+	static {
+		this.shadowRootOptions = {
+			...lit.LitElement.shadowRootOptions,
+			slotAssignment: "manual"
+		};
+	}
 	static {
 		this.styles = lit.css`
 :host{display:contents}
@@ -4664,6 +4671,7 @@ __decorate([(0, lit_decorators_js.queryAssignedElements)({
 	flatten: true
 })], DataTable.prototype, "_slotDetailElements", void 0);
 __decorate([(0, lit_decorators_js.property)({ attribute: false })], DataTable.prototype, "detail", void 0);
+__decorate([(0, lit_decorators_js.property)({ attribute: false })], DataTable.prototype, "rozieSlots", void 0);
 DataTable = __decorate([(0, lit_decorators_js.customElement)("rozie-data-table")], DataTable);
 var DataTable_default = DataTable;
 //#endregion

package/dist/index.d.cts

@@ -3,6 +3,7 @@ import { LitElement } from "lit";
 //#region src/DataTable.d.ts
 declare const DataTable_base: typeof LitElement;
 declare class DataTable extends DataTable_base {
+  static shadowRootOptions: ShadowRootInit;
   static styles: _$lit.CSSResult;
   /**
    * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `r-model:data` (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
@@ -169,6 +170,7 @@ declare class DataTable extends DataTable_base {
   private __rozieWatchInitial_0;
   private __rozieWatchInitial_1;
   private __rozieCtxProvider_data_table_columns;
+  private _rozieSlotDistributor;
   private _hasSlotDefault;
   private _slotDefaultElements;
   private _hasSlotGroupBar;
@@ -233,6 +235,7 @@ declare class DataTable extends DataTable_base {
   detail?: (scope: {
     row: any;
   }) => unknown;
+  rozieSlots?: Record<string, (scope: any) => unknown>;
   private _disconnectCleanups;
   private _rozieTornDown;
   private _armListeners;

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { LitElement } from "lit";
 //#region src/DataTable.d.ts
 declare const DataTable_base: typeof LitElement;
 declare class DataTable extends DataTable_base {
+  static shadowRootOptions: ShadowRootInit;
   static styles: _$lit.CSSResult;
   /**
    * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `r-model:data` (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
@@ -169,6 +170,7 @@ declare class DataTable extends DataTable_base {
   private __rozieWatchInitial_0;
   private __rozieWatchInitial_1;
   private __rozieCtxProvider_data_table_columns;
+  private _rozieSlotDistributor;
   private _hasSlotDefault;
   private _slotDefaultElements;
   private _hasSlotGroupBar;
@@ -233,6 +235,7 @@ declare class DataTable extends DataTable_base {
   detail?: (scope: {
     row: any;
   }) => unknown;
+  rozieSlots?: Record<string, (scope: any) => unknown>;
   private _disconnectCleanups;
   private _rozieTornDown;
   private _armListeners;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { SignalWatcher, effect, signal, untracked } from "@lit-labs/preact-signals";
-import { createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from "@rozie/runtime-lit";
+import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from "@rozie/runtime-lit";
 import { ContextConsumer, ContextProvider, createContext } from "@lit/context";
 import { repeat } from "lit/directives/repeat.js";
 import "@rozie-ui/popover-lit";
@@ -201,6 +201,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 			}))(this)
 		});
+		this._rozieSlotDistributor = new RozieSlotDistributor(this);
 		this._hasSlotDefault = false;
 		this._hasSlotGroupBar = false;
 		this._hasSlotSelectAll = false;
@@ -3163,6 +3164,12 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return col.getFacetedMinMaxValues() || null;
 		};
 	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			slotAssignment: "manual"
+		};
+	}
 	static {
 		this.styles = css`
 :host{display:contents}
@@ -4660,6 +4667,7 @@ __decorate([queryAssignedElements({
 	flatten: true
 })], DataTable.prototype, "_slotDetailElements", void 0);
 __decorate([property({ attribute: false })], DataTable.prototype, "detail", void 0);
+__decorate([property({ attribute: false })], DataTable.prototype, "rozieSlots", void 0);
 DataTable = __decorate([customElement("rozie-data-table")], DataTable);
 var DataTable_default = DataTable;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "0.2.2"
+    "@rozie/runtime-lit": "0.6.0"
   },
   "peerDependencies": {
     "lit": "^3.2",

package/src/DataTable.ts

@@ -1,7 +1,7 @@
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { SignalWatcher, effect, signal, untracked } from '@lit-labs/preact-signals';
-import { createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from '@rozie/runtime-lit';
+import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from '@rozie/runtime-lit';
 import { ContextProvider, createContext } from '@lit/context';
 import { repeat } from 'lit/directives/repeat.js';
 import '@rozie-ui/popover-lit';
@@ -91,6 +91,8 @@ interface RozieDetailSlotCtx {
 
 @customElement('rozie-data-table')
 export default class DataTable extends SignalWatcher(LitElement) {
+  static shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, slotAssignment: 'manual' };
+
   static styles = css`
 :host{display:contents}
 .rozie-data-table[data-rozie-s-d5dcab4c] {
@@ -631,6 +633,8 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   }
 }))(this) });
 
+  private _rozieSlotDistributor = new RozieSlotDistributor(this);
+
   @state() private _hasSlotDefault = false;
   @queryAssignedElements({ flatten: true }) private _slotDefaultElements!: Element[];
   @state() private _hasSlotGroupBar = false;
@@ -657,6 +661,16 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   @state() private _hasSlotDetail = false;
   @queryAssignedElements({ slot: 'detail', flatten: true }) private _slotDetailElements!: Element[];
   @property({ attribute: false }) detail?: (scope: { row: any }) => unknown;
+  // Phase 79 Plan 08 (R4) contract for 79-09: the record intake for
+  // record-routed slot fills. 79-09's consumer-side emitSlotFiller
+  // accumulates an object literal onto the SAME `.rozieSlots=${{ ... }}`
+  // open-tag binding; the KEY is the fill's authored (possibly
+  // non-identifier) name and the VALUE is a scope-taking render
+  // function. `rozieSlots?.[name]` must be checked BEFORE the legacy
+  // named function-prop / <slot> fallback (AC-9). Attribute
+  // deserialization is disabled — this is a function-valued record,
+  // never reflected to/from an HTML attribute.
+  @property({ attribute: false }) rozieSlots?: Record<string, (scope: any) => unknown>;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually

package/src/themes/base.css

@@ -24,6 +24,13 @@
  */
 .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. */
+
   /* ── palette (the few values most consumers will set) ───────────────────── */
   --rozie-data-table-fg: inherit;
   --rozie-data-table-accent: #0066cc;
@@ -62,6 +69,14 @@
   /* ── disabled pagination controls ──────────────────────────────────────── */
   --rozie-data-table-disabled-opacity: 0.4;
 
+  /* ── virtual scroll (row windowing, req-3/D-06) ─────────────────────────── */
+  /* 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,
+     i.e. `none` (unbounded). Declaring `none` here is the render-neutral
+     equivalent of that unset behavior, made explicit and overridable. */
+  --rozie-data-table-max-height: none;
+
   /* ─────────────────────────────────────────────────────────────────────────
    * Wire the PUBLIC tokens onto the INTERNAL `--rdt-*` the component reads. A
    * bridge only needs to remap the public tokens above; these passthroughs do