@lit-material/data-table 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bohdaq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+# @lit-material/data-table
+
+Material Design 3 data table web components built with [Lit](https://lit.dev/). Part of
+[lit-material](https://github.com/bohdaq/lit-material).
+
+![lit-material data table: sortable Name/Age columns, a selected row, and an indeterminate select-all state](./screenshot.png)
+
+## Install
+
+```sh
+npm install @lit-material/data-table @lit-material/tokens
+```
+
+## Usage
+
+```html
+<link rel="stylesheet" href="node_modules/@lit-material/tokens/css/index.css" />
+<script type="module">
+  import "@lit-material/data-table";
+</script>
+
+<lit-material-data-table id="table">
+  <lit-material-data-table-row header>
+    <lit-material-data-table-cell header>
+      <input type="checkbox" data-select-all aria-label="Select all rows" />
+    </lit-material-data-table-cell>
+    <lit-material-data-table-cell header sort-key="name">Name</lit-material-data-table-cell>
+    <lit-material-data-table-cell header sort-key="age" numeric>Age</lit-material-data-table-cell>
+  </lit-material-data-table-row>
+
+  <lit-material-data-table-row data-row-id="1">
+    <lit-material-data-table-cell>
+      <input type="checkbox" data-row-select aria-label="Select row: Ada" />
+    </lit-material-data-table-cell>
+    <lit-material-data-table-cell>Ada</lit-material-data-table-cell>
+    <lit-material-data-table-cell numeric>32</lit-material-data-table-cell>
+  </lit-material-data-table-row>
+</lit-material-data-table>
+
+<script type="module">
+  const table = document.querySelector("#table");
+  table.addEventListener("sort-change", (e) => console.log(e.detail)); // { sortKey, sortDirection }
+  table.addEventListener("selection-change", (e) => console.log(e.detail)); // { selected: string[] }
+</script>
+```
+
+## Why not a real `<table>`?
+
+An earlier version of this component wrapped a real `<table>`/`<thead>`/`<tbody>`, with sorting
+and selection styled from the outer component's own shadow root. That doesn't work: CSS
+`::slotted()` can only style a *directly* slotted node, never its descendants — so with
+`<thead>`/`<tbody>` as the slotted content, individual `<th>`/`<td>` cells are unreachable from
+the table's stylesheet entirely (the same wall
+[`@lit-material/badge`](https://github.com/bohdaq/lit-material/tree/main/packages/badge)'s README
+describes hitting from a different angle). Splitting the table into
+`lit-material-data-table-row`/`-cell` sub-components — the same shape as
+[`@lit-material/list`](https://github.com/bohdaq/lit-material/tree/main/packages/list)'s
+list/list-item split — gives every visual unit its own shadow root to style, at the cost of using
+`display: table` / `table-row` / `table-cell` instead of the real elements to still get native
+column alignment.
+
+## API
+
+### `lit-material-data-table`
+
+| Property        | Attribute         | Type                                    | Default        |
+| ---------------- | ------------------ | ----------------------------------------- | -------------- |
+| `sortKey`        | `sort-key`          | `string \| undefined`                     | `undefined`     |
+| `sortDirection`  | `sort-direction`    | `"none" \| "ascending" \| "descending"`   | `"ascending"`   |
+
+Slot: default (`lit-material-data-table-row` elements).
+
+This component owns UI *state* (which column is sorted which way, which rows are checked) and
+*notifies* you of it via events — it never reorders rows or owns your data. Activating a sortable
+header updates `sortKey`/`sortDirection`, syncs the indicator onto the right cell, and fires
+`sort-change`; you re-render rows in the new order (or re-fetch a sorted page) in response. The
+same headless-behavior split
+[`@lit-material/tabs`](https://github.com/bohdaq/lit-material/tree/main/packages/tabs) makes for
+tab panels.
+
+Row selection works by event delegation rather than a hard dependency on any specific checkbox
+implementation: put a real `<input type="checkbox">` (or
+[`@lit-material/checkbox`](https://github.com/bohdaq/lit-material/tree/main/packages/checkbox), or
+anything that fires a bubbling `change` event) with a `data-row-select` attribute in a row's cell,
+and one with `data-select-all` in the header row's. Give each selectable row a `data-row-id`
+attribute — `selection-change`'s `detail.selected` is the list of checked rows' `data-row-id`
+values.
+
+Fires `sort-change` (`detail: { sortKey, sortDirection }`) and `selection-change`
+(`detail: { selected: string[] }`).
+
+### `lit-material-data-table-row`
+
+| Property   | Attribute  | Type      | Default |
+| ---------- | ---------- | --------- | ------- |
+| `header`   | `header`   | `boolean` | `false` |
+| `selected` | `selected` | `boolean` | `false` |
+
+Slot: default (`lit-material-data-table-cell` elements). Set `header` on the row made up of
+header cells (typically the first). `selected` is normally managed by the parent table from a
+`data-row-select` checkbox's checked state, not set directly.
+
+### `lit-material-data-table-cell`
+
+| Property        | Attribute         | Type                                    | Default |
+| ---------------- | ------------------ | ----------------------------------------- | ------- |
+| `header`         | `header`            | `boolean`                                  | `false` |
+| `numeric`        | `numeric`           | `boolean`                                  | `false` |
+| `sortKey`        | `sort-key`          | `string \| undefined`                     | `undefined` |
+| `sortDirection`  | `sort-direction`    | `"none" \| "ascending" \| "descending"`   | `"none"` |
+
+Slot: default (the cell's content). `numeric` right-aligns content (and applies tabular figures)
+— use it for numeric columns per the MD3 spec. Set `sort-key` on a `header` cell to make it
+sortable: that wraps its content in a real `<button>` (the ARIA APG pattern for sortable column
+headers is an interactive element *inside* the columnheader cell, not the cell itself carrying the
+interaction). `sortDirection` is kept in sync by the parent table, not set directly.
+
+## Accessibility
+
+Built entirely on ARIA `table`/`row`/`columnheader`/`cell` roles (set automatically — the
+underlying elements aren't real `<table>`/`<tr>`/`<th>`/`<td>`, see above for why) rather than
+requiring you to wire them up. Row-select and select-all checkboxes need their own `aria-label` (a
+bare checkbox has no accessible name of its own) — see the usage example above.
+
+## Scope
+
+Deliberately out of scope for this first pass: pagination, column resizing, column reordering, row
+virtualization for very large datasets, and multi-column sort. All reasonable follow-ups, not
+silently missing pieces.
+
+## License
+
+MIT

package/dist/data-table-cell-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=data-table-cell-styles.d.ts.map

package/dist/data-table-cell-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell-styles.d.ts","sourceRoot":"","sources":["../src/data-table-cell-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsElB,CAAC"}

package/dist/data-table-cell-styles.js

@@ -0,0 +1,73 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: table-cell;
+    box-sizing: border-box;
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: var(--md-sys-color-on-surface, #1c1b1f);
+    font-family: var(--md-sys-typescale-body-medium-font, Roboto, system-ui, sans-serif);
+    font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    text-align: start;
+  }
+
+  :host([numeric]) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :host([header]) {
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    white-space: nowrap;
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  :host([numeric]) .content {
+    justify-content: flex-end;
+  }
+
+  /* Sortable header cells get a real <button> around their content (see the
+     component) — an ARIA APG "sortable column header" pattern, rather than
+     making the cell's own columnheader role itself the interactive target. */
+  .sort-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    box-sizing: border-box;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .sort-button:focus-visible {
+    outline: 2px solid var(--md-sys-color-secondary, #625b71);
+    outline-offset: 2px;
+  }
+
+  .sort-icon {
+    display: inline-block;
+    width: 1em;
+    font-size: 0.75em;
+    opacity: 0;
+  }
+
+  :host([sort-direction="ascending"]) .sort-icon,
+  :host([sort-direction="descending"]) .sort-icon {
+    opacity: 1;
+  }
+`;
+//# sourceMappingURL=data-table-cell-styles.js.map

package/dist/data-table-cell-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell-styles.js","sourceRoot":"","sources":["../src/data-table-cell-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsExB,CAAC"}

package/dist/data-table-cell.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from "lit";
+export type SortDirection = "none" | "ascending" | "descending";
+/**
+ * A single cell inside a `lit-material-data-table-row`.
+ *
+ * `header` renders it as a column header (`role="columnheader"`, label
+ * typography); otherwise it's a plain data cell (`role="cell"`). Set
+ * `sort-key` on a header cell to make it sortable — that wraps its content
+ * in a real `<button>` (the ARIA APG pattern for sortable column headers is
+ * an interactive element *inside* the columnheader cell, not the cell
+ * itself carrying the interaction) which requests a sort from the parent
+ * table on click; `sort-direction` is then kept in sync by the table, not
+ * set directly.
+ *
+ * `:host` uses `display: table-cell` (not a real `<td>`) so cells still
+ * align into columns via the browser's native table layout algorithm
+ * without needing an actual `<table>` element — see `lit-material-data-table`
+ * for why: CSS `::slotted()` can only style a *directly* slotted node, never
+ * its descendants, so a real `<table>` with slotted `<thead>`/`<tbody>`
+ * content would leave individual `<td>`/`<th>` cells entirely unstylable
+ * from this component's own shadow root.
+ *
+ * @element lit-material-data-table-cell
+ *
+ * @slot - The cell's content.
+ *
+ * @csspart sort-button - The button wrapping content, for sortable header cells.
+ * @csspart sort-icon - The ascending/descending indicator.
+ */
+export declare class LitMaterialDataTableCell extends LitElement {
+    static styles: import("lit").CSSResult;
+    header: boolean;
+    numeric: boolean;
+    sortKey?: string;
+    /** Kept in sync by the parent table — see the class docs. Not meant to be set directly. */
+    sortDirection: SortDirection;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private get isSortable();
+    render(): import("lit").TemplateResult<1>;
+    private readonly handleSortClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-data-table-cell": LitMaterialDataTableCell;
+    }
+}
+//# sourceMappingURL=data-table-cell.d.ts.map

package/dist/data-table-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell.d.ts","sourceRoot":"","sources":["../src/data-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IACf,OAAO,UAAS;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACtD,2FAA2F;IACjC,aAAa,EAAE,aAAa,CAAU;cAE7E,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMlE,OAAO,KAAK,UAAU,GAErB;IAEQ,MAAM;IAaf,OAAO,CAAC,QAAQ,CAAC,eAAe,CAQ9B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}

package/dist/data-table-cell.js

@@ -0,0 +1,90 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./data-table-cell-styles.js";
+/**
+ * A single cell inside a `lit-material-data-table-row`.
+ *
+ * `header` renders it as a column header (`role="columnheader"`, label
+ * typography); otherwise it's a plain data cell (`role="cell"`). Set
+ * `sort-key` on a header cell to make it sortable — that wraps its content
+ * in a real `<button>` (the ARIA APG pattern for sortable column headers is
+ * an interactive element *inside* the columnheader cell, not the cell
+ * itself carrying the interaction) which requests a sort from the parent
+ * table on click; `sort-direction` is then kept in sync by the table, not
+ * set directly.
+ *
+ * `:host` uses `display: table-cell` (not a real `<td>`) so cells still
+ * align into columns via the browser's native table layout algorithm
+ * without needing an actual `<table>` element — see `lit-material-data-table`
+ * for why: CSS `::slotted()` can only style a *directly* slotted node, never
+ * its descendants, so a real `<table>` with slotted `<thead>`/`<tbody>`
+ * content would leave individual `<td>`/`<th>` cells entirely unstylable
+ * from this component's own shadow root.
+ *
+ * @element lit-material-data-table-cell
+ *
+ * @slot - The cell's content.
+ *
+ * @csspart sort-button - The button wrapping content, for sortable header cells.
+ * @csspart sort-icon - The ascending/descending indicator.
+ */
+let LitMaterialDataTableCell = class LitMaterialDataTableCell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.header = false;
+        this.numeric = false;
+        /** Kept in sync by the parent table — see the class docs. Not meant to be set directly. */
+        this.sortDirection = "none";
+        this.handleSortClick = () => {
+            this.dispatchEvent(new CustomEvent("sort-request", {
+                bubbles: true,
+                composed: true,
+                detail: { sortKey: this.sortKey },
+            }));
+        };
+    }
+    static { this.styles = styles; }
+    willUpdate(changed) {
+        if (changed.has("header")) {
+            this.setAttribute("role", this.header ? "columnheader" : "cell");
+        }
+    }
+    get isSortable() {
+        return this.header && !!this.sortKey;
+    }
+    render() {
+        if (this.isSortable) {
+            const icon = this.sortDirection === "descending" ? "▼" : "▲";
+            return html `
+        <button class="sort-button" part="sort-button" type="button" @click=${this.handleSortClick}>
+          <span class="content"><slot></slot></span>
+          <span class="sort-icon" part="sort-icon" aria-hidden="true">${icon}</span>
+        </button>
+      `;
+        }
+        return html `<span class="content"><slot></slot></span>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableCell.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableCell.prototype, "numeric", void 0);
+__decorate([
+    property({ attribute: "sort-key" })
+], LitMaterialDataTableCell.prototype, "sortKey", void 0);
+__decorate([
+    property({ attribute: "sort-direction", reflect: true })
+], LitMaterialDataTableCell.prototype, "sortDirection", void 0);
+LitMaterialDataTableCell = __decorate([
+    customElement("lit-material-data-table-cell")
+], LitMaterialDataTableCell);
+export { LitMaterialDataTableCell };
+//# sourceMappingURL=data-table-cell.js.map

package/dist/data-table-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell.js","sourceRoot":"","sources":["../src/data-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAGuC,WAAM,GAAG,KAAK,CAAC;QACf,YAAO,GAAG,KAAK,CAAC;QAE5D,2FAA2F;QACjC,kBAAa,GAAkB,MAAM,CAAC;QAyB/E,oBAAe,GAAG,GAAS,EAAE;YAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;aAClC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;aAxCiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAQb,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YAC7D,OAAO,IAAI,CAAA;8EAC6D,IAAI,CAAC,eAAe;;wEAE1B,IAAI;;OAErE,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA,4CAA4C,CAAC;IAC1D,CAAC;;AA3B2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAAgB;AACf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAiB;AACvB;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yDAAkB;AAEI;IAAzD,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+DAAuC;AAPrF,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAyCpC"}

package/dist/data-table-row-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=data-table-row-styles.d.ts.map

package/dist/data-table-row-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-styles.d.ts","sourceRoot":"","sources":["../src/data-table-row-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwBlB,CAAC"}

package/dist/data-table-row-styles.js

@@ -0,0 +1,27 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: table-row;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+    transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  :host(:last-of-type) {
+    border-bottom: none;
+  }
+
+  :host(:not([header]):hover) {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 4%, transparent);
+  }
+
+  :host([selected]) {
+    background-color: var(--md-sys-color-secondary-container, #e8def8);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition: none;
+    }
+  }
+`;
+//# sourceMappingURL=data-table-row-styles.js.map

package/dist/data-table-row-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-styles.js","sourceRoot":"","sources":["../src/data-table-row-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC"}

package/dist/data-table-row.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * A row inside a `lit-material-data-table` — holds `lit-material-data-table-cell` children.
+ *
+ * Set `header` on a row made up of header cells (typically the first row);
+ * it skips the hover/`selected` styling body rows get. `:host` uses
+ * `display: table-row` for the same reason `lit-material-data-table-cell`
+ * uses `display: table-cell` — native table column alignment without an
+ * actual `<table>` element.
+ *
+ * @element lit-material-data-table-row
+ *
+ * @slot - `lit-material-data-table-cell` elements.
+ */
+export declare class LitMaterialDataTableRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    header: boolean;
+    /** Highlights the row — set by the table from a row-select checkbox's checked state, not directly. */
+    selected: boolean;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-data-table-row": LitMaterialDataTableRow;
+    }
+}
+//# sourceMappingURL=data-table-row.d.ts.map

package/dist/data-table-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row.d.ts","sourceRoot":"","sources":["../src/data-table-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;GAYG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IAC3D,sGAAsG;IAC1D,QAAQ,UAAS;cAE1C,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMzD,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}

package/dist/data-table-row.js

@@ -0,0 +1,50 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./data-table-row-styles.js";
+/**
+ * A row inside a `lit-material-data-table` — holds `lit-material-data-table-cell` children.
+ *
+ * Set `header` on a row made up of header cells (typically the first row);
+ * it skips the hover/`selected` styling body rows get. `:host` uses
+ * `display: table-row` for the same reason `lit-material-data-table-cell`
+ * uses `display: table-cell` — native table column alignment without an
+ * actual `<table>` element.
+ *
+ * @element lit-material-data-table-row
+ *
+ * @slot - `lit-material-data-table-cell` elements.
+ */
+let LitMaterialDataTableRow = class LitMaterialDataTableRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.header = false;
+        /** Highlights the row — set by the table from a row-select checkbox's checked state, not directly. */
+        this.selected = false;
+    }
+    static { this.styles = styles; }
+    willUpdate(changed) {
+        if (changed.has("header") || !this.hasAttribute("role")) {
+            this.setAttribute("role", "row");
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableRow.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableRow.prototype, "selected", void 0);
+LitMaterialDataTableRow = __decorate([
+    customElement("lit-material-data-table-row")
+], LitMaterialDataTableRow);
+export { LitMaterialDataTableRow };
+//# sourceMappingURL=data-table-row.js.map

package/dist/data-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row.js","sourceRoot":"","sources":["../src/data-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD;;;;;;;;;;;;GAYG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAGuC,WAAM,GAAG,KAAK,CAAC;QAC3D,sGAAsG;QAC1D,aAAQ,GAAG,KAAK,CAAC;IAW/D,CAAC;aAfiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAMb,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAZ2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAkB;AALlD,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAgBnC"}

package/dist/data-table-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=data-table-styles.d.ts.map

package/dist/data-table-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-styles.d.ts","sourceRoot":"","sources":["../src/data-table-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAelB,CAAC"}

package/dist/data-table-styles.js

@@ -0,0 +1,18 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    overflow-x: auto;
+    border-radius: var(--md-sys-shape-corner-large, 12px);
+    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+    background-color: var(--md-sys-color-surface, #fffbfe);
+  }
+
+  .table {
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+  }
+`;
+//# sourceMappingURL=data-table-styles.js.map

package/dist/data-table-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-styles.js","sourceRoot":"","sources":["../src/data-table-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAexB,CAAC"}

package/dist/data-table.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from "lit";
+import type { SortDirection } from "./data-table-cell.js";
+/**
+ * Material Design 3 data table — a container for `lit-material-data-table-row`
+ * elements (each holding `lit-material-data-table-cell` elements).
+ *
+ * This component owns UI *state* (which column is sorted which way, which
+ * rows are checked) and *notifies* you of it via events — it doesn't own
+ * your data, so it never reorders rows itself. Sort a header cell (one
+ * with `sort-key` set) and this table updates `sortKey`/`sortDirection`,
+ * syncs the indicator onto the right cell, and fires `sort-change`; you
+ * re-render the rows in the new order (or re-fetch a sorted page) in
+ * response. The same headless-behavior split
+ * [`lit-material-tabs`](https://github.com/bohdaq/lit-material/tree/main/packages/tabs)
+ * makes for tab *panels*.
+ *
+ * Row selection works by event delegation rather than a hard dependency on
+ * any specific checkbox implementation: put a real `<input type="checkbox">`
+ * (or `lit-material-checkbox`, or anything that fires a bubbling `change`
+ * event) with a `data-row-select` attribute in a row's cell, and one with
+ * `data-select-all` in the header row's — this table listens for `change`
+ * on those, drives "select all" indeterminate state, sets the matching
+ * row's `selected`, and fires `selection-change` with the checked rows'
+ * closest-`<tr>`-equivalent (`lit-material-data-table-row`) `data-row-id`
+ * attribute.
+ *
+ * @element lit-material-data-table
+ *
+ * @slot - `lit-material-data-table-row` elements.
+ *
+ * @csspart table - The table layout container.
+ *
+ * @fires sort-change - `detail: { sortKey, sortDirection }`, when a sortable header cell is activated.
+ * @fires selection-change - `detail: { selected: string[] }` (the checked rows' `data-row-id` values),
+ *   when a `data-row-select`/`data-select-all` checkbox changes.
+ */
+export declare class LitMaterialDataTable extends LitElement {
+    static styles: import("lit").CSSResult;
+    sortKey?: string;
+    sortDirection: SortDirection;
+    constructor();
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private get headerCells();
+    private get rowCheckboxes();
+    private get selectAllCheckbox();
+    private syncSortIndicators;
+    private syncSelectAllState;
+    private syncRowSelectedState;
+    private dispatchSelectionChange;
+    private readonly handleSlotChange;
+    private readonly handleSortRequest;
+    private readonly handleChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-data-table": LitMaterialDataTable;
+    }
+}
+//# sourceMappingURL=data-table.d.ts.map

package/dist/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,KAAK,EAA4B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAU;IAEK,OAAO,CAAC,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,aAAa,CAAe;;cAQnE,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAalE,OAAO,KAAK,WAAW,GAMtB;IAED,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,KAAK,iBAAiB,GAG5B;IAED,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAehC;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAe3B;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

package/dist/data-table.js

@@ -0,0 +1,164 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./data-table-styles.js";
+/**
+ * Material Design 3 data table — a container for `lit-material-data-table-row`
+ * elements (each holding `lit-material-data-table-cell` elements).
+ *
+ * This component owns UI *state* (which column is sorted which way, which
+ * rows are checked) and *notifies* you of it via events — it doesn't own
+ * your data, so it never reorders rows itself. Sort a header cell (one
+ * with `sort-key` set) and this table updates `sortKey`/`sortDirection`,
+ * syncs the indicator onto the right cell, and fires `sort-change`; you
+ * re-render the rows in the new order (or re-fetch a sorted page) in
+ * response. The same headless-behavior split
+ * [`lit-material-tabs`](https://github.com/bohdaq/lit-material/tree/main/packages/tabs)
+ * makes for tab *panels*.
+ *
+ * Row selection works by event delegation rather than a hard dependency on
+ * any specific checkbox implementation: put a real `<input type="checkbox">`
+ * (or `lit-material-checkbox`, or anything that fires a bubbling `change`
+ * event) with a `data-row-select` attribute in a row's cell, and one with
+ * `data-select-all` in the header row's — this table listens for `change`
+ * on those, drives "select all" indeterminate state, sets the matching
+ * row's `selected`, and fires `selection-change` with the checked rows'
+ * closest-`<tr>`-equivalent (`lit-material-data-table-row`) `data-row-id`
+ * attribute.
+ *
+ * @element lit-material-data-table
+ *
+ * @slot - `lit-material-data-table-row` elements.
+ *
+ * @csspart table - The table layout container.
+ *
+ * @fires sort-change - `detail: { sortKey, sortDirection }`, when a sortable header cell is activated.
+ * @fires selection-change - `detail: { selected: string[] }` (the checked rows' `data-row-id` values),
+ *   when a `data-row-select`/`data-select-all` checkbox changes.
+ */
+let LitMaterialDataTable = class LitMaterialDataTable extends LitElement {
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        this.sortDirection = "ascending";
+        this.handleSlotChange = () => {
+            this.syncSortIndicators();
+            this.syncSelectAllState();
+            this.syncRowSelectedState();
+        };
+        this.handleSortRequest = (event) => {
+            const key = event.detail.sortKey;
+            if (!key)
+                return;
+            if (this.sortKey === key) {
+                this.sortDirection = this.sortDirection === "ascending" ? "descending" : "ascending";
+            }
+            else {
+                this.sortKey = key;
+                this.sortDirection = "ascending";
+            }
+            this.dispatchEvent(new CustomEvent("sort-change", {
+                bubbles: true,
+                detail: { sortKey: this.sortKey, sortDirection: this.sortDirection },
+            }));
+        };
+        this.handleChange = (event) => {
+            const target = event.composedPath()[0];
+            if (!target?.hasAttribute)
+                return;
+            if (target.hasAttribute("data-select-all")) {
+                const checked = target.checked;
+                this.rowCheckboxes.forEach((box) => {
+                    if (!box.disabled)
+                        box.checked = checked;
+                });
+                this.syncRowSelectedState();
+                this.dispatchSelectionChange();
+            }
+            else if (target.hasAttribute("data-row-select")) {
+                this.syncRowSelectedState();
+                this.syncSelectAllState();
+                this.dispatchSelectionChange();
+            }
+        };
+        this.addEventListener("sort-request", this.handleSortRequest);
+        this.addEventListener("change", this.handleChange);
+    }
+    willUpdate(changed) {
+        // Not connectedCallback(): attribute mutations made there don't make it
+        // into SSR's serialized host tag (see lit-material-linear-progress for
+        // the full explanation) — willUpdate() runs inside the same
+        // synchronous pass that produces SSR's output.
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "table");
+        }
+        if (changed.has("sortKey") || changed.has("sortDirection")) {
+            this.syncSortIndicators();
+        }
+    }
+    get headerCells() {
+        // @lit-labs/ssr's light-DOM shim doesn't implement querySelectorAll on
+        // the host during connectedCallback — degrade to no cells rather than
+        // throwing (there's no sort/selection state to sync server-side anyway).
+        if (typeof this.querySelectorAll !== "function")
+            return [];
+        return Array.from(this.querySelectorAll("lit-material-data-table-cell[header]"));
+    }
+    get rowCheckboxes() {
+        if (typeof this.querySelectorAll !== "function")
+            return [];
+        return Array.from(this.querySelectorAll("[data-row-select]"));
+    }
+    get selectAllCheckbox() {
+        if (typeof this.querySelector !== "function")
+            return null;
+        return this.querySelector("[data-select-all]");
+    }
+    syncSortIndicators() {
+        this.headerCells.forEach((cell) => {
+            cell.sortDirection = cell.sortKey === this.sortKey ? this.sortDirection : "none";
+        });
+    }
+    syncSelectAllState() {
+        const selectAll = this.selectAllCheckbox;
+        if (!selectAll)
+            return;
+        const boxes = this.rowCheckboxes;
+        const checkedCount = boxes.filter((box) => box.checked).length;
+        selectAll.checked = boxes.length > 0 && checkedCount === boxes.length;
+        selectAll.indeterminate = checkedCount > 0 && checkedCount < boxes.length;
+    }
+    syncRowSelectedState() {
+        this.rowCheckboxes.forEach((box) => {
+            const row = box.closest("lit-material-data-table-row");
+            if (row)
+                row.selected = box.checked;
+        });
+    }
+    dispatchSelectionChange() {
+        const selected = this.rowCheckboxes
+            .filter((box) => box.checked)
+            .map((box) => box.closest("lit-material-data-table-row")?.getAttribute("data-row-id"))
+            .filter((id) => id !== null && id !== undefined);
+        this.dispatchEvent(new CustomEvent("selection-change", { bubbles: true, detail: { selected } }));
+    }
+    render() {
+        return html `<div class="table" part="table"><slot @slotchange=${this.handleSlotChange}></slot></div>`;
+    }
+};
+__decorate([
+    property({ attribute: "sort-key" })
+], LitMaterialDataTable.prototype, "sortKey", void 0);
+__decorate([
+    property({ attribute: "sort-direction" })
+], LitMaterialDataTable.prototype, "sortDirection", void 0);
+LitMaterialDataTable = __decorate([
+    customElement("lit-material-data-table")
+], LitMaterialDataTable);
+export { LitMaterialDataTable };
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { LitMaterialDataTable } from "./data-table.js";
+export { LitMaterialDataTableRow } from "./data-table-row.js";
+export { LitMaterialDataTableCell } from "./data-table-cell.js";
+export type { SortDirection } from "./data-table-cell.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { LitMaterialDataTable } from "./data-table.js";
+export { LitMaterialDataTableRow } from "./data-table-row.js";
+export { LitMaterialDataTableCell } from "./data-table-cell.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@lit-material/data-table",
+  "version": "0.0.1",
+  "description": "Material Design 3 data table web components (sortable, selectable).",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/data-table"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "data-table",
+    "table"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@lit-material/tokens": "0.0.1"
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts"
+  }
+}