@rozie-ui/data-table-lit 0.4.0 → 0.6.0

package/src/EditorCheckbox.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher } from '@lit-labs/preact-signals';
+import { rozieAttr } from '@rozie/runtime-lit';
 
 @customElement('rozie-editor-checkbox')
 export default class EditorCheckbox extends SignalWatcher(LitElement) {
@@ -32,12 +33,33 @@ export default class EditorCheckbox extends SignalWatcher(LitElement) {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   @property({ type: Function }) cancel: ((...args: any[]) => any) | null = null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
   // run (a genuine un-mount), so a subsequent reconnect knows to re-arm.
   private _rozieTornDown = false;
 
+  firstUpdated(): void {
+    if (this.autofocus) this._refInputEl?.focus();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('autofocus'))) { const __watchVal = (() => this.autofocus)(); ((v: any) => {
+      if (v) this._refInputEl?.focus();
+    })(__watchVal); }
+    this.__rozieFirstUpdateDone = true;
+  }
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
     queueMicrotask(() => {
@@ -50,7 +72,7 @@ export default class EditorCheckbox extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" aria-label=${this.columnId} ?checked=${!!this.value} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} data-rozie-s-3d792482 />
+<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} ?checked=${!!this.value} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} data-rozie-ref="inputEl" data-rozie-s-3d792482 />
 `;
   }
 
@@ -66,4 +88,15 @@ export default class EditorCheckbox extends SignalWatcher(LitElement) {
     this.cancel && this.cancel();
   }
 };
+
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }

package/src/EditorDate.ts

@@ -1,6 +1,28 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+import { rozieAttr } from '@rozie/runtime-lit';
+// C-07: the native `<input type="date">` accepts ONLY `YYYY-MM-DD` and renders BLANK for
+// anything else, silently. The seed used to be `String($props.value)`, which is not the ISO
+// coercion this component's own docs: string promises — so a `Date`, an ISO datetime string,
+// an epoch number or a localised string all produced an empty editor. `toIsoDateString`
+// (helpers/dateValue.ts) is the real coercion, pure and unit-tested.
+import { toIsoDateString } from './helpers/dateValue';
+
+// ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+// A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+// places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+// DEFAULT — Angular sets inputs after construction. Measured directly: this editor opened
+// EMPTY on angular for every row, including one whose value was already `YYYY-MM-DD`, while
+// vue and lit seeded correctly. That is why the shape of the incoming value (C-07) could not
+// be the whole story, and why the existing EditorDate coverage never saw either problem: it
+// fills the input before asserting anything.
+//
+// Reading the prop through a derived function instead is correct on all six by construction,
+// with no flash of an empty control on the fine-grained targets and no per-target branch. It
+// is the pattern `FilterSelect` in this same package already uses (`selectValue()`), which is
+// exactly why FilterSelect was the one drop-in unaffected. `touched` is what keeps the user's
+// typing from being overwritten by the live prop read once they have started editing.
 
 @customElement('rozie-editor-date')
 export default class EditorDate extends SignalWatcher(LitElement) {
@@ -32,7 +54,18 @@ export default class EditorDate extends SignalWatcher(LitElement) {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   @property({ type: Function }) cancel: ((...args: any[]) => any) | null = null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
   private _draft = signal('');
+  private _touched = signal(false);
+  @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -40,9 +73,14 @@ export default class EditorDate extends SignalWatcher(LitElement) {
   private _rozieTornDown = false;
 
   firstUpdated(): void {
-    // Seed the draft once from the incoming value (setup-once). A native date input
-    // only accepts `YYYY-MM-DD`; normalize null/undefined to ''.
-    this._draft.value = this.value != null ? String(this.value) : '';
+    if (this.autofocus) this._refInputEl?.focus();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('autofocus'))) { const __watchVal = (() => this.autofocus)(); ((v: any) => {
+      if (v) this._refInputEl?.focus();
+    })(__watchVal); }
+    this.__rozieFirstUpdateDone = true;
   }
 
   disconnectedCallback(): void {
@@ -57,17 +95,20 @@ export default class EditorDate extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<input class="rdt-cell-editor" type="date" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-s-7abe1a56 />
+<input class="rdt-cell-editor" type="date" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-ref="inputEl" data-rozie-s-7abe1a56 />
 `;
   }
 
+  draftValue = () => this._touched.value ? this._draft.value : toIsoDateString(this.value);
+
   onInput = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
 };
 
   doCommit = () => {
   // commit the ISO date string the native control already produced.
-  this.commit && this.commit(this._draft.value);
+  this.commit && this.commit(this.draftValue());
 };
 
   doCancel = () => {
@@ -76,6 +117,7 @@ export default class EditorDate extends SignalWatcher(LitElement) {
 
   onChange = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
 };
 
   onKeydown = (e: any) => {
@@ -91,4 +133,15 @@ export default class EditorDate extends SignalWatcher(LitElement) {
   onBlur = () => {
   this.doCommit();
 };
+
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }

package/src/EditorNumber.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+import { rozieAttr } from '@rozie/runtime-lit';
 
 @customElement('rozie-editor-number')
 export default class EditorNumber extends SignalWatcher(LitElement) {
@@ -32,7 +33,18 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   @property({ type: Function }) cancel: ((...args: any[]) => any) | null = null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
   private _draft = signal('');
+  private _touched = signal(false);
+  @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -40,8 +52,14 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
   private _rozieTornDown = false;
 
   firstUpdated(): void {
-    // Seed the draft string once from the incoming value (setup-once).
-    this._draft.value = this.value != null ? String(this.value) : '';
+    if (this.autofocus) this._refInputEl?.focus();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('autofocus'))) { const __watchVal = (() => this.autofocus)(); ((v: any) => {
+      if (v) this._refInputEl?.focus();
+    })(__watchVal); }
+    this.__rozieFirstUpdateDone = true;
   }
 
   disconnectedCallback(): void {
@@ -56,12 +74,25 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<input class="rdt-cell-editor" type="number" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-s-b2792b32 />
+<input class="rdt-cell-editor" type="number" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-ref="inputEl" data-rozie-s-b2792b32 />
 `;
   }
 
+  // Seed the draft string once from the incoming value (setup-once).
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured on the sibling EditorDate: it
+  // opened EMPTY on angular for every row while vue and lit seeded correctly. Reading the prop
+  // through a derived function is correct on all six by construction, with no flash of an empty
+  // control on the fine-grained targets and no per-target branch — the pattern `FilterSelect`
+  // already uses (`selectValue()`), which is why FilterSelect was the one drop-in unaffected.
+  // `touched` keeps the live prop read from overwriting the user once they start typing.
+  draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : '';
+
   onInput = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
 };
 
   // Coerce to a Number at commit time. Defensive guard: an empty/whitespace draft
@@ -69,7 +100,7 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
   // non-numeric draft also commits null. Otherwise commit the coerced number.
   doCommit = () => {
   if (!this.commit) return;
-  const raw = this._draft.value;
+  const raw = this.draftValue();
   if (raw == null || String(raw).trim() === '') {
     this.commit(null);
     return;
@@ -95,4 +126,15 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
   onBlur = () => {
   this.doCommit();
 };
+
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }

package/src/EditorSelect.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher, signal } from '@lit-labs/preact-signals';
 import { rozieAttr, rozieDisplay } from '@rozie/runtime-lit';
 import { repeat } from 'lit/directives/repeat.js';
@@ -38,7 +38,18 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
    * The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
    */
   @property({ type: Array }) options: any[] = [];
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
   private _draft = signal('');
+  private _touched = signal(false);
+  @query('[data-rozie-ref="selectEl"]') private _refSelectEl!: HTMLElement;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -46,9 +57,14 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
   private _rozieTornDown = false;
 
   firstUpdated(): void {
-    // Seed the draft once from the incoming value (setup-once). Normalize null/undefined
-    // to '' so the <select> binds to a string.
-    this._draft.value = this.value != null ? String(this.value) : '';
+    if (this.autofocus) this._refSelectEl?.focus();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('autofocus'))) { const __watchVal = (() => this.autofocus)(); ((v: any) => {
+      if (v) this._refSelectEl?.focus();
+    })(__watchVal); }
+    this.__rozieFirstUpdateDone = true;
   }
 
   disconnectedCallback(): void {
@@ -63,20 +79,34 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<select class="rdt-cell-editor" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onBlur(); }} data-rozie-s-117f1a16>
-  ${repeat<any>(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
+<select class="rdt-cell-editor" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onBlur(); }} data-rozie-ref="selectEl" data-rozie-s-117f1a16>
+  ${repeat<any>(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} ?selected=${opt.value === this.draftValue()} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
 </select>
 `;
   }
 
+  // Seed the draft once from the incoming value (setup-once). Normalize null/undefined
+  // to '' so the <select> binds to a string.
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured on the sibling EditorDate: it
+  // opened EMPTY on angular for every row while vue and lit seeded correctly. Reading the prop
+  // through a derived function is correct on all six by construction, with no flash of an empty
+  // control on the fine-grained targets and no per-target branch — the pattern `FilterSelect`
+  // already uses (`selectValue()`), which is why FilterSelect was the one drop-in unaffected.
+  // `touched` keeps the live prop read from overwriting the user once they start typing.
+  draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : '';
+
   // Picking/arrow-cycling an option updates the draft only — no commit.
   onChange = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
 };
 
   // commit/cancel are Function props (default null) — guard before calling.
   doCommit = () => {
-  this.commit && this.commit(this._draft.value);
+  this.commit && this.commit(this.draftValue());
 };
 
   doCancel = () => {
@@ -96,4 +126,15 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
   onBlur = () => {
   this.doCommit();
 };
+
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }

package/src/EditorText.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+import { rozieAttr } from '@rozie/runtime-lit';
 
 @customElement('rozie-editor-text')
 export default class EditorText extends SignalWatcher(LitElement) {
@@ -36,7 +37,12 @@ export default class EditorText extends SignalWatcher(LitElement) {
    * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
    */
   @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
   private _draft = signal('');
+  private _touched = signal(false);
   @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
 private __rozieFirstUpdateDone = false;
 
@@ -46,10 +52,6 @@ private __rozieFirstUpdateDone = false;
   private _rozieTornDown = false;
 
   firstUpdated(): void {
-    // Seed the draft once at setup from the incoming value (setup-once, NOT in the
-    // template). Normalize null/undefined to '' so the input value binds to a string.
-    this._draft.value = this.value != null ? String(this.value) : '';
-
     if (this.autofocus) this._refInputEl?.focus();
   }
 
@@ -72,19 +74,33 @@ private __rozieFirstUpdateDone = false;
 
   render() {
     return html`
-<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
+<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
   }
 
+  // Seed the draft once at setup from the incoming value (setup-once, NOT in the
+  // template). Normalize null/undefined to '' so the input value binds to a string.
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured on the sibling EditorDate: it
+  // opened EMPTY on angular for every row while vue and lit seeded correctly. Reading the prop
+  // through a derived function is correct on all six by construction, with no flash of an empty
+  // control on the fine-grained targets and no per-target branch — the pattern `FilterSelect`
+  // already uses (`selectValue()`), which is why FilterSelect was the one drop-in unaffected.
+  // `touched` keeps the live prop read from overwriting the user once they start typing.
+  draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : '';
+
   // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
   // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
   onInput = (e: any) => {
   this._draft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
 };
 
   // commit/cancel are Function props (default null) — guard before calling.
   doCommit = () => {
-  this.commit && this.commit(this._draft.value);
+  this.commit && this.commit(this.draftValue());
 };
 
   doCancel = () => {
@@ -104,4 +120,20 @@ private __rozieFirstUpdateDone = false;
   onBlur = () => {
   this.doCommit();
 };
+
+  // Editor-owns-focus contract: focus OUR OWN input when the host says we should hold focus.
+  // $onMount covers the initial open (autofocus already true on first render); the LAZY $watch
+  // (NOT { immediate: true } — an immediate watch fires PRE-mount, null ref on Lit/Solid) covers
+  // a REACTIVE refocus while already mounted (e.g. a row-mode validation failure that flips
+  // autofocus back onto this already-open drop-in).
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }

package/src/FilterNumberRange.ts

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+import { SignalWatcher, effect, signal, untracked } from '@lit-labs/preact-signals';
 import { rozieAttr } from '@rozie/runtime-lit';
 
 @customElement('rozie-filter-number-range')
@@ -29,8 +29,14 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
    * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
    */
   @property({ type: Object }) minMax: unknown = null;
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
   private _minDraft = signal('');
   private _maxDraft = signal('');
+  private _touched = signal(false);
+private __rozieWatchInitial_0 = true;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -38,9 +44,9 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
   private _rozieTornDown = false;
 
   firstUpdated(): void {
-    // Seed both drafts once at setup from the incoming [min,max] tuple (setup-once).
-    this._minDraft.value = Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : '';
-    this._maxDraft.value = Array.isArray(this.value) && this.value[1] != null ? String(this.value[1]) : '';
+    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => Array.isArray(this.value) ? String(this.value[0]) + '\u0000' + String(this.value[1]) : '')(); untracked(() => { if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } (() => {
+      this._touched.value = false;
+    })(); }); }));
   }
 
   disconnectedCallback(): void {
@@ -56,20 +62,68 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
   render() {
     return html`
 <span style="display:flex; align-items: center" data-rozie-s-97b2c090>
-  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.columnId + ' min')} placeholder=${rozieAttr(this.minPlaceholder())} .value=${this._minDraft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onMinInput($event); }} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.applyRange(); }} data-rozie-s-97b2c090 />
+  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.a11yLabel() + ' min')} placeholder=${rozieAttr(this.minPlaceholder())} .value=${this.minDraftValue()} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onMinInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-s-97b2c090 />
   <span data-rozie-s-97b2c090> - </span>
-  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.columnId + ' max')} placeholder=${rozieAttr(this.maxPlaceholder())} .value=${this._maxDraft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onMaxInput($event); }} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.applyRange(); }} data-rozie-s-97b2c090 />
+  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.a11yLabel() + ' max')} placeholder=${rozieAttr(this.maxPlaceholder())} .value=${this.maxDraftValue()} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onMaxInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-s-97b2c090 />
 </span>
 `;
   }
 
+  // ── C-08 + N-04: both drafts are DERIVED from `$props.value`, with a `touched` latch ─────
+  //
+  // C-08 — this component mounts once per rendered filter row and is NOT remounted when the
+  // filter changes, and both drafts were seeded setup-once. A programmatic reset or an external
+  // `columnFilters` write moved the real filter while these two inputs went on displaying the
+  // old numbers. See FilterText for the full reasoning; `FilterSelect` was never affected
+  // because it reads `$props.value` live, which is the pattern adopted here.
+  //
+  // N-04 — the setup-once seed was ALSO wrong on Angular from the start: the emitter places
+  // setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT. Measured on the sibling EditorDate.
+  //
+  // The watch clears `touched` rather than writing the drafts, so the derived readers pick the
+  // new value up on their own. It is keyed on the TUPLE ELEMENTS, not the array identity: the
+  // funnel writes a fresh `[min, max]` array for every apply, so an identity key would fire on
+  // every apply, and a consumer mutating a tuple in place would be missed by it anyway. The key
+  // is a joined STRING rather than an array — an array-returning watch getter is compared by
+  // identity on Lit, so a fresh array every read means it can never report "unchanged" (measured:
+  // the range half of the C-08 case stayed red on lit alone with an array key).
+  minDraftValue = () => this._touched.value ? this._minDraft.value : Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : '';
+
+  maxDraftValue = () => this._touched.value ? this._maxDraft.value : Array.isArray(this.value) && this.value[1] != null ? String(this.value[1]) : '';
+
   // Untyped handler params neutralize to `any` (the global-filter idiom).
+  // C-01 — the range used to commit from `@change`, which is NOT the same event across
+  // targets for a text/number input: React maps `onChange` onto the native `input`
+  // event, so on React it fired on EVERY keystroke, in the same tick as the `@input`
+  // handler's `$data` write. `$data` is an async `useState` write there, so the commit
+  // re-read the PREVIOUS keystroke's draft and the filter ran one keystroke behind (the
+  // first keystroke cleared it). The other five use the real `change` event — blur or
+  // Enter — and were already correct.
+  //
+  // Fixed by committing on the events that mean the same thing everywhere, Enter and
+  // blur, which is also the contract FilterText already uses; and by making applyRange
+  // take both drafts as arguments so it can never re-read a value written in its own
+  // tick. That combination is target-independent rather than a React special case.
   onMinInput = (e: any) => {
   this._minDraft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
 };
 
   onMaxInput = (e: any) => {
   this._maxDraft.value = e && e.target ? e.target.value : '';
+  this._touched.value = true;
+};
+
+  // Commit the range on Enter or blur — the same commit-on-commit contract FilterText
+  // uses, NOT per keystroke. Both read the drafts in a tick where nothing has just
+  // written them, so every target reads the settled value.
+  onKeydown = (e: any) => {
+  if (e && e.key === 'Enter') this.applyRange(this.minDraftValue(), this.maxDraftValue());
+};
+
+  onBlur = () => {
+  this.applyRange(this.minDraftValue(), this.maxDraftValue());
 };
 
   // Plain string-coercion functions for the placeholders (NOT $computed — the
@@ -80,13 +134,27 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
 
   // Convert a draft to a Number or undefined (empty string → undefined so a
   // one-sided range works). Both undefined → clear the filter.
-  applyRange = () => {
-  const minNum = this._minDraft.value === '' ? undefined : Number(this._minDraft.value);
-  const maxNum = this._maxDraft.value === '' ? undefined : Number(this._maxDraft.value);
+  // Takes both drafts as ARGUMENTS — never re-reads $data — so it is correct on all six
+  // targets regardless of when in the tick it runs. Callers that have just written a
+  // draft pass the value they wrote.
+  applyRange = (minDraft: any, maxDraft: any) => {
+  const minNum = minDraft === '' ? undefined : Number(minDraft);
+  const maxNum = maxDraft === '' ? undefined : Number(maxDraft);
   if (minNum === undefined && maxNum === undefined) {
     this.setFilter && this.setFilter(this.columnId, '');
   } else {
     this.setFilter && this.setFilter(this.columnId, [minNum, maxNum]);
   }
 };
+
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }

package/src/FilterSelect.ts

@@ -30,6 +30,10 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
    * The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
    */
   @property({ type: Array }) uniqueValues: any[] = [];
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  @property({ type: String, reflect: true }) columnLabel: string = '';
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -48,9 +52,9 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<select class="rdt-col-filter" part="col-filter" aria-label=${this.columnId} .value=${this.selectValue()} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onChange($event); }} data-rozie-s-d75b42b2>
+<select class="rdt-col-filter" part="col-filter" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.selectValue()} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onChange($event); }} data-rozie-s-d75b42b2>
   <option value="" data-rozie-s-d75b42b2>All</option>
-  ${repeat<any>(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
+  ${repeat<any>(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} ?selected=${opt === this.selectValue()} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
 </select>
 `;
   }
@@ -71,4 +75,15 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
     this.setFilter && this.setFilter(this.columnId, v);
   }
 };
+
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  a11yLabel = () => {
+  if (typeof this.columnLabel === 'string' && this.columnLabel !== '') return this.columnLabel;
+  return this.columnId;
+};
 }