@rozie-ui/data-table-lit 0.7.0 → 0.7.1

package/dist/index.cjs

@@ -4848,6 +4848,18 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		queueMicrotask(() => {
 			if (this.isConnected || this._rozieTornDown) return;
 			this._rozieTornDown = true;
+			(() => {
+				if (this.docPointerDown && typeof document !== "undefined") {
+					document.removeEventListener("pointerdown", this.docPointerDown, true);
+					this.docPointerDown = null;
+				}
+				if (this.virtualizerCleanup) this.virtualizerCleanup();
+				if (this.colVirtualizerCleanup) this.colVirtualizerCleanup();
+				this.teardownColRtlWatch();
+				this.teardownRemeasure();
+				this.teardownFillDrag();
+				this.teardownRangeDrag();
+			})();
 			for (const fn of this._disconnectCleanups) fn();
 			this._disconnectCleanups = [];
 		});
@@ -5890,7 +5902,8 @@ __decorate([(0, lit_decorators_js.property)({
 __decorate([(0, lit_decorators_js.property)({ type: Array })], DataTable.prototype, "columns", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "selection-mode"
 })], DataTable.prototype, "selectionMode", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Array,
@@ -5914,11 +5927,13 @@ __decorate([(0, lit_decorators_js.property)({
 })], DataTable.prototype, "manual", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "row-count"
 })], DataTable.prototype, "rowCount", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "page-count"
 })], DataTable.prototype, "pageCount", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
@@ -5928,8 +5943,14 @@ __decorate([(0, lit_decorators_js.property)({
 	type: Object,
 	attribute: "expanded"
 })], DataTable.prototype, "_expanded_attr", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], DataTable.prototype, "getRowId", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], DataTable.prototype, "getSubRows", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "get-row-id"
+})], DataTable.prototype, "getRowId", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "get-sub-rows"
+})], DataTable.prototype, "getSubRows", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
@@ -5960,15 +5981,18 @@ __decorate([(0, lit_decorators_js.property)({
 })], DataTable.prototype, "_columnPinning_attr", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "sticky-header"
 })], DataTable.prototype, "stickyHeader", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "interaction-mode"
 })], DataTable.prototype, "interactionMode", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "single-click-edit"
 })], DataTable.prototype, "singleClickEdit", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
@@ -5976,20 +6000,24 @@ __decorate([(0, lit_decorators_js.property)({
 })], DataTable.prototype, "undoable", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "undo-limit"
 })], DataTable.prototype, "undoLimit", void 0);
 __decorate([(0, lit_decorators_js.property)({ converter: { fromAttribute: (v) => v === null ? false : v === "true" ? true : v === "false" ? false : v === "" ? true : v } })], DataTable.prototype, "virtual", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "estimate-row-height"
 })], DataTable.prototype, "estimateRowHeight", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "auto-measure"
 })], DataTable.prototype, "autoMeasure", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "max-height"
 })], DataTable.prototype, "maxHeight", void 0);
 __decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"__rozieRoot\"]")], DataTable.prototype, "_ref__rozieRoot", void 0);
 __decorate([(0, lit_decorators_js.state)()], DataTable.prototype, "_hasSlotDefault", void 0);
@@ -6179,7 +6207,7 @@ __decorate([(0, lit_decorators_js.property)({
 	type: String,
 	reflect: true
 })], Column.prototype, "pinned", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: String })], Column.prototype, "width", void 0);
+__decorate([(0, lit_decorators_js.property)({ converter: { fromAttribute: _rozie_runtime_lit.rozieNumberOrStringAttr } })], Column.prototype, "width", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
@@ -6188,7 +6216,10 @@ __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
 })], Column.prototype, "groupable", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: String })], Column.prototype, "aggregationFn", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: String,
+	attribute: "aggregation-fn"
+})], Column.prototype, "aggregationFn", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
@@ -6197,7 +6228,10 @@ __decorate([(0, lit_decorators_js.property)({
 	type: String,
 	reflect: true
 })], Column.prototype, "editor", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Array })], Column.prototype, "editorOptions", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Array,
+	attribute: "editor-options"
+})], Column.prototype, "editorOptions", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Function })], Column.prototype, "validate", void 0);
 Column = __decorate([(0, lit_decorators_js.customElement)("rozie-column")], Column);
 var Column_default = Column;
@@ -6284,7 +6318,8 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorText.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorText.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorText.prototype, "row", void 0);
@@ -6297,7 +6332,8 @@ __decorate([(0, lit_decorators_js.property)({
 })], EditorText.prototype, "autofocus", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorText.prototype, "columnLabel", void 0);
 __decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-text")], EditorText);
@@ -6392,7 +6428,8 @@ let EditorNumber = class EditorNumber extends (0, _lit_labs_preact_signals.Signa
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorNumber.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorNumber.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorNumber.prototype, "row", void 0);
@@ -6405,7 +6442,8 @@ __decorate([(0, lit_decorators_js.property)({
 })], EditorNumber.prototype, "autofocus", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorNumber.prototype, "columnLabel", void 0);
 __decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"inputEl\"]")], EditorNumber.prototype, "_refInputEl", void 0);
 EditorNumber = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-number")], EditorNumber);
@@ -6496,7 +6534,8 @@ let EditorSelect = class EditorSelect extends (0, _lit_labs_preact_signals.Signa
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorSelect.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorSelect.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorSelect.prototype, "row", void 0);
@@ -6510,7 +6549,8 @@ __decorate([(0, lit_decorators_js.property)({
 })], EditorSelect.prototype, "autofocus", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorSelect.prototype, "columnLabel", void 0);
 __decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"selectEl\"]")], EditorSelect.prototype, "_refSelectEl", void 0);
 EditorSelect = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-select")], EditorSelect);
@@ -6580,7 +6620,8 @@ let EditorCheckbox = class EditorCheckbox extends (0, _lit_labs_preact_signals.S
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorCheckbox.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorCheckbox.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorCheckbox.prototype, "row", void 0);
@@ -6593,7 +6634,8 @@ __decorate([(0, lit_decorators_js.property)({
 })], EditorCheckbox.prototype, "autofocus", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorCheckbox.prototype, "columnLabel", void 0);
 __decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"inputEl\"]")], EditorCheckbox.prototype, "_refInputEl", void 0);
 EditorCheckbox = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-checkbox")], EditorCheckbox);
@@ -6720,7 +6762,8 @@ let EditorDate = class EditorDate extends (0, _lit_labs_preact_signals.SignalWat
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorDate.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorDate.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorDate.prototype, "row", void 0);
@@ -6733,7 +6776,8 @@ __decorate([(0, lit_decorators_js.property)({
 })], EditorDate.prototype, "autofocus", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorDate.prototype, "columnLabel", void 0);
 __decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"inputEl\"]")], EditorDate.prototype, "_refInputEl", void 0);
 EditorDate = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-date")], EditorDate);
@@ -6818,14 +6862,19 @@ let FilterText = class FilterText extends (0, _lit_labs_preact_signals.SignalWat
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterText.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], FilterText.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], FilterText.prototype, "value", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], FilterText.prototype, "setFilter", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "set-filter"
+})], FilterText.prototype, "setFilter", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterText.prototype, "columnLabel", void 0);
 FilterText = __decorate([(0, lit_decorators_js.customElement)("rozie-filter-text")], FilterText);
 var FilterText_default = FilterText;
@@ -6925,15 +6974,23 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterNumberRange.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], FilterNumberRange.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], FilterNumberRange.prototype, "value", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], FilterNumberRange.prototype, "setFilter", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Object })], FilterNumberRange.prototype, "minMax", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "set-filter"
+})], FilterNumberRange.prototype, "setFilter", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Object,
+	attribute: "min-max"
+})], FilterNumberRange.prototype, "minMax", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterNumberRange.prototype, "columnLabel", void 0);
 FilterNumberRange = __decorate([(0, lit_decorators_js.customElement)("rozie-filter-number-range")], FilterNumberRange);
 var FilterNumberRange_default = FilterNumberRange;
@@ -6988,15 +7045,23 @@ let FilterSelect = class FilterSelect extends (0, _lit_labs_preact_signals.Signa
 };
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterSelect.prototype, "columnId", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], FilterSelect.prototype, "column", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Object })], FilterSelect.prototype, "value", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], FilterSelect.prototype, "setFilter", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Array })], FilterSelect.prototype, "uniqueValues", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "set-filter"
+})], FilterSelect.prototype, "setFilter", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Array,
+	attribute: "unique-values"
+})], FilterSelect.prototype, "uniqueValues", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterSelect.prototype, "columnLabel", void 0);
 FilterSelect = __decorate([(0, lit_decorators_js.customElement)("rozie-filter-select")], FilterSelect);
 var FilterSelect_default = FilterSelect;
@@ -7251,9 +7316,18 @@ let GroupBar = class GroupBar extends (0, _lit_labs_preact_signals.SignalWatcher
 	}
 };
 __decorate([(0, lit_decorators_js.property)({ type: Array })], GroupBar.prototype, "grouping", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Array })], GroupBar.prototype, "groupableColumns", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], GroupBar.prototype, "applyGrouping", void 0);
-__decorate([(0, lit_decorators_js.property)({ type: Function })], GroupBar.prototype, "clearGrouping", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Array,
+	attribute: "groupable-columns"
+})], GroupBar.prototype, "groupableColumns", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "apply-grouping"
+})], GroupBar.prototype, "applyGrouping", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Function,
+	attribute: "clear-grouping"
+})], GroupBar.prototype, "clearGrouping", void 0);
 GroupBar = __decorate([(0, lit_decorators_js.customElement)("rozie-group-bar")], GroupBar);
 var GroupBar_default = GroupBar;
 //#endregion

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 { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from "@rozie/runtime-lit";
+import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDisplay, rozieNumberOrStringAttr, rozieStyle } from "@rozie/runtime-lit";
 import { ContextConsumer, ContextProvider, createContext } from "@lit/context";
 import { repeat } from "lit/directives/repeat.js";
 import "@rozie-ui/popover-lit";
@@ -4844,6 +4844,18 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		queueMicrotask(() => {
 			if (this.isConnected || this._rozieTornDown) return;
 			this._rozieTornDown = true;
+			(() => {
+				if (this.docPointerDown && typeof document !== "undefined") {
+					document.removeEventListener("pointerdown", this.docPointerDown, true);
+					this.docPointerDown = null;
+				}
+				if (this.virtualizerCleanup) this.virtualizerCleanup();
+				if (this.colVirtualizerCleanup) this.colVirtualizerCleanup();
+				this.teardownColRtlWatch();
+				this.teardownRemeasure();
+				this.teardownFillDrag();
+				this.teardownRangeDrag();
+			})();
 			for (const fn of this._disconnectCleanups) fn();
 			this._disconnectCleanups = [];
 		});
@@ -5886,7 +5898,8 @@ __decorate([property({
 __decorate([property({ type: Array })], DataTable.prototype, "columns", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "selection-mode"
 })], DataTable.prototype, "selectionMode", void 0);
 __decorate([property({
 	type: Array,
@@ -5910,11 +5923,13 @@ __decorate([property({
 })], DataTable.prototype, "manual", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "row-count"
 })], DataTable.prototype, "rowCount", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "page-count"
 })], DataTable.prototype, "pageCount", void 0);
 __decorate([property({
 	type: Boolean,
@@ -5924,8 +5939,14 @@ __decorate([property({
 	type: Object,
 	attribute: "expanded"
 })], DataTable.prototype, "_expanded_attr", void 0);
-__decorate([property({ type: Function })], DataTable.prototype, "getRowId", void 0);
-__decorate([property({ type: Function })], DataTable.prototype, "getSubRows", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "get-row-id"
+})], DataTable.prototype, "getRowId", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "get-sub-rows"
+})], DataTable.prototype, "getSubRows", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -5956,15 +5977,18 @@ __decorate([property({
 })], DataTable.prototype, "_columnPinning_attr", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "sticky-header"
 })], DataTable.prototype, "stickyHeader", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "interaction-mode"
 })], DataTable.prototype, "interactionMode", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "single-click-edit"
 })], DataTable.prototype, "singleClickEdit", void 0);
 __decorate([property({
 	type: Boolean,
@@ -5972,20 +5996,24 @@ __decorate([property({
 })], DataTable.prototype, "undoable", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "undo-limit"
 })], DataTable.prototype, "undoLimit", void 0);
 __decorate([property({ converter: { fromAttribute: (v) => v === null ? false : v === "true" ? true : v === "false" ? false : v === "" ? true : v } })], DataTable.prototype, "virtual", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "estimate-row-height"
 })], DataTable.prototype, "estimateRowHeight", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "auto-measure"
 })], DataTable.prototype, "autoMeasure", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "max-height"
 })], DataTable.prototype, "maxHeight", void 0);
 __decorate([query("[data-rozie-ref=\"__rozieRoot\"]")], DataTable.prototype, "_ref__rozieRoot", void 0);
 __decorate([state()], DataTable.prototype, "_hasSlotDefault", void 0);
@@ -6175,7 +6203,7 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], Column.prototype, "pinned", void 0);
-__decorate([property({ type: String })], Column.prototype, "width", void 0);
+__decorate([property({ converter: { fromAttribute: rozieNumberOrStringAttr } })], Column.prototype, "width", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -6184,7 +6212,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], Column.prototype, "groupable", void 0);
-__decorate([property({ type: String })], Column.prototype, "aggregationFn", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aggregation-fn"
+})], Column.prototype, "aggregationFn", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -6193,7 +6224,10 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], Column.prototype, "editor", void 0);
-__decorate([property({ type: Array })], Column.prototype, "editorOptions", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "editor-options"
+})], Column.prototype, "editorOptions", void 0);
 __decorate([property({ type: Function })], Column.prototype, "validate", void 0);
 Column = __decorate([customElement("rozie-column")], Column);
 var Column_default = Column;
@@ -6280,7 +6314,8 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorText.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorText.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorText.prototype, "row", void 0);
@@ -6293,7 +6328,8 @@ __decorate([property({
 })], EditorText.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorText.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([customElement("rozie-editor-text")], EditorText);
@@ -6388,7 +6424,8 @@ let EditorNumber = class EditorNumber extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorNumber.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorNumber.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorNumber.prototype, "row", void 0);
@@ -6401,7 +6438,8 @@ __decorate([property({
 })], EditorNumber.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorNumber.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorNumber.prototype, "_refInputEl", void 0);
 EditorNumber = __decorate([customElement("rozie-editor-number")], EditorNumber);
@@ -6492,7 +6530,8 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorSelect.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorSelect.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorSelect.prototype, "row", void 0);
@@ -6506,7 +6545,8 @@ __decorate([property({
 })], EditorSelect.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorSelect.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"selectEl\"]")], EditorSelect.prototype, "_refSelectEl", void 0);
 EditorSelect = __decorate([customElement("rozie-editor-select")], EditorSelect);
@@ -6576,7 +6616,8 @@ let EditorCheckbox = class EditorCheckbox extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorCheckbox.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorCheckbox.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorCheckbox.prototype, "row", void 0);
@@ -6589,7 +6630,8 @@ __decorate([property({
 })], EditorCheckbox.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorCheckbox.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorCheckbox.prototype, "_refInputEl", void 0);
 EditorCheckbox = __decorate([customElement("rozie-editor-checkbox")], EditorCheckbox);
@@ -6716,7 +6758,8 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorDate.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorDate.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorDate.prototype, "row", void 0);
@@ -6729,7 +6772,8 @@ __decorate([property({
 })], EditorDate.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorDate.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorDate.prototype, "_refInputEl", void 0);
 EditorDate = __decorate([customElement("rozie-editor-date")], EditorDate);
@@ -6814,14 +6858,19 @@ let FilterText = class FilterText extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterText.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], FilterText.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterText.prototype, "value", void 0);
-__decorate([property({ type: Function })], FilterText.prototype, "setFilter", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "set-filter"
+})], FilterText.prototype, "setFilter", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterText.prototype, "columnLabel", void 0);
 FilterText = __decorate([customElement("rozie-filter-text")], FilterText);
 var FilterText_default = FilterText;
@@ -6921,15 +6970,23 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterNumberRange.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], FilterNumberRange.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterNumberRange.prototype, "value", void 0);
-__decorate([property({ type: Function })], FilterNumberRange.prototype, "setFilter", void 0);
-__decorate([property({ type: Object })], FilterNumberRange.prototype, "minMax", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "set-filter"
+})], FilterNumberRange.prototype, "setFilter", void 0);
+__decorate([property({
+	type: Object,
+	attribute: "min-max"
+})], FilterNumberRange.prototype, "minMax", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterNumberRange.prototype, "columnLabel", void 0);
 FilterNumberRange = __decorate([customElement("rozie-filter-number-range")], FilterNumberRange);
 var FilterNumberRange_default = FilterNumberRange;
@@ -6984,15 +7041,23 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterSelect.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], FilterSelect.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterSelect.prototype, "value", void 0);
-__decorate([property({ type: Function })], FilterSelect.prototype, "setFilter", void 0);
-__decorate([property({ type: Array })], FilterSelect.prototype, "uniqueValues", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "set-filter"
+})], FilterSelect.prototype, "setFilter", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "unique-values"
+})], FilterSelect.prototype, "uniqueValues", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterSelect.prototype, "columnLabel", void 0);
 FilterSelect = __decorate([customElement("rozie-filter-select")], FilterSelect);
 var FilterSelect_default = FilterSelect;
@@ -7247,9 +7312,18 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
 	}
 };
 __decorate([property({ type: Array })], GroupBar.prototype, "grouping", void 0);
-__decorate([property({ type: Array })], GroupBar.prototype, "groupableColumns", void 0);
-__decorate([property({ type: Function })], GroupBar.prototype, "applyGrouping", void 0);
-__decorate([property({ type: Function })], GroupBar.prototype, "clearGrouping", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "groupable-columns"
+})], GroupBar.prototype, "groupableColumns", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "apply-grouping"
+})], GroupBar.prototype, "applyGrouping", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "clear-grouping"
+})], GroupBar.prototype, "clearGrouping", void 0);
 GroupBar = __decorate([customElement("rozie-group-bar")], GroupBar);
 var GroupBar_default = GroupBar;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "^0.7.5"
+    "@rozie/runtime-lit": "^0.8.0"
   },
   "peerDependencies": {
     "lit": "^3.2",
@@ -54,7 +54,7 @@
     "@preact/signals-core": "^1.3.0",
     "@tanstack/table-core": "^8.21",
     "@tanstack/virtual-core": "^3",
-    "@rozie-ui/popover-lit": "^0.1.0 || ^0.2.0"
+    "@rozie-ui/popover-lit": "^0.1.0 || ^0.2.0 || ^0.3.0"
   },
   "peerDependenciesMeta": {
     "lit": {

package/src/Column.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SignalWatcher } from '@lit-labs/preact-signals';
+import { rozieNumberOrStringAttr } from '@rozie/runtime-lit';
 import { ContextConsumer, createContext } from '@lit/context';
 
 const __rozieCtx_data_table_columns = createContext(Symbol.for("rozie:data-table:columns"));
@@ -40,7 +41,7 @@ export default class Column extends SignalWatcher(LitElement) {
   /**
    * Optional fixed/initial column width, applied as the column's starting size — a px number (`120`) or a px string (`'120px'`). Column sizing is numeric px, so other CSS lengths (`'12rem'`, `'20%'`, `'auto'`) have no px value to apply and are ignored; the column keeps the default width. An interactive resize overrides this.
    */
-  @property({ type: String }) width: string | number = '';
+  @property({ converter: { fromAttribute: rozieNumberOrStringAttr } }) width: string | number = '';
   /**
    * Reserved per-column metadata flagging participation in the expand affordance. The expander chevron is its own auto-injected leading column on `<DataTable expandable>`, so this is forward-compat metadata, not the toggle host. Default `false`.
    */
@@ -52,7 +53,7 @@ export default class Column extends SignalWatcher(LitElement) {
   /**
    * The table-core aggregation for this column inside a group-header cell. Either a built-in name string — `'sum'` | `'min'` | `'max'` | `'extent'` | `'mean'` | `'median'` | `'unique'` | `'uniqueCount'` | `'count'` — or a custom function `(columnId, leafRows, childRows) => any` (defensively wrapped by the parent so a throw cannot crash grouping). Null → no aggregation (the group-header cell renders as a placeholder).
    */
-  @property({ type: String }) aggregationFn: string | (((...args: any[]) => any) | null) = null;
+  @property({ type: String, attribute: 'aggregation-fn' }) aggregationFn: string | (((...args: any[]) => any) | null) = null;
   /**
    * Whether this column's cells are editable (opt-in). Default `false` → the column is read-only and the display↔editor branch never mounts an editor. Bind `:editable="true"` (a bare attr only coerces on Vue+Lit).
    */
@@ -64,7 +65,7 @@ export default class Column extends SignalWatcher(LitElement) {
   /**
    * Options for `editor: 'select'` — `[{ value, label }]`. Empty for other editor types.
    */
-  @property({ type: Array }) editorOptions: any[] = [];
+  @property({ type: Array, attribute: 'editor-options' }) editorOptions: any[] = [];
   /**
    * Synchronous per-column validator `(value, row) => true | string`. A string return is the error message (the editor stays open and the aria-live region announces it). Null → no validation. The parent wraps it defensively against a thrown/non-bool/non-string return.
    */

package/src/DataTable.ts

@@ -585,7 +585,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
   /**
    * Row-selection mode: `'none'` | `'single'` | `'multiple'`. `'multiple'` auto-injects a leading checkbox column with a select-all header.
    */
-  @property({ type: String, reflect: true }) selectionMode: string = 'none';
+  @property({ type: String, reflect: true, attribute: 'selection-mode' }) selectionMode: string = 'none';
   /**
    * `SortingState` — `[{ id, desc }]`. Uncontrolled fallback when unbound. Two-way: writes funnel a fresh value through the `sort-change` event regardless of binding.
    */
@@ -619,11 +619,11 @@ export default class DataTable extends SignalWatcher(LitElement) {
   /**
    * Total server-side row count for `manual` pagination; lets the table compute page count when it doesn't hold the full dataset.
    */
-  @property({ type: Number, reflect: true }) rowCount: number | null = null;
+  @property({ type: Number, reflect: true, attribute: 'row-count' }) rowCount: number | null = null;
   /**
    * Explicit total page count for `manual` pagination; overrides rowCount-derived count.
    */
-  @property({ type: Number, reflect: true }) pageCount: number | null = null;
+  @property({ type: Number, reflect: true, attribute: 'page-count' }) pageCount: number | null = null;
   /**
    * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Pass `expandable` as a real boolean — a valueless attribute only coerces to `true` on Vue and Lit.
    */
@@ -636,11 +636,11 @@ export default class DataTable extends SignalWatcher(LitElement) {
   /**
    * Row identity `(originalRow, index, parentRow?) => string | number` — the key `rowSelection`, `expanded` and the per-row caches use. Default null → table-core keys rows by position (`"0"`, `"1"`, … and `"0.1"` for sub-rows), so inserting or removing rows above a selected or expanded row moves that state onto whatever row now sits at its index. Supply it whenever rows can be added or removed while state is held (server push, live lists); the result is coerced to a string.
    */
-  @property({ type: Function }) getRowId: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'get-row-id' }) getRowId: ((...args: any[]) => any) | null = null;
   /**
    * Table-level child-row accessor `(originalRow, index) => TData[] | undefined` that drives nested sub-rows. When supplied (with `expandable`), table-core flattens the hierarchy and the expand seam reveals depth-indented child rows. Null → the `#detail` scoped slot is the expand mode.
    */
-  @property({ type: Function }) getSubRows: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'get-sub-rows' }) getSubRows: ((...args: any[]) => any) | null = null;
   /**
    * Opt-in gate for the **headless `#groupBar`** host region. Default `false` is byte-identical-off. `getGroupedRowModel` is wired unconditionally (inert when `grouping` is empty), so grouping is driven by the `grouping` model; this flag only gates the consumer-facing group-bar surface (the component ships **no** built-in drag UI).
    */
@@ -684,15 +684,15 @@ export default class DataTable extends SignalWatcher(LitElement) {
   /**
    * Pure-CSS sticky header: the `<thead>` sticks to the top of the scroll container.
    */
-  @property({ type: Boolean, reflect: true }) stickyHeader: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' }) stickyHeader: boolean = false;
   /**
    * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
    */
-  @property({ type: String, reflect: true }) interactionMode: string = 'table';
+  @property({ type: String, reflect: true, attribute: 'interaction-mode' }) interactionMode: string = 'table';
   /**
    * Grid mode only. When `true`, a plain click on an **editable** cell opens its editor immediately (single-click-to-edit) instead of just activating the cell. Default `false` keeps click-to-activate (double-click opens the editor). Shift+click (range selection) and clicks on non-editable cells are unaffected.
    */
-  @property({ type: Boolean, reflect: true }) singleClickEdit: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'single-click-edit' }) singleClickEdit: boolean = false;
   /**
    * Grid mode. When `true`, every committed data mutation (cell/row edit, paste, fill, cut, clear) becomes one undo step: Ctrl/Cmd+Z undoes, Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z redoes. Default `false` records no history and Ctrl+Z/Y are inert.
    */
@@ -700,7 +700,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
   /**
    * The maximum number of undo steps retained (oldest evicted past this depth). Only consulted when `undoable` is `true`.
    */
-  @property({ type: Number, reflect: true }) undoLimit: number = 100;
+  @property({ type: Number, reflect: true, attribute: 'undo-limit' }) undoLimit: number = 100;
   /**
    * Opt-in windowing grammar: `false` (default, off — byte-identical to a non-virtual table) | `true` or `'rows'` (vertical row windowing; `true` is byte-behavior-identical to every existing consumer, zero churn) | `'columns'` (horizontal column windowing) | `'both'` (both axes windowed). Row windowing renders only the visible slice of rows inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Column windowing renders only the visible slice of leaf columns inside the same `rdt-scroll` container. An unrecognised string behaves as `false`.
    */
@@ -708,15 +708,15 @@ export default class DataTable extends SignalWatcher(LitElement) {
   /**
    * Estimated row height (px) — the first-paint seed for the windowing engine before any row has been measured. Only consulted when rows are windowed. When `autoMeasure` is `true`, later renders progressively refine the estimate from measured content; when `autoMeasure` is `false` this remains the explicit override for every render.
    */
-  @property({ type: Number, reflect: true }) estimateRowHeight: number = 40;
+  @property({ type: Number, reflect: true, attribute: 'estimate-row-height' }) estimateRowHeight: number = 40;
   /**
    * Opt-in content-driven row-size estimation. When `true`, the windowing engine feeds `estimateSize()` a running mean of measured row heights instead of the fixed `estimateRowHeight` seed, so `getTotalSize()` converges to the true content total on a large table with variable-height rows. Falls back to `estimateRowHeight` before any row has been measured. Default `false` keeps the estimate fixed at `estimateRowHeight` for every render (today's behavior).
    */
-  @property({ type: Boolean, reflect: true }) autoMeasure: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'auto-measure' }) autoMeasure: boolean = false;
   /**
    * A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
    */
-  @property({ type: String, reflect: true }) maxHeight: string = '';
+  @property({ type: String, reflect: true, attribute: 'max-height' }) maxHeight: string = '';
   private _dataDefault = signal<any[]>([]);
   private _sortingDefault = signal<any[]>([]);
   private _globalFilterDefault = signal('');
@@ -1542,7 +1542,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     queueMicrotask(() => {
       if (this.isConnected || this._rozieTornDown) return;
       this._rozieTornDown = true;
-      () => {
+      (() => {
         // B-02: drop the document click-away listener (it is attached for the instance's lifetime,
         // not per edit session — attaching it per session would freeze a stale closure on React).
         if (this.docPointerDown && typeof document !== 'undefined') {
@@ -1565,7 +1565,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
         this.teardownFillDrag();
         // §6 (260709-3qt): remove any live drag-select document listeners on a mid-drag unmount.
         this.teardownRangeDrag();
-      };
+      })();
       for (const fn of this._disconnectCleanups) fn();
       this._disconnectCleanups = [];
     });

package/src/EditorCheckbox.ts

@@ -12,7 +12,7 @@ export default class EditorCheckbox extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#editor` slot scope).
    */
@@ -40,7 +40,7 @@ export default class EditorCheckbox extends SignalWatcher(LitElement) {
   /**
    * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
 private __rozieFirstUpdateDone = false;
 

package/src/EditorDate.ts

@@ -33,7 +33,7 @@ export default class EditorDate extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#editor` slot scope).
    */
@@ -61,7 +61,7 @@ export default class EditorDate extends SignalWatcher(LitElement) {
   /**
    * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   private _draft = signal('');
   private _touched = signal(false);
   @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;

package/src/EditorNumber.ts

@@ -12,7 +12,7 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#editor` slot scope).
    */
@@ -40,7 +40,7 @@ export default class EditorNumber extends SignalWatcher(LitElement) {
   /**
    * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   private _draft = signal('');
   private _touched = signal(false);
   @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;

package/src/EditorSelect.ts

@@ -13,7 +13,7 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#editor` slot scope). Used as the select `aria-label`.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#editor` slot scope).
    */
@@ -45,7 +45,7 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
   /**
    * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   private _draft = signal('');
   private _touched = signal(false);
   @query('[data-rozie-ref="selectEl"]') private _refSelectEl!: HTMLElement;

package/src/EditorText.ts

@@ -12,7 +12,7 @@ export default class EditorText extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label` fallback.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#editor` slot scope).
    */
@@ -40,7 +40,7 @@ export default class EditorText extends SignalWatcher(LitElement) {
   /**
    * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   private _draft = signal('');
   private _touched = signal(false);
   @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;

package/src/FilterNumberRange.ts

@@ -12,7 +12,7 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#filter` slot scope) — used as the filter key and the input `aria-label` base.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#filter` slot scope).
    */
@@ -24,15 +24,15 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
   /**
    * `(columnId, value) => void` — apply the column filter as a `[min, max]` tuple (each side coerced to a Number or `undefined`, so a one-sided range works); both empty clears the filter. Null-guarded at call sites.
    */
-  @property({ type: Function }) setFilter: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'set-filter' }) setFilter: ((...args: any[]) => any) | null = null;
   /**
    * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
    */
-  @property({ type: Object }) minMax: unknown = null;
+  @property({ type: Object, attribute: 'min-max' }) minMax: unknown = null;
   /**
    * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   private _minDraft = signal('');
   private _maxDraft = signal('');
   private _touched = signal(false);

package/src/FilterSelect.ts

@@ -13,7 +13,7 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#filter` slot scope) — used as the filter key and the select `aria-label`.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#filter` slot scope).
    */
@@ -25,15 +25,15 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
   /**
    * `(columnId, value) => void` — apply the column filter on change; the leading empty "All" option clears it. Null-guarded at call sites.
    */
-  @property({ type: Function }) setFilter: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'set-filter' }) setFilter: ((...args: any[]) => any) | null = null;
   /**
    * The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
    */
-  @property({ type: Array }) uniqueValues: any[] = [];
+  @property({ type: Array, attribute: 'unique-values' }) uniqueValues: any[] = [];
   /**
    * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually

package/src/FilterText.ts

@@ -12,7 +12,7 @@ export default class FilterText extends SignalWatcher(LitElement) {
   /**
    * The column id (mirrors the `#filter` slot scope) — used as the filter key and the input `aria-label`.
    */
-  @property({ type: String, reflect: true }) columnId: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-id' }) columnId: string = '';
   /**
    * The table-core column object (opaque passthrough from the `#filter` slot scope).
    */
@@ -24,11 +24,11 @@ export default class FilterText extends SignalWatcher(LitElement) {
   /**
    * `(columnId, value) => void` — apply the column filter (Enter / blur applies, Escape clears). Null-guarded at call sites.
    */
-  @property({ type: Function }) setFilter: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'set-filter' }) setFilter: ((...args: any[]) => any) | null = null;
   /**
    * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
    */
-  @property({ type: String, reflect: true }) columnLabel: string = '';
+  @property({ type: String, reflect: true, attribute: 'column-label' }) columnLabel: string = '';
   private _draft = signal('');
   private _touched = signal(false);
 private __rozieFirstUpdateDone = false;

package/src/GroupBar.ts

@@ -86,15 +86,15 @@ export default class GroupBar extends SignalWatcher(LitElement) {
   /**
    * The columns offered as grouping targets — `[{ id, label }]` — rendered as draggable chips.
    */
-  @property({ type: Array }) groupableColumns: any[] = [];
+  @property({ type: Array, attribute: 'groupable-columns' }) groupableColumns: any[] = [];
   /**
    * `(cols: string[]) => void` — the only add/reorder writer for the grouping order. Null-guarded at call sites.
    */
-  @property({ type: Function }) applyGrouping: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'apply-grouping' }) applyGrouping: ((...args: any[]) => any) | null = null;
   /**
    * `() => void` — the only clear writer; resets grouping to empty. Null-guarded at call sites.
    */
-  @property({ type: Function }) clearGrouping: ((...args: any[]) => any) | null = null;
+  @property({ type: Function, attribute: 'clear-grouping' }) clearGrouping: ((...args: any[]) => any) | null = null;
   private _draggingId = signal('');
   private _isOver = signal(false);
   private _dragKind = signal('');