@fusion.dev/helix-headless 0.22.0 → 0.24.0

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

@@ -0,0 +1,205 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, MixinChartSource, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { html, nothing, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../tooltip/index.js';
+const WIDTH = 100;
+const HEIGHT = 100;
+const REACH = 24;
+const coefficient = new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+    signDisplay: 'exceptZero',
+});
+const nice = ([low, high]) => {
+    if (low === high) {
+        return [low - 1, high + 1];
+    }
+    const levels = ticks([low, high]);
+    const step = levels.length > 1 ? levels[1] - levels[0] : high - low;
+    const round = (value) => Number(value.toPrecision(12));
+    return [round(Math.floor(low / step) * step), round(Math.ceil(high / step) * step)];
+};
+const correlation = (pairs) => {
+    if (pairs.length < 3) {
+        return undefined;
+    }
+    const mean = (values) => values.reduce((sum, one) => sum + one, 0) / values.length;
+    const across = mean(pairs.map(([x]) => x));
+    const up = mean(pairs.map(([, y]) => y));
+    let both = 0;
+    let xs = 0;
+    let ys = 0;
+    for (const [x, y] of pairs) {
+        both += (x - across) * (y - up);
+        xs += (x - across) ** 2;
+        ys += (y - up) ** 2;
+    }
+    return xs === 0 || ys === 0 ? undefined : both / Math.sqrt(xs * ys);
+};
+let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinChartSource(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.correlationLabel = 'correlation';
+        this.pointsLabel = 'points';
+        this.drawn = [];
+        this.nearest = undefined;
+        this.handleMove = (event) => {
+            if (event.pointerType !== 'mouse' && event.pointerType !== 'pen') {
+                return;
+            }
+            const box = this.renderRoot.querySelector('[part="plot"]')?.getBoundingClientRect();
+            if (!box || box.width === 0 || box.height === 0) {
+                return;
+            }
+            const across = event.clientX - box.left;
+            const up = event.clientY - box.top;
+            let found;
+            let best = REACH ** 2;
+            for (const point of this.drawn) {
+                const distance = ((point.x / WIDTH) * box.width - across) ** 2 + ((point.y / HEIGHT) * box.height - up) ** 2;
+                if (distance <= best) {
+                    best = distance;
+                    found = point;
+                }
+            }
+            if (found !== this.nearest) {
+                this.nearest = found;
+                this.pointer.set(found?.row ?? -1);
+                this.requestUpdate();
+            }
+        };
+        this.handleLeave = () => {
+            this.nearest = undefined;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.axis = 'none';
+        this.addEventListener('pointermove', this.handleMove);
+        this.addEventListener('pointerleave', this.handleLeave);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('pointermove', this.handleMove);
+        this.removeEventListener('pointerleave', this.handleLeave);
+    }
+    get rulesX() {
+        return this.gridlines !== undefined && this.gridlines !== 'y';
+    }
+    get rulesY() {
+        return this.gridlines !== undefined && this.gridlines !== 'x';
+    }
+    get field() {
+        const rows = this.sourceRows;
+        const width = Math.max(0, ...rows.map((row) => row.cells.length));
+        const columns = Array.from({ length: width }, (_, column) => column).filter((column) => rows.some((row) => row.cells[column]?.value !== undefined));
+        const [across, ...ups] = columns;
+        const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const pairs = ups.map((column) => rows.flatMap((row, index) => {
+            const x = across === undefined ? undefined : row.cells[across]?.value;
+            const y = row.cells[column]?.value;
+            return x === undefined || y === undefined ? [] : [[x, y, index]];
+        }));
+        const all = pairs.flat();
+        const x = nice(extent(all.length > 0 ? all.map(([one]) => one) : [0]));
+        const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
+        const along = linear(x, [0, WIDTH]);
+        const up = linear(y, [HEIGHT, 0]);
+        return {
+            pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
+            points: pairs.flatMap((series, depth) => series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))),
+            x,
+            xName: name(across),
+            y,
+            yNames: ups.map((column) => name(column)),
+        };
+    }
+    render() {
+        const field = this.field;
+        this.drawn = field.points;
+        if (field.points.length === 0) {
+            return html `<div id="helix-chart-plot" part="plot"></div>`;
+        }
+        const format = formatNumbers('');
+        const along = linear(field.x, [0, WIDTH]);
+        const up = linear(field.y, [HEIGHT, 0]);
+        return html `${this.renderPlot(field, along, up)}
+      <div aria-hidden="true" part="x-axis">
+        ${ticks(field.x).map((level) => html `<span part="x-tick" style="--chart-tick: ${along(level)}%">${format(level)}</span>`)}
+      </div>
+      <div aria-hidden="true" part="y-axis">
+        ${ticks(field.y).map((level) => html `<span part="y-tick" style="--chart-tick: ${up(level)}%">${format(level)}</span>`)}
+      </div>
+      <span aria-hidden="true" part="x-name">${field.xName}</span>
+      <span aria-hidden="true" part="y-name">${field.yNames.join(', ')}</span>
+      ${this.renderSummary(field)}`;
+    }
+    renderPlot(field, along, up) {
+        const at = this.pointer.at;
+        return html `<div aria-hidden="true" id="helix-chart-plot" part="plot">
+      <svg part="svg"
+        preserveAspectRatio="none"
+        viewBox="0 0 ${WIDTH} ${HEIGHT}"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        ${this.rulesX
+            ? ticks(field.x).map((level) => svg `<line part="gridline" x1=${along(level)} x2=${along(level)} y1="0" y2=${HEIGHT} />`)
+            : nothing}
+        ${this.rulesY
+            ? ticks(field.y).map((level) => svg `<line part="gridline" x1="0" x2=${WIDTH} y1=${up(level)} y2=${up(level)} />`)
+            : nothing}
+      </svg>
+      ${field.points.map((point) => {
+            const index = seriesIndex(point.depth);
+            return html `<span
+          data-series=${index}
+          ?data-active=${point.row === at}
+          part="point"
+          style=${`--chart-series: var(--chart-series-${index}); --chart-point-x: ${point.x}%; --chart-point-y: ${point.y}%`}
+        ></span>`;
+        })}
+      ${this.renderTooltip()}
+    </div>`;
+    }
+    renderSummary(field) {
+        const clauses = field.yNames.map((name, depth) => {
+            const pairs = field.pairs[depth] ?? [];
+            const r = correlation(pairs);
+            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficient.format(r)}`;
+            return `${name} / ${field.xName}: ${pairs.length} ${this.pointsLabel}${strength}`;
+        });
+        const named = this.named ? `${this.named}. ` : '';
+        return html `<p part="summary">${named}${clauses.join('; ')}.</p>`;
+    }
+    renderTooltip() {
+        const at = this.pointer.at;
+        const point = this.nearest;
+        if (at < 0 || !point) {
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'));
+        }
+        return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
+            placement: 'top',
+            x: `${point.x}%`,
+            y: `${point.y}%`,
+        });
+    }
+};
+__decorate([
+    property({ attribute: 'correlation-label' })
+], HelixHeadlessScatterChart.prototype, "correlationLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessScatterChart.prototype, "gridlines", void 0);
+__decorate([
+    property({ attribute: 'points-label' })
+], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+HelixHeadlessScatterChart = __decorate([
+    customElement('helix-headless-scatter-chart')
+], HelixHeadlessScatterChart);
+export { HelixHeadlessScatterChart };

package/dist/skip-link/index.d.ts

@@ -0,0 +1 @@
+export { HelixHeadlessSkipLink } from './root/skip-link-root.js';

package/dist/skip-link/index.js

@@ -0,0 +1 @@
+export { HelixHeadlessSkipLink } from './root/skip-link-root.js';

package/dist/skip-link/root/skip-link-root.d.ts

@@ -0,0 +1,81 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary The first stop on a page, which moves the reader past everything
+ * repeated on every page.
+ *
+ * @description
+ * A keyboard reader arriving on a page tabs through the whole header before
+ * reaching anything the page is about, and does it again on the next page. This
+ * is the control that skips it: first in the document, and pointed at the
+ * content.
+ *
+ * **It moves focus, not only the scroll position.** An in-page link on its own
+ * scrolls to its target and leaves focus behind, so the next Tab goes to
+ * whatever followed the link, which is the header it was meant to skip. Pressed,
+ * this focuses the target. A target that cannot take focus, which is most of
+ * them, since `<main>` cannot, is given `tabindex="-1"` for as long as it holds
+ * focus and has it taken off again when focus leaves, so the page ends up as the
+ * consumer wrote it.
+ *
+ * **The address is left alone.** The press is handled rather than followed, so
+ * no `#main` lands in the URL and no history entry is added, which matters to a
+ * router reading the hash. The anchor is still a real anchor with a real
+ * `href`, so before any script has run the link does what a plain link does:
+ * it scrolls there and moves the point the next Tab starts from.
+ *
+ * **Hidden until focused is the styled tier's**, being a decision about paint,
+ * and on this tier the link is simply a link. A headless consumer hides
+ * `::part(link)` while the host is not `:focus-within` and shows it when it is.
+ * Hiding with `display: none` or `visibility: hidden` takes it out of the tab
+ * order as well, and a skip link nobody can reach is the most common way one is
+ * broken.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Skip navigation, Skip to content
+ * @documentation https://helix.fusion.dev/components/skip-link
+ *
+ * @slot - The link's words. Falls back to `label`.
+ *
+ * @csspart link - The anchor, which is what takes focus.
+ */
+export declare class HelixHeadlessSkipLink extends HelixElement {
+    /** Focus goes to the anchor inside, so the host is never the focus target. */
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * Where the reader is sent, as an in-page fragment.
+     *
+     * `#main` by default, because that is the id the content region almost always
+     * has; a page whose content is somewhere else says so. Anything that is not a
+     * fragment naming an element on the page is left to the browser, as a plain
+     * link.
+     */
+    href: string;
+    /**
+     * The link's words, for the common case of plain text.
+     *
+     * The fallback of the default slot, so slotted content replaces it rather than
+     * appearing beside it.
+     */
+    label: string;
+    /** The element `href` names, looked up in the tree this link sits in. */
+    private get target();
+    /**
+     * Focuses the target, lending it a `tabindex` only if it needs one.
+     *
+     * Tried without one first, so a target that can already take focus, a heading
+     * with its own `tabindex` or a control, is never given an attribute it did
+     * not have. The loan is repaid on `blur` rather than on the next press: a
+     * `tabindex` left on `<main>` makes every click inside it focus the whole
+     * region.
+     */
+    private readonly skip;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-skip-link': HelixHeadlessSkipLink;
+    }
+}

package/dist/skip-link/root/skip-link-root.js

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.href = '#main';
+        this.label = 'Skip to content';
+        this.skip = (event) => {
+            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+                return;
+            }
+            const target = this.target;
+            if (!target) {
+                return;
+            }
+            event.preventDefault();
+            target.focus();
+            if (target.getRootNode().activeElement === target) {
+                return;
+            }
+            target.setAttribute('tabindex', '-1');
+            target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
+            target.focus();
+        };
+    }
+    static { this.shadowRootOptions = {
+        ...HelixElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    get target() {
+        if (!this.href.startsWith('#') || this.href.length < 2) {
+            return null;
+        }
+        const id = decodeURIComponent(this.href.slice(1));
+        const root = this.getRootNode();
+        return (root.getElementById?.(id) ?? document.getElementById(id));
+    }
+    render() {
+        return html `<a part="link" href=${this.href} @click=${this.skip}><slot>${this.label}</slot></a>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessSkipLink.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessSkipLink.prototype, "label", void 0);
+HelixHeadlessSkipLink = __decorate([
+    customElement('helix-headless-skip-link')
+], HelixHeadlessSkipLink);
+export { HelixHeadlessSkipLink };

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -38,6 +38,7 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
+ * @event {HelixSelectEvent} helix-select - Fired when an action is chosen. Dispatched by the action and listened for here, and the dial closes behind it once it has been heard. Cancelable: refusing it takes the decision and the dial stays open.
  * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
  *
  * @csspart actions - The region the actions are drawn in.

package/dist/speed-dial/root/speed-dial-root.js

@@ -29,8 +29,12 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.handleTriggerClick = () => {
             this.requestOpen(!this.open);
         };
-        this.handleSelect = () => {
-            this.close();
+        this.handleSelect = (event) => {
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    this.close();
+                }
+            });
         };
         this.handleKeydown = (event) => {
             if (event.key !== 'Escape') {

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

@@ -26,6 +26,7 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  *
  * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active step changes. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixSelectEvent} helix-select - Fired when a step is pressed. Dispatched by the step and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
  */
 export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     /**

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

@@ -10,6 +10,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `undefined` falls back to the field.
  */
 export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
+/**
+ * A dot path resolved against a row.
+ *
+ * Written here rather than taken from a library, because the whole of what is
+ * needed is "walk the keys and stop at the first thing that is not an object".
+ * Returns `undefined` for a path that does not resolve, which the table renders
+ * as an empty cell: a missing key is a hole in the data and drawing `undefined`
+ * into a table tells a reader the software is broken rather than the row is.
+ */
+export declare const at: (row: Readonly<Record<string, unknown>>, path: string) => unknown;
 /**
  * @summary One column of a table: its heading, how wide it is, and what it reads.
  *
@@ -37,6 +47,14 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  * 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.
  *
+ * **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
+ * reader on a keyboard reaches the sort at all. A column a reader may resize
+ * carries a `separator` on its end edge, moved by dragging it or with the arrow
+ * keys, and a column in a table that lets a reader reorder its columns carries
+ * a grip the table moves.
+ *
  * @since 0.1.0
  * @status experimental
  * @aliases Column header, Th
@@ -44,7 +62,13 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  *
  * @slot - The heading.
  *
+ * @event {HelixBeforeResizeEvent} helix-before-resize - Fired as a reader resizes the column, with the width asked for, and cancelable.
+ *
  * @csspart column - The heading cell.
+ * @csspart grip - The handle a reader moves the column by, where the table allows it.
+ * @csspart grip-mark - The glyph on it.
+ * @csspart resizer - The edge a reader drags to change the width, where the column allows it.
+ * @csspart sort - The button a sortable heading is.
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
     /**
@@ -90,6 +114,15 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * such a column is never sortable however it is marked.
      */
     field: string;
+    /**
+     * Whether a reader may change this column's width.
+     *
+     * By dragging the edge at the end of the heading, or with the arrow keys once
+     * it has focus, a step at a time and four with Shift. The width lands in
+     * `width` as pixels, and `helix-before-resize` asks first, so a consumer who
+     * stores the widths can take the decision.
+     */
+    resizable: boolean;
     /**
      * Whether a reader may reorder the set by this column.
      *
@@ -135,6 +168,28 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * not in.
      */
     sorted: 'ascending' | 'descending' | undefined;
+    /**
+     * @internal Whether the table this sits in lets a reader move it, written by
+     * that table. Not a consumer's to set: the order is the table's, and a grip
+     * on a column the table will not move is a control that does nothing.
+     */
+    movable: boolean;
+    /** How wide the heading drew, for the separator to report. */
+    private drawn;
+    /** Where a drag of the separator started, while one is running. */
+    private resizing;
+    /** Watches the heading's width, which changes with the table as well as with a drag. */
+    private watcher;
+    /**
+     * The narrowest a reader can drag a column, in pixels.
+     *
+     * Three characters and the inset around them. Narrower and the heading has
+     * nothing left to be read by, and the separator is a grab target with no
+     * column beside it.
+     */
+    static readonly NARROWEST = 48;
+    /** The step the arrow keys move the separator by, in pixels. */
+    static readonly STEP = 16;
     /** The track this column contributes, resolved. */
     get track(): string;
     /** Whether a reader can actually reorder by this column. */
@@ -150,6 +205,30 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     /** The value this column sorts and filters by, which is not always what it shows. */
     order(row: Readonly<Record<string, unknown>>): unknown;
     protected willUpdate(changed: PropertyValues): void;
+    /** The words of the heading, for naming the controls on it. */
+    private get name();
+    connectedCallback(): void;
+    private observeHeading;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Asks for a width, in pixels, no narrower than a column can be read at.
+     *
+     * Through the same request every controlled value here uses: announced, and
+     * applied only where nobody refused it.
+     */
+    private resizeTo;
+    /** Which way a drag or an arrow key grows the column, in this writing direction. */
+    private get forward();
+    private readonly handleResizeStart;
+    private readonly handleResizeMove;
+    private readonly handleResizeEnd;
+    /**
+     * The separator's keys: a step each way, four with Shift, and Home for the
+     * narrowest. Arrows follow the writing direction, so the one pointing away
+     * from the heading's start always widens it.
+     */
+    private readonly handleResizeKey;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,10 +4,13 @@ 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, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+var HelixHeadlessTableColumn_1;
+import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, 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';
-const at = (row, path) => {
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+export const at = (row, path) => {
     if (path === '') {
         return undefined;
     }
@@ -30,11 +33,50 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
+        this.resizable = false;
         this.sortable = false;
         this.width = '';
         this.isTableColumn = true;
         this.sorted = undefined;
+        this.movable = false;
+        this.drawn = 0;
+        this.handleResizeStart = (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            event.preventDefault();
+            try {
+                ;
+                event.currentTarget.setPointerCapture(event.pointerId);
+            }
+            catch {
+            }
+            this.resizing = { from: event.clientX, start: this.drawn };
+        };
+        this.handleResizeMove = (event) => {
+            if (this.resizing) {
+                this.resizeTo(this.resizing.start + (event.clientX - this.resizing.from) * this.forward);
+            }
+        };
+        this.handleResizeEnd = () => {
+            this.resizing = undefined;
+        };
+        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;
+            if (grow !== 0) {
+                event.preventDefault();
+                this.resizeTo(this.drawn + grow * step);
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                this.resizeTo(HelixHeadlessTableColumn_1.NARROWEST);
+            }
+        };
     }
+    static { HelixHeadlessTableColumn_1 = this; }
+    static { this.NARROWEST = 48; }
+    static { this.STEP = 16; }
     get track() {
         return this.width || 'minmax(max-content, 1fr)';
     }
@@ -60,8 +102,77 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             this.toggleState(name, on);
         }
     }
+    get name() {
+        return this.textContent?.trim() ?? '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.watcher = new ResizeObserver(([entry]) => {
+                this.drawn = Math.round(entry?.borderBoxSize?.[0]?.inlineSize ?? 0);
+            });
+            this.observeHeading();
+        }
+    }
+    observeHeading() {
+        const heading = this.renderRoot?.querySelector('[part="column"]');
+        if (heading) {
+            this.watcher?.observe(heading);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated?.(changed);
+        this.observeHeading();
+    }
+    resizeTo(px) {
+        const next = `${Math.max(HelixHeadlessTableColumn_1.NARROWEST, Math.round(px))}px`;
+        if (next === this.width) {
+            return;
+        }
+        requestChange({
+            apply: (value) => {
+                this.width = value;
+            },
+            event: (value) => new HelixBeforeResizeEvent({ value }),
+            host: this,
+            next,
+        });
+    }
+    get forward() {
+        return getComputedStyle(this).direction === 'rtl' ? -1 : 1;
+    }
     render() {
-        return html `<span part="column"><slot></slot></span>`;
+        const name = this.name;
+        return html `<span part="column">${this.movable
+            ? html `<button part="grip" type="button" aria-label=${name ? `Move ${name}` : 'Move column'}>
+            <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsThreeVertical.viewBox}>
+              ${unsafeSVG(dotsThreeVertical.content)}
+            </svg>
+          </button>`
+            : nothing}${this.canSort
+            ? html `<button part="sort" type="button"><slot></slot></button>`
+            : html `<slot></slot>`}${this.resizable
+            ? html `<span
+            part="resizer"
+            role="separator"
+            tabindex="0"
+            aria-label=${name ? `Resize ${name}` : 'Resize column'}
+            aria-orientation="vertical"
+            aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
+            aria-valuemax="4096"
+            aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
+            aria-valuetext=${`${this.drawn} pixels`}
+            @keydown=${this.handleResizeKey}
+            @pointerdown=${this.handleResizeStart}
+            @pointermove=${this.handleResizeMove}
+            @pointerup=${this.handleResizeEnd}
+            @pointercancel=${this.handleResizeEnd}
+          ></span>`
+            : nothing}</span>`;
     }
 };
 __decorate([
@@ -76,6 +187,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTableColumn.prototype, "resizable", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
@@ -85,7 +199,13 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "sorted", void 0);
-HelixHeadlessTableColumn = __decorate([
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "movable", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "drawn", void 0);
+HelixHeadlessTableColumn = HelixHeadlessTableColumn_1 = __decorate([
     customElement('helix-headless-table-column')
 ], HelixHeadlessTableColumn);
 export { HelixHeadlessTableColumn };