@fusion.dev/helix-headless 0.150.0 → 0.152.0

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

@@ -11,6 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
 const channel = new WeakMap();
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     static { HelixHeadlessSplitter_1 = this; }
     static { this.words = 'helix-splitter'; }
@@ -69,6 +70,41 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.reached = undefined;
         this.requestUpdate('position', previous);
     }
+    watchLength() {
+        if (!this.primary || typeof ResizeObserver === 'undefined') {
+            this.lengths?.disconnect();
+            this.lengths = undefined;
+            this.length = 0;
+            return;
+        }
+        if (this.lengths) {
+            return;
+        }
+        this.lengths = new ResizeObserver(([entry]) => {
+            const box = entry?.borderBoxSize?.[0];
+            const length = (this.vertical
+                ? (box?.blockSize ?? entry?.contentRect.height)
+                : (box?.inlineSize ?? entry?.contentRect.width)) ?? 0;
+            this.holdPrimary(length);
+        });
+        this.lengths.observe(this);
+    }
+    holdPrimary(length) {
+        const before = this.length;
+        this.length = length;
+        if (!this.primary || before <= 0 || length <= 0 || length === before) {
+            return;
+        }
+        if (this.collapsed || this.dragging) {
+            return;
+        }
+        const position = this.position;
+        const kept = ((this.primary === 'start' ? position : 100 - position) / 100) * before;
+        const share = (kept / length) * 100;
+        const previous = position;
+        this.positionState = this.clamp(this.primary === 'start' ? share : 100 - share);
+        this.requestUpdate('position', previous);
+    }
     get showing() {
         return this.reached === undefined ? this.position : this.clamp(this.reached);
     }
@@ -225,6 +261,34 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         });
         this.max = 100;
         this.min = 0;
+        this.length = 0;
+        this.handlePaneKeys = (event) => {
+            if (event.key !== 'F6' ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.defaultPrevented) {
+                return;
+            }
+            const path = event.composedPath();
+            const pane = (name) => this.renderRoot
+                ?.querySelector(`slot[name="${name}"]`)
+                ?.assignedElements({ flatten: true }) ?? [];
+            const inner = path.find((node) => node instanceof HelixHeadlessSplitter_1);
+            if (inner !== this) {
+                return;
+            }
+            const fromStart = pane('start').some((one) => path.includes(one));
+            const to = pane(fromStart ? 'end' : 'start');
+            const first = to.flatMap((one) => [
+                ...(one instanceof HTMLElement && one.matches(FOCUSABLE) ? [one] : []),
+                ...one.querySelectorAll(FOCUSABLE),
+            ])[0];
+            if (first) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
         this.snap = '';
         this.snapThreshold = 12;
         this.step = 2;
@@ -435,13 +499,19 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         super.connectedCallback();
         if (this.hasUpdated) {
             this.watchWidth();
+            this.watchLength();
             this.findOuter();
         }
+        this.addEventListener('keydown', this.handlePaneKeys);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handlePaneKeys);
         this.sizes?.disconnect();
         this.sizes = undefined;
+        this.lengths?.disconnect();
+        this.lengths = undefined;
+        this.length = 0;
         if (this.outer) {
             channel.get(this.outer)?.uncross(this);
         }
@@ -451,6 +521,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watchWidth();
+        this.watchLength();
         this.findOuter();
         this.finishHydration();
     }
@@ -459,6 +530,9 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         if (changed.has('orientation')) {
             this.watchWidth();
         }
+        if (changed.has('primary')) {
+            this.watchLength();
+        }
         if (this.collapsed) {
             this.dataset.collapsed = this.collapsed;
         }
@@ -578,6 +652,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "position", null);
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "primary", void 0);
 __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "snap", void 0);

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

@@ -174,6 +174,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         const named = { name, named: name ? 'yes' : 'no' };
         const grid = this.gridCell;
         const control = grid ? '-1' : nothing;
+        const width = Math.min(4096, Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn));
         return html `<span
       part="column"
       role=${grid ? 'columnheader' : nothing}
@@ -197,8 +198,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             aria-orientation="vertical"
             aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
             aria-valuemax="4096"
-            aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
-            aria-valuetext=${formatWords(this, 'widthLabel', { width: this.drawn })}
+            aria-valuenow=${width}
+            aria-valuetext=${formatWords(this, 'widthLabel', { width })}
             @keydown=${this.handleResizeKey}
             @pointerdown=${this.handleResizeStart}
             @pointermove=${this.handleResizeMove}

package/dist/table/grid-controller.d.ts

@@ -24,6 +24,16 @@ export interface TableGridOptions {
     part: (name: string) => HTMLElement | null;
     /** The rows in the order they are drawn. */
     rows: () => Element[];
+    /**
+     * The words each row is found by when a reader types, in the order the rows
+     * are drawn.
+     */
+    rowWords: () => string[];
+    /**
+     * Selects every row from the row last chosen, or from row `from` where none
+     * was, to row `to`, and says whether the table selects at all.
+     */
+    selectRange: (to: number, from: number) => boolean;
     /** Selects every row for Control or Command with A, and says whether it did. */
     selectAll: () => boolean;
     /** Whether the table is a grid now. */
@@ -31,8 +41,8 @@ export interface TableGridOptions {
 }
 /**
  * The keyboard of a `grid` table: one tab stop among its cells, the arrow
- * keys, Home, End and the Page keys between them, and Enter or F2 into a
- * cell's controls.
+ * keys, Home, End and the Page keys between them, Enter or F2 into a cell's
+ * controls, typeahead over the rows, and Shift ranges of rows.
  *
  * **Tab leaves the grid.** The controls in a cell are the consumer's, so their
  * tab order is left as written: Tab on a cell, or past the last control of a
@@ -59,6 +69,8 @@ export declare class TableGridController implements ReactiveController {
     private pointing;
     /** The cells given a `tabindex`, so a table that stops being a grid takes it back. */
     private readonly given;
+    /** The letters a reader has typed at the rows. */
+    private readonly typeahead;
     constructor(host: ReactiveControllerHost & HTMLElement, options: TableGridOptions);
     hostConnected(): void;
     hostDisconnected(): void;

package/dist/table/grid-controller.js

@@ -1,4 +1,4 @@
-import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, whenHydrated, } from '@fusion.dev/helix-core';
+import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 const HEADS = { grip: 'grip-head', select: 'select-all' };
 const shown = (element) => {
     const hidden = element.getAttribute('hidden');
@@ -13,6 +13,7 @@ export class TableGridController {
         this.focusWanted = false;
         this.pointing = false;
         this.given = new Set();
+        this.typeahead = new Typeahead();
         this.handleKeydown = (event) => {
             if (!this.options.on() || event.defaultPrevented || event.altKey) {
                 return;
@@ -35,6 +36,25 @@ export class TableGridController {
                 }
                 return;
             }
+            if (typesCharacter(event) && (event.key !== ' ' || this.typeahead.typing())) {
+                const found = this.typeahead.match(event.key, this.options.rowWords(), place.row);
+                if (found >= 0) {
+                    event.preventDefault();
+                    if (found !== place.row) {
+                        this.moveTo({
+                            column: Math.max(0, Math.min(place.column, this.widthOf(found) - 1)),
+                            row: found,
+                        });
+                    }
+                }
+                return;
+            }
+            if (event.key === ' ' && event.shiftKey && place.row >= 0) {
+                if (this.options.selectRange(place.row, place.row)) {
+                    event.preventDefault();
+                }
+                return;
+            }
             if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
                 if (event.key !== 'F2' && this.options.activate(place, event)) {
                     event.preventDefault();
@@ -57,6 +77,12 @@ export class TableGridController {
             }
             event.preventDefault();
             to.column = Math.max(0, Math.min(to.column, this.widthOf(to.row) - 1));
+            if (event.shiftKey &&
+                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
+                place.row >= 0 &&
+                to.row >= 0) {
+                this.options.selectRange(to.row, place.row);
+            }
             if (to.row !== place.row || to.column !== place.column) {
                 this.moveTo(to);
             }

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

@@ -76,7 +76,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * through cell by cell, the headings included, as React Aria's table is. The
  * table is then a `grid` and each value a `gridcell`, and the table gives
  * every cell a `tabindex` so focus can rest on it: set `grid` only where the
- * cells may carry one. For typeahead and range selection, use `DataTable`.
+ * cells may carry one.
  *
  * | Key | What it does |
  * |---|---|
@@ -90,7 +90,10 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
  * | Enter or Space on a grip cell | Picks the row up, or drops it, in a `reorderable` table. Up, Down, Home, and End move a row picked up, and Escape puts it back. |
+ * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
+ * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
+ * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
  * The CSS custom properties listed for this component are written by it and
@@ -105,7 +108,9 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it, such as a heading.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
@@ -144,6 +149,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * `registerWords('de', { 'helix-table': { selectAllLabel: 'Alle Zeilen auswählen' } })`.
      */
     static words: string;
+    /** The empty and loading lines are the `empty` and `loading` slots. */
+    protected statusSlots: boolean;
     /**
      * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
      *
@@ -383,9 +390,25 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     private readonly handleToggle;
     /** Every row's key, in the order the rows are written. */
     private get everyKey();
-    /** The checkbox in the heading: every row, or none where every row is chosen. */
+    /** The keys of the rows that can be chosen: every row that is not `disabled`. */
+    private get enabledKeys();
+    /** Whether the row of that key is `disabled`. */
+    private isDisabled;
+    /**
+     * The checkbox in the heading: every row that can be chosen, or none of
+     * them where each already is. A `disabled` row keeps what it had.
+     */
     private chooseAll;
-    /** One row's checkbox, ticked or not. */
+    /** The key of the row a Shift range runs from: the one last chosen. */
+    private anchorKey;
+    /**
+     * Selects every row from the one last chosen to the drawn row `to`, keeping
+     * what was already selected. With no row to run from, the range is the row
+     * the reader is on, `from`, and it becomes the one to run from. Says whether
+     * the table selects at all.
+     */
+    private selectRange;
+    /** One row's checkbox, ticked or not. It becomes the row a range runs from. */
     private chooseRow;
     /**
      * Enter, Space or F2 on a cell of a `grid` table, and whether it did
@@ -498,7 +521,10 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * assignment has not happened.
      */
     static shadowRootOptions: ShadowRootInit;
-    /** The rows: every child that is not a column, which is what the body slot is assigned. */
+    /**
+     * The rows: every child that is not a column, a heading, or the content of
+     * the `empty` or `loading` slot, which is what the body slot is assigned.
+     */
     protected get slotted(): Element[];
     private assign;
     /**

package/dist/table/root/table-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 { AriaForwardController, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -44,9 +44,12 @@ const SAMPLE = 200;
 const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
 const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
+const STATUS = new Set(['empty', 'loading']);
+const NAMED = new Set([...STATUS, 'heading']);
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.columns = '';
@@ -82,7 +85,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             on: () => this.grid,
             part: (name) => this.partNamed(name),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
-            selectAll: () => this.selectable && this.requestSelected(new Set(this.everyKey)),
+            rowWords: () => this.arrangedRows.map((row) => textOf(row.children[0])),
+            selectAll: () => this.selectable && this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
+            selectRange: (to, from) => this.selectRange(to, from),
         });
         this.reorder = new ReorderController(this, {
             axis: 'block',
@@ -125,6 +130,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             event.preventDefault();
             this.chooseRow(found.key, event.detail.checked);
         };
+        this.anchorKey = undefined;
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
             if (!path.some((node) => node instanceof Element && node.getAttribute('part') === 'sort')) {
@@ -260,10 +266,35 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     get everyKey() {
         return this.keyed.map(({ key }) => key);
     }
+    get enabledKeys() {
+        return this.keyed.filter(({ row }) => !row.disabled).map(({ key }) => key);
+    }
+    isDisabled(key) {
+        return this.keyed.find((one) => one.key === key)?.row.disabled === true;
+    }
     chooseAll() {
-        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.enabledKeys)));
+    }
+    selectRange(to, from) {
+        if (!this.selectable) {
+            return false;
+        }
+        const keyOf = new Map(this.keyed.map(({ key, row }) => [row, key]));
+        const keys = this.arrangedRows.map((row) => keyOf.get(row) ?? '');
+        const { anchor, anchorKey } = anchorAt(keys, this.anchorKey, from);
+        this.anchorKey = anchorKey;
+        const now = this.chosen;
+        const next = rangeAdd([...now], keys, anchor, to)?.filter((key) => now.has(key) || !this.isDisabled(key));
+        if (next && next.length > now.size) {
+            this.requestSelected(new Set(next));
+        }
+        return true;
     }
     chooseRow(key, on) {
+        if (this.isDisabled(key)) {
+            return;
+        }
+        this.anchorKey = key;
         const keys = this.chosen;
         if (on) {
             keys.add(key);
@@ -298,7 +329,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.chooseRow(found.key, !this.chosen.has(found.key));
             return true;
         }
-        if (event.key === 'Enter' && row?.href) {
+        if (event.key === 'Enter' && row?.href && !row.disabled) {
             followLink(this.ownerDocument, { href: row.href, rel: row.rel, target: row.target }, event);
             return true;
         }
@@ -418,7 +449,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }; }
     get slotted() {
         const columns = new Set(this.tableColumns);
-        return [...(this.children ?? [])].filter((child) => !columns.has(child) && child.getAttribute('slot') !== 'heading');
+        return [...(this.children ?? [])].filter((child) => !columns.has(child) && !NAMED.has(child.getAttribute('slot') ?? ''));
     }
     assign() {
         if (this.assignsByName) {
@@ -429,7 +460,14 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }
         const columns = new Set(this.tableColumns);
         const headings = new Set(this.headings);
-        assignSlots(this.renderRoot, [...columns, ...headings, ...this.arrangedRows], (child) => (columns.has(child) ? 'columns' : headings.has(child) ? 'heading' : ''));
+        const status = [...(this.children ?? [])].filter((child) => STATUS.has(child.getAttribute('slot') ?? ''));
+        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...this.arrangedRows], (child) => columns.has(child)
+            ? 'columns'
+            : headings.has(child)
+                ? 'heading'
+                : status.includes(child)
+                    ? (child.getAttribute('slot') ?? '')
+                    : '');
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -483,7 +521,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         if (!this.selectable) {
             return nothing;
         }
-        const every = this.childrenKnown ? this.keyed.map(({ key }) => key) : [];
+        const every = this.childrenKnown ? this.enabledKeys : [];
         const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
         const grid = this.grid;

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

@@ -13,7 +13,8 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * it, or make it interactive.
  *
  * In a `selectable` table the row draws a checkbox cell before its own cells,
- * and `value` is the key the table's `selected` lists it by.
+ * and `value` is the key the table's `selected` lists it by. `disabled` keeps
+ * the row out of the selection and out of its link.
  *
  * In a `reorderable` table the row draws a grip cell before those, holding a
  * button named by the table's `move-row-label`, and `value` is the key
@@ -56,7 +57,7 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * @cssstate dragging - The row is being moved, in a `reorderable` table.
  * @cssstate drop-after - The row being moved goes after this one when it is dropped.
  * @cssstate drop-before - The row being moved goes before this one when it is dropped.
- * @cssstate link - While the row has `href`, so a press on it follows the link.
+ * @cssstate link - While the row has `href` and is not `disabled`, so a press on it follows the link.
  * @cssstate selected - While the row is selected, in a `selectable` table.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
@@ -65,6 +66,15 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * finds its columns. Not a consumer's to read or set.
      */
     readonly isTableRow = true;
+    /**
+     * Takes the row out of the table's selection and out of its link: the row's
+     * checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
+     * pass over it, and a press does not follow `href`. A row already selected
+     * stays selected. A screen reader hears it as unavailable, and in a `grid`
+     * table the arrow keys still reach it, as a disabled cell in a grid is
+     * reached.
+     */
+    disabled: boolean;
     /**
      * The URL a press on the row follows, which makes the whole row a link.
      * Empty, the default, leaves presses to the row's cells.

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

@@ -15,6 +15,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     constructor() {
         super(...arguments);
         this.isTableRow = true;
+        this.disabled = false;
         this.href = '';
         this.rel = '';
         this.target = '';
@@ -30,7 +31,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.selectStop = false;
         this.columnRules = undefined;
         this.handleClick = (event) => {
-            if (this.href === '' || event.button !== 0 || event.defaultPrevented) {
+            if (this.disabled || this.href === '' || event.button !== 0 || event.defaultPrevented) {
                 return;
             }
             const cell = event
@@ -68,8 +69,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
+        this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.toggleState('selected', this.selectable && this.selected);
-        this.toggleState('link', this.href !== '');
+        this.toggleState('link', this.href !== '' && !this.disabled);
         this.toggleState('dragging', this.move === 'dragging');
         this.toggleState('drop-after', this.move === 'drop-after');
         this.toggleState('drop-before', this.move === 'drop-before');
@@ -100,6 +102,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
           mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
           mark-indeterminate: checkbox-mark-indeterminate"
         aria-label=${this.selectLabel}
+        ?disabled=${this.disabled}
         .checked=${this.selected}
       ></${checkbox}
     ></span>`;
@@ -126,6 +129,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTableRow.prototype, "disabled", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "href", void 0);

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

@@ -36,6 +36,20 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * Disabled tabs are passed over. Tab leaves the list for the selected panel,
  * which is a tab stop only while it holds nothing focusable.
  *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |
+ * | Left, Up | Moves to the tab before, from the first round to the last. |
+ * | Home, End | Moves to the first or the last tab. |
+ * | Enter, Space | Selects the tab with focus, or follows its link. |
+ * | Tab | Leaves the list for the selected panel. |
+ *
+ * Removing the selected tab selects the first enabled tab that is left, and
+ * `active` says so, with `helix-activate`. Where the removed tab had focus,
+ * focus moves to the tab now selected.
+ *
  * The `indicator` part moves to the selected tab and carries its place and
  * size, so a mark of your own can be drawn there: style the part, or slot an
  * element into `indicator`, which sits inside the part and reads the same
@@ -125,8 +139,19 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private get linked();
     private get panels();
     private readonly handleSelection;
+    /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
+    private held;
     /** Pushes the current value down to whichever tab and panel own it. */
     private sync;
+    /** The tab that last had focus, so its removal can hand focus on. */
+    private focused;
+    private readonly handleFocusIn;
+    /**
+     * Puts focus on the selected tab where the tab that had it was removed and
+     * focus fell to the page, which is where removing a focused element leaves
+     * it.
+     */
+    private refocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;

package/dist/tabs/root/tabs-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 { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, deepActiveElement, HelixActivateEvent, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -35,9 +35,15 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             }
             this.requestActive(event.detail.value);
         };
+        this.held = [];
+        this.handleFocusIn = (event) => {
+            const path = event.composedPath();
+            this.focused = this.tabs.find((tab) => path.includes(tab));
+        };
         this.handleSlotChange = () => {
             this.sync();
             this.indicator.place();
+            this.refocus();
         };
     }
     static { this.words = 'helix-tabs'; }
@@ -54,6 +60,13 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const tabs = this.tabs;
         const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
         const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
+        const previous = this.active;
+        const gone = this.held.includes(previous) && !tabs.some((tab) => tab.value === previous);
+        this.held = tabs.map((tab) => tab.value);
+        if (gone && value !== '') {
+            this.active = value;
+            this.dispatchEvent(new HelixActivateEvent({ previous, value }));
+        }
         for (const tab of tabs) {
             const selected = tab.value === value;
             whenHydrated(tab, () => {
@@ -77,13 +90,27 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             });
         }
     }
+    refocus() {
+        const gone = this.focused;
+        if (!gone || this.tabs.includes(gone)) {
+            return;
+        }
+        this.focused = undefined;
+        const active = deepActiveElement();
+        if (active !== null && active !== document.body) {
+            return;
+        }
+        void this.updateComplete.then(() => this.tabs.find((tab) => tab.selected)?.focus());
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('focusin', this.handleFocusIn);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('focusin', this.handleFocusIn);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

package/dist/tour/naming.d.ts

@@ -15,6 +15,11 @@ export interface StopWords {
     heading: readonly Element[];
     /** Whether the stop has a `label` of its own. */
     labeled: boolean;
+    /**
+     * The region that holds the content, given where the content holds words
+     * with no element around them, which then describes the panel.
+     */
+    loose?: Element | null;
     /** The element that says the stop's place in the tour, such as "2 of 5". */
     progress: Element | null;
 }
@@ -24,7 +29,8 @@ export interface StopWords {
  * Named by the `heading` slot, then by the first heading in the content, then
  * by the stop's own `label`, and where there is none of those, by its place in
  * the tour, so no stop is an unnamed group. Described by the `description`
- * slot and by its place, which is how a screen reader hears where it is as
- * focus moves from one stop to the next.
+ * slot, or where it is empty by the words at the start of the content, as a
+ * `Dialog` is, and then by its place, which is how a screen reader hears where
+ * it is as focus moves from one stop to the next.
  */
-export declare const stopNaming: ({ content, description, heading, labeled, progress, }: StopWords) => StopNaming;
+export declare const stopNaming: ({ content, description, heading, labeled, loose, progress, }: StopWords) => StopNaming;