@fusion.dev/helix-headless 0.31.0 → 0.33.0

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -46,6 +46,17 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * a `<span>` placed by percentage over it, which is how `LineChart` draws its
  * termini and for the same reason.
  *
+ * **Left to right on every page, the one chart here that is.** A bar or a line
+ * chart's across is the order its readings are named in, which follows the
+ * line of text and turns with it. Here it is a measure, and a measure has a
+ * direction of its own: more is to the right in every script, as a number line
+ * is. So the plot, its axes and the names at their ends sit in a `plane` part
+ * that carries `dir="ltr"`, which holds the y axis on the left and the points,
+ * rules, ticks, pointer and tooltip mark where a left-to-right page puts them,
+ * with no stylesheet asked to know. The names carry `dir="auto"`, so one written
+ * in Arabic or Hebrew still reads its own way; the summary is outside the plane
+ * and the bubble is told the page's direction, both being words.
+ *
  * @since 0.1.0
  * @status experimental
  * @category charts
@@ -54,6 +65,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  *
  * @csspart gridline - One rule across the plot, under `gridlines`.
  * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart plane - The plot, both axes and their names, left to right on every page. The grid they are laid out in.
  * @csspart plot - The drawing.
  * @csspart point - One row, as a point.
  * @csspart point-active - A point of the row a pointer is asking about, beside `point`.
@@ -62,9 +74,17 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The row's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  * @csspart x-axis - The levels measured across, under the plot.
  * @csspart x-name - What is measured across.

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -124,20 +124,24 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const field = this.field;
         this.drawn = field.points;
         if (field.points.length === 0) {
-            return html `<div id="helix-chart-plot" part="plot"></div>`;
+            return html `<div dir="ltr" part="plane">
+        <div id="helix-chart-plot" part="plot"></div>
+      </div>`;
         }
         const format = formatNumbers('');
         const along = linear(field.x, [0, WIDTH]);
         const up = linear(field.y, [HEIGHT, 0]);
-        return html `${this.renderPlot(field, along, up)}
-      <div aria-hidden="true" part="x-axis">
-        ${ticks(field.x).map((level) => html `<span part="x-tick" style="--chart-tick: ${along(level)}%">${format(level)}</span>`)}
+        return html `<div dir="ltr" part="plane">
+        ${this.renderPlot(field, along, up)}
+        <div aria-hidden="true" part="x-axis">
+          ${ticks(field.x).map((level) => html `<span part="x-tick" style="--chart-tick: ${along(level)}%">${format(level)}</span>`)}
+        </div>
+        <div aria-hidden="true" part="y-axis">
+          ${ticks(field.y).map((level) => html `<span part="y-tick" style="--chart-tick: ${up(level)}%">${format(level)}</span>`)}
+        </div>
+        <span aria-hidden="true" dir="auto" part="x-name">${field.xName}</span>
+        <span aria-hidden="true" dir="auto" part="y-name">${field.yNames.join(', ')}</span>
       </div>
-      <div aria-hidden="true" part="y-axis">
-        ${ticks(field.y).map((level) => html `<span part="y-tick" style="--chart-tick: ${up(level)}%">${format(level)}</span>`)}
-      </div>
-      <span aria-hidden="true" part="x-name">${field.xName}</span>
-      <span aria-hidden="true" part="y-name">${field.yNames.join(', ')}</span>
       ${this.renderSummary(field)}`;
     }
     renderPlot(field, along, up) {
@@ -184,6 +188,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             return drawTooltip(this.sourceRows, -1, this.tag('tooltip'));
         }
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
+            dir: getComputedStyle(this).direction === 'rtl' ? 'rtl' : 'ltr',
+            fixed: true,
             placement: 'top',
             x: `${point.x}%`,
             y: `${point.y}%`,

package/dist/scroll-area/root/scroll-area-root.js

@@ -27,10 +27,11 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
             if (box.scrollTop + box.clientHeight < box.scrollHeight - slack) {
                 found.push('block-end');
             }
-            if (box.scrollLeft > slack) {
+            const along = Math.abs(box.scrollLeft);
+            if (along > slack) {
                 found.push('inline-start');
             }
-            if (box.scrollLeft + box.clientWidth < box.scrollWidth - slack) {
+            if (along + box.clientWidth < box.scrollWidth - slack) {
                 found.push('inline-end');
             }
             this.more = found;

package/dist/sparkline/root/sparkline-root.js

@@ -60,6 +60,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         return html `<svg
         aria-hidden=${this.label === '' ? 'true' : nothing}
         aria-label=${this.label === '' ? nothing : this.label}
+        data-mirror
         part="svg"
         preserveAspectRatio="none"
         role=${this.label === '' ? nothing : 'img'}

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

@@ -332,6 +332,17 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * only place in a splitter where a second axis means anything.
      */
     private readonly handleKeydown;
+    /**
+     * Which way a key moves the divider, as a sign on `position`, or `0` for a key
+     * that is not along its axis.
+     *
+     * **The arrow says where the divider goes on screen**, the way the window
+     * splitter pattern words it: left moves a side-by-side divider to the left.
+     * `position` is the start pane's share, and the start pane is on the right of
+     * a right-to-left page, so there the left arrow grows it. It used to shrink
+     * it on every page, which on a right-to-left one sent the divider right.
+     */
+    private travel;
     /** Puts the divider back where the markup put it. */
     private reset;
     private readonly handleDoubleClick;

package/dist/splitter/root/splitter-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessSplitter_1;
-import { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
+import { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, inlineStep, requestChange, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const STACK_BELOW = 512;
@@ -68,14 +68,10 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             this.settle(this.reached);
         };
         this.handleKeydown = (event) => {
-            const back = this.vertical ? 'ArrowUp' : 'ArrowLeft';
-            const forward = this.vertical ? 'ArrowDown' : 'ArrowRight';
+            const toward = this.travel(event.key);
             let next;
-            if (event.key === back) {
-                next = this.position - this.step;
-            }
-            else if (event.key === forward) {
-                next = this.position + this.step;
+            if (toward !== 0) {
+                next = this.position + toward * this.step;
             }
             else if (event.key === 'Home') {
                 next = this.minPercent;
@@ -171,15 +167,13 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
                 return;
             }
             const inner = crossing.by;
-            const mineBack = this.vertical ? 'ArrowUp' : 'ArrowLeft';
-            const mineForward = this.vertical ? 'ArrowDown' : 'ArrowRight';
-            const theirsBack = inner.vertical ? 'ArrowUp' : 'ArrowLeft';
-            const theirsForward = inner.vertical ? 'ArrowDown' : 'ArrowRight';
-            if (event.key === mineBack || event.key === mineForward) {
-                this.moveTo(this.position + (event.key === mineBack ? -this.step : this.step), true);
+            const mine = this.travel(event.key);
+            const theirs = inner.travel(event.key);
+            if (mine !== 0) {
+                this.moveTo(this.position + mine * this.step, true);
             }
-            else if (event.key === theirsBack || event.key === theirsForward) {
-                inner.moveTo(inner.position + (event.key === theirsBack ? -inner.step : inner.step), true);
+            else if (theirs !== 0) {
+                inner.moveTo(inner.position + theirs * inner.step, true);
             }
             else {
                 return;
@@ -332,6 +326,12 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             });
         }
     }
+    travel(key) {
+        if (!this.vertical) {
+            return inlineStep(this, key);
+        }
+        return key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : 0;
+    }
     reset() {
         const home = this.clamp(this.defaultPosition);
         this.move(home);

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

@@ -18,6 +18,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://helix.fusion.dev/components/table
  *
  * @slot - The cell's content.
+ *
+ * @cssproperty --table-cell-align - The edge the column this cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the table around it, since the cell is the consumer's markup and nothing is written onto it; read by the sheet that draws the cell, where `justify-content` and `text-align` both take it as it comes and both follow the writing direction.
  */
 export declare class HelixHeadlessTableCell extends HelixElement {
     /**

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

@@ -47,6 +47,15 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
  * 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.
  *
+ * **`hidden` takes the column out of the grid**, its heading and its track
+ * both, so the columns after it keep their own widths and every row keeps its
+ * cells under their headings. `hidden="until-found"` keeps its track, the
+ * heading being left drawn, as every Helix element leaves one with that value.
+ * `helix-data-table` draws the cells, so it leaves out the ones under a hidden
+ * column. A `helix-table`'s cells are markup the consumer wrote, so hide them
+ * with the column, as removing a column means removing its cells: a row with a
+ * cell more than the table has tracks wraps into the next.
+ *
  * **A heading that does something holds a control that does it.** The host is
  * the column header, and a header is not focusable, so a sortable heading is a
  * `<button>` inside it: the pattern for a sortable table, and the only way a
@@ -79,9 +88,23 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      *
      * `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.
+     * which is `start` for text in either writing direction. `helix-data-table`
+     * aligns the cells it draws. A `helix-table`'s cells are markup the consumer
+     * wrote, so the table writes nothing onto them: it publishes the edge to each
+     * cell under this column as `--table-cell-align`, which `@fusion.dev/helix`
+     * reads. The heading is this element's own, and `@fusion.dev/helix` sets it to
+     * the same edge in either table. `end` is the inline end, so in a
+     * right-to-left table it is the left.
+     *
+     * **Reflected, because the heading is drawn by a stylesheet and has no other
+     * way to learn it.** Set as a property, which is how React sets it, an
+     * unreflected `align` left no attribute to select on, so the heading stayed at
+     * the start over a column of digits set to the end. It is the author's
+     * declaration and nothing moves it afterwards, so an attribute cannot come to
+     * disagree with the element, which is the reason `open` records a custom
+     * state instead. No default, so an unset column writes nothing onto its host.
      */
-    align: 'center' | 'end' | 'start' | '';
+    align?: 'center' | 'end' | 'start';
     /**
      * How to read the cell, where the field alone will not do.
      *
@@ -132,14 +155,24 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * 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.
+     *
+     * **Reflected, because a stylesheet selects on it.** `@fusion.dev/helix`
+     * gives a data table's sortable headings a pointer through
+     * `::slotted(helix-table-column[sortable])`, and set as a property, which is
+     * how React sets it, an unreflected `sortable` left no attribute to match.
+     * `false` reflects as no attribute at all, so an unset column writes nothing
+     * onto its host.
      */
     sortable: boolean;
     /**
      * 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)`.
+     * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
+     * in its place in a `helix-table`'s `columns`, where that table sets one, and
+     * otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
+     * Set here, it wins over that list, which is what lets a reader resize a
+     * column in a table that set one.
      *
      * **The floor is `max-content`, never `0` and never `min-content`.** A zero
      * floor lets a track shrink under its own content: at 375 the columns squeeze
@@ -183,6 +216,8 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     private resizing;
     /** Watches the heading's width, which changes with the table as well as with a drag. */
     private watcher;
+    /** Watches `hidden`, which is the platform's attribute and no property of this element's. */
+    private hiding;
     /**
      * The narrowest a reader can drag a column, in pixels.
      *
@@ -195,6 +230,13 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     static readonly STEP = 16;
     /** The track this column contributes, resolved. */
     get track(): string;
+    /**
+     * @internal Whether this column takes a track, read by the table that holds
+     * it. Not a consumer's to read: `hidden` is the setting. Read off the
+     * attribute the way `HelixElement` hides a host, so the table drops a track
+     * exactly when the heading stops being drawn.
+     */
+    get shown(): boolean;
     /** Whether a reader can actually reorder by this column. */
     get canSort(): boolean;
     /**
@@ -214,6 +256,9 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     private observeHeading;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Asks whatever holds this column to render, since it reads the column when it does. */
+    private tellHolder;
     /**
      * Asks for a width, in pixels, no narrower than a column can be read at.
      *
@@ -221,7 +266,7 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * applied only where nobody refused it.
      */
     private resizeTo;
-    /** Which way a drag or an arrow key grows the column, in this writing direction. */
+    /** Which way a drag grows the column, in this writing direction. */
     private get forward();
     private readonly handleResizeStart;
     private readonly handleResizeMove;

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessTableColumn_1;
-import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, requestChange, } from '@fusion.dev/helix-core';
 import { dotsThreeVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -29,7 +29,6 @@ export const at = (row, path) => {
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);
-        this.align = '';
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
@@ -63,7 +62,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         };
         this.handleResizeKey = (event) => {
             const step = HelixHeadlessTableColumn_1.STEP * (event.shiftKey ? 4 : 1);
-            const grow = event.key === 'ArrowRight' ? this.forward : event.key === 'ArrowLeft' ? -this.forward : 0;
+            const grow = inlineStep(this, event.key);
             if (grow !== 0) {
                 event.preventDefault();
                 this.resizeTo(this.drawn + grow * step);
@@ -80,6 +79,10 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     get track() {
         return this.width || 'minmax(max-content, 1fr)';
     }
+    get shown() {
+        const hidden = this.getAttribute('hidden');
+        return hidden === null || hidden === 'until-found';
+    }
     get canSort() {
         return this.sortable && this.field !== '';
     }
@@ -109,6 +112,10 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             });
             this.observeHeading();
         }
+        if (typeof MutationObserver !== 'undefined') {
+            this.hiding = new MutationObserver(() => this.tellHolder());
+            this.hiding.observe(this, { attributeFilter: ['hidden'] });
+        }
     }
     observeHeading() {
         const heading = this.partNamed('column');
@@ -119,11 +126,23 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     disconnectedCallback() {
         super.disconnectedCallback();
         this.watcher?.disconnect();
+        this.hiding?.disconnect();
+        this.hiding = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.observeHeading();
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('align') || changed.has('width')) {
+            this.tellHolder();
+        }
+    }
+    tellHolder() {
+        ;
+        this.parentElement?.requestUpdate?.();
+    }
     resizeTo(px) {
         const next = `${Math.max(HelixHeadlessTableColumn_1.NARROWEST, Math.round(px))}px`;
         if (next === this.width) {
@@ -172,7 +191,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
 };
 __decorate([
-    property()
+    property({ reflect: true })
 ], HelixHeadlessTableColumn.prototype, "align", void 0);
 __decorate([
     property({ attribute: false })
@@ -187,7 +206,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "resizable", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
 __decorate([
     property()

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

@@ -39,15 +39,24 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
-     * Column track list, as CSS. Deprecated: declare columns instead.
+     * The column widths as one track list, written once on the table.
      *
-     * 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.
+     * With `helix-table-column` children, each track sizes the column in its
+     * place, a hidden column counted, so hiding one takes its track with it and
+     * the rest keep theirs. The columns decide how many tracks there are and this
+     * list only how wide: a track past the last column is dropped, and a column
+     * past the last track shares what is left. With no columns declared it is
+     * the whole track list. Tracks count as the grid counts them, so
+     * `minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid
+     * would refuse leaves its column at the default rather than taking the table
+     * down to one column.
+     *
+     * **A column's own `width` wins over its track here.** The width is written
+     * on the column it sizes, which is the more particular statement, and it is
+     * where a resize lands: a reader dragging a column's edge writes `width`, so
+     * were this list to win, the drag would move the separator and leave the
+     * track where the list put it. This is the table's default for its columns,
+     * and each column may say otherwise.
      */
     columns: string;
     /**
@@ -60,12 +69,29 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * 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.
+     * nothing else to be told. A hidden column takes no track: left in, the
+     * header row had a heading fewer than the grid had tracks, the first cell
+     * filled the gap, and every row after it began a column late. Falls back to
+     * the `columns` string for a table that declares no columns, and to a single
+     * track for one that declares neither.
      */
     private get template();
     private readonly handleSlotChange;
+    /**
+     * Watches the light DOM for rows and columns arriving, leaving and moving.
+     *
+     * **A manually assigned slot does not announce them**, the same gap `Chat`
+     * and `Carousel` watch for. Under `slotAssignment: 'manual'` only `assign`
+     * changes an assignment, so a row appended after the first render reached no
+     * slot and drew nowhere, and a column moved to another place lost its
+     * assignment on the way out and never got it back: measured in Chromium, both
+     * `assignedSlot` null a render later. A table whose definition loaded before
+     * its markup was parsed drew no columns at all, having rendered before any
+     * arrived.
+     */
+    private watcher;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Nothing is assigned by name, so the columns can be put in a row.
      *
@@ -88,6 +114,45 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /** The rows: every child that is not a column, which is what the body slot is assigned. */
     protected get slotted(): Element[];
     private assign;
+    /**
+     * The rules handing each column's `align` to the cells under it. One sheet for
+     * every row this table holds, rewritten in place, so a column changing its
+     * edge reaches every row in one write.
+     */
+    private alignment;
+    /** What `alignment` was last written with, so a render that changed no edge writes nothing. */
+    private aligned;
+    /**
+     * Tells every row which edge each of its cells lines up against.
+     *
+     * **A rule in each row's shadow root, keyed on position and written by this
+     * table.** The cells are the consumer's markup, so nothing may be written onto
+     * them, and each of the other ways fails somewhere a table goes:
+     *
+     * - This element's own sheet cannot reach them. `::slotted()` matches what is
+     *   assigned here, which is the rows, and never a row's children.
+     * - A property per column published here, `--table-align-2: end`, still needs
+     *   a rule that knows which column a cell is in, and a fixed ladder of
+     *   `:nth-child` rules in a static sheet is a ceiling on the column count.
+     * - A custom state set on each cell by script is right only until a cell
+     *   moves, and a cell moving inside a row changes no child list this element
+     *   watches.
+     *
+     * `:nth-child` is matched by the browser against wherever a cell is now, so a
+     * cell that moves takes its new column's edge with no script at all; a column
+     * that moves rewrites the rules on the render the watcher asks for; and a
+     * column hidden along with its cells keeps its place in both counts, since
+     * `:nth-child` counts a hidden sibling the way `tableColumns` counts a hidden
+     * column. The row is where they go because only the shadow root holding a
+     * slot can style what is assigned to it.
+     *
+     * **A custom property and nothing else**, which is how this tier publishes a
+     * fact: the edge is the author's declaration, and what lining up means, a
+     * `justify-content` or a `text-align`, belongs to whoever draws the cell.
+     * `initial` on every cell first, so a table nested in an aligned cell does not
+     * take the outer column's edge for columns of its own that set none.
+     */
+    private alignCells;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -7,6 +7,56 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, MixinCollection } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+const EDGES = new Set(['center', 'end', 'start']);
+const tracksOf = (list, wanted) => {
+    const words = [];
+    let depth = 0;
+    let word = '';
+    for (const char of list.trim()) {
+        if (char === '(' || char === '[') {
+            depth += 1;
+        }
+        else if (char === ')' || char === ']') {
+            depth -= 1;
+        }
+        if (depth === 0 && /\s/.test(char)) {
+            if (word) {
+                words.push(word);
+            }
+            word = '';
+        }
+        else {
+            word += char;
+        }
+    }
+    if (word) {
+        words.push(word);
+    }
+    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
+    const tracks = [];
+    let names = '';
+    for (const one of words) {
+        if (tracks.length >= wanted) {
+            break;
+        }
+        if (one.startsWith('[')) {
+            names += `${one} `;
+            continue;
+        }
+        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
+        if (repeat) {
+            const inner = tracksOf(repeat[2] ?? '', wanted);
+            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
+                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
+            }
+        }
+        else if (!/^repeat\(/i.test(one)) {
+            tracks.push(valid(names + one) ? names + one : '');
+        }
+        names = '';
+    }
+    return tracks.slice(0, wanted);
+};
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -15,16 +65,32 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
+        this.watcher = undefined;
+        this.alignment = undefined;
+        this.aligned = '';
     }
     get tableColumns() {
         return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     get template() {
         const declared = this.tableColumns;
-        if (declared.length > 0) {
-            return declared.map((column) => column.track).join(' ');
+        if (declared.length === 0) {
+            return this.columns;
         }
-        return this.columns;
+        const listed = tracksOf(this.columns, declared.length);
+        return declared
+            .flatMap((column, index) => column.shown ? [column.width ? column.track : listed[index] || column.track] : [])
+            .join(' ');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.watcher = new MutationObserver(() => this.requestUpdate());
+        this.watcher.observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+        this.watcher = undefined;
     }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
@@ -49,9 +115,30 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         head.assign(...this.tableColumns);
         body.assign(...this.slotted);
     }
+    alignCells() {
+        if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
+            return;
+        }
+        const rules = this.tableColumns.flatMap((column, index) => column.align && EDGES.has(column.align)
+            ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${column.align}; }`]
+            : []);
+        const text = ['::slotted(*) { --table-cell-align: initial; }', ...rules].join('\n');
+        this.alignment ??= new CSSStyleSheet();
+        if (text !== this.aligned) {
+            this.alignment.replaceSync(text);
+            this.aligned = text;
+        }
+        for (const row of this.slotted) {
+            if ('isTableRow' in row) {
+                ;
+                row.alignCells(this.alignment);
+            }
+        }
+    }
     updated(changed) {
         super.updated(changed);
         this.assign();
+        this.alignCells();
     }
     render() {
         const template = this.template;