@rozie-ui/data-table-lit 0.2.2 → 0.2.4

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}
@@ -3804,7 +3811,7 @@ ${!!this._invalidMsg.value ? lit.html`<div class="rdt-sr-live" role="status" ari
   ${this.allLeafColumns().length ? lit.html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
     <summary class="rdt-colvis-summary" data-rozie-s-d5dcab4c>Columns</summary>
     <div class="rdt-colvis-menu" role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c>
-      ${(0, lit_directives_repeat_js.repeat)(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => lit.html`<label class="rdt-colvis-item" key=${(0, _rozie_runtime_lit.rozieAttr)(lc.id)} data-rozie-s-d5dcab4c>
+      ${(0, lit_directives_repeat_js.repeat)(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => lit.html`<label class="rdt-colvis-item" data-rozie-s-d5dcab4c>
         <input class="rdt-colvis-checkbox" type="checkbox" ?checked=${lc.visible} @change=${($event) => {
 			this.onToggleVisibility(lc.id);
 		}} data-rozie-s-d5dcab4c />
@@ -3830,7 +3837,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 				return "{}";
 			}
 		})()} @rozie-group-bar-apply-grouping=${($event) => this.applyGrouping($event.detail)} @rozie-group-bar-clear-grouping=${($event) => this.clearGrouping($event.detail)}>
-    ${(0, lit_directives_repeat_js.repeat)(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => lit.html`<span class="rdt-group-token" data-group-token="" key=${(0, _rozie_runtime_lit.rozieAttr)(gk)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(gk)}</span>`)}
+    ${(0, lit_directives_repeat_js.repeat)(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => lit.html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(gk)}</span>`)}
   </slot>`}
 </div>` : lit.nothing}${this.virtual ? lit.html`<div class="rdt-scroll" style=${(0, _rozie_runtime_lit.rozieStyle)(this.maxHeight ? "max-height:" + this.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + this.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c>
 <table class="${Object.entries({
@@ -3850,14 +3857,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			this.onGridClick($event);
 		}} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
-    ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" key=${(0, _rozie_runtime_lit.rozieAttr)(hg.id)} aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
+    ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
       ${(0, lit_directives_repeat_js.repeat)(hg.headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="${Object.entries({
 			"rdt-th": true,
 			"rdt-select-th": this.isSelectColumn(header.column.id),
 			"rdt-expander-th": this.isExpanderColumn(header.column.id),
 			"rdt-th-resizing": this.columnIsResizing(header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== void 0 ? this.selectAll({
 			checked: this.isAllRowsSelected(),
@@ -3940,7 +3947,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? lit.html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? lit.html`<input class="rdt-col-filter" type="text" aria-label=${(0, _rozie_runtime_lit.rozieAttr)("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
 			this.onColumnFilterInput(header.column.id, $event);
@@ -3986,7 +3993,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
 			"rdt-in-range": this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)),
 			"rdt-cell-active": this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell))
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} key=${(0, _rozie_runtime_lit.rozieAttr)(cell.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(wr.vi.index)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(wr.row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(wr.vi.index)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(wr.row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(wr.row) ? lit.html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIsExpanded(wr.row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4072,7 +4079,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
 		}} data-rozie-s-d5dcab4c>
-            ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
+            ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? lit.html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorCheckbox(cell.column.id, $event);
 		}} @keydown=${($event) => {
@@ -4142,14 +4149,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			this.onGridClick($event);
 		}} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
-    ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" key=${(0, _rozie_runtime_lit.rozieAttr)(hg.id)} aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
+    ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
       ${(0, lit_directives_repeat_js.repeat)(hg.headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="${Object.entries({
 			"rdt-th": true,
 			"rdt-select-th": this.isSelectColumn(header.column.id),
 			"rdt-expander-th": this.isExpanderColumn(header.column.id),
 			"rdt-th-resizing": this.columnIsResizing(header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
         
         
         ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4238,7 +4245,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? lit.html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? lit.html`<input class="rdt-col-filter" type="text" aria-label=${(0, _rozie_runtime_lit.rozieAttr)("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
 			this.onColumnFilterInput(header.column.id, $event);
@@ -4279,7 +4286,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
 			"rdt-in-range": this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)),
 			"rdt-cell-active": this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell))
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} key=${(0, _rozie_runtime_lit.rozieAttr)(cell.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIndexOf(row))} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIndexOf(row))} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(row) ? lit.html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIsExpanded(row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4365,7 +4372,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
 		}} data-rozie-s-d5dcab4c>
-            ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
+            ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? lit.html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorCheckbox(cell.column.id, $event);
 		}} @keydown=${($event) => {
@@ -5044,7 +5051,7 @@ let EditorSelect = class EditorSelect extends (0, _lit_labs_preact_signals.Signa
 		}} @blur=${($event) => {
 			this.onBlur();
 		}} data-rozie-s-117f1a16>
-  ${(0, lit_directives_repeat_js.repeat)(this.options, (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-117f1a16>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
+  ${(0, lit_directives_repeat_js.repeat)(this.options, (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-117f1a16>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
 </select>
 `;
 	}
@@ -5387,7 +5394,7 @@ let FilterSelect = class FilterSelect extends (0, _lit_labs_preact_signals.Signa
 			this.onChange($event);
 		}} data-rozie-s-d75b42b2>
   <option value="" data-rozie-s-d75b42b2>All</option>
-  ${(0, lit_directives_repeat_js.repeat)(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt)} data-rozie-s-d75b42b2>${(0, _rozie_runtime_lit.rozieDisplay)(opt)}</option>`)}
+  ${(0, lit_directives_repeat_js.repeat)(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt)} data-rozie-s-d75b42b2>${(0, _rozie_runtime_lit.rozieDisplay)(opt)}</option>`)}
 </select>
 `;
 	}
@@ -5558,7 +5565,7 @@ let GroupBar = class GroupBar extends (0, _lit_labs_preact_signals.SignalWatcher
 		return lit.html`
 <div class="rdt-group-bar" data-rozie-s-546c469a>
   
-  ${(0, lit_directives_repeat_js.repeat)(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => lit.html`<span class="rdt-group-token" part="group-token" key=${(0, _rozie_runtime_lit.rozieAttr)(col.id)} draggable="true" @dragstart=${($event) => {
+  ${(0, lit_directives_repeat_js.repeat)(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => lit.html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event) => {
 			this.onChipDragStart($event, col.id);
 		}} @dragend=${($event) => {
 			this.onDragEnd();
@@ -5579,7 +5586,7 @@ let GroupBar = class GroupBar extends (0, _lit_labs_preact_signals.SignalWatcher
     ${!this.grouping.length ? lit.html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : lit.nothing}${(0, lit_directives_repeat_js.repeat)(this.grouping, (gk, _idx) => gk, (gk, _idx) => lit.html`<span class="${Object.entries({
 			"rdt-group-token": true,
 			"is-drop-target": this._dragKind.value === "token" && this._dropKey.value === gk && this._draggingId.value !== gk
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" key=${(0, _rozie_runtime_lit.rozieAttr)(gk)} draggable="true" @dragstart=${($event) => {
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event) => {
 			this.onTokenDragStart($event, gk);
 		}} @dragover=${($event) => {
 			this.onTokenDragOver($event, gk);
@@ -5641,7 +5648,7 @@ let DetailPanel = class DetailPanel extends (0, _lit_labs_preact_signals.SignalW
 		return lit.html`
 <dl class="rdt-detail-panel" data-rozie-s-8f65bdaa>
   
-  ${(0, lit_directives_repeat_js.repeat)(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => lit.html`<div class="rdt-detail-entry" key=${(0, _rozie_runtime_lit.rozieAttr)(pair.key)} data-rozie-s-8f65bdaa>
+  ${(0, lit_directives_repeat_js.repeat)(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => lit.html`<div class="rdt-detail-entry" data-rozie-s-8f65bdaa>
     <dt class="rdt-detail-key" data-rozie-s-8f65bdaa>${(0, _rozie_runtime_lit.rozieDisplay)(pair.key)}</dt>
     <dd class="rdt-detail-value" data-rozie-s-8f65bdaa>${(0, _rozie_runtime_lit.rozieDisplay)(pair.value)}</dd>
   </div>`)}

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,69 +170,70 @@ 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;
   private _slotGroupBarElements;
   groupBar?: (scope: {
-    grouping: unknown;
-    groupableColumns: unknown;
-    applyGrouping: unknown;
-    clearGrouping: unknown;
+    grouping: any;
+    groupableColumns: any;
+    applyGrouping: any;
+    clearGrouping: any;
   }) => unknown;
   private _hasSlotSelectAll;
   private _slotSelectAllElements;
   selectAll?: (scope: {
-    checked: unknown;
-    indeterminate: unknown;
-    toggle: unknown;
+    checked: any;
+    indeterminate: any;
+    toggle: any;
   }) => unknown;
   private _hasSlotColHeader;
   private _slotColHeaderElements;
   colHeader?: (scope: {
-    columnId: unknown;
-    column: unknown;
-    label: unknown;
+    columnId: any;
+    column: any;
+    label: any;
   }) => unknown;
   private _hasSlotFilter;
   private _slotFilterElements;
   filter?: (scope: {
-    columnId: unknown;
-    value: unknown;
-    uniqueValues: unknown;
-    minMax: unknown;
-    setFilter: unknown;
+    columnId: any;
+    value: any;
+    uniqueValues: any;
+    minMax: any;
+    setFilter: any;
   }) => unknown;
   private _hasSlotSelectCell;
   private _slotSelectCellElements;
   selectCell?: (scope: {
-    row: unknown;
-    checked: unknown;
-    toggle: unknown;
+    row: any;
+    checked: any;
+    toggle: any;
   }) => unknown;
   private _hasSlotCell;
   private _slotCellElements;
   cell?: (scope: {
-    columnId: unknown;
-    column: unknown;
-    row: unknown;
-    value: unknown;
+    columnId: any;
+    column: any;
+    row: any;
+    value: any;
   }) => unknown;
   private _hasSlotEditor;
   private _slotEditorElements;
   editor?: (scope: {
-    columnId: unknown;
-    column: unknown;
-    row: unknown;
-    value: unknown;
-    commit: unknown;
-    cancel: unknown;
-    autofocus: unknown;
+    columnId: any;
+    column: any;
+    row: any;
+    value: any;
+    commit: any;
+    cancel: any;
+    autofocus: any;
   }) => unknown;
   private _hasSlotDetail;
   private _slotDetailElements;
   detail?: (scope: {
-    row: unknown;
+    row: any;
   }) => unknown;
   private _disconnectCleanups;
   private _rozieTornDown;

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,69 +170,70 @@ 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;
   private _slotGroupBarElements;
   groupBar?: (scope: {
-    grouping: unknown;
-    groupableColumns: unknown;
-    applyGrouping: unknown;
-    clearGrouping: unknown;
+    grouping: any;
+    groupableColumns: any;
+    applyGrouping: any;
+    clearGrouping: any;
   }) => unknown;
   private _hasSlotSelectAll;
   private _slotSelectAllElements;
   selectAll?: (scope: {
-    checked: unknown;
-    indeterminate: unknown;
-    toggle: unknown;
+    checked: any;
+    indeterminate: any;
+    toggle: any;
   }) => unknown;
   private _hasSlotColHeader;
   private _slotColHeaderElements;
   colHeader?: (scope: {
-    columnId: unknown;
-    column: unknown;
-    label: unknown;
+    columnId: any;
+    column: any;
+    label: any;
   }) => unknown;
   private _hasSlotFilter;
   private _slotFilterElements;
   filter?: (scope: {
-    columnId: unknown;
-    value: unknown;
-    uniqueValues: unknown;
-    minMax: unknown;
-    setFilter: unknown;
+    columnId: any;
+    value: any;
+    uniqueValues: any;
+    minMax: any;
+    setFilter: any;
   }) => unknown;
   private _hasSlotSelectCell;
   private _slotSelectCellElements;
   selectCell?: (scope: {
-    row: unknown;
-    checked: unknown;
-    toggle: unknown;
+    row: any;
+    checked: any;
+    toggle: any;
   }) => unknown;
   private _hasSlotCell;
   private _slotCellElements;
   cell?: (scope: {
-    columnId: unknown;
-    column: unknown;
-    row: unknown;
-    value: unknown;
+    columnId: any;
+    column: any;
+    row: any;
+    value: any;
   }) => unknown;
   private _hasSlotEditor;
   private _slotEditorElements;
   editor?: (scope: {
-    columnId: unknown;
-    column: unknown;
-    row: unknown;
-    value: unknown;
-    commit: unknown;
-    cancel: unknown;
-    autofocus: unknown;
+    columnId: any;
+    column: any;
+    row: any;
+    value: any;
+    commit: any;
+    cancel: any;
+    autofocus: any;
   }) => unknown;
   private _hasSlotDetail;
   private _slotDetailElements;
   detail?: (scope: {
-    row: unknown;
+    row: any;
   }) => unknown;
   private _disconnectCleanups;
   private _rozieTornDown;

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}
@@ -3800,7 +3807,7 @@ ${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-li
   ${this.allLeafColumns().length ? html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
     <summary class="rdt-colvis-summary" data-rozie-s-d5dcab4c>Columns</summary>
     <div class="rdt-colvis-menu" role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c>
-      ${repeat(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" key=${rozieAttr(lc.id)} data-rozie-s-d5dcab4c>
+      ${repeat(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" data-rozie-s-d5dcab4c>
         <input class="rdt-colvis-checkbox" type="checkbox" ?checked=${lc.visible} @change=${($event) => {
 			this.onToggleVisibility(lc.id);
 		}} data-rozie-s-d5dcab4c />
@@ -3826,7 +3833,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return "{}";
 			}
 		})()} @rozie-group-bar-apply-grouping=${($event) => this.applyGrouping($event.detail)} @rozie-group-bar-clear-grouping=${($event) => this.clearGrouping($event.detail)}>
-    ${repeat(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" key=${rozieAttr(gk)} data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
+    ${repeat(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
   </slot>`}
 </div>` : nothing}${this.virtual ? html`<div class="rdt-scroll" style=${rozieStyle(this.maxHeight ? "max-height:" + this.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + this.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c>
 <table class="${Object.entries({
@@ -3846,14 +3853,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			this.onGridClick($event);
 		}} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
-    ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
+    ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
       ${repeat(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({
 			"rdt-th": true,
 			"rdt-select-th": this.isSelectColumn(header.column.id),
 			"rdt-expander-th": this.isExpanderColumn(header.column.id),
 			"rdt-th-resizing": this.columnIsResizing(header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== void 0 ? this.selectAll({
 			checked: this.isAllRowsSelected(),
@@ -3936,7 +3943,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
 			this.onColumnFilterInput(header.column.id, $event);
@@ -3982,7 +3989,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
 			"rdt-in-range": this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)),
 			"rdt-cell-active": this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell))
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4068,7 +4075,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
 		}} data-rozie-s-d5dcab4c>
-            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorCheckbox(cell.column.id, $event);
 		}} @keydown=${($event) => {
@@ -4138,14 +4145,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			this.onGridClick($event);
 		}} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
-    ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
+    ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
       ${repeat(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({
 			"rdt-th": true,
 			"rdt-select-th": this.isSelectColumn(header.column.id),
 			"rdt-expander-th": this.isExpanderColumn(header.column.id),
 			"rdt-th-resizing": this.columnIsResizing(header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
         
         
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4234,7 +4241,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
 			this.onColumnFilterInput(header.column.id, $event);
@@ -4275,7 +4282,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
 			"rdt-in-range": this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)),
 			"rdt-cell-active": this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell))
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4361,7 +4368,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
 		}} data-rozie-s-d5dcab4c>
-            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorCheckbox(cell.column.id, $event);
 		}} @keydown=${($event) => {
@@ -5040,7 +5047,7 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 		}} @blur=${($event) => {
 			this.onBlur();
 		}} data-rozie-s-117f1a16>
-  ${repeat(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>`)}
+  ${repeat(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
 </select>
 `;
 	}
@@ -5383,7 +5390,7 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
 			this.onChange($event);
 		}} data-rozie-s-d75b42b2>
   <option value="" data-rozie-s-d75b42b2>All</option>
-  ${repeat(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option key=${rozieAttr(opt)} value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
+  ${repeat(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
 </select>
 `;
 	}
@@ -5554,7 +5561,7 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
 		return html`
 <div class="rdt-group-bar" data-rozie-s-546c469a>
   
-  ${repeat(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" key=${rozieAttr(col.id)} draggable="true" @dragstart=${($event) => {
+  ${repeat(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event) => {
 			this.onChipDragStart($event, col.id);
 		}} @dragend=${($event) => {
 			this.onDragEnd();
@@ -5575,7 +5582,7 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
     ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({
 			"rdt-group-token": true,
 			"is-drop-target": this._dragKind.value === "token" && this._dropKey.value === gk && this._draggingId.value !== gk
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" key=${rozieAttr(gk)} draggable="true" @dragstart=${($event) => {
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event) => {
 			this.onTokenDragStart($event, gk);
 		}} @dragover=${($event) => {
 			this.onTokenDragOver($event, gk);
@@ -5637,7 +5644,7 @@ let DetailPanel = class DetailPanel extends SignalWatcher(LitElement) {
 		return html`
 <dl class="rdt-detail-panel" data-rozie-s-8f65bdaa>
   
-  ${repeat(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" key=${rozieAttr(pair.key)} data-rozie-s-8f65bdaa>
+  ${repeat(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" 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>`)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "0.2.1"
+    "@rozie/runtime-lit": "0.5.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';
@@ -36,61 +36,63 @@ import { Virtualizer, elementScroll, observeElementRect, observeElementOffset, m
 const __rozieCtx_data_table_columns = createContext(Symbol.for("rozie:data-table:columns"));
 
 interface RozieGroupBarSlotCtx {
-  grouping: unknown;
-  groupableColumns: unknown;
-  applyGrouping: unknown;
-  clearGrouping: unknown;
+  grouping: any;
+  groupableColumns: any;
+  applyGrouping: any;
+  clearGrouping: any;
 }
 
 interface RozieSelectAllSlotCtx {
-  checked: unknown;
-  indeterminate: unknown;
-  toggle: unknown;
+  checked: any;
+  indeterminate: any;
+  toggle: any;
 }
 
 interface RozieColHeaderSlotCtx {
-  columnId: unknown;
-  column: unknown;
-  label: unknown;
+  columnId: any;
+  column: any;
+  label: any;
 }
 
 interface RozieFilterSlotCtx {
-  columnId: unknown;
-  value: unknown;
-  uniqueValues: unknown;
-  minMax: unknown;
-  setFilter: unknown;
+  columnId: any;
+  value: any;
+  uniqueValues: any;
+  minMax: any;
+  setFilter: any;
 }
 
 interface RozieSelectCellSlotCtx {
-  row: unknown;
-  checked: unknown;
-  toggle: unknown;
+  row: any;
+  checked: any;
+  toggle: any;
 }
 
 interface RozieCellSlotCtx {
-  columnId: unknown;
-  column: unknown;
-  row: unknown;
-  value: unknown;
+  columnId: any;
+  column: any;
+  row: any;
+  value: any;
 }
 
 interface RozieEditorSlotCtx {
-  columnId: unknown;
-  column: unknown;
-  row: unknown;
-  value: unknown;
-  commit: unknown;
-  cancel: unknown;
-  autofocus: unknown;
+  columnId: any;
+  column: any;
+  row: any;
+  value: any;
+  commit: any;
+  cancel: any;
+  autofocus: any;
 }
 
 interface RozieDetailSlotCtx {
-  row: unknown;
+  row: any;
 }
 
 @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,32 +633,34 @@ 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;
   @queryAssignedElements({ slot: 'groupBar', flatten: true }) private _slotGroupBarElements!: Element[];
-  @property({ attribute: false }) groupBar?: (scope: { grouping: unknown; groupableColumns: unknown; applyGrouping: unknown; clearGrouping: unknown }) => unknown;
+  @property({ attribute: false }) groupBar?: (scope: { grouping: any; groupableColumns: any; applyGrouping: any; clearGrouping: any }) => unknown;
   @state() private _hasSlotSelectAll = false;
   @queryAssignedElements({ slot: 'selectAll', flatten: true }) private _slotSelectAllElements!: Element[];
-  @property({ attribute: false }) selectAll?: (scope: { checked: unknown; indeterminate: unknown; toggle: unknown }) => unknown;
+  @property({ attribute: false }) selectAll?: (scope: { checked: any; indeterminate: any; toggle: any }) => unknown;
   @state() private _hasSlotColHeader = false;
   @queryAssignedElements({ slot: 'colHeader', flatten: true }) private _slotColHeaderElements!: Element[];
-  @property({ attribute: false }) colHeader?: (scope: { columnId: unknown; column: unknown; label: unknown }) => unknown;
+  @property({ attribute: false }) colHeader?: (scope: { columnId: any; column: any; label: any }) => unknown;
   @state() private _hasSlotFilter = false;
   @queryAssignedElements({ slot: 'filter', flatten: true }) private _slotFilterElements!: Element[];
-  @property({ attribute: false }) filter?: (scope: { columnId: unknown; value: unknown; uniqueValues: unknown; minMax: unknown; setFilter: unknown }) => unknown;
+  @property({ attribute: false }) filter?: (scope: { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any }) => unknown;
   @state() private _hasSlotSelectCell = false;
   @queryAssignedElements({ slot: 'selectCell', flatten: true }) private _slotSelectCellElements!: Element[];
-  @property({ attribute: false }) selectCell?: (scope: { row: unknown; checked: unknown; toggle: unknown }) => unknown;
+  @property({ attribute: false }) selectCell?: (scope: { row: any; checked: any; toggle: any }) => unknown;
   @state() private _hasSlotCell = false;
   @queryAssignedElements({ slot: 'cell', flatten: true }) private _slotCellElements!: Element[];
-  @property({ attribute: false }) cell?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown }) => unknown;
+  @property({ attribute: false }) cell?: (scope: { columnId: any; column: any; row: any; value: any }) => unknown;
   @state() private _hasSlotEditor = false;
   @queryAssignedElements({ slot: 'editor', flatten: true }) private _slotEditorElements!: Element[];
-  @property({ attribute: false }) editor?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown; commit: unknown; cancel: unknown; autofocus: unknown }) => unknown;
+  @property({ attribute: false }) editor?: (scope: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any }) => unknown;
   @state() private _hasSlotDetail = false;
   @queryAssignedElements({ slot: 'detail', flatten: true }) private _slotDetailElements!: Element[];
-  @property({ attribute: false }) detail?: (scope: { row: unknown }) => unknown;
+  @property({ attribute: false }) detail?: (scope: { row: any }) => unknown;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -1154,7 +1158,7 @@ ${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-li
   ${this.allLeafColumns().length ? html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
     <summary class="rdt-colvis-summary" data-rozie-s-d5dcab4c>Columns</summary>
     <div class="rdt-colvis-menu" role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c>
-      ${repeat<any>(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" key=${rozieAttr(lc.id)} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" data-rozie-s-d5dcab4c>
         <input class="rdt-colvis-checkbox" type="checkbox" ?checked=${lc.visible} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleVisibility(lc.id); }} data-rozie-s-d5dcab4c />
         <span class="rdt-colvis-label" data-rozie-s-d5dcab4c>${rozieDisplay(lc.label)}</span>
       </label>`)}
@@ -1164,13 +1168,13 @@ ${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-li
 
 ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   ${this.groupBar !== undefined ? this.groupBar({grouping: this.groupingKeys(), groupableColumns: this.groupableColumns(), applyGrouping: this.applyGrouping, clearGrouping: this.clearGrouping}) : html`<slot name="groupBar" data-rozie-params=${(() => { try { return JSON.stringify({grouping: this.groupingKeys(), groupableColumns: this.groupableColumns()}); } catch { return '{}'; } })()} @rozie-group-bar-apply-grouping=${($event: CustomEvent) => ((this.applyGrouping) as (...args: any[]) => any)($event.detail)} @rozie-group-bar-clear-grouping=${($event: CustomEvent) => ((this.clearGrouping) as (...args: any[]) => any)($event.detail)}>
-    ${repeat<any>(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" key=${rozieAttr(gk)} data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
+    ${repeat<any>(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
   </slot>`}
 </div>` : nothing}${this.virtual ? html`<div class="rdt-scroll" style=${rozieStyle(this.maxHeight ? 'max-height:' + this.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + this.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c>
 <table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
-    ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
-      ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+    ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
+      ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== undefined ? this.selectAll({checked: this.isAllRowsSelected(), indeterminate: this.isSomeRowsSelected(), toggle: this.onToggleAllRows}) : html`<slot name="selectAll" data-rozie-params=${(() => { try { return JSON.stringify({checked: this.isAllRowsSelected(), indeterminate: this.isSomeRowsSelected()}); } catch { return '{}'; } })()} @rozie-select-all-toggle=${($event: CustomEvent) => ((this.onToggleAllRows) as (...args: any[]) => any)($event.detail)}>
             ${this.selectionMode === 'multiple' ? html`<input class="rdt-select-all" type="checkbox" aria-label="Select all rows" ?checked=${this.isAllRowsSelected()} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleAllRows($event); }} data-rozie-s-d5dcab4c />` : nothing}</slot>`}
@@ -1196,7 +1200,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr('Filter ' + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onColumnFilterInput(header.column.id, $event); }} @click=${($event: MouseEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.stopEvent($event); }} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.filter !== undefined ? this.filter({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}></slot>`}
@@ -1211,7 +1215,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     
     ${repeat<any>(this.windowedRows(), (wr, _idx) => wr.row.id, (wr, _idx) => html`
     <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(wr.row), 'rdt-row-pinned': wr.pinned }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.headerRowCount() + wr.vi.index + 1)} data-index=${rozieAttr(wr.vi.index)} data-pinned=${rozieAttr(wr.pinned ? 'true' : null)} data-depth=${rozieAttr(wr.row.depth)} data-group-header=${rozieAttr(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} data-rozie-s-d5dcab4c>
-      ${repeat<any>(this.visibleCellsFor(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)), 'rdt-cell-active': this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this.visibleCellsFor(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)), 'rdt-cell-active': this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1228,7 +1232,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
-            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
           ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
         </span>`}${this.isFillHandleCell(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
@@ -1247,8 +1251,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 </table>
 </div>` : html`<table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
-    ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
-      ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+    ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
+      ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
         
         
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1280,7 +1284,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr('Filter ' + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onColumnFilterInput(header.column.id, $event); }} @click=${($event: MouseEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.stopEvent($event); }} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.filter !== undefined ? this.filter({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}></slot>`}
@@ -1291,7 +1295,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     
     ${repeat<any>(this._rows.value, (row, _idx) => row.id, (row, _idx) => html`
     <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(row) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-depth=${rozieAttr(row.depth)} aria-rowindex=${rozieAttr(this.bodyAriaRowIndex(row))} data-group-header=${rozieAttr(this.rowIsGrouped(row) ? row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(row) ? row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(row) ? !!this.rowIsExpanded(row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(row) : null)} aria-level=${rozieAttr(this.groupingActive() ? row.depth + 1 : null)} data-rozie-s-d5dcab4c>
-      ${repeat<any>(this.visibleCellsFor(row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)), 'rdt-cell-active': this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this.visibleCellsFor(row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)), 'rdt-cell-active': this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1308,7 +1312,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
-            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
           ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
         </span>`}${this.isFillHandleCell(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}

package/src/DetailPanel.ts

@@ -1,7 +1,7 @@
 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 { rozieDisplay } from '@rozie/runtime-lit';
 import { repeat } from 'lit/directives/repeat.js';
 
 @customElement('rozie-detail-panel')
@@ -34,7 +34,7 @@ export default class DetailPanel extends SignalWatcher(LitElement) {
     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>
+  ${repeat<any>(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" 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>`)}

package/src/EditorSelect.ts

@@ -66,7 +66,7 @@ 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 key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
+  ${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>
 `;
   }

package/src/FilterSelect.ts

@@ -50,7 +50,7 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
     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>`)}
+  ${repeat<any>(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
 </select>
 `;
   }

package/src/GroupBar.ts

@@ -107,12 +107,12 @@ export default class GroupBar extends SignalWatcher(LitElement) {
     return html`
 <div class="rdt-group-bar" data-rozie-s-546c469a>
   
-  ${repeat<any>(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" key=${rozieAttr(col.id)} draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onChipDragStart($event, col.id); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>${rozieDisplay(col.label)}</span>`)}
+  ${repeat<any>(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onChipDragStart($event, col.id); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>${rozieDisplay(col.label)}</span>`)}
 
   
   <span class="${Object.entries({ "rdt-group-drop-zone": true, 'is-over': this._isOver.value }).filter(([, v]) => v).map(([k]) => k).join(' ')}" data-group-drop-zone="" @dragover=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragOver($event); }} @dragleave=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragLeave($event); }} @drop=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDrop($event); }} data-rozie-s-546c469a>
     
-    ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat<any>(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({ "rdt-group-token": true, 'is-drop-target': this._dragKind.value === 'token' && this._dropKey.value === gk && this._draggingId.value !== gk }).filter(([, v]) => v).map(([k]) => k).join(' ')}" part="group-token" data-group-token="" key=${rozieAttr(gk)} draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragStart($event, gk); }} @dragover=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragOver($event, gk); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>
+    ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat<any>(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({ "rdt-group-token": true, 'is-drop-target': this._dragKind.value === 'token' && this._dropKey.value === gk && this._draggingId.value !== gk }).filter(([, v]) => v).map(([k]) => k).join(' ')}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragStart($event, gk); }} @dragover=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragOver($event, gk); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>
       ${rozieDisplay(this.labelFor(gk))}
       <button class="rdt-group-token-remove" type="button" aria-label=${rozieAttr('Remove ' + this.labelFor(gk) + ' grouping')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.removeKey(gk); }} data-rozie-s-546c469a>×</button>
     </span>`)}