argus-table 0.0.0-stage → 0.0.1

package/dist/events.js

@@ -0,0 +1,22 @@
+// src/events.ts
+/** Fired after an update when the visible row range changed. */
+var RANGE_CHANGE = "argus-range-change";
+/** Fired after the sort order changed (uncontrolled), or with the proposed order (controlled). */
+var SORT_CHANGE = "argus-sort-change";
+/** Fired when a column was resized (uncontrolled), or with the proposed widths (controlled). */
+var COLUMN_RESIZE = "argus-column-resize";
+/** Fired when a body row was clicked, after `argus-cell-click`. */
+var ROW_CLICK = "argus-row-click";
+/** Fired when a body cell was clicked, before `argus-row-click`. */
+var CELL_CLICK = "argus-cell-click";
+/** Dispatches a bubbling, composed `CustomEvent`, the shape of every public event. */
+function fire(host, name, detail) {
+	return host.dispatchEvent(new CustomEvent(name, {
+		detail,
+		bubbles: true,
+		composed: true
+	}));
+}
+export { CELL_CLICK, COLUMN_RESIZE, RANGE_CHANGE, ROW_CLICK, SORT_CHANGE, fire };
+
+//# sourceMappingURL=events.js.map

package/dist/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","names":[],"sources":["../src/events.ts"],"sourcesContent":["import type {\n  CellClickDetail,\n  ColumnResizeDetail,\n  RangeChangeDetail,\n  RowClickDetail,\n  SortChangeDetail,\n} from '@argus-table/core';\n\n/** Fired after an update when the visible row range changed. */\nexport const RANGE_CHANGE = 'argus-range-change';\n\n/** Fired after the sort order changed (uncontrolled), or with the proposed order (controlled). */\nexport const SORT_CHANGE = 'argus-sort-change';\n\n/** Fired when a column was resized (uncontrolled), or with the proposed widths (controlled). */\nexport const COLUMN_RESIZE = 'argus-column-resize';\n\n/** Fired when a body row was clicked, after `argus-cell-click`. */\nexport const ROW_CLICK = 'argus-row-click';\n\n/** Fired when a body cell was clicked, before `argus-row-click`. */\nexport const CELL_CLICK = 'argus-cell-click';\n\ndeclare global {\n  interface HTMLElementEventMap {\n    'argus-range-change': CustomEvent<RangeChangeDetail>;\n    'argus-sort-change': CustomEvent<SortChangeDetail>;\n    'argus-column-resize': CustomEvent<ColumnResizeDetail>;\n    'argus-row-click': CustomEvent<RowClickDetail<unknown>>;\n    'argus-cell-click': CustomEvent<CellClickDetail<unknown>>;\n  }\n}\n\n/** Dispatches a bubbling, composed `CustomEvent`, the shape of every public event. */\nexport function fire(host: HTMLElement, name: string, detail: unknown): boolean {\n  return host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));\n}\n"],"mappings":";;AASA,IAAa,eAAe;;AAG5B,IAAa,cAAc;;AAG3B,IAAa,gBAAgB;;AAG7B,IAAa,YAAY;;AAGzB,IAAa,aAAa;;AAa1B,SAAgB,KAAK,MAAmB,MAAc,QAA0B;CAC9E,OAAO,KAAK,cAAc,IAAI,YAAY,MAAM;EAAE;EAAQ,SAAS;EAAM,UAAU;CAAK,CAAC,CAAC;AAC5F"}

package/dist/index.d.ts

@@ -0,0 +1,236 @@
+import { TemplateResult, LitElement, CSSResultGroup, PropertyValues } from 'lit';
+
+/**
+ * Public types shared by `@argus-table/core` and `argus-table`. `argus-table`
+ * re-exports them with `TContent` fixed to its own `CellContent`.
+ *
+ * No TanStack type appears here: TanStack stays an implementation detail.
+ */
+/** Logical side of a pinned column: `'start'` is the left in LTR and the right in RTL. */
+type ColumnPin = 'start' | 'end';
+/** Text alignment inside a cell, in logical terms. */
+type ColumnAlign = 'start' | 'center' | 'end';
+/**
+ * Column width: a fixed pixel width, or a share of the free space (`{ flex: 1 }`).
+ * `'auto'` (fit to content) arrives in Phase 2.
+ */
+type ColumnWidth = number | {
+    flex: number;
+};
+/** What a `cell` function receives besides the row itself. */
+interface CellContext<TData> {
+    /** The row object from `data`. */
+    row: TData;
+    /** The id from `getRowId`, or the row's index as a string. */
+    rowId: string;
+    /** Index of the row in the current (sorted) row model. */
+    index: number;
+    /** The column's id. */
+    columnId: string;
+    /** The value read by the column's `accessor`, or `undefined` without one. */
+    value: unknown;
+}
+/**
+ * One column of the table.
+ *
+ * @typeParam TData - the row type.
+ * @typeParam TContent - what `header` and `cell` may return. `argus-table`
+ *   fixes it to `CellContent` (a Lit template, a DOM node, a string or a number).
+ */
+interface ColumnDef$1<TData, TContent = unknown> {
+    /** Stable key, used in state objects, events and persistence. Must be unique. */
+    id: string;
+    /** Header content, or a function that returns it. */
+    header?: TContent | (() => TContent);
+    /**
+     * How to read the cell value: a property path such as `'customer.name'`, or a
+     * function of the row. Without an accessor the value is `undefined`; the column
+     * then needs a `cell` function to show anything.
+     */
+    accessor?: string | ((row: TData, index: number) => unknown);
+    /** Custom cell content. Without it, the cell shows the accessor's value as text. */
+    cell?: (row: TData, context: CellContext<TData>) => TContent;
+    /**
+     * Fixed width in px, or `{ flex }` for a share of the free space (at least `minWidth`).
+     * Pinned columns ignore `flex`. Default: 150 px.
+     */
+    width?: ColumnWidth;
+    /** Lower bound for resizing and for flex columns, in px. Default: 40. */
+    minWidth?: number;
+    /** Upper bound for resizing, in px. Default: no limit. */
+    maxWidth?: number;
+    /** Pins the column to the start or end side. */
+    pin?: ColumnPin;
+    /** Whether the header can be clicked to sort. Default: `false`. */
+    sortable?: boolean;
+    /** Whether the column can be resized. Default: `true`. */
+    resizable?: boolean;
+    /** Text alignment. Default: `'start'`. */
+    align?: ColumnAlign;
+}
+/** One sorted column. */
+interface SortItem {
+    /** The column's id. */
+    id: string;
+    /** `true` for descending order. */
+    desc: boolean;
+}
+/** The sort order: an empty array when unsorted. v0.1 sorts by one column at a time. */
+type SortState = SortItem[];
+/** Column widths in px set by resizing, keyed by column id. */
+type ColumnSizingState = Record<string, number>;
+/** `detail` of `argus-sort-change`. */
+interface SortChangeDetail {
+    sorting: SortState;
+}
+/** `detail` of `argus-column-resize`. */
+interface ColumnResizeDetail {
+    columnId: string;
+    width: number;
+    sizing: ColumnSizingState;
+}
+/** `detail` of `argus-row-click`. */
+interface RowClickDetail<TData> {
+    row: TData;
+    rowId: string;
+    index: number;
+}
+/** `detail` of `argus-cell-click`. */
+interface CellClickDetail<TData> {
+    row: TData;
+    columnId: string;
+    value: unknown;
+}
+/** `detail` of `argus-range-change`: the first and last rendered row index (inclusive). */
+interface RangeChangeDetail {
+    start: number;
+    end: number;
+}
+
+/**
+ * What a column's `header` or `cell` may produce: a Lit template, a DOM node, or
+ * text. The content is rendered into the table's light DOM and slotted into the
+ * cell, so page CSS and the page's own components work inside it.
+ */
+type CellContent = TemplateResult | Node | string | number;
+/** One column of `<argus-table>`: what it shows, how wide it is, and how it behaves. */
+type ColumnDef<T = unknown> = ColumnDef$1<T, CellContent>;
+/** Row density. Each one sets defaults for `--argus-row-height` and `--argus-cell-padding-inline`. */
+type Density = 'compact' | 'comfortable' | 'spacious';
+
+/**
+ * A virtualized data table.
+ *
+ * Set `columns` and `data` as properties. Header and cell content is rendered
+ * into the element's light DOM and slotted into the cells, so page CSS and the
+ * page's own components work inside cells.
+ *
+ * @summary Data table with pinned rows and columns and infinite loading.
+ *
+ * @fires argus-sort-change - A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled.
+ * @fires argus-column-resize - A column was resized by dragging its handle or with Alt+Arrow on its header. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag.
+ * @fires argus-cell-click - A body cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value }`. Fires before `argus-row-click`.
+ * @fires argus-row-click - A body row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index }`.
+ * @fires argus-range-change - The visible rows changed. `detail: { start, end }` (row indices, inclusive).
+ *
+ * @slot empty - Shown instead of the body when there are no rows. Default: "No rows".
+ *
+ * @csspart table - The scroll container that holds header and body.
+ * @csspart header - The sticky header row group.
+ * @csspart header-row - The header row.
+ * @csspart header-cell - Every header cell.
+ * @csspart header-cell-sorted - The header of the sorted column. The direction is in `aria-sort`.
+ * @csspart resize-handle - The drag handle on the inline-end edge of a resizable column's header.
+ * @csspart body - The row group holding the rendered body rows.
+ * @csspart row - Every body row.
+ * @csspart row-even - Body rows with an even index (0-based).
+ * @csspart row-odd - Body rows with an odd index.
+ * @csspart cell - Every body cell.
+ * @csspart cell-sorted - Body cells in the sorted column.
+ * @csspart cell-pinned - Body cells in a pinned column, on either side.
+ * @csspart cell-pinned-edge - The pinned body cell next to the scrolling columns (one per pinned side).
+ * @csspart empty - The empty-state container.
+ *
+ * @cssprop [--argus-bg=Canvas] - Background of the table and rows.
+ * @cssprop [--argus-fg=CanvasText] - Text colour.
+ * @cssprop [--argus-font=inherit] - Font shorthand for the table.
+ * @cssprop [--argus-header-bg] - Header background.
+ * @cssprop [--argus-header-fg=inherit] - Header text colour.
+ * @cssprop [--argus-border-color] - Colour of the row borders.
+ * @cssprop [--argus-border-width=1px] - Width of the row borders.
+ * @cssprop [--argus-row-height] - Height of a row. Default per density: 32px, 40px, 52px.
+ * @cssprop [--argus-cell-padding-inline] - Inline padding of cells. Default per density: 8px, 12px, 16px.
+ * @cssprop [--argus-row-stripe-bg] - Background of odd rows. Default: no stripes.
+ * @cssprop [--argus-pinned-shadow] - Shadow on the pinned edge, as a `box-shadow` falling toward the end side (`4px 0 6px -4px …`). Mirrored for the end edge and in RTL; `none` removes it.
+ * @cssprop [--argus-resize-handle-color] - Colour of the resize handle's line, shown on hover, focus and drag.
+ * @cssprop [--argus-focus-ring=2px solid Highlight] - Outline of the focused header or cell.
+ * @cssprop [--argus-row-hover-bg] - Background of the hovered row. Default: no change.
+ * @cssprop [--argus-row-selected-bg] - Reserved for row selection, which comes after v0.1. The table doesn't read it yet.
+ */
+declare class ArgusTable<T = unknown> extends LitElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** Column definitions. Property only: functions can't be attributes. */
+    columns: readonly ColumnDef<T>[];
+    /** The rows to show. Replace the array to update; changes inside it aren't detected. */
+    data: readonly T[];
+    /** Returns a stable id for a row. Default: the row's index in `data`. */
+    getRowId?: (row: T, index: number) => string;
+    /** Row height in px. Unset: the density (or the `--argus-row-height` token) decides. */
+    rowHeight?: number;
+    /** Row density: `compact`, `comfortable` or `spacious`. */
+    density: Density;
+    /** Rows rendered above and below the visible ones. */
+    overscan: number;
+    /**
+     * The sort order, e.g. `[{ id: 'total', desc: true }]`; `[]` when unsorted. Unset,
+     * the table keeps it itself and header clicks change it. Once set, it is
+     * controlled: a click only fires `argus-sort-change` with the proposed order,
+     * and nothing changes until you set the property. Set `undefined` to hand it back.
+     */
+    get sorting(): SortState;
+    set sorting(value: SortState | undefined);
+    /**
+     * Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column
+     * becomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only
+     * fires `argus-column-resize` with the proposed widths. `undefined` hands it back.
+     */
+    get columnSizing(): ColumnSizingState;
+    set columnSizing(value: ColumnSizingState | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Scrolls so that the row at `index` (in the current row order) is at the top. */
+    scrollToRow(index: number): Promise<void>;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'argus-table': ArgusTable;
+    }
+}
+
+/** Fired after an update when the visible row range changed. */
+declare const RANGE_CHANGE = "argus-range-change";
+/** Fired after the sort order changed (uncontrolled), or with the proposed order (controlled). */
+declare const SORT_CHANGE = "argus-sort-change";
+/** Fired when a column was resized (uncontrolled), or with the proposed widths (controlled). */
+declare const COLUMN_RESIZE = "argus-column-resize";
+/** Fired when a body row was clicked, after `argus-cell-click`. */
+declare const ROW_CLICK = "argus-row-click";
+/** Fired when a body cell was clicked, before `argus-row-click`. */
+declare const CELL_CLICK = "argus-cell-click";
+declare global {
+    interface HTMLElementEventMap {
+        'argus-range-change': CustomEvent<RangeChangeDetail>;
+        'argus-sort-change': CustomEvent<SortChangeDetail>;
+        'argus-column-resize': CustomEvent<ColumnResizeDetail>;
+        'argus-row-click': CustomEvent<RowClickDetail<unknown>>;
+        'argus-cell-click': CustomEvent<CellClickDetail<unknown>>;
+    }
+}
+
+export { ArgusTable, CELL_CLICK, COLUMN_RESIZE, RANGE_CHANGE, ROW_CLICK, SORT_CHANGE };
+export type { CellClickDetail, CellContent, CellContext, ColumnAlign, ColumnDef, ColumnPin, ColumnResizeDetail, ColumnSizingState, ColumnWidth, Density, RangeChangeDetail, RowClickDetail, SortChangeDetail, SortItem, SortState };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { ArgusTable } from "./argus-table.js";
+import { CELL_CLICK, COLUMN_RESIZE, RANGE_CHANGE, ROW_CLICK, SORT_CHANGE } from "./events.js";
+export { ArgusTable, CELL_CLICK, COLUMN_RESIZE, RANGE_CHANGE, ROW_CLICK, SORT_CHANGE };

package/dist/render/body.js

@@ -0,0 +1,49 @@
+import { cellParts, cellSlot, pinStyle } from "./content.js";
+import { html, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { repeat } from "lit/directives/repeat.js";
+// src/render/body.ts
+/**
+* The virtualized body. Rows are keyed by pool slot, so a row entering the window
+* reuses the DOM of one that left (ADR 0001), and they stay in pool order: screen
+* readers get the position from `aria-rowindex` (the header row is 1).
+*/
+function renderBody(rows, columns, totalSize, active) {
+	return html`<div
+    part="body"
+    role="rowgroup"
+    style=${styleMap({ blockSize: `${String(totalSize)}px` })}
+  >
+    ${repeat(rows, (r) => r.slot, (r) => renderRow(r, columns, r.index === active?.index ? active.col : void 0))}
+  </div>`;
+}
+/**
+* One body row. Every cell is focusable (`tabindex=-1`) so clicks focus it; the
+* active one is the grid's single tab stop (roving tabindex).
+*/
+function renderRow(row, columns, activeCol) {
+	return html`<div
+    part=${row.index % 2 === 0 ? "row row-even" : "row row-odd"}
+    class="row"
+    role="row"
+    aria-rowindex=${row.index + 2}
+    style=${styleMap({ transform: `translateY(${String(row.start)}px)` })}
+  >
+    ${repeat(columns, (c) => c.id, (c) => html`<div
+          part=${cellParts(c)}
+          role="gridcell"
+          aria-colindex=${c.colIndex}
+          tabindex=${c.id === activeCol ? 0 : -1}
+          data-col=${c.id}
+          data-align=${c.align}
+          data-pin=${c.pin ?? nothing}
+          ?data-pin-edge=${c.pinEdge}
+          style=${pinStyle(c) ?? nothing}
+        >
+          <slot name=${cellSlot(row.slot, c.colIndex)}></slot>
+        </div>`)}
+  </div>`;
+}
+export { renderBody };
+
+//# sourceMappingURL=body.js.map

package/dist/render/body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"body.js","names":[],"sources":["../../src/render/body.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { ColumnView } from '@argus-table/core';\nimport type { WindowRow } from '../controllers/virtual-controller.js';\nimport type { CellContent } from '../types.js';\nimport { cellParts, cellSlot, pinStyle } from './content.js';\n\ntype Columns<T> = readonly ColumnView<T, CellContent>[];\n\n/** The cell holding the grid's tab stop: a row index and a column id. */\nexport interface ActiveCell {\n  index: number;\n  col: string;\n}\n\n/**\n * The virtualized body. Rows are keyed by pool slot, so a row entering the window\n * reuses the DOM of one that left (ADR 0001), and they stay in pool order: screen\n * readers get the position from `aria-rowindex` (the header row is 1).\n */\nexport function renderBody<T>(\n  rows: readonly WindowRow[],\n  columns: Columns<T>,\n  totalSize: number,\n  active: ActiveCell | undefined,\n) {\n  return html`<div\n    part=\"body\"\n    role=\"rowgroup\"\n    style=${styleMap({ blockSize: `${String(totalSize)}px` })}\n  >\n    ${repeat(\n      rows,\n      (r) => r.slot,\n      (r) => renderRow(r, columns, r.index === active?.index ? active.col : undefined),\n    )}\n  </div>`;\n}\n\n/**\n * One body row. Every cell is focusable (`tabindex=-1`) so clicks focus it; the\n * active one is the grid's single tab stop (roving tabindex).\n */\nfunction renderRow<T>(row: WindowRow, columns: Columns<T>, activeCol: string | undefined) {\n  return html`<div\n    part=${row.index % 2 === 0 ? 'row row-even' : 'row row-odd'}\n    class=\"row\"\n    role=\"row\"\n    aria-rowindex=${row.index + 2}\n    style=${styleMap({ transform: `translateY(${String(row.start)}px)` })}\n  >\n    ${repeat(\n      columns,\n      (c) => c.id,\n      (c) =>\n        html`<div\n          part=${cellParts(c)}\n          role=\"gridcell\"\n          aria-colindex=${c.colIndex}\n          tabindex=${c.id === activeCol ? 0 : -1}\n          data-col=${c.id}\n          data-align=${c.align}\n          data-pin=${c.pin ?? nothing}\n          ?data-pin-edge=${c.pinEdge}\n          style=${pinStyle(c) ?? nothing}\n        >\n          <slot name=${cellSlot(row.slot, c.colIndex)}></slot>\n        </div>`,\n    )}\n  </div>`;\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,WACd,MACA,SACA,WACA,QACA;CACA,OAAO,IAAI;;;YAGD,SAAS,EAAE,WAAW,GAAG,OAAO,SAAS,EAAE,IAAI,CAAC,EAAE;;MAExD,OACA,OACC,MAAM,EAAE,OACR,MAAM,UAAU,GAAG,SAAS,EAAE,UAAU,QAAQ,QAAQ,OAAO,MAAM,KAAA,CAAS,CACjF,EAAE;;AAEN;;;;;AAMA,SAAS,UAAa,KAAgB,SAAqB,WAA+B;CACxF,OAAO,IAAI;WACF,IAAI,QAAQ,MAAM,IAAI,iBAAiB,cAAc;;;oBAG5C,IAAI,QAAQ,EAAE;YACtB,SAAS,EAAE,WAAW,cAAc,OAAO,IAAI,KAAK,EAAE,KAAK,CAAC,EAAE;;MAEpE,OACA,UACC,MAAM,EAAE,KACR,MACC,IAAI;iBACK,UAAU,CAAC,EAAE;;0BAEJ,EAAE,SAAS;qBAChB,EAAE,OAAO,YAAY,IAAI,GAAG;qBAC5B,EAAE,GAAG;uBACH,EAAE,MAAM;qBACV,EAAE,OAAO,QAAQ;2BACX,EAAE,QAAQ;kBACnB,SAAS,CAAC,KAAK,QAAQ;;uBAElB,SAAS,IAAI,MAAM,EAAE,QAAQ,EAAE;eAElD,EAAE;;AAEN"}

package/dist/render/cells.js

@@ -0,0 +1,27 @@
+import { cellSlot, formatValue, headerSlot, toChild } from "./content.js";
+import { html, render } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+// src/render/cells.ts
+/**
+* Renders header and cell content into the host's light DOM, as direct children
+* (a slot only takes the host's own children). Keyed and ordered by pool slot,
+* so recycled content updates in place instead of moving (ADR 0001).
+*/
+function renderLightDom(host, model, rows) {
+	const columns = model.columns;
+	render(html`${repeat(columns, (c) => c.id, (c) => html`<div slot=${headerSlot(c.colIndex)}>${headerContent(c)}</div>`)}${repeat(rows, (r) => r.slot, (r) => repeat(columns, (c) => c.id, (c) => html`<div slot=${cellSlot(r.slot, c.colIndex)}>${cellContent(model, r.index, c)}</div>`))}`, host, { host });
+}
+function headerContent(column) {
+	const { header } = column;
+	return toChild(typeof header === "function" ? header() : header);
+}
+function cellContent(model, index, column) {
+	if (column.cell) {
+		const context = model.cellContext(index, column.id);
+		return context ? toChild(column.cell(context.row, context)) : "";
+	}
+	return column.hasAccessor ? formatValue(model.valueAt(index, column.id)) : "";
+}
+export { renderLightDom };
+
+//# sourceMappingURL=cells.js.map

package/dist/render/cells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.js","names":[],"sources":["../../src/render/cells.ts"],"sourcesContent":["import { html, render } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { ColumnView, TableModel } from '@argus-table/core';\nimport type { WindowRow } from '../controllers/virtual-controller.js';\nimport type { CellContent } from '../types.js';\nimport { cellSlot, formatValue, headerSlot, toChild } from './content.js';\n\ntype Column<T> = ColumnView<T, CellContent>;\n\n/**\n * Renders header and cell content into the host's light DOM, as direct children\n * (a slot only takes the host's own children). Keyed and ordered by pool slot,\n * so recycled content updates in place instead of moving (ADR 0001).\n */\nexport function renderLightDom<T>(\n  host: HTMLElement,\n  model: TableModel<T, CellContent>,\n  rows: readonly WindowRow[],\n): void {\n  const columns = model.columns;\n  render(\n    html`${repeat(\n      columns,\n      (c) => c.id,\n      (c) => html`<div slot=${headerSlot(c.colIndex)}>${headerContent(c)}</div>`,\n    )}${repeat(\n      rows,\n      (r) => r.slot,\n      (r) =>\n        repeat(\n          columns,\n          (c) => c.id,\n          (c) =>\n            html`<div slot=${cellSlot(r.slot, c.colIndex)}>${cellContent(model, r.index, c)}</div>`,\n        ),\n    )}`,\n    host,\n    { host },\n  );\n}\n\nfunction headerContent<T>(column: Column<T>): unknown {\n  const { header } = column;\n  return toChild(typeof header === 'function' ? header() : header);\n}\n\nfunction cellContent<T>(model: TableModel<T, CellContent>, index: number, column: Column<T>) {\n  if (column.cell) {\n    const context = model.cellContext(index, column.id);\n    return context ? toChild(column.cell(context.row, context)) : '';\n  }\n  return column.hasAccessor ? formatValue(model.valueAt(index, column.id)) : '';\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,eACd,MACA,OACA,MACM;CACN,MAAM,UAAU,MAAM;CACtB,OACE,IAAI,GAAG,OACL,UACC,MAAM,EAAE,KACR,MAAM,IAAI,aAAa,WAAW,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,EAAE,OACrE,IAAI,OACF,OACC,MAAM,EAAE,OACR,MACC,OACE,UACC,MAAM,EAAE,KACR,MACC,IAAI,aAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,OAAO,EAAE,OAAO,CAAC,EAAE,OACpF,CACJ,KACA,MACA,EAAE,KAAK,CACT;AACF;AAEA,SAAS,cAAiB,QAA4B;CACpD,MAAM,EAAE,WAAW;CACnB,OAAO,QAAQ,OAAO,WAAW,aAAa,OAAO,IAAI,MAAM;AACjE;AAEA,SAAS,YAAe,OAAmC,OAAe,QAAmB;CAC3F,IAAI,OAAO,MAAM;EACf,MAAM,UAAU,MAAM,YAAY,OAAO,OAAO,EAAE;EAClD,OAAO,UAAU,QAAQ,OAAO,KAAK,QAAQ,KAAK,OAAO,CAAC,IAAI;CAChE;CACA,OAAO,OAAO,cAAc,YAAY,MAAM,QAAQ,OAAO,OAAO,EAAE,CAAC,IAAI;AAC7E"}

package/dist/render/content.js

@@ -0,0 +1,35 @@
+import { nothing } from "lit";
+// src/render/content.ts
+/** Turns header or cell content into a Lit child. */
+function toChild(content) {
+	if (content === null || content === void 0) return nothing;
+	return typeof content === "number" ? String(content) : content;
+}
+/** Default cell text for an accessor value. */
+function formatValue(value) {
+	if (value === null || value === void 0) return "";
+	if (value instanceof Date) return value.toLocaleString();
+	return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+/** Private slot names (ADR 0001): cells by pool slot and column, headers by column. */
+var cellSlot = (slot, colIndex) => `c-${String(slot)}-${String(colIndex)}`;
+var headerSlot = (colIndex) => `h-${String(colIndex)}`;
+/** Part list of a body cell: state is in the part name (`::part()` can't take attribute selectors). */
+function cellParts(column) {
+	let parts = "cell";
+	if (column.pin) parts += column.pinEdge ? " cell-pinned cell-pinned-edge" : " cell-pinned";
+	if (column.sorted) parts += " cell-sorted";
+	return parts;
+}
+/** `aria-sort` for a header: only the sorted column carries it (WAI-ARIA APG). */
+function ariaSort(sorted) {
+	if (!sorted) return void 0;
+	return sorted === "asc" ? "ascending" : "descending";
+}
+/** Inline style of a pinned cell: its sticky inset, from the start or the end edge. */
+function pinStyle(column) {
+	return column.pin ? `--_pin-offset: ${String(column.offset)}px` : void 0;
+}
+export { ariaSort, cellParts, cellSlot, formatValue, headerSlot, pinStyle, toChild };
+
+//# sourceMappingURL=content.js.map

package/dist/render/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":[],"sources":["../../src/render/content.ts"],"sourcesContent":["import { nothing } from 'lit';\nimport type { CellContent } from '../types.js';\n\n/** Turns header or cell content into a Lit child. */\nexport function toChild(content: CellContent | null | undefined): unknown {\n  if (content === null || content === undefined) return nothing;\n  return typeof content === 'number' ? String(content) : content;\n}\n\n/** Default cell text for an accessor value. */\nexport function formatValue(value: unknown): string {\n  if (value === null || value === undefined) return '';\n  if (value instanceof Date) return value.toLocaleString();\n  // eslint-disable-next-line @typescript-eslint/no-base-to-string -- objects are handled above\n  return typeof value === 'object' ? JSON.stringify(value) : String(value);\n}\n\n/** Private slot names (ADR 0001): cells by pool slot and column, headers by column. */\nexport const cellSlot = (slot: number, colIndex: number) => `c-${String(slot)}-${String(colIndex)}`;\nexport const headerSlot = (colIndex: number) => `h-${String(colIndex)}`;\n\ninterface Pinnable {\n  pin: 'start' | 'end' | undefined;\n  pinEdge: boolean;\n}\n\n/** Part list of a body cell: state is in the part name (`::part()` can't take attribute selectors). */\nexport function cellParts(column: Pinnable & { sorted: 'asc' | 'desc' | false }): string {\n  let parts = 'cell';\n  if (column.pin) parts += column.pinEdge ? ' cell-pinned cell-pinned-edge' : ' cell-pinned';\n  if (column.sorted) parts += ' cell-sorted';\n  return parts;\n}\n\n/** `aria-sort` for a header: only the sorted column carries it (WAI-ARIA APG). */\nexport function ariaSort(sorted: 'asc' | 'desc' | false): 'ascending' | 'descending' | undefined {\n  if (!sorted) return undefined;\n  return sorted === 'asc' ? 'ascending' : 'descending';\n}\n\n/** Inline style of a pinned cell: its sticky inset, from the start or the end edge. */\nexport function pinStyle(column: Pinnable & { offset: number }): string | undefined {\n  return column.pin ? `--_pin-offset: ${String(column.offset)}px` : undefined;\n}\n"],"mappings":";;;AAIA,SAAgB,QAAQ,SAAkD;CACxE,IAAI,YAAY,QAAQ,YAAY,KAAA,GAAW,OAAO;CACtD,OAAO,OAAO,YAAY,WAAW,OAAO,OAAO,IAAI;AACzD;;AAGA,SAAgB,YAAY,OAAwB;CAClD,IAAI,UAAU,QAAQ,UAAU,KAAA,GAAW,OAAO;CAClD,IAAI,iBAAiB,MAAM,OAAO,MAAM,eAAe;CAEvD,OAAO,OAAO,UAAU,WAAW,KAAK,UAAU,KAAK,IAAI,OAAO,KAAK;AACzE;;AAGA,IAAa,YAAY,MAAc,aAAqB,KAAK,OAAO,IAAI,EAAE,GAAG,OAAO,QAAQ;AAChG,IAAa,cAAc,aAAqB,KAAK,OAAO,QAAQ;;AAQpE,SAAgB,UAAU,QAA+D;CACvF,IAAI,QAAQ;CACZ,IAAI,OAAO,KAAK,SAAS,OAAO,UAAU,kCAAkC;CAC5E,IAAI,OAAO,QAAQ,SAAS;CAC5B,OAAO;AACT;;AAGA,SAAgB,SAAS,QAAwE;CAC/F,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,OAAO,WAAW,QAAQ,cAAc;AAC1C;;AAGA,SAAgB,SAAS,QAA2D;CAClF,OAAO,OAAO,MAAM,kBAAkB,OAAO,OAAO,MAAM,EAAE,MAAM,KAAA;AACpE"}

package/dist/render/header.js

@@ -0,0 +1,62 @@
+import { ariaSort, headerSlot, pinStyle } from "./content.js";
+import { html, nothing } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+// src/render/header.ts
+/**
+* The sticky header row. Header content is slotted from the light DOM. Pinned
+* header cells use the same private `data-pin` hooks as body cells, but no parts.
+* Every header carries `data-col` (its column id) and sortable ones also
+* `data-sort-col`; the element's delegated handlers read them. Headers take part
+* in the grid's roving tabindex: the active one is the tab stop (`activeCol`).
+* Resizable columns get a `resize-handle` on the header's inline-end edge. It is
+* not focusable: the focused header resizes with Alt+Arrow.
+*/
+function renderHeader(columns, handlers, activeCol) {
+	return html`<div part="header" role="rowgroup">
+    <div
+      part="header-row"
+      class="row"
+      role="row"
+      aria-rowindex="1"
+      @click=${handlers.click}
+      @pointerdown=${handlers.pointerdown}
+    >
+      ${repeat(columns, (c) => c.id, (c) => html`<div
+            part=${c.sorted ? "header-cell header-cell-sorted" : "header-cell"}
+            role="columnheader"
+            aria-colindex=${c.colIndex}
+            aria-sort=${ariaSort(c.sorted) ?? nothing}
+            data-col=${c.id}
+            data-sort-col=${c.sortable ? c.id : nothing}
+            tabindex=${c.id === activeCol ? 0 : -1}
+            data-align=${c.align}
+            data-pin=${c.pin ?? nothing}
+            ?data-pin-edge=${c.pinEdge}
+            style=${pinStyle(c) ?? nothing}
+          >
+            <slot name=${headerSlot(c.colIndex)}></slot>
+            ${c.sortable ? html`<span class="sort-indicator" aria-hidden="true"></span>` : nothing}
+            ${c.resizable ? resizeHandle(c) : nothing}
+          </div>`)}
+    </div>
+  </div>`;
+}
+/**
+* A vertical separator with the column's width as its value. A flex column has no
+* fixed width until it is resized, so it reports none.
+*/
+function resizeHandle(c) {
+	return html`<div
+    part="resize-handle"
+    role="separator"
+    aria-orientation="vertical"
+    aria-label="Resize column"
+    aria-valuenow=${c.flex === void 0 ? Math.round(c.width) : nothing}
+    aria-valuemin=${c.minWidth}
+    aria-valuemax=${Number.isFinite(c.maxWidth) ? c.maxWidth : nothing}
+    data-resize-col=${c.id}
+  ></div>`;
+}
+export { renderHeader };
+
+//# sourceMappingURL=header.js.map

package/dist/render/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","names":[],"sources":["../../src/render/header.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { ColumnView } from '@argus-table/core';\nimport type { CellContent } from '../types.js';\nimport { ariaSort, headerSlot, pinStyle } from './content.js';\n\nexport interface HeaderHandlers {\n  click: (event: MouseEvent) => void;\n  pointerdown: (event: PointerEvent) => void;\n}\n\n/**\n * The sticky header row. Header content is slotted from the light DOM. Pinned\n * header cells use the same private `data-pin` hooks as body cells, but no parts.\n * Every header carries `data-col` (its column id) and sortable ones also\n * `data-sort-col`; the element's delegated handlers read them. Headers take part\n * in the grid's roving tabindex: the active one is the tab stop (`activeCol`).\n * Resizable columns get a `resize-handle` on the header's inline-end edge. It is\n * not focusable: the focused header resizes with Alt+Arrow.\n */\nexport function renderHeader<T>(\n  columns: readonly ColumnView<T, CellContent>[],\n  handlers: HeaderHandlers,\n  activeCol: string | undefined,\n) {\n  return html`<div part=\"header\" role=\"rowgroup\">\n    <div\n      part=\"header-row\"\n      class=\"row\"\n      role=\"row\"\n      aria-rowindex=\"1\"\n      @click=${handlers.click}\n      @pointerdown=${handlers.pointerdown}\n    >\n      ${repeat(\n        columns,\n        (c) => c.id,\n        (c) =>\n          html`<div\n            part=${c.sorted ? 'header-cell header-cell-sorted' : 'header-cell'}\n            role=\"columnheader\"\n            aria-colindex=${c.colIndex}\n            aria-sort=${ariaSort(c.sorted) ?? nothing}\n            data-col=${c.id}\n            data-sort-col=${c.sortable ? c.id : nothing}\n            tabindex=${c.id === activeCol ? 0 : -1}\n            data-align=${c.align}\n            data-pin=${c.pin ?? nothing}\n            ?data-pin-edge=${c.pinEdge}\n            style=${pinStyle(c) ?? nothing}\n          >\n            <slot name=${headerSlot(c.colIndex)}></slot>\n            ${c.sortable ? html`<span class=\"sort-indicator\" aria-hidden=\"true\"></span>` : nothing}\n            ${c.resizable ? resizeHandle(c) : nothing}\n          </div>`,\n      )}\n    </div>\n  </div>`;\n}\n\n/**\n * A vertical separator with the column's width as its value. A flex column has no\n * fixed width until it is resized, so it reports none.\n */\nfunction resizeHandle<T>(c: ColumnView<T, CellContent>) {\n  return html`<div\n    part=\"resize-handle\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    aria-label=\"Resize column\"\n    aria-valuenow=${c.flex === undefined ? Math.round(c.width) : nothing}\n    aria-valuemin=${c.minWidth}\n    aria-valuemax=${Number.isFinite(c.maxWidth) ? c.maxWidth : nothing}\n    data-resize-col=${c.id}\n  ></div>`;\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,SAAgB,aACd,SACA,UACA,WACA;CACA,OAAO,IAAI;;;;;;eAME,SAAS,MAAM;qBACT,SAAS,YAAY;;QAElC,OACA,UACC,MAAM,EAAE,KACR,MACC,IAAI;mBACK,EAAE,SAAS,mCAAmC,cAAc;;4BAEnD,EAAE,SAAS;wBACf,SAAS,EAAE,MAAM,KAAK,QAAQ;uBAC/B,EAAE,GAAG;4BACA,EAAE,WAAW,EAAE,KAAK,QAAQ;uBACjC,EAAE,OAAO,YAAY,IAAI,GAAG;yBAC1B,EAAE,MAAM;uBACV,EAAE,OAAO,QAAQ;6BACX,EAAE,QAAQ;oBACnB,SAAS,CAAC,KAAK,QAAQ;;yBAElB,WAAW,EAAE,QAAQ,EAAE;cAClC,EAAE,WAAW,IAAI,4DAA4D,QAAQ;cACrF,EAAE,YAAY,aAAa,CAAC,IAAI,QAAQ;iBAEhD,EAAE;;;AAGR;;;;;AAMA,SAAS,aAAgB,GAA+B;CACtD,OAAO,IAAI;;;;;oBAKO,EAAE,SAAS,KAAA,IAAY,KAAK,MAAM,EAAE,KAAK,IAAI,QAAQ;oBACrD,EAAE,SAAS;oBACX,OAAO,SAAS,EAAE,QAAQ,IAAI,EAAE,WAAW,QAAQ;sBACjD,EAAE,GAAG;;AAE3B"}