@fusion.dev/helix-headless 0.32.0 → 0.33.1

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
@@ -80,9 +89,12 @@ 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. `helix-data-table`
-     * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
-     * wrote, and align as the consumer styles them. The heading is this element's
-     * own, and `@fusion.dev/helix` sets it to the same edge in either 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
@@ -143,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
@@ -194,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.
      *
@@ -206,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;
     /**
@@ -225,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.
      *
@@ -232,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';
@@ -62,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);
@@ -79,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 !== '';
     }
@@ -108,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');
@@ -118,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) {
@@ -186,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;

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

@@ -17,6 +17,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The row's cells.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
+    /**
+     * @internal Read by the table to find its rows among its children, the way it
+     * finds its columns. Not a consumer's to read or set.
+     */
+    readonly isTableRow = true;
+    /** The table's rules this row holds, so the next ones replace them rather than pile up. */
+    private columnRules;
+    /**
+     * @internal Takes the rules the table wrote to line each cell up under its
+     * heading, called by that table. Not a consumer's to call: the rules are the
+     * table's, and they say which column a cell is in by counting, which only the
+     * table that holds the columns can do.
+     */
+    alignCells(rules: CSSStyleSheet): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -7,6 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.isTableRow = true;
+        this.columnRules = undefined;
+    }
+    alignCells(rules) {
+        const root = this.renderRoot;
+        if (rules === this.columnRules || !(root instanceof ShadowRoot)) {
+            return;
+        }
+        root.adoptedStyleSheets = [
+            ...root.adoptedStyleSheets.filter((sheet) => sheet !== this.columnRules),
+            rules,
+        ];
+        this.columnRules = rules;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });

package/dist/toolbar/root/toolbar-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, inlineStep } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
@@ -41,21 +41,22 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            const forward = this.axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-            const back = this.axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
             if (!KEYS.has(event.key) || claimed(event)) {
                 return;
             }
+            const along = inlineStep(this, event.key);
+            const forward = this.axis === 'horizontal' ? along === 1 : event.key === 'ArrowDown';
+            const back = this.axis === 'horizontal' ? along === -1 : event.key === 'ArrowUp';
             const controls = this.controls;
             const current = controls.findIndex((entry) => entry.contains(event.target));
             if (current === -1) {
                 return;
             }
             let next = current;
-            if (event.key === forward) {
+            if (forward) {
                 next = (current + 1) % controls.length;
             }
-            else if (event.key === back) {
+            else if (back) {
                 next = (current - 1 + controls.length) % controls.length;
             }
             else if (event.key === 'Home') {

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

@@ -52,9 +52,21 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
  *
  * @csspart arrow - The point, resting against the trigger.
+ * @csspart arrow-bottom - The point while the bubble is below its trigger, so on the bubble's top edge, beside `arrow`.
+ * @csspart arrow-left - The point while the bubble is left of its trigger, so on the bubble's right edge, beside `arrow`.
+ * @csspart arrow-right - The point while the bubble is right of its trigger, so on the bubble's left edge, beside `arrow`.
+ * @csspart arrow-top - The point while the bubble is above its trigger, so on the bubble's bottom edge, beside `arrow`.
  * @csspart tooltip - The bubble.
+ * @csspart tooltip-bottom - The bubble while it is below its trigger, beside `tooltip`.
+ * @csspart tooltip-left - The bubble while it is left of its trigger, beside `tooltip`.
+ * @csspart tooltip-right - The bubble while it is right of its trigger, beside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above its trigger, beside `tooltip`.
  *
  * @cssstate open - While the tooltip shows.
+ * @cssstate placed-bottom - While the bubble sits below its trigger.
+ * @cssstate placed-left - While the bubble sits to the left of its trigger.
+ * @cssstate placed-right - While the bubble sits to the right of its trigger.
+ * @cssstate placed-top - While the bubble sits above its trigger.
  */
 export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
     /**
@@ -150,6 +162,14 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * `FloatingController` for what happens if it is applied to the rest.
      */
     within: string;
+    /**
+     * The side of its trigger the bubble last landed on, which is not always
+     * `placement`: a bubble with no room there is moved.
+     *
+     * Undefined until the first placement, which the server never makes, so a
+     * part name it adds is never markup the server did not send.
+     */
+    private side?;
     private timer;
     /**
      * What is currently keeping the bubble up.