@fusion.dev/helix-headless 0.0.0-dev

package/dist/table/column/table-column.d.ts

@@ -0,0 +1,165 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * How a column is read out of a row, once the row is data rather than markup.
+ *
+ * A function rather than a template, because a `<template>` holding one is what
+ * a build step produces and a hand-authored page cannot: the type is the escape
+ * hatch and `field` is the path that needs no build. Returning anything Lit can
+ * render means a cell can hold a badge, a link or a number, and returning
+ * `undefined` falls back to the field.
+ */
+export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
+/**
+ * @summary One column of a table: its heading, how wide it is, and what it reads.
+ *
+ * @description
+ * A column is a heading and a width, declared together, because they are two
+ * facts about one thing and keeping them apart is what went wrong before.
+ *
+ * **This replaces a `columns` string on the table.** That property took a CSS
+ * track list, so the headings lived in a row of cells and the widths lived in
+ * an attribute, and nothing tied the two together: a table with three headings
+ * and a two-track list rendered without complaint. Worse, handing it the
+ * headings instead of a track list produced invalid CSS, which the grid
+ * silently ignored, so the whole table collapsed into one column and every cell
+ * stacked. That happened, in this library's own example, and the failure said
+ * nothing at all.
+ *
+ * Now the column is the source of both. Add one and the table has another
+ * track; remove one and it does not.
+ *
+ * **It is also where every per-column fact goes**, which is the reason
+ * `helix-data-table` needs no column config object. `field` names the key the
+ * cell reads, `sortable` says a reader may reorder by it, `align` says which
+ * edge the values line up against, and `cell` takes a function for anything the
+ * field alone cannot express. The schema is markup and the data is a property:
+ * a schema is small, declarative, and something a reader should be able to see
+ * in the HTML, and data is large and windowed.
+ *
+ * **The same element serves both tables**, the markup one and the data one. It
+ * is identified by a flag rather than by `instanceof`, so a `helix-table-column`
+ * works inside either without the two roots sharing anything else.
+ *
+ * **It generates no box of its own**, the same as a row: the heading is a grid
+ * item of the table, so it lines up with the cells under it rather than sitting
+ * in a wrapper that has to be kept the same width.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Column header, Th
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The heading.
+ *
+ * @csspart column - The heading cell.
+ */
+export declare class HelixHeadlessTableColumn extends HelixElement {
+    /**
+     * The track this column takes, as CSS.
+     *
+     * A single track value, so anything valid in `grid-template-columns` works:
+     * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
+     * left over equally, as `minmax(max-content, 1fr)`.
+     *
+     * **The floor was `0` and that is what broke a narrow table.** A zero floor
+     * lets a track shrink under its own content, so at 375 the columns were
+     * squeezed to 75px and `eu-central-1` wrapped across lines, which reads as
+     * corrupt data rather than as a table that ran out of room. The zero was
+     * chosen to stop one long value pushing the table past its container, and
+     * that was the right worry with nowhere for the overflow to go.
+     *
+     * Somewhere now exists: `@fusion.dev/helix` scrolls the table's own box. So a
+     * long value pushes past the container as the old comment feared, and the
+     * table scrolls instead of the value being destroyed. Measured at 375: tracks
+     * of 192, 89 and 102 against a 343 box, so the table scrolls 384 and the page
+     * does not move.
+     *
+     * **`max-content` and not `min-content`, because a hyphen is a wrap
+     * opportunity.** A `min-content` floor still broke `eu-central-1` at its
+     * hyphens, which is the whole of the reported fault. The cost is that a
+     * column of prose asks for its longest paragraph on one line, so a column
+     * holding sentences rather than values wants `width="minmax(0, 1fr)"` to opt
+     * back into wrapping. A headless consumer owns the overflow either way, that
+     * being paint, and gets the honest track list.
+     */
+    width: string;
+    /**
+     * The key this column reads out of a row.
+     *
+     * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
+     * from an API arrives shaped the way the API shaped it, and requiring a flat
+     * row would push a mapping pass onto every consumer.
+     *
+     * **It is also the sort and filter identity**, which is why sorting is by
+     * field and not by column index: a reordered or hidden column would otherwise
+     * change what `sort="2:asc"` means, and a sort that means something different
+     * after a column moves is a sort a consumer cannot store in a URL.
+     *
+     * Empty on a column that is purely presentational, an actions column say, and
+     * such a column is never sortable however it is marked.
+     */
+    field: string;
+    /**
+     * Whether a reader may reorder the set by this column.
+     *
+     * Ignored without a `field`, and silently: a column with nothing to sort by
+     * has no order to offer, and refusing loudly would mean an actions column
+     * carrying `sortable` breaks a table rather than doing nothing.
+     */
+    sortable: boolean;
+    /**
+     * Which edge the values line up against.
+     *
+     * `end` is what a column of numbers wants, so digits of the same magnitude sit
+     * above each other. Left unset the cell inherits the table's own alignment,
+     * which is `start` for text in either writing direction.
+     */
+    align: 'center' | 'end' | 'start' | '';
+    /**
+     * How to read the cell, where the field alone will not do.
+     *
+     * A property and not an attribute, because it is a function. Set it from a Lit
+     * template with `.cell=${...}`, or assign it in script. A column with neither
+     * this nor a `field` renders an empty cell rather than the whole row stringified,
+     * which is the failure mode of guessing.
+     */
+    cell: CellReader | undefined;
+    /**
+     * How to read the value that gets sorted and filtered, where it is not the cell.
+     *
+     * **The one that is easy to leave out and expensive to add later.** A cell
+     * showing `2.4 MB` sorts as a string unless something says the underlying value
+     * is a number, so `12 kB` sorts above `2.4 MB` and the column looks broken
+     * while every value in it is right. Left unset this is the field, which is the
+     * correct default: the raw value is what an API sorted by.
+     */
+    compare: CellReader | undefined;
+    /**
+     * @internal Read by a parent to identify its children across the light DOM,
+     * which is cheaper than `instanceof` and is why this is public rather than
+     * protected. Not a consumer's to read or set.
+     */
+    readonly isTableColumn = true;
+    /** The track this column contributes, resolved. */
+    get track(): string;
+    /** Whether a reader can actually reorder by this column. */
+    get canSort(): boolean;
+    /**
+     * The value this column shows for a row.
+     *
+     * `cell` first, then the field. An explicit reader that returns `undefined` is
+     * treated as declining rather than as an answer, so a formatter can hand the
+     * default back for the rows it has nothing to say about.
+     */
+    read(row: Readonly<Record<string, unknown>>): unknown;
+    /** The value this column sorts and filters by, which is not always what it shows. */
+    order(row: Readonly<Record<string, unknown>>): unknown;
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-table-column': HelixHeadlessTableColumn;
+    }
+}

package/dist/table/column/table-column.js

@@ -0,0 +1,222 @@
+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 { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * A dot path resolved against a row.
+ *
+ * Written here rather than taken from a library, because the whole of what is
+ * needed is "walk the keys and stop at the first thing that is not an object".
+ * Returns `undefined` for a path that does not resolve, which the table renders
+ * as an empty cell: a missing key is a hole in the data and drawing `undefined`
+ * into a table tells a reader the software is broken rather than the row is.
+ */
+const at = (row, path) => {
+    if (path === '') {
+        return undefined;
+    }
+    if (!path.includes('.')) {
+        return row[path];
+    }
+    let cursor = row;
+    for (const key of path.split('.')) {
+        if (cursor === null || typeof cursor !== 'object') {
+            return undefined;
+        }
+        cursor = cursor[key];
+    }
+    return cursor;
+};
+/**
+ * @summary One column of a table: its heading, how wide it is, and what it reads.
+ *
+ * @description
+ * A column is a heading and a width, declared together, because they are two
+ * facts about one thing and keeping them apart is what went wrong before.
+ *
+ * **This replaces a `columns` string on the table.** That property took a CSS
+ * track list, so the headings lived in a row of cells and the widths lived in
+ * an attribute, and nothing tied the two together: a table with three headings
+ * and a two-track list rendered without complaint. Worse, handing it the
+ * headings instead of a track list produced invalid CSS, which the grid
+ * silently ignored, so the whole table collapsed into one column and every cell
+ * stacked. That happened, in this library's own example, and the failure said
+ * nothing at all.
+ *
+ * Now the column is the source of both. Add one and the table has another
+ * track; remove one and it does not.
+ *
+ * **It is also where every per-column fact goes**, which is the reason
+ * `helix-data-table` needs no column config object. `field` names the key the
+ * cell reads, `sortable` says a reader may reorder by it, `align` says which
+ * edge the values line up against, and `cell` takes a function for anything the
+ * field alone cannot express. The schema is markup and the data is a property:
+ * a schema is small, declarative, and something a reader should be able to see
+ * in the HTML, and data is large and windowed.
+ *
+ * **The same element serves both tables**, the markup one and the data one. It
+ * is identified by a flag rather than by `instanceof`, so a `helix-table-column`
+ * works inside either without the two roots sharing anything else.
+ *
+ * **It generates no box of its own**, the same as a row: the heading is a grid
+ * item of the table, so it lines up with the cells under it rather than sitting
+ * in a wrapper that has to be kept the same width.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Column header, Th
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The heading.
+ *
+ * @csspart column - The heading cell.
+ */
+let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The track this column takes, as CSS.
+         *
+         * A single track value, so anything valid in `grid-template-columns` works:
+         * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
+         * left over equally, as `minmax(max-content, 1fr)`.
+         *
+         * **The floor was `0` and that is what broke a narrow table.** A zero floor
+         * lets a track shrink under its own content, so at 375 the columns were
+         * squeezed to 75px and `eu-central-1` wrapped across lines, which reads as
+         * corrupt data rather than as a table that ran out of room. The zero was
+         * chosen to stop one long value pushing the table past its container, and
+         * that was the right worry with nowhere for the overflow to go.
+         *
+         * Somewhere now exists: `@fusion.dev/helix` scrolls the table's own box. So a
+         * long value pushes past the container as the old comment feared, and the
+         * table scrolls instead of the value being destroyed. Measured at 375: tracks
+         * of 192, 89 and 102 against a 343 box, so the table scrolls 384 and the page
+         * does not move.
+         *
+         * **`max-content` and not `min-content`, because a hyphen is a wrap
+         * opportunity.** A `min-content` floor still broke `eu-central-1` at its
+         * hyphens, which is the whole of the reported fault. The cost is that a
+         * column of prose asks for its longest paragraph on one line, so a column
+         * holding sentences rather than values wants `width="minmax(0, 1fr)"` to opt
+         * back into wrapping. A headless consumer owns the overflow either way, that
+         * being paint, and gets the honest track list.
+         */
+        this.width = '';
+        /**
+         * The key this column reads out of a row.
+         *
+         * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
+         * from an API arrives shaped the way the API shaped it, and requiring a flat
+         * row would push a mapping pass onto every consumer.
+         *
+         * **It is also the sort and filter identity**, which is why sorting is by
+         * field and not by column index: a reordered or hidden column would otherwise
+         * change what `sort="2:asc"` means, and a sort that means something different
+         * after a column moves is a sort a consumer cannot store in a URL.
+         *
+         * Empty on a column that is purely presentational, an actions column say, and
+         * such a column is never sortable however it is marked.
+         */
+        this.field = '';
+        /**
+         * Whether a reader may reorder the set by this column.
+         *
+         * Ignored without a `field`, and silently: a column with nothing to sort by
+         * has no order to offer, and refusing loudly would mean an actions column
+         * carrying `sortable` breaks a table rather than doing nothing.
+         */
+        this.sortable = false;
+        /**
+         * Which edge the values line up against.
+         *
+         * `end` is what a column of numbers wants, so digits of the same magnitude sit
+         * above each other. Left unset the cell inherits the table's own alignment,
+         * which is `start` for text in either writing direction.
+         */
+        this.align = '';
+        /**
+         * How to read the cell, where the field alone will not do.
+         *
+         * A property and not an attribute, because it is a function. Set it from a Lit
+         * template with `.cell=${...}`, or assign it in script. A column with neither
+         * this nor a `field` renders an empty cell rather than the whole row stringified,
+         * which is the failure mode of guessing.
+         */
+        this.cell = undefined;
+        /**
+         * How to read the value that gets sorted and filtered, where it is not the cell.
+         *
+         * **The one that is easy to leave out and expensive to add later.** A cell
+         * showing `2.4 MB` sorts as a string unless something says the underlying value
+         * is a number, so `12 kB` sorts above `2.4 MB` and the column looks broken
+         * while every value in it is right. Left unset this is the field, which is the
+         * correct default: the raw value is what an API sorted by.
+         */
+        this.compare = undefined;
+        /**
+         * @internal Read by a parent to identify its children across the light DOM,
+         * which is cheaper than `instanceof` and is why this is public rather than
+         * protected. Not a consumer's to read or set.
+         */
+        this.isTableColumn = true;
+    }
+    /** The track this column contributes, resolved. */
+    get track() {
+        return this.width || 'minmax(max-content, 1fr)';
+    }
+    /** Whether a reader can actually reorder by this column. */
+    get canSort() {
+        return this.sortable && this.field !== '';
+    }
+    /**
+     * The value this column shows for a row.
+     *
+     * `cell` first, then the field. An explicit reader that returns `undefined` is
+     * treated as declining rather than as an answer, so a formatter can hand the
+     * default back for the rows it has nothing to say about.
+     */
+    read(row) {
+        const rendered = this.cell?.(row);
+        return rendered === undefined ? at(row, this.field) : rendered;
+    }
+    /** The value this column sorts and filters by, which is not always what it shows. */
+    order(row) {
+        const compared = this.compare?.(row);
+        return compared === undefined ? at(row, this.field) : compared;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { role: 'columnheader' });
+    }
+    render() {
+        return html `<span part="column"><slot></slot></span>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessTableColumn.prototype, "width", void 0);
+__decorate([
+    property()
+], HelixHeadlessTableColumn.prototype, "field", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTableColumn.prototype, "sortable", void 0);
+__decorate([
+    property()
+], HelixHeadlessTableColumn.prototype, "align", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTableColumn.prototype, "cell", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTableColumn.prototype, "compare", void 0);
+HelixHeadlessTableColumn = __decorate([
+    customElement('helix-headless-table-column')
+], HelixHeadlessTableColumn);
+export { HelixHeadlessTableColumn };

package/dist/table/index.d.ts

@@ -0,0 +1,4 @@
+export * from './cell/table-cell.js';
+export * from './column/table-column.js';
+export * from './root/table-root.js';
+export * from './row/table-row.js';

package/dist/table/index.js

@@ -0,0 +1,4 @@
+export * from './cell/table-cell.js';
+export * from './column/table-column.js';
+export * from './root/table-root.js';
+export * from './row/table-row.js';

package/dist/table/root/table-root.d.ts

@@ -0,0 +1,98 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import type { HelixHeadlessTableColumn } from '../column/table-column.js';
+declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
+/**
+ * @summary Tabular data laid out on a grid.
+ *
+ * @description
+ * A grid rather than a `<table>`, so every column lines up across rows while
+ * each row stays a real element that can be styled, hidden, or made
+ * interactive. Table layout gives column alignment and takes away almost
+ * everything else; grid gives both.
+ *
+ * The cost is that the roles have to be declared, since a grid of divs is not a
+ * table to anyone reading it. `table`, `row`, `cell`, and `columnheader` are
+ * all set explicitly, and rows are `display: contents` so their cells become
+ * items of the one grid that does the aligning.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category data
+ * @aliases DataTable, Grid table
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The table's rows.
+ *
+ * @csspart empty - Shown when there are no rows to show.
+ * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
+ * @csspart loading - Shown while the rows are still on their way.
+ * @csspart table - The grid.
+ *
+ * @cssproperty --table-columns - Track list for the columns.
+ * @cssproperty --table-template - The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set.
+ */
+export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
+    /**
+     * Column track list, as CSS. Deprecated: declare columns instead.
+     *
+     * Kept for a table that has no `helix-table-column` children, and ignored the
+     * moment it has one. A raw track list is the right shape for the value and
+     * the wrong place for it: the headings and the widths were two halves of one
+     * fact held in two places, and nothing checked that they agreed. Worse, the
+     * value is CSS, so handing it headings by mistake produced an invalid track
+     * list, which a grid ignores in silence: the table collapsed to one column
+     * and said nothing. Columns carry both halves now.
+     */
+    columns: string;
+    /**
+     * Accessible name for the table.
+     */
+    label: string;
+    /** The columns declared as children, in the order they are written. */
+    get tableColumns(): HelixHeadlessTableColumn[];
+    /**
+     * The track list, from the columns if there are any.
+     *
+     * Read from the DOM rather than kept, so adding or removing a column needs
+     * nothing else to be told. Falls back to the `columns` string for a table
+     * written before columns existed, and to a single track for one that declares
+     * neither.
+     */
+    private get template();
+    private readonly handleSlotChange;
+    /**
+     * Nothing is assigned by name, so the columns can be put in a row.
+     *
+     * `role="columnheader"` was landing directly under `role="table"` with no
+     * owning `row`, which is invalid: the table pattern is `table > row >
+     * columnheader`, and a header cell with no row is a cell belonging to
+     * nothing. The columns are ordinary children the consumer writes with no
+     * `slot`, so the only way to put a wrapper around them without changing what
+     * a consumer writes is to assign them here.
+     *
+     * Manual rather than a `slot` attribute this element would set on the
+     * consumer's own markup, which is the change a React consumer's hydration
+     * reports and does not patch up. Assignment writes nothing at all.
+     *
+     * Safe against the server because this repo ships no declarative shadow DOM:
+     * the shadow root exists only after upgrade, and the assignment below runs in
+     * that same update. There is no window in which the shadow is present and the
+     * assignment has not happened.
+     */
+    static shadowRootOptions: ShadowRootInit;
+    private assign;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-table': HelixHeadlessTable;
+    }
+}
+export {};

package/dist/table/root/table-root.js

@@ -0,0 +1,161 @@
+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 { customElement, HelixElement, MixinCollection } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary Tabular data laid out on a grid.
+ *
+ * @description
+ * A grid rather than a `<table>`, so every column lines up across rows while
+ * each row stays a real element that can be styled, hidden, or made
+ * interactive. Table layout gives column alignment and takes away almost
+ * everything else; grid gives both.
+ *
+ * The cost is that the roles have to be declared, since a grid of divs is not a
+ * table to anyone reading it. `table`, `row`, `cell`, and `columnheader` are
+ * all set explicitly, and rows are `display: contents` so their cells become
+ * items of the one grid that does the aligning.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category data
+ * @aliases DataTable, Grid table
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The table's rows.
+ *
+ * @csspart empty - Shown when there are no rows to show.
+ * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
+ * @csspart loading - Shown while the rows are still on their way.
+ * @csspart table - The grid.
+ *
+ * @cssproperty --table-columns - Track list for the columns.
+ * @cssproperty --table-template - The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set.
+ */
+let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Column track list, as CSS. Deprecated: declare columns instead.
+         *
+         * Kept for a table that has no `helix-table-column` children, and ignored the
+         * moment it has one. A raw track list is the right shape for the value and
+         * the wrong place for it: the headings and the widths were two halves of one
+         * fact held in two places, and nothing checked that they agreed. Worse, the
+         * value is CSS, so handing it headings by mistake produced an invalid track
+         * list, which a grid ignores in silence: the table collapsed to one column
+         * and said nothing. Columns carry both halves now.
+         */
+        this.columns = '';
+        /**
+         * Accessible name for the table.
+         */
+        this.label = '';
+        /* Columns arrive from the light DOM, which changes no property here, so
+           nothing would schedule the render that reads them. */
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    /** The columns declared as children, in the order they are written. */
+    get tableColumns() {
+        /* `?? []` is the server. Lit's element shim carries attributes and not a
+           tree, so `children` is undefined there, and this getter is reached from
+           `template`, which is read during `render`: spreading it threw and the
+           whole SSR suite died on an unhandled error. The same fault the menu item
+           had, in code written after it was fixed there, which is the argument for
+           the SSR specs existing at all. */
+        return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
+    }
+    /**
+     * The track list, from the columns if there are any.
+     *
+     * Read from the DOM rather than kept, so adding or removing a column needs
+     * nothing else to be told. Falls back to the `columns` string for a table
+     * written before columns existed, and to a single track for one that declares
+     * neither.
+     */
+    get template() {
+        const declared = this.tableColumns;
+        if (declared.length > 0) {
+            return declared.map((column) => column.track).join(' ');
+        }
+        return this.columns;
+    }
+    /**
+     * Nothing is assigned by name, so the columns can be put in a row.
+     *
+     * `role="columnheader"` was landing directly under `role="table"` with no
+     * owning `row`, which is invalid: the table pattern is `table > row >
+     * columnheader`, and a header cell with no row is a cell belonging to
+     * nothing. The columns are ordinary children the consumer writes with no
+     * `slot`, so the only way to put a wrapper around them without changing what
+     * a consumer writes is to assign them here.
+     *
+     * Manual rather than a `slot` attribute this element would set on the
+     * consumer's own markup, which is the change a React consumer's hydration
+     * reports and does not patch up. Assignment writes nothing at all.
+     *
+     * Safe against the server because this repo ships no declarative shadow DOM:
+     * the shadow root exists only after upgrade, and the assignment below runs in
+     * that same update. There is no window in which the shadow is present and the
+     * assignment has not happened.
+     */
+    static { this.shadowRootOptions = {
+        ...HelixElement.shadowRootOptions,
+        slotAssignment: 'manual',
+    }; }
+    assign() {
+        const head = this.renderRoot?.querySelector('slot[name="columns"]');
+        const body = this.renderRoot?.querySelector('slot:not([name])');
+        if (!head || !body) {
+            return;
+        }
+        const columns = new Set(this.tableColumns);
+        head.assign(...this.tableColumns);
+        body.assign(...[...this.children].filter((child) => !columns.has(child)));
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.assign();
+    }
+    render() {
+        const template = this.template;
+        return html `<div
+      part="table"
+      role="table"
+      aria-busy=${this.loading ? 'true' : nothing}
+      aria-label=${this.label || 'Table'}
+      style=${template ? `--table-template: ${template}` : ''}
+    >
+      <div part="head" role="row"><slot name="columns"></slot></div>
+      <slot
+        @slotchange=${(event) => {
+            this.countRows(event);
+            this.handleSlotChange();
+        }}
+      ></slot>
+      ${this.renderStatus(this.hasRows)}
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessTable.prototype, "columns", void 0);
+__decorate([
+    property()
+], HelixHeadlessTable.prototype, "label", void 0);
+HelixHeadlessTable = __decorate([
+    customElement('helix-headless-table')
+], HelixHeadlessTable);
+export { HelixHeadlessTable };