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

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('');

package/src/index.ts

@@ -11,3 +11,5 @@ export { default as FilterNumberRange } from './FilterNumberRange';
 export { default as FilterSelect } from './FilterSelect';
 export { default as GroupBar } from './GroupBar';
 export { default as DetailPanel } from './DetailPanel';
+export type { RozieDataTableEventMap } from './DataTable';
+export type * from './DataTable';