@rozie-ui/data-table-lit 0.1.0

package/src/DetailPanel.ts

@@ -0,0 +1,53 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/preact-signals';
+import { rozieAttr, rozieDisplay } from '@rozie/runtime-lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+@customElement('rozie-detail-panel')
+export default class DetailPanel extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The raw row object (the `#detail` slot scope `row` = `row.original`). This drop-in walks its own enumerable keys and String-coerces each value into a key/value definition list; a null row renders an empty list.
+   */
+  @property({ type: Object }) row: unknown = null;
+
+  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;
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  render() {
+    return html`
+<dl class="rdt-detail-panel" data-rozie-s-8f65bdaa>
+  
+  ${repeat<any>(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" key=${rozieAttr(pair.key)} data-rozie-s-8f65bdaa>
+    <dt class="rdt-detail-key" data-rozie-s-8f65bdaa>${rozieDisplay(pair.key)}</dt>
+    <dd class="rdt-detail-value" data-rozie-s-8f65bdaa>${rozieDisplay(pair.value)}</dd>
+  </div>`)}
+</dl>
+`;
+  }
+
+  entries = () => {
+  const r = this.row;
+  if (!r) return [];
+  return Object.keys(r).map((key: any) => ({
+    key,
+    value: r[key] == null ? '' : String(r[key])
+  }));
+};
+}

package/src/EditorCheckbox.ts

@@ -0,0 +1,67 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/preact-signals';
+
+@customElement('rozie-editor-checkbox')
+export default class EditorCheckbox extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) row: unknown = null;
+  /**
+   * The current cell value — coerced to a real boolean via `!!` to seed the checkbox `checked` state.
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(value) => void` — commit the cell. This editor immediately commits the boolean checked state on `@change`. Null-guarded at call sites.
+   */
+  @property({ type: Function }) commit: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+
+  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;
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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 />
+`;
+  }
+
+  onChange = (e: any) => {
+  this.commit && this.commit(!!(e && e.target ? e.target.checked : false));
+};
+
+  onKeydown = (e: any) => {
+  if (e && e.key === 'Escape') {
+    e.preventDefault();
+    this.cancel && this.cancel();
+  }
+};
+}

package/src/EditorDate.ts

@@ -0,0 +1,94 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+
+@customElement('rozie-editor-date')
+export default class EditorDate extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) row: unknown = null;
+  /**
+   * The current cell value the local draft seeds from (setup-once); String-coerced to an ISO `YYYY-MM-DD` string for the native date input.
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(value) => void` — commit the cell with the ISO `YYYY-MM-DD` string (Enter / blur). Null-guarded at call sites.
+   */
+  @property({ type: Function }) commit: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+  private _draft = signal('');
+
+  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 {
+    // 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) : '';
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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 />
+`;
+  }
+
+  onInput = (e: any) => {
+  this._draft.value = e && e.target ? e.target.value : '';
+};
+
+  doCommit = () => {
+  // commit the ISO date string the native control already produced.
+  this.commit && this.commit(this._draft.value);
+};
+
+  doCancel = () => {
+  this.cancel && this.cancel();
+};
+
+  onChange = (e: any) => {
+  this._draft.value = e && e.target ? e.target.value : '';
+};
+
+  onKeydown = (e: any) => {
+  if (e && e.key === 'Enter') {
+    e.preventDefault();
+    this.doCommit();
+  } else if (e && e.key === 'Escape') {
+    e.preventDefault();
+    this.doCancel();
+  }
+};
+
+  onBlur = () => {
+  this.doCommit();
+};
+}

package/src/EditorNumber.ts

@@ -0,0 +1,95 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+
+@customElement('rozie-editor-number')
+export default class EditorNumber extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) row: unknown = null;
+  /**
+   * The current cell value the local draft string seeds from (setup-once).
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(value) => void` — commit the cell. The draft is coerced with `Number()` at commit time; an empty/whitespace or non-numeric draft commits `null` (never `NaN`). Null-guarded at call sites.
+   */
+  @property({ type: Function }) commit: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+  private _draft = signal('');
+
+  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 {
+    // Seed the draft string once from the incoming value (setup-once).
+    this._draft.value = this.value != null ? String(this.value) : '';
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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 />
+`;
+  }
+
+  onInput = (e: any) => {
+  this._draft.value = e && e.target ? e.target.value : '';
+};
+
+  doCommit = () => {
+  if (!this.commit) return;
+  const raw = this._draft.value;
+  if (raw == null || String(raw).trim() === '') {
+    this.commit(null);
+    return;
+  }
+  const n = Number(raw);
+  this.commit(Number.isNaN(n) ? null : n);
+};
+
+  doCancel = () => {
+  this.cancel && this.cancel();
+};
+
+  onKeydown = (e: any) => {
+  if (e && e.key === 'Enter') {
+    e.preventDefault();
+    this.doCommit();
+  } else if (e && e.key === 'Escape') {
+    e.preventDefault();
+    this.doCancel();
+  }
+};
+
+  onBlur = () => {
+  this.doCommit();
+};
+}

package/src/EditorSelect.ts

@@ -0,0 +1,99 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } 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';
+
+@customElement('rozie-editor-select')
+export default class EditorSelect extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the select `aria-label`.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) row: unknown = null;
+  /**
+   * The current cell value the local draft seeds from (setup-once); String-coerced for the `<select>` binding.
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(value) => void` — commit the cell with the selected value (Enter / blur). Null-guarded at call sites.
+   */
+  @property({ type: Function }) commit: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
+   */
+  @property({ type: Array }) options: any[] = [];
+  private _draft = signal('');
+
+  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 {
+    // 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) : '';
+
+    // Picking/arrow-cycling an option updates the draft only — no commit.
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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 key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
+</select>
+`;
+  }
+
+  onChange = (e: any) => {
+  this._draft.value = e && e.target ? e.target.value : '';
+};
+
+  doCommit = () => {
+  this.commit && this.commit(this._draft.value);
+};
+
+  doCancel = () => {
+  this.cancel && this.cancel();
+};
+
+  onKeydown = (e: any) => {
+  if (e && e.key === 'Enter') {
+    e.preventDefault();
+    this.doCommit();
+  } else if (e && e.key === 'Escape') {
+    e.preventDefault();
+    this.doCancel();
+  }
+};
+
+  onBlur = () => {
+  this.doCommit();
+};
+}

package/src/EditorText.ts

@@ -0,0 +1,92 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+
+@customElement('rozie-editor-text')
+export default class EditorText extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label` fallback.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  @property({ type: Object }) row: unknown = null;
+  /**
+   * The current cell value the editor seeds its local draft from (setup-once).
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(value) => void` — commit the edited cell value (from the `#editor` slot scope). Null-guarded at call sites.
+   */
+  @property({ type: Function }) commit: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
+   */
+  @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+  private _draft = signal('');
+
+  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 {
+    // 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) : '';
+
+    // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
+    // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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-s-0d17f43a />
+`;
+  }
+
+  onInput = (e: any) => {
+  this._draft.value = e && e.target ? e.target.value : '';
+};
+
+  doCommit = () => {
+  this.commit && this.commit(this._draft.value);
+};
+
+  doCancel = () => {
+  this.cancel && this.cancel();
+};
+
+  onKeydown = (e: any) => {
+  if (e && e.key === 'Enter') {
+    e.preventDefault();
+    this.doCommit();
+  } else if (e && e.key === 'Escape') {
+    e.preventDefault();
+    this.doCancel();
+  }
+};
+
+  onBlur = () => {
+  this.doCommit();
+};
+}

package/src/FilterNumberRange.ts

@@ -0,0 +1,89 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher, signal } from '@lit-labs/preact-signals';
+import { rozieAttr } from '@rozie/runtime-lit';
+
+@customElement('rozie-filter-number-range')
+export default class FilterNumberRange extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#filter` slot scope) — used as the filter key and the input `aria-label` base.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#filter` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The current column filter value (`[min, max]` tuple or null) the two inputs seed from (setup-once).
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(columnId, value) => void` — apply the column filter as a `[min, max]` tuple (each side coerced to a Number or `undefined`, so a one-sided range works); both empty clears the filter. Null-guarded at call sites.
+   */
+  @property({ type: Function }) setFilter: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
+   */
+  @property({ type: Object }) minMax: unknown = null;
+  private _minDraft = signal('');
+  private _maxDraft = signal('');
+
+  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 {
+    // 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]) : '';
+
+    // Untyped handler params neutralize to `any` (the global-filter idiom).
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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 />
+  <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 />
+</span>
+`;
+  }
+
+  onMinInput = (e: any) => {
+  this._minDraft.value = e && e.target ? e.target.value : '';
+};
+
+  onMaxInput = (e: any) => {
+  this._maxDraft.value = e && e.target ? e.target.value : '';
+};
+
+  minPlaceholder = () => Array.isArray(this.minMax) && this.minMax[0] != null ? String(this.minMax[0]) : '';
+
+  maxPlaceholder = () => Array.isArray(this.minMax) && this.minMax[1] != null ? String(this.minMax[1]) : '';
+
+  applyRange = () => {
+  const minNum = this._minDraft.value === '' ? undefined : Number(this._minDraft.value);
+  const maxNum = this._maxDraft.value === '' ? undefined : Number(this._maxDraft.value);
+  if (minNum === undefined && maxNum === undefined) {
+    this.setFilter && this.setFilter(this.columnId, '');
+  } else {
+    this.setFilter && this.setFilter(this.columnId, [minNum, maxNum]);
+  }
+};
+}

package/src/FilterSelect.ts

@@ -0,0 +1,68 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/preact-signals';
+import { rozieAttr, rozieDisplay } from '@rozie/runtime-lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+@customElement('rozie-filter-select')
+export default class FilterSelect extends SignalWatcher(LitElement) {
+  static styles = css`
+:host{display:contents}
+`;
+
+  /**
+   * The column id (mirrors the `#filter` slot scope) — used as the filter key and the select `aria-label`.
+   */
+  @property({ type: String, reflect: true }) columnId: string = '';
+  /**
+   * The table-core column object (opaque passthrough from the `#filter` slot scope).
+   */
+  @property({ type: Object }) column: unknown = null;
+  /**
+   * The current column filter value the select seeds from (String-coerced).
+   */
+  @property({ type: Object }) value: unknown = null;
+  /**
+   * `(columnId, value) => void` — apply the column filter on change; the leading empty "All" option clears it. Null-guarded at call sites.
+   */
+  @property({ type: Function }) setFilter: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * 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[] = [];
+
+  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;
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    queueMicrotask(() => {
+      if (this.isConnected || this._rozieTornDown) return;
+      this._rozieTornDown = true;
+      for (const fn of this._disconnectCleanups) fn();
+      this._disconnectCleanups = [];
+    });
+  }
+
+  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>
+  <option value="" data-rozie-s-d75b42b2>All</option>
+  ${repeat<any>(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option key=${rozieAttr(opt)} value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
+</select>
+`;
+  }
+
+  selectValue = () => this.value != null ? String(this.value) : '';
+
+  onChange = (e: any) => {
+  const v = e && e.target ? e.target.value : '';
+  if (v === '') {
+    this.setFilter && this.setFilter(this.columnId, '');
+  } else {
+    this.setFilter && this.setFilter(this.columnId, v);
+  }
+};
+}