reke-ui 0.1.1 → 0.2.0

package/dist/components/reke-select/reke-select.styles.js

@@ -0,0 +1,120 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-select/reke-select.styles.ts
+var n = [e, t`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: var(--reke-space-2xs, 6px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      color: var(--reke-color-text-label, #8A8A8A);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background: var(--reke-color-input-bg, var(--reke-color-surface, #1A1A1A));
+      box-shadow: var(--reke-shadow-input, none);
+      color: var(--reke-color-text, #E5E5E5);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
+      transition: border-color 0.15s ease;
+    }
+
+    .trigger--placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .trigger__chevron {
+      font-size: 8px;
+      margin-left: 8px;
+      flex-shrink: 0;
+    }
+
+    /* === Sizes === */
+
+    .trigger--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-sm, 12px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .trigger--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .trigger--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+
+    .trigger:focus-visible {
+      border-color: var(--reke-color-primary, #22C55E);
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: -1px;
+    }
+
+    .trigger--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .trigger--error:focus-visible {
+      border-color: var(--reke-color-danger, #EF4444);
+      outline-color: var(--reke-color-danger, #EF4444);
+    }
+
+    /* === Dropdown === */
+
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin: 0;
+      margin-top: 4px;
+      padding: 0;
+      list-style: none;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 100;
+    }
+
+    /* === Option === */
+
+    .option {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-md, 16px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+      color: var(--reke-color-text, #E5E5E5);
+      cursor: pointer;
+    }
+
+    .option:hover {
+      background-color: var(--reke-color-surface-elevated, #151515);
+    }
+
+    .option--selected {
+      color: var(--reke-color-primary, #22C55E);
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-table/reke-table.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { RekeElement } from '../../shared/base-element.js';
 export interface TableColumn {
     key: string;
@@ -8,13 +8,25 @@ export interface TableColumn {
     /** Set to false to disable sorting on this column. Default: true. */
     sortable?: boolean;
     /** Custom render function for cell content. Falls back to row[col.key] if omitted. */
-    render?: (value: unknown, row: TableRow, index: number) => TemplateResult | string;
+    render?: (value: unknown, row: TableRow, index: number) => TemplateResult | string | HTMLElement | Node;
 }
 export type TableRow = Record<string, unknown>;
-export type ExpandedRowRenderer = (row: TableRow, index: number) => TemplateResult;
+/** Stable identifier for a row. */
+export type RowKey = string | number;
+/** Cleanup callback returned by `expandedRowElement`. */
+export type Cleanup = () => void;
+/**
+ * Framework-agnostic expand callback.
+ * Receives the host element, the row data, and the resolved row key.
+ * Mount any framework's content into the host and return a cleanup function
+ * (called on collapse, row removal, or table disconnect), or `void`.
+ */
+export type ExpandedRowElement = (host: HTMLElement, row: TableRow, key: RowKey) => Cleanup | void;
+/** Resolve a row to a stable identifier. Defaults to `String(index)`. */
+export type GetRowKey = (row: TableRow, index: number) => RowKey;
 /**
  * @tag reke-table
- * @summary A data table with custom cell rendering, expandable rows, and toolbar/footer slots.
+ * @summary A data table with custom cell rendering, framework-agnostic expandable rows, and toolbar/footer slots.
  *
  * @slot toolbar - Toolbar area above the table (search, filters, title).
  * @slot footer - Footer area below the table (pagination, record count).
@@ -22,7 +34,7 @@ export type ExpandedRowRenderer = (row: TableRow, index: number) => TemplateResu
  *
  * @fires reke-row-click - Fired when a row is clicked. Detail: `{ row: TableRow, index: number }`.
  * @fires reke-sort - Fired when a sortable header is clicked. Detail: `{ key: string, direction: 'asc' | 'desc' }`.
- * @fires reke-row-expand - Fired when a row is expanded or collapsed. Detail: `{ row: TableRow, index: number, expanded: boolean }`.
+ * @fires reke-row-expand - Fired when a row is expanded or collapsed. Detail: `{ row: TableRow, index: number, key: RowKey, expanded: boolean }`.
  *
  * @csspart table - The native table element.
  * @csspart header - The thead element.
@@ -34,11 +46,21 @@ export type ExpandedRowRenderer = (row: TableRow, index: number) => TemplateResu
  * @csspart footer - The footer wrapper div.
  * @csspart expand-row - The tr for expanded content.
  * @csspart expand-content - The td spanning all columns in the expanded row.
+ * @csspart expand-toggle-cell - The leading `<td>` that contains the chevron button (only when `expandable`).
+ * @csspart expand-toggle-button - The chevron `<button>` itself (only when `expandable`).
  *
  * @cssprop [--reke-color-surface=#1A1A1A] - Table background.
  * @cssprop [--reke-color-border=#252525] - Border and row divider color.
  * @cssprop [--reke-color-text=#E5E5E5] - Cell text color.
  * @cssprop [--reke-color-text-muted=#525252] - Header text color.
+ * @cssprop [--reke-color-primary=#22C55E] - Chevron focus outline color.
+ * @cssprop [--reke-radius=4px] - Chevron button corner radius.
+ *
+ * Props:
+ * - `expandedRowElement`: Framework-agnostic expand render. Receives `(host, row, key)`. Mount any framework. Return cleanup or void.
+ * - `getRowKey`: Optional `(row, index) => RowKey`. Defaults to `String(index)`. Use a stable domain id for identity-keyed expand state across sorts.
+ * - `expandable`: Opt-in boolean (default `false`). When `true`, `reke-table` prepends a leading toggle column with an accessible chevron `<button>` per row: `aria-expanded` reflects the row's expand state, `aria-controls` points at the expand `<td>`, and `Enter`/`Space` activate the toggle. Consumers can also build their own toggles by leaving `expandable=false` (default) and calling `toggleExpand(key)` directly.
+ * - `expandOnRowClick` (attribute `expand-on-row-click`): Opt-in boolean (default `false`). When `true`, clicking anywhere on a row calls `toggleExpand(key)` internally. `reke-row-click` is STILL emitted on every row click. The chevron button calls `stopPropagation()` so chevron clicks do NOT double-toggle. Consumers MUST use EITHER this prop OR their own `reke-row-click` → `toggleExpand` handler, not both. For keyboard / screen-reader users, pair with `expandable`.
  */
 export declare class RekeTable extends RekeElement {
     static styles: import("lit").CSSResult[];
@@ -49,23 +71,132 @@ export declare class RekeTable extends RekeElement {
     hoverable: boolean;
     bordered: boolean;
     borderless: boolean;
+    /**
+     * Opt-in: when `true`, the table prepends a leading toggle column whose
+     * `<button>` calls `toggleExpand(key)`, exposes `aria-expanded` reflecting
+     * the expand state, `aria-controls` pointing at the expand `<td>` id
+     * (`reke-table-expand-<key>`), and accepts `Enter` / `Space` activation.
+     *
+     * Defaults to `false` so consumers that already wire their own toggles
+     * (chips, links, custom buttons) are unaffected.
+     */
+    expandable: boolean;
+    /**
+     * Opt-in: when `true`, clicking anywhere on a row (outside the chevron, if
+     * present) calls `toggleExpand(key)` internally using the row's identity
+     * key. The `reke-row-click` event is STILL emitted on every row click so
+     * consumers can react in addition to the built-in toggle.
+     *
+     * Default is `false` to preserve non-breaking behavior: existing consumers
+     * that wire their own `reke-row-click` → `toggleExpand` handlers are
+     * unaffected.
+     *
+     * A11y note: row clicks are a pointer convenience only. The `<tr>` does NOT
+     * receive `role="button"` or `tabindex` (that would be a clickable-row
+     * a11y anti-pattern). For keyboard / screen-reader users, pair this prop
+     * with `expandable` so the accessible chevron `<button>` is available.
+     *
+     * Double-wiring caveat: consumers MUST use EITHER `expandOnRowClick` OR
+     * their own `reke-row-click` → `toggleExpand` handler — not both — or the
+     * row will toggle twice and net to no change.
+     *
+     * Chevron interaction: the chevron `<button>` calls `stopPropagation()`, so
+     * clicking the chevron does NOT trigger the row-click toggle (no double
+     * toggle).
+     */
+    expandOnRowClick: boolean;
     sortKey: string;
     sortDirection: 'asc' | 'desc';
-    /** When set, rows become expandable with a chevron toggle. */
-    expandedRowRender: ExpandedRowRenderer | null;
-    /** Set of row indices currently expanded. */
-    expandedRows: Set<number>;
+    /**
+     * Framework-agnostic expand callback. Sole expand API.
+     *
+     * @example Vanilla DOM:
+     *   expandedRowElement = (host, row, key) => {
+     *     const node = document.createElement('div');
+     *     node.textContent = String(row.name);
+     *     host.appendChild(node);
+     *     return () => node.remove();
+     *   };
+     *
+     * @example React (via the bridge):
+     *   expandedRowElement = (host, row, key) => {
+     *     const root = createRoot(host);
+     *     root.render(<MyContent data={row} />);
+     *     return () => root.unmount();
+     *   };
+     */
+    expandedRowElement: ExpandedRowElement | null;
+    /**
+     * Resolve a stable identifier for each row.
+     * Defaults to `String(index)` — identity-equivalent only when rows are stable.
+     * Provide a domain id (e.g. `row => row.id`) to keep expand state across sorts.
+     */
+    getRowKey?: GetRowKey;
+    /** Set of row keys currently expanded. */
+    expandedRows: Set<RowKey>;
+    /** Host element cached per row key. Survives unrelated re-renders. */
+    private _hostCache;
+    /** Cleanup cached per row key. Invoked exactly once on collapse / row removal / disconnect. */
+    private _cleanupMap;
+    /** Keys we have already warned about as duplicates (one-shot per component lifetime). */
+    private _warnedDupKeys;
+    /** One-shot guard for the numeric-target-with-getRowKey ambiguity warning. */
+    private _warnedNumericTarget;
+    /** Track which keys are currently mounted in the DOM, to honor the contract that mount happens after `updated()` reconciles. */
+    private _mountedKeys;
+    /** Latest resolved row map: key → row. Filled during render so callbacks can look up rows. */
+    private _keyToRow;
+    /** Stable ref callback per row key. One closure per key, reused across renders. */
+    private _refCallbacks;
     private _hasToolbar;
     private _hasFooter;
+    private _resolveKey;
     private handleHeaderClick;
     private handleRowClick;
-    /** Toggle expand state for a row at the given index. */
-    toggleExpand(index: number): void;
-    /** Check whether a row at the given index is currently expanded. */
-    isRowExpanded(index: number): boolean;
+    /**
+     * Chevron button click handler. Stops propagation so it does NOT also fire
+     * the row-level `reke-row-click` event, then toggles the row by key.
+     */
+    private _handleChevronClick;
+    /**
+     * Chevron keyboard activation. The element is a native `<button>`, so Enter
+     * already fires `click` natively. We still handle it here to keep the
+     * keyboard contract explicit and testable across environments where the
+     * `KeyboardEvent` is dispatched programmatically (Vitest browser mode tests
+     * dispatch raw `keydown`s without the synthesized `click`).
+     *
+     * For Space we MUST call `preventDefault()` so the page does not scroll.
+     */
+    private _handleChevronKeydown;
+    /**
+     * Toggle expand state for a row.
+     * Accepts either a numeric `index` into `rows` or a `RowKey` (the value returned by `getRowKey`).
+     * When `getRowKey` is unset, indices and keys collapse onto `String(index)`.
+     */
+    toggleExpand(target: number | RowKey): void;
+    /** Check whether a row with the given key is currently expanded. */
+    isRowExpanded(key: RowKey): boolean;
     private _onToolbarSlotChange;
     private _onFooterSlotChange;
+    private _getOrCreateHost;
+    /**
+     * Return a STABLE ref callback for a given row key. Lit's `ref()` directive accepts a
+     * callback `(el: Element | undefined) => void` directly, so no cast is needed. The callback
+     * is memoized per key to avoid churning Lit's ref directive on every render.
+     */
+    private _expandTdRef;
     private _renderRow;
+    willUpdate(_changed: PropertyValues): void;
+    private _warnedLegacyApi;
+    updated(_changed: PropertyValues): void;
+    /**
+     * Invoke the cached cleanup for a key, swallowing consumer errors so our own state
+     * mutation (`expandedRows`, host/cleanup/ref maps) and `emit` stay consistent even if
+     * the consumer's cleanup throws. Deletes the cleanup entry after running.
+     */
+    private _safeCleanup;
+    private _runAllCleanupsAndClear;
+    disconnectedCallback(): void;
     render(): TemplateResult<1>;
 }
 declare global {

package/dist/components/reke-table/reke-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-table.d.ts","sourceRoot":"","sources":["../../../src/components/reke-table/reke-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,MAAM,CAAC;CACpF;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,WAAW,EAAE,CAAM;IAG5B,IAAI,EAAE,QAAQ,EAAE,CAAM;IAGtB,OAAO,UAAS;IAGhB,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAGnB,OAAO,SAAM;IAGb,aAAa,EAAE,KAAK,GAAG,MAAM,CAAS;IAEtC,8DAA8D;IAE9D,iBAAiB,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAErD,6CAA6C;IAE7C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAa;IAE7B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,cAAc;IAItB,wDAAwD;IACxD,YAAY,CAAC,KAAK,EAAE,MAAM;IAa1B,oEAAoE;IACpE,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIrC,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,UAAU;IAiCT,MAAM;CAoEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"reke-table.d.ts","sourceRoot":"","sources":["../../../src/components/reke-table/reke-table.ts"],"names":[],"mappings":"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"}

package/dist/components/reke-table/reke-table.js

@@ -0,0 +1,291 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { n } from "../../node_modules/lit-html/directives/ref.js";
+import "../../node_modules/lit/directives/ref.js";
+import { styles as r } from "./reke-table.styles.js";
+import { html as i, nothing as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+//#region src/components/reke-table/reke-table.ts
+function u() {
+	try {
+		let e = {
+			BASE_URL: "/",
+			DEV: !1,
+			MODE: "production",
+			PROD: !0,
+			SSR: !1
+		};
+		if (e && typeof e.DEV == "boolean") return e.DEV;
+		if (e && typeof e.MODE == "string") return e.MODE !== "production";
+	} catch {}
+	try {
+		let e = globalThis.process;
+		if (e?.env?.NODE_ENV) return e.env.NODE_ENV === "development";
+	} catch {}
+	return !1;
+}
+var d = class extends e {
+	constructor(...e) {
+		super(...e), this.columns = [], this.rows = [], this.striped = !1, this.dense = !1, this.hoverable = !1, this.bordered = !1, this.borderless = !1, this.expandable = !1, this.expandOnRowClick = !1, this.sortKey = "", this.sortDirection = "asc", this.expandedRowElement = null, this.expandedRows = /* @__PURE__ */ new Set(), this._hostCache = /* @__PURE__ */ new Map(), this._cleanupMap = /* @__PURE__ */ new Map(), this._warnedDupKeys = /* @__PURE__ */ new Set(), this._warnedNumericTarget = !1, this._mountedKeys = /* @__PURE__ */ new Set(), this._keyToRow = /* @__PURE__ */ new Map(), this._refCallbacks = /* @__PURE__ */ new Map(), this._hasToolbar = !1, this._hasFooter = !1, this._warnedLegacyApi = !1;
+	}
+	static {
+		this.styles = r;
+	}
+	_resolveKey(e, t) {
+		return this.getRowKey ? this.getRowKey(e, t) : String(t);
+	}
+	handleHeaderClick(e) {
+		e.sortable !== !1 && (this.sortKey === e.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = e.key, this.sortDirection = "asc"), this.emit("reke-sort", {
+			key: this.sortKey,
+			direction: this.sortDirection
+		}));
+	}
+	handleRowClick(e, t) {
+		if (this.emit("reke-row-click", {
+			row: e,
+			index: t
+		}), this.expandOnRowClick) {
+			let n = this._resolveKey(e, t);
+			this.toggleExpand(n);
+		}
+	}
+	_handleChevronClick(e, t) {
+		e.stopPropagation(), this.toggleExpand(t);
+	}
+	_handleChevronKeydown(e, t) {
+		(e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), e.stopPropagation(), this.toggleExpand(t));
+	}
+	toggleExpand(e) {
+		let t, n, r, i = typeof e == "number" && e === Math.trunc(e) && e >= 0 && e < this.rows.length;
+		i && this.getRowKey && !this._warnedNumericTarget && u() && (this._warnedNumericTarget = !0, console.warn("[reke-table] toggleExpand received a numeric target while `getRowKey` is set; in-range numeric targets are interpreted as row INDICES, not keys. Pass the resolved key to target by identity.")), i ? (n = e, r = this.rows[n], t = this._resolveKey(r, n)) : (t = e, n = this.rows.findIndex((e, n) => this._resolveKey(e, n) === t), r = n >= 0 ? this.rows[n] : void 0);
+		let a = new Set(this.expandedRows), o = !a.has(t);
+		o ? a.add(t) : (a.delete(t), this._safeCleanup(t), this._hostCache.delete(t), this._mountedKeys.delete(t), this._refCallbacks.delete(t)), this.expandedRows = a, this.emit("reke-row-expand", {
+			row: r,
+			index: n,
+			key: t,
+			expanded: o
+		});
+	}
+	isRowExpanded(e) {
+		return this.expandedRows.has(e);
+	}
+	_onToolbarSlotChange(e) {
+		let t = e.target;
+		this._hasToolbar = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_onFooterSlotChange(e) {
+		let t = e.target;
+		this._hasFooter = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_getOrCreateHost(e) {
+		let t = this._hostCache.get(e);
+		return t || (t = document.createElement("div"), t.style.cssText = "display: contents;", this._hostCache.set(e, t)), t;
+	}
+	_expandTdRef(e) {
+		let t = this._refCallbacks.get(e);
+		return t || (t = (t) => {
+			if (!t) return;
+			let n = t, r = this._getOrCreateHost(e);
+			r.parentElement !== n && n.appendChild(r);
+		}, this._refCallbacks.set(e, t)), t;
+	}
+	_renderRow(e, t, r) {
+		let o = this.expandedRows.has(r), s = `reke-table-expand-${String(r)}`, c = this.columns.length + +!!this.expandable;
+		return i`
+      <tr
+        part="row"
+        class="row ${t % 2 == 1 ? "row--even" : ""} ${o ? "row--expanded" : ""}"
+        @click=${() => this.handleRowClick(e, t)}
+      >
+        ${this.expandable ? i`
+              <td
+                part="expand-toggle-cell"
+                class="expand-toggle-cell"
+              >
+                <button
+                  type="button"
+                  part="expand-toggle-button"
+                  class="expand-toggle-button ${o ? "expand-toggle-button--expanded" : ""}"
+                  aria-expanded=${o ? "true" : "false"}
+                  aria-controls=${s}
+                  aria-label=${o ? "Collapse row" : "Expand row"}
+                  @click=${(e) => this._handleChevronClick(e, r)}
+                  @keydown=${(e) => this._handleChevronKeydown(e, r)}
+                >
+                  <span class="expand-toggle-chevron" aria-hidden="true">▶</span>
+                </button>
+              </td>
+            ` : a}
+        ${this.columns.map((n) => i`
+            <td
+              part="cell"
+              class="cell"
+              data-align=${n.align || "left"}
+            >
+              ${n.render ? n.render(e[n.key], e, t) : e[n.key] ?? ""}
+            </td>
+          `)}
+      </tr>
+      ${this.expandedRowElement && o && this._keyToRow.get(r) === e ? i`
+            <tr part="expand-row" class="expand-row">
+              <td
+                part="expand-content"
+                class="expand-content"
+                id=${s}
+                colspan=${c}
+                ${n(this._expandTdRef(r))}
+              ></td>
+            </tr>
+          ` : a}
+    `;
+	}
+	willUpdate(e) {
+		let t = u();
+		t && this.expandedRowRender != null && !this._warnedLegacyApi && (this._warnedLegacyApi = !0, console.error("[reke-table] `expandedRowRender` was removed. Use `expandedRowElement(host, row, key) => Cleanup | void` instead."));
+		let n = /* @__PURE__ */ new Map();
+		for (let e = 0; e < this.rows.length; e += 1) {
+			let r = this.rows[e], i = this._resolveKey(r, e);
+			n.has(i) && t && !this._warnedDupKeys.has(i) && (this._warnedDupKeys.add(i), console.warn(`[reke-table] Duplicate getRowKey value detected: ${JSON.stringify(i)}. Last row with this key wins for expand bookkeeping.`)), n.set(i, r);
+		}
+		this._keyToRow = n;
+	}
+	updated(e) {
+		if (!this.expandedRowElement) {
+			this._runAllCleanupsAndClear();
+			for (let e of Array.from(this.expandedRows)) this._keyToRow.has(e) || this.expandedRows.delete(e);
+			return;
+		}
+		let t = /* @__PURE__ */ new Set([...this.expandedRows, ...this._hostCache.keys()]);
+		for (let e of t) {
+			let t = this._keyToRow.has(e), n = this.expandedRows.has(e);
+			t && n || (this._safeCleanup(e), this._hostCache.delete(e), this._mountedKeys.delete(e), this._refCallbacks.delete(e), t || this.expandedRows.delete(e));
+		}
+		for (let e of this.expandedRows) {
+			if (this._mountedKeys.has(e)) continue;
+			let t = this._keyToRow.get(e);
+			if (!t) continue;
+			let n = this._getOrCreateHost(e), r = this.expandedRowElement(n, t, e);
+			typeof r == "function" && this._cleanupMap.set(e, r), this._mountedKeys.add(e);
+		}
+	}
+	_safeCleanup(e) {
+		let t = this._cleanupMap.get(e);
+		if (t) {
+			try {
+				t();
+			} catch {}
+			this._cleanupMap.delete(e);
+		}
+	}
+	_runAllCleanupsAndClear() {
+		for (let e of this._cleanupMap.values()) try {
+			e();
+		} catch {}
+		this._cleanupMap.clear(), this._hostCache.clear(), this._mountedKeys.clear(), this._refCallbacks.clear();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._runAllCleanupsAndClear();
+	}
+	render() {
+		let e = {
+			table: !0,
+			"table--striped": this.striped,
+			"table--dense": this.dense,
+			"table--hoverable": this.hoverable,
+			"table--bordered": this.bordered
+		};
+		return i`
+      <div class="table-container">
+        ${this._hasToolbar ? i`
+              <div part="toolbar" class="table-toolbar">
+                <slot name="toolbar" @slotchange=${this._onToolbarSlotChange}></slot>
+              </div>
+            ` : i`<slot name="toolbar" @slotchange=${this._onToolbarSlotChange} style="display:none"></slot>`}
+
+        <div class="table-wrapper">
+          <table part="table" class=${l(e)} role="table">
+            <thead part="header">
+              <tr>
+                ${this.expandable ? i`
+                      <th
+                        part="expand-toggle-header-cell"
+                        class="expand-toggle-header-cell"
+                        aria-hidden="true"
+                      ></th>
+                    ` : a}
+                ${this.columns.map((e) => i`
+                    <th
+                      part="header-cell"
+                      class="header-cell ${this.sortKey === e.key ? "header-cell--sorted" : ""} ${e.sortable === !1 ? "header-cell--no-sort" : ""}"
+                      style=${e.width ? `width: ${e.width}` : ""}
+                      data-align=${e.align || "left"}
+                      @click=${() => this.handleHeaderClick(e)}
+                    >
+                      <span class="header-content">
+                        ${e.header}
+                        ${this.sortKey === e.key ? i`<span class="sort-indicator" aria-hidden="true">${this.sortDirection === "asc" ? "↑" : "↓"}</span>` : a}
+                      </span>
+                    </th>
+                  `)}
+              </tr>
+            </thead>
+            <tbody part="body">
+              ${this.rows.map((e, t) => {
+			let n = this._resolveKey(e, t);
+			return this._renderRow(e, t, n);
+		})}
+              ${this.rows.length === 0 ? i`
+                    <tr class="row row--empty">
+                      <td
+                        class="cell cell--empty"
+                        colspan=${this.columns.length + +!!this.expandable}
+                      >
+                        <slot name="empty">No data</slot>
+                      </td>
+                    </tr>
+                  ` : a}
+            </tbody>
+          </table>
+        </div>
+
+        ${this._hasFooter ? i`
+              <div part="footer" class="table-footer">
+                <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+              </div>
+            ` : i`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+      </div>
+    `;
+	}
+};
+t([s({ attribute: !1 })], d.prototype, "columns", void 0), t([s({ attribute: !1 })], d.prototype, "rows", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "striped", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "dense", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "hoverable", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "bordered", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "borderless", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "expandable", void 0), t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "expand-on-row-click"
+})], d.prototype, "expandOnRowClick", void 0), t([s({
+	reflect: !0,
+	attribute: "sort-key"
+})], d.prototype, "sortKey", void 0), t([s({
+	reflect: !0,
+	attribute: "sort-direction"
+})], d.prototype, "sortDirection", void 0), t([s({ attribute: !1 })], d.prototype, "expandedRowElement", void 0), t([s({ attribute: !1 })], d.prototype, "getRowKey", void 0), t([s({ attribute: !1 })], d.prototype, "expandedRows", void 0), t([c()], d.prototype, "_hasToolbar", void 0), t([c()], d.prototype, "_hasFooter", void 0), d = t([o("reke-table")], d);
+//#endregion
+export { d as RekeTable };

package/dist/components/reke-table/reke-table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-table/reke-table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAyMlB,CAAC"}
+{"version":3,"file":"reke-table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-table/reke-table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAsQlB,CAAC"}