@fusion.dev/helix-headless 0.229.1 → 0.231.0

package/dist/data-table/events/before-column-toggle.d.ts

@@ -0,0 +1,14 @@
+import type { ColumnToggleDetail } from './details.js';
+/**
+ * A column is about to be hidden or shown again, from its menu or from
+ * `hideColumn` or `showColumn`.
+ *
+ * Cancelable: cancel it to keep the column as it is, and set `hidden` on the
+ * column yourself.
+ *
+ * @followedBy helix-column-toggle
+ */
+export declare class HelixBeforeColumnToggleEvent extends CustomEvent<ColumnToggleDetail> {
+    static readonly eventName = "helix-before-column-toggle";
+    constructor(detail: ColumnToggleDetail);
+}

package/dist/data-table/events/before-column-toggle.js

@@ -0,0 +1,11 @@
+export class HelixBeforeColumnToggleEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-column-toggle'; }
+    constructor(detail) {
+        super(HelixBeforeColumnToggleEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/data-table/events/column-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { ColumnToggleDetail } from './details.js';
+/**
+ * A column was hidden or shown again.
+ *
+ * The notification after `helix-before-column-toggle`, sent when nobody refused
+ * it. Not cancelable: the decision was the request's.
+ */
+export declare class HelixColumnToggleEvent extends CustomEvent<ColumnToggleDetail> {
+    static readonly eventName = "helix-column-toggle";
+    constructor(detail: ColumnToggleDetail);
+}

package/dist/data-table/events/column-toggle.js

@@ -0,0 +1,11 @@
+export class HelixColumnToggleEvent extends CustomEvent {
+    static { this.eventName = 'helix-column-toggle'; }
+    constructor(detail) {
+        super(HelixColumnToggleEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/data-table/events/details.d.ts

@@ -1,3 +1,10 @@
+/** Detail carried by `helix-before-column-toggle` and `helix-column-toggle`. */
+export interface ColumnToggleDetail {
+    /** The `field` of the column. */
+    field: string;
+    /** Whether the column is hidden after the change. */
+    hidden: boolean;
+}
 /** Detail carried by `helix-before-follow` and `helix-follow`. */
 export interface FollowDetail {
     /** The path, query, and hash the link names, ready for a router. */

package/dist/data-table/events/index.d.ts

@@ -1,9 +1,13 @@
+import { HelixBeforeColumnToggleEvent } from './before-column-toggle.js';
 import { HelixBeforeFollowEvent } from './before-follow.js';
+import { HelixColumnToggleEvent } from './column-toggle.js';
 import { HelixFollowEvent } from './follow.js';
-export type { FollowDetail } from './details.js';
-export { HelixBeforeFollowEvent, HelixFollowEvent };
+export type { ColumnToggleDetail, FollowDetail } from './details.js';
+export { HelixBeforeColumnToggleEvent, HelixBeforeFollowEvent, HelixColumnToggleEvent, HelixFollowEvent, };
 declare const registry: {
+    readonly HelixBeforeColumnToggleEvent: typeof HelixBeforeColumnToggleEvent;
     readonly HelixBeforeFollowEvent: typeof HelixBeforeFollowEvent;
+    readonly HelixColumnToggleEvent: typeof HelixColumnToggleEvent;
     readonly HelixFollowEvent: typeof HelixFollowEvent;
 };
 type Registry = typeof registry;

package/dist/data-table/events/index.js

@@ -1,9 +1,13 @@
 import { registerEventNames } from '@fusion.dev/helix-core';
+import { HelixBeforeColumnToggleEvent } from './before-column-toggle.js';
 import { HelixBeforeFollowEvent } from './before-follow.js';
+import { HelixColumnToggleEvent } from './column-toggle.js';
 import { HelixFollowEvent } from './follow.js';
-export { HelixBeforeFollowEvent, HelixFollowEvent };
+export { HelixBeforeColumnToggleEvent, HelixBeforeFollowEvent, HelixColumnToggleEvent, HelixFollowEvent, };
 const registry = {
+    HelixBeforeColumnToggleEvent,
     HelixBeforeFollowEvent,
+    HelixColumnToggleEvent,
     HelixFollowEvent,
 };
 registerEventNames(Object.values(registry).map((one) => one.eventName));

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

@@ -2,6 +2,8 @@ import { type DataRow, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessTableColumn } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
+import '../../divider/index.js';
+import '../../menu/index.js';
 import '../../pagination/index.js';
 declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
@@ -124,6 +126,25 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * is written to `order` as a list of fields. Your markup is not rewritten: the
  * table assigns the headings to its header in that order.
  *
+ * **`menu` on a column adds a menu to its heading.** A small button after the
+ * sort chevrons opens it, and a press anywhere else on the heading still sorts.
+ * The rows depend on the column:
+ *
+ * - Sort ascending and Sort descending, where the column is `sortable`.
+ * - Move left and Move right, where the table is `reorderable`.
+ * - Hide column, which is disabled on the last column showing.
+ * - Show hidden columns, once the menu has hidden a column.
+ *
+ * Sorting and moving ask first with `helix-before-sort` and
+ * `helix-before-reorder`, as a press on the heading or a drag of the grip does.
+ * Hiding asks with `helix-before-column-toggle`, then sets `hidden` on the column
+ * and fires `helix-column-toggle`. Your own column picker can call `hideColumn`
+ * and `showColumn`. Show hidden columns restores only the columns that went
+ * through them, so a column you hid with `hidden` stays hidden.
+ *
+ * In the grid, Alt+Down on a heading opens its menu, and F2 and Tab reach the
+ * button.
+ *
  * **`reorderable-rows` lets people move rows.** A column of grips leads each
  * row, named by `move-row-label`. Drag a grip to move its row, and the table
  * scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick
@@ -172,12 +193,14 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
  *
+ * @event {HelixBeforeColumnToggleEvent} helix-before-column-toggle - A column is about to be hidden or shown, with its `field` and `hidden`. Cancelable: cancel it to keep the column as it is.
  * @event {HelixBeforeFilterEvent} helix-before-filter - The search query is about to change. Cancelable: cancel it to keep the current query.
  * @event {HelixBeforeFollowEvent} helix-before-follow - A press on a link in a cell is about to load its page, in this tab and on this site. Cancelable: cancel it to keep the page, and hand `detail.href` to your router.
  * @event {HelixBeforeNavigateEvent} helix-before-navigate - Another page was requested. Cancelable: cancel it to stay on the current page.
  * @event {HelixBeforeReorderEvent} helix-before-reorder - A row or a column is about to move. For a row, with `reorderable-rows`, the event carries every row's key in the new order; for a column, `kind` is `column` and `value` holds every field in the new order. Cancelable: cancel it to keep the row or the column where it is.
  * @event {HelixBeforeSelectEvent} helix-before-select - The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.
  * @event {HelixBeforeSortEvent} helix-before-sort - A different sort order was requested. Cancelable: cancel it to keep the current order.
+ * @event {HelixColumnToggleEvent} helix-column-toggle - Fired after a column is hidden or shown, with its `field` and `hidden`.
  * @event {HelixExpandEvent} helix-expand - Fired after a row opens or closes, with every open row's key, separated by commas, which `expanded` also holds.
  * @event {HelixFilterEvent} helix-filter - Fired after the search query changes, with the new query.
  * @event {HelixFollowEvent} helix-follow - Fired as the browser loads the page a link in a cell names, with its path.
@@ -211,6 +234,28 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart head - The row that holds the column headings. It is `display: contents`, so it takes no space.
  * @csspart live - A copy of the empty and loading messages, which screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are loading.
+ * @csspart menu-back - Forwarded from the column's menu, on the column. Not shown in the table, whose menu has no submenu.
+ * @csspart menu-back-mark - Forwarded from the column's menu, on the column. Not shown in the table, whose menu has no submenu.
+ * @csspart menu-divider - The line between groups of rows in a column's menu, on the column.
+ * @csspart menu-divider-content - Forwarded from the divider, on the column. Not shown in the table.
+ * @csspart menu-divider-line - The line inside `menu-divider`, on the column.
+ * @csspart menu-empty - Forwarded from the column's menu, on the column. Not shown in the table, whose menu always has a row.
+ * @csspart menu-entry - One row of a column's menu, on the column.
+ * @csspart menu-entry-end - The trailing column of a row in a column's menu, on the column.
+ * @csspart menu-entry-item - The row inside `menu-entry`, on the column.
+ * @csspart menu-entry-mark - The check mark on the sort row that is current, on the column.
+ * @csspart menu-entry-shortcut - Forwarded from the row, on the column. Not shown in the table.
+ * @csspart menu-entry-shortcut-kbd - Forwarded from the row, on the column. Not shown in the table.
+ * @csspart menu-entry-shortcut-key - Forwarded from the row, on the column. Not shown in the table.
+ * @csspart menu-entry-shortcut-separator - Forwarded from the row, on the column. Not shown in the table.
+ * @csspart menu-entry-start - The leading column of a row in a column's menu, on the column.
+ * @csspart menu-entry-surface - Forwarded from the row, on the column. Not shown in the table.
+ * @csspart menu-header - Forwarded from the column's menu, on the column. Not shown in the table, whose menu has no submenu.
+ * @csspart menu-live - Forwarded from the column's menu, on the column. Not shown in the table, whose menu has no loading or empty text.
+ * @csspart menu-loading - Forwarded from the column's menu, on the column. Not shown in the table.
+ * @csspart menu-search-field - Forwarded from the column's menu, on the column. Not shown in the table.
+ * @csspart menu-surface - The panel a column's menu opens in, on the column: `helix-table-column::part(menu-surface)`.
+ * @csspart menu-title - Forwarded from the column's menu, on the column. Not shown in the table, whose menu has no submenu.
  * @csspart more - The row after the last one that holds the button for more rows, while `load-more` is set.
  * @csspart more-button - The button that asks for more rows.
  * @csspart more-cell - The cell of the `more` row, which spans every column.
@@ -396,6 +441,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * replaced with the page it jumps to.
      */
     gapLabel: string;
+    /** The name of the row in a column's menu that hides the column. */
+    hideColumnLabel: string;
     /**
      * The grid's name, read by screen readers.
      */
@@ -434,6 +481,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * would go, counting from 1, and `{count}` the number of rows on the page.
      */
     movedLabel: string;
+    /** The name of the row in a column's menu that moves the column left. */
+    moveLeftLabel: string;
+    /** The name of the row in a column's menu that moves the column right. */
+    moveRightLabel: string;
     /**
      * The name of a row's grip, with `reorderable-rows`. `{row}` is replaced with
      * the row's name.
@@ -610,6 +661,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * the first column that has a field, or with its key.
      */
     selectRowLabel: string;
+    /** The name of the row in a column's menu that brings back the columns it hid. */
+    showColumnsLabel: string;
     /**
      * The sort order, as `field:direction`.
      *
@@ -620,6 +673,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     get sort(): string;
     set sort(next: string);
+    /** The name of the row in a column's menu that sorts smallest first. */
+    sortAscendingLabel: string;
+    /** The name of the row in a column's menu that sorts largest first. */
+    sortDescendingLabel: string;
     /**
      * What screen readers hear when the table is sorted. `{column}` is the
      * column's heading and `{direction}` is `ascending` or `descending`, so each
@@ -1168,6 +1225,47 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * told about being one they cannot see yet.
      */
     private announceSort;
+    /** The columns the menu or `hideColumn` hid, which Show hidden columns brings back. */
+    private readonly hiddenByTable;
+    /** The fields in `hiddenByTable` still hidden, since a page can show one itself. */
+    private get restorable();
+    /** Everything a column's menu draws from the table, so a change draws it again. */
+    private columnMenuFacts;
+    /**
+     * Draws a column's menu around the button the column draws.
+     *
+     * In the column's shadow root and from here, so the menu has its trigger beside
+     * it and only a page with a `DataTable` carries the menu's code. Every event a
+     * menu sends stops here: `helix-select` from a row is no row selection.
+     */
+    private readonly drawColumnMenu;
+    /** A menu's own event, which is no event of this table's. */
+    private readonly stopMenuEvent;
+    /** The two sort rows show the table's sort, so a press never checks one itself. */
+    private readonly keepMenuCheck;
+    /**
+     * Does what a menu row says.
+     *
+     * A microtask on, because the menu closes a microtask after `helix-select`
+     * and returns focus to the button. Hide then has a focus to move away from the
+     * button it removes.
+     */
+    private chooseInColumnMenu;
+    /**
+     * Hides a column, as Hide column in its menu does.
+     *
+     * Public for the same reason `toggleSort` is: your own column picker needs a
+     * way to ask. Asks with `helix-before-column-toggle`, and keeps the last column
+     * showing. Returns whether the column was hidden.
+     */
+    hideColumn(field: string): boolean;
+    /**
+     * Shows a hidden column. Asks with `helix-before-column-toggle`, and returns
+     * whether the column was shown.
+     */
+    showColumn(field: string): boolean;
+    /** Asks for a column to be hidden or shown. */
+    private requestHidden;
     /** Columns arrive from the light DOM, which changes no property here. */
     private readonly handleSlotChange;
     /**
@@ -1383,6 +1481,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * whether it took the key, and the arrows move between cells where it did not.
      */
     private treeKey;
+    /** Whether the event came from a heading's menu, its button included. */
+    private inColumnMenu;
+    /** Alt+Down on a heading opens its menu. */
+    private openColumnMenuFrom;
     /** Enter, Space and F2 on a cell. */
     private activate;
     /** The keys the grid takes while focus is on a control inside a cell. */

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

@@ -10,8 +10,11 @@ import { html } from 'lit/static-html.js';
 import { edgeOf } from '../../table/edge.js';
 import { tracksOf } from '../../table/tracks.js';
 import '../../checkbox/index.js';
+import '../../divider/index.js';
+import '../../menu/index.js';
+import { HelixHeadlessMenu } from '../../menu/root/menu-root.js';
 import '../../pagination/index.js';
-import { HelixBeforeFollowEvent, HelixFollowEvent } from '../events/index.js';
+import { HelixBeforeColumnToggleEvent, HelixBeforeFollowEvent, HelixColumnToggleEvent, HelixFollowEvent, } from '../events/index.js';
 import { toggledOpen } from '../keys.js';
 import { grow } from '../tree.js';
 const CONTROL = [
@@ -44,12 +47,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.errorText = '';
         this.estimate = 32;
         this.gapLabel = 'Skip to page {page}';
+        this.hideColumnLabel = 'Hide column';
         this.label = '';
         this.loadMore = false;
         this.loadMoreLabel = 'Load more';
         this.locale = '';
         this.mode = 'client';
         this.movedLabel = '{name} moved to position {position} of {count}';
+        this.moveLeftLabel = 'Move left';
+        this.moveRightLabel = 'Move right';
         this.moveRowLabel = 'Move {row}';
         this.nextLabel = 'Next page';
         this.pageLabel = 'Page {page}';
@@ -67,6 +73,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.selectedLabel = '{count} selected';
         this.selectionBehavior = 'toggle';
         this.selectRowLabel = 'Select {row}';
+        this.showColumnsLabel = 'Show hidden columns';
+        this.sortAscendingLabel = 'Sort ascending';
+        this.sortDescendingLabel = 'Sort descending';
         this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.total = 0;
         this.unsortedLabel = 'Not sorted';
@@ -170,6 +179,58 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.heardSort = undefined;
         this.heardSelected = undefined;
         this.heardFilter = undefined;
+        this.hiddenByTable = new Set();
+        this.drawColumnMenu = (column, button) => {
+            const menu = this.tag('menu');
+            const item = this.tag('menu-item');
+            const divider = this.tag('divider');
+            const shown = this.shownFields;
+            const at = shown.indexOf(column.field);
+            const left = inlineStep(this, 'ArrowLeft');
+            const row = (value, label, disabled = false, sorted) => html `<${item}
+        part="menu-entry"
+        exportparts="end: menu-entry-end, item: menu-entry-item, mark: menu-entry-mark, shortcut: menu-entry-shortcut,
+          shortcut-kbd: menu-entry-shortcut-kbd, shortcut-key: menu-entry-shortcut-key,
+          shortcut-separator: menu-entry-shortcut-separator, start: menu-entry-start, surface: menu-entry-surface"
+        value=${value}
+        ?disabled=${disabled}
+        ?exclusive=${sorted !== undefined}
+        .checked=${sorted ?? false}
+        >${label}</${item}>`;
+            const groups = [
+                column.canSort
+                    ? html `${row('ascending', this.sortAscendingLabel, false, column.sorted === 'ascending')}${row('descending', this.sortDescendingLabel, false, column.sorted === 'descending')}`
+                    : nothing,
+                column.movable
+                    ? html `${row('left', this.moveLeftLabel, shown[at + left] === undefined)}${row('right', this.moveRightLabel, shown[at - left] === undefined)}`
+                    : nothing,
+                html `${row('hide', this.hideColumnLabel, shown.length <= 1)}${this.restorable.length > 0 ? row('restore', this.showColumnsLabel) : nothing}`,
+            ].filter((group) => group !== nothing);
+            return html `<${menu}
+      exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
+        live: menu-live, loading: menu-loading, search-field: menu-search-field, surface: menu-surface,
+        title: menu-title"
+      @helix-before-check=${this.keepMenuCheck}
+      @helix-before-close=${this.stopMenuEvent}
+      @helix-before-open=${this.stopMenuEvent}
+      @helix-before-select=${this.stopMenuEvent}
+      @helix-select=${(event) => {
+                event.stopPropagation();
+                this.chooseInColumnMenu(column, event.detail.value);
+            }}
+    >
+      ${button}${groups.map((group, index) => html `${index > 0
+                ? html `<${divider} part="menu-divider" exportparts="content: menu-divider-content, line: menu-divider-line"></${divider}>`
+                : nothing}${group}`)}
+    </${menu}>`;
+        };
+        this.stopMenuEvent = (event) => {
+            event.stopPropagation();
+        };
+        this.keepMenuCheck = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -266,7 +327,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             this.chooseOnly(place.row);
         };
         this.handleHeadClick = (event) => {
-            if (this.partIn(event, 'grip') || this.partIn(event, 'resizer')) {
+            if (this.partIn(event, 'grip') || this.partIn(event, 'resizer') || this.inColumnMenu(event)) {
                 return;
             }
             const column = this.columnFrom(event);
@@ -296,7 +357,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
         };
         this.handleGridKey = (event) => {
-            if (event.defaultPrevented || event.altKey) {
+            if (event.defaultPrevented ||
+                (this.inColumnMenu(event) && !this.partIn(event, 'menu-button'))) {
+                return;
+            }
+            if (event.altKey) {
+                this.openColumnMenuFrom(event);
                 return;
             }
             const place = this.placeOf(event);
@@ -1094,6 +1160,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         for (const column of this.tableColumns) {
             whenHydrated(column, () => {
                 column.movable = this.reorderable && column.field !== '';
+                column.menuDrawer = column.field === '' ? undefined : this.drawColumnMenu;
                 column.gridCell = true;
                 column.tabStop = shown.indexOf(column) + offset === stop;
                 column.sorted =
@@ -1106,9 +1173,87 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     android && column.sorted
                         ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
                         : '';
+                column.menuFacts = column.menu ? this.columnMenuFacts(column) : '';
             });
         }
     }
+    get restorable() {
+        return this.tableColumns
+            .filter((column) => !column.shown && this.hiddenByTable.has(column.field))
+            .map((column) => column.field);
+    }
+    columnMenuFacts(column) {
+        return [
+            this.shownFields.indexOf(column.field),
+            this.shownFields.length,
+            this.restorable.length,
+            inlineStep(this, 'ArrowLeft'),
+            this.sortAscendingLabel,
+            this.sortDescendingLabel,
+            this.moveLeftLabel,
+            this.moveRightLabel,
+            this.hideColumnLabel,
+            this.showColumnsLabel,
+        ].join('|');
+    }
+    chooseInColumnMenu(column, value) {
+        queueMicrotask(() => {
+            const left = inlineStep(this, 'ArrowLeft');
+            if (value === 'ascending' || value === 'descending') {
+                const next = format({
+                    direction: value === 'ascending' ? 'asc' : 'desc',
+                    field: column.field,
+                });
+                if (next !== this.sort) {
+                    this.requestSort(next);
+                }
+            }
+            else if (value === 'left' || value === 'right') {
+                this.moveColumn(column.field, value === 'left' ? left : -left);
+            }
+            else if (value === 'restore') {
+                for (const field of this.restorable) {
+                    this.showColumn(field);
+                }
+            }
+            else if (value === 'hide') {
+                const at = this.shownColumns.indexOf(column);
+                if (this.hideColumn(column.field)) {
+                    this.moveTo(-1, this.lead + Math.min(at, this.shownColumns.length - 1));
+                }
+            }
+        });
+    }
+    hideColumn(field) {
+        return this.requestHidden(field, true);
+    }
+    showColumn(field) {
+        return this.requestHidden(field, false);
+    }
+    requestHidden(field, hidden) {
+        const column = this.tableColumns.find((one) => one.field === field);
+        if (!column || field === '' || column.shown !== hidden) {
+            return false;
+        }
+        if (hidden && this.shownFields.length <= 1) {
+            return false;
+        }
+        return requestChange({
+            apply: (value) => {
+                column.hidden = value;
+                if (value) {
+                    this.hiddenByTable.add(field);
+                }
+                else {
+                    this.hiddenByTable.delete(field);
+                }
+                this.dispatchEvent(new HelixColumnToggleEvent({ field, hidden: value }));
+            },
+            event: (value) => new HelixBeforeColumnToggleEvent({ field, hidden: value }),
+            host: this,
+            next: hidden,
+        });
+    }
     renderCell(column, row, picked, place, stop, header, id) {
         const edge = edgeOf(column.textAlign);
         const placed = header && this.childField ? this.tree().placed.get(row) : undefined;
@@ -1556,6 +1701,17 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
         return false;
     }
+    inColumnMenu(event) {
+        return (this.columnFrom(event) !== undefined &&
+            event.composedPath().some((node) => node instanceof HelixHeadlessMenu));
+    }
+    openColumnMenuFrom(event) {
+        const column = event.key === 'ArrowDown' ? this.columnFrom(event) : undefined;
+        if (column?.drawsMenu) {
+            event.preventDefault();
+            column.openMenu();
+        }
+    }
     activate(event, place) {
         const offset = this.lead;
         const heading = place.row === -1 ? this.shownColumns[place.column - offset] : undefined;
@@ -1694,6 +1850,10 @@ __decorate([
     words,
     property({ attribute: 'gap-label' })
 ], HelixHeadlessDataTable.prototype, "gapLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'hide-column-label' })
+], HelixHeadlessDataTable.prototype, "hideColumnLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "label", void 0);
@@ -1714,6 +1874,14 @@ __decorate([
     words,
     property({ attribute: 'moved-label' })
 ], HelixHeadlessDataTable.prototype, "movedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'move-left-label' })
+], HelixHeadlessDataTable.prototype, "moveLeftLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'move-right-label' })
+], HelixHeadlessDataTable.prototype, "moveRightLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'move-row-label' })
@@ -1800,9 +1968,21 @@ __decorate([
     words,
     property({ attribute: 'select-row-label' })
 ], HelixHeadlessDataTable.prototype, "selectRowLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'show-columns-label' })
+], HelixHeadlessDataTable.prototype, "showColumnsLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "sort", null);
+__decorate([
+    words,
+    property({ attribute: 'sort-ascending-label' })
+], HelixHeadlessDataTable.prototype, "sortAscendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'sort-descending-label' })
+], HelixHeadlessDataTable.prototype, "sortDescendingLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'sorted-label' })

package/dist/element-events.generated.js

@@ -103,12 +103,14 @@ registerElementEvents({
     ],
     'helix-headless-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-headless-data-table': [
+        'helix-before-column-toggle',
         'helix-before-filter',
         'helix-before-follow',
         'helix-before-navigate',
         'helix-before-reorder',
         'helix-before-select',
         'helix-before-sort',
+        'helix-column-toggle',
         'helix-expand',
         'helix-filter',
         'helix-follow',

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -3,7 +3,7 @@ import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWo
 import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, TICK_SIZE, turned, } from '../../spatial-scatter-chart/view.js';
+import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, TICK_SIZE, turned, wordsFitted, } from '../../spatial-scatter-chart/view.js';
 import { barsDrawn, barsOf, climbing, floorOf, grownAt, growTime, heightened, namesOf, paintOrder, rowFits, tallestTimes, widthOf, } from '../bars.js';
 const barSizeOf = (style) => {
     const size = Number.parseFloat(style.columnGap);
@@ -334,7 +334,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         const layout = this.layout ?? 'grid';
         const lined = layout === 'grid' ? undefined : layout;
         const bare = this.noBox || lined !== undefined;
-        const view = boxView(read.axes, this.camera, [], bare);
+        const view = wordsFitted(this.room, (words) => boxView(read.axes, this.camera, [], bare, words));
         const room = this.room;
         const sized = lined && room?.bar ? this.sized(read, view.projection, lined, room) : undefined;
         const field = sized?.field ?? read;
@@ -358,11 +358,10 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         const base = bare
             ? boundsOf([...full.flatMap((bar) => bar.corners), ...floor.flatMap((one) => one.corners)], 0.1)
             : view.bounds;
-        const pixelOf = (frame) => sized
-            ? sized.unit
-            : room
-                ? 1 / Math.min(room.width / frame.width, room.height / frame.height)
-                : undefined;
+        const pixelOf = (frame) => {
+            const fitted = room && 1 / Math.min(room.width / frame.width, room.height / frame.height);
+            return sized ? Math.max(sized.unit, fitted ?? 0) : fitted;
+        };
         const sizeOf = (frame) => {
             const pixel = pixelOf(frame);
             return room && pixel !== undefined ? room.font * pixel : TICK_SIZE;
@@ -393,8 +392,9 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
             });
             return { frame: around(base, extents), names, values };
         };
-        const first = wordsAt(sizeOf(base));
-        const size = sizeOf(first.frame);
+        let size = sizeOf(wordsAt(sizeOf(base)).frame);
+        size = sizeOf(wordsAt(size).frame);
+        size = sizeOf(wordsAt(size).frame);
         const { frame: fits, names, values } = wordsAt(size);
         const wide = sized && room ? room.width * sized.unit : 0;
         const high = sized && room ? room.height * sized.unit : 0;

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.d.ts

@@ -143,6 +143,7 @@ export declare class HelixHeadlessSpatialRibbonChart extends HelixHeadlessSpatia
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
     private camera;
     /** A drag across the chart's own drawing, which turns its view. */
+    private readonly plotRoom;
     private readonly drag;
     /** Where the renderer draws the reading, which the tooltip points at. */
     private place;

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.js

@@ -3,7 +3,7 @@ import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWo
 import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boundsOf, boxView, DragTurn, drawBox, nearestTo, SPATIAL_VIEW, turned, } from '../../spatial-scatter-chart/view.js';
+import { boundsOf, boxView, DragTurn, drawBox, nearestTo, PlotRoomWatch, SPATIAL_VIEW, turned, wordsFitted, } from '../../spatial-scatter-chart/view.js';
 import { ribbonsDrawn, ribbonsOf } from '../ribbons.js';
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
@@ -21,6 +21,7 @@ let HelixHeadlessSpatialRibbonChart = class HelixHeadlessSpatialRibbonChart exte
         this.summaryLabel = '{count, plural, one {# reading} other {# readings}} in {series, plural, one {# series} other {# series}} over {places, plural, one {# place} other {# places}}, from {low} to {high}.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
+        this.plotRoom = new PlotRoomWatch(this);
         this.drag = new DragTurn((next) => {
             this.camera = next(this.camera);
         }, () => this.requestUpdate());
@@ -153,7 +154,7 @@ let HelixHeadlessSpatialRibbonChart = class HelixHeadlessSpatialRibbonChart exte
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera, [], this.noBox);
+        const view = wordsFitted(this.plotRoom.room, (words) => boxView(field.axes, this.camera, [], this.noBox, words));
         const ribbons = ribbonsDrawn(field, view.projection).sort((one, other) => one.depth - other.depth);
         const places = ribbons.flatMap((ribbon) => ribbon.readings);
         this.placed = places;

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

@@ -141,6 +141,7 @@ export declare class HelixHeadlessSpatialScatterChart extends HelixHeadlessSpati
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
     private camera;
     /** A drag across the chart's own drawing, which turns its view. */
+    private readonly plotRoom;
     private readonly drag;
     /** Each point where the chart's own drawing put it, which the pointer finds. */
     private placed;