@fusion.dev/helix-headless 0.23.0 → 0.24.0

package/dist/outline/root/outline-root.js

@@ -47,10 +47,10 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             const arrive = () => {
                 clearTimeout(this.landed);
                 this.landing = undefined;
-                globalThis.removeEventListener?.('scrollend', arrive);
+                globalThis.document?.removeEventListener('scrollend', arrive, true);
                 this.mark();
             };
-            globalThis.addEventListener?.('scrollend', arrive, { once: true });
+            globalThis.document?.addEventListener('scrollend', arrive, { capture: true, once: true });
             this.landed = setTimeout(arrive, 1200);
             if (this.behavior === 'auto') {
                 return;
@@ -97,7 +97,10 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         if (sections.length === 0) {
             return;
         }
-        const passed = sections.filter(({ target }) => target.getBoundingClientRect().top - this.offset <= 1);
+        const scroller = this.scroller;
+        const page = scroller === this.page;
+        const origin = page ? 0 : scroller.getBoundingClientRect().top;
+        const passed = sections.filter(({ target }) => target.getBoundingClientRect().top - origin - this.offset <= 1);
         const active = this.atEnd ? sections.at(-1) : (passed.at(-1) ?? sections[0]);
         this.markTo(active);
     }
@@ -117,12 +120,24 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         }
     }
     get atEnd() {
-        const doc = globalThis.document?.scrollingElement ?? globalThis.document?.documentElement;
-        if (!doc) {
-            return false;
-        }
+        const doc = this.scroller;
         return Math.ceil(doc.scrollTop + doc.clientHeight) >= doc.scrollHeight - 1;
     }
+    get page() {
+        const doc = globalThis.document;
+        return (doc.scrollingElement ?? doc.documentElement);
+    }
+    get scroller() {
+        const doc = globalThis.document;
+        const first = this.sections[0]?.target;
+        for (let node = first?.parentElement; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
+            const { overflowY } = getComputedStyle(node);
+            if (/auto|scroll|overlay/.test(overflowY) && node.scrollHeight > node.clientHeight) {
+                return node;
+            }
+        }
+        return this.page;
+    }
     reach() {
         for (const { target } of this.sections) {
             const element = target;
@@ -147,7 +162,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleClick);
-        globalThis.removeEventListener?.('scroll', this.handleScroll);
+        globalThis.document?.removeEventListener('scroll', this.handleScroll, true);
         if (this.frame !== 0) {
             globalThis.cancelAnimationFrame(this.frame);
             this.frame = 0;
@@ -162,7 +177,10 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleClick);
-        globalThis.addEventListener?.('scroll', this.handleScroll, { passive: true });
+        globalThis.document?.addEventListener('scroll', this.handleScroll, {
+            capture: true,
+            passive: true,
+        });
         if (this.hasUpdated) {
             this.watch();
             this.resize = new ResizeObserver(() => this.indicator.place());

package/dist/radio/group/radio-group.d.ts

@@ -36,6 +36,7 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  *
  * @event {Event} change - Announced once the value has moved.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the answer changes, and cancelable.
+ * @event {HelixSelectEvent} helix-select - Fired when an answer is chosen. Dispatched by the radio and listened for here, because the group is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
  * @event {Event} input - Announced once the value has moved.
  *
  * @csspart feedback - What is wrong with it.

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

@@ -0,0 +1 @@
+export * from './root/scatter-chart-root.js';

package/dist/scatter-chart/index.js

@@ -0,0 +1 @@
+export * from './root/scatter-chart-root.js';

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

@@ -0,0 +1,144 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+/** One row drawn as a point: which row, which series, and where, in percent of the plot. */
+export interface ScatterPoint {
+    depth: number;
+    row: number;
+    x: number;
+    y: number;
+}
+/** The table as the chart reads it: points, both ranges and what each axis is called. */
+export interface ScatterField {
+    points: ScatterPoint[];
+    /** Each series' readings as pairs, for the summary. */
+    pairs: Array<Array<[number, number]>>;
+    x: [number, number];
+    xName: string;
+    y: [number, number];
+    yNames: string[];
+}
+declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+/**
+ * @summary Whether two measures move together, one point per row.
+ *
+ * @description
+ * The chart for a relation rather than a series. The table's first numeric
+ * column is measured across and every other numeric column is measured up, one
+ * point per row, so a table of countries with a column of income and a column
+ * of life expectancy draws one dot for each country. More numeric columns are
+ * more series against the same across, each in its own color.
+ *
+ * **Both axes are measured, so both are labeled.** A line chart's readings are
+ * named along the bottom and its values are read from the tooltip; here the
+ * horizontal position is itself a value, and a point with no scale under it says
+ * nothing about how far along it is. The ticks sit at round numbers and the
+ * range is widened to them, so the plot's edges are numbers a reader can name.
+ *
+ * **What a reader without the picture is told is how strongly the two relate**,
+ * because that is the question a scatter is drawn to answer and the one a table
+ * of the same numbers makes hardest to see. The summary gives each series'
+ * correlation coefficient and how many points it rests on; the table has every
+ * number, and the drawing is `aria-hidden`.
+ *
+ * **The points are elements, not shapes in the drawing.** The drawing stretches
+ * to its box, and a circle in a stretched space is an ellipse, so each point is
+ * a `<span>` placed by percentage over it, which is how `LineChart` draws its
+ * termini and for the same reason.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
+ * @documentation https://helix.fusion.dev/components/scatter-chart
+ *
+ * @csspart gridline - One rule across the plot, under `gridlines`.
+ * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart plot - The drawing.
+ * @csspart point - One row, as a point.
+ * @csspart summary - How strongly the measures relate, for a reader who cannot see the points.
+ * @csspart svg - The drawing surface the rules sit on.
+ * @csspart tooltip - The bubble, forwarded from `Tooltip`.
+ * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-label - The row's own name inside the tooltip.
+ * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-value - A column's value inside the tooltip.
+ * @csspart x-axis - The levels measured across, under the plot.
+ * @csspart x-name - What is measured across.
+ * @csspart x-tick - One labeled level across. A part of its own rather than a shared `tick`, because `::part()` cannot tell which axis a tick is on.
+ * @csspart y-axis - The levels measured up, beside the plot.
+ * @csspart y-name - What is measured up.
+ * @csspart y-tick - One labeled level up.
+ *
+ * @cssproperty --chart-point-x - Where a point sits across, as a percentage. Written by the component.
+ * @cssproperty --chart-point-y - Where a point sits up, as a percentage from the top. Written by the component.
+ * @cssproperty --chart-tick - Where a tick sits along its axis, as a percentage. Written by the component.
+ */
+export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart_base {
+    /**
+     * What to call the strength of the relation in the summary.
+     */
+    correlationLabel: string;
+    /**
+     * Which rules are drawn across the plot, if any.
+     *
+     * Both axes are measured, so the values name an axis rather than a role:
+     * `x` rules the levels across, `y` the levels up. A bare `gridlines`, or
+     * anything unrecognized, means `both`, since neither axis is the one a scatter
+     * is read along.
+     */
+    gridlines?: 'both' | 'x' | 'y';
+    /**
+     * What to call a row in the summary, which counts them.
+     */
+    pointsLabel: string;
+    /** The points as last drawn, which the pointer searches. */
+    private drawn;
+    /** The point a pointer is resting nearest, which the tooltip sits on. */
+    private nearest;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the levels across are ruled. */
+    protected get rulesX(): boolean;
+    /** Whether the levels up are ruled. */
+    protected get rulesY(): boolean;
+    /**
+     * The table as points.
+     *
+     * Read from the rows rather than from `series`, because a point needs both of
+     * its numbers from the same row, and `series` numbers each column's readings
+     * on its own once a cell is blank. A row missing either number is not drawn:
+     * a point with one coordinate has nowhere to be.
+     */
+    protected get field(): ScatterField;
+    protected render(): TemplateResult;
+    /** The rules and the points, behind a seam the styled tier can move. */
+    protected renderPlot(field: ScatterField, along: (value: number) => number, up: (value: number) => number): TemplateResult;
+    /**
+     * What a reader who cannot see the points is told.
+     *
+     * One clause per series, each naming what is measured up against what is
+     * measured across, how many rows it rests on and its correlation, which is
+     * absent where there are fewer than three points or no spread to measure.
+     */
+    protected renderSummary(field: ScatterField): TemplateResult;
+    /** The row a pointer is resting on, over the point it is nearest. */
+    protected renderTooltip(): TemplateResult | typeof nothing;
+    /**
+     * The point a pointer is nearest, within reach.
+     *
+     * Measured in the plot's pixels rather than in percent, because the plot is
+     * rarely square and a percent across is a different distance from a percent
+     * up. A mouse or a pen only, as every chart here: a finger has no hover to
+     * rest on a point with.
+     */
+    private readonly handleMove;
+    private readonly handleLeave;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-scatter-chart': HelixHeadlessScatterChart;
+    }
+}
+export {};

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 {
     /**