@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -4,14 +4,16 @@ 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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
+import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
         this.highestLabel = 'Highest';
+        this.stacked = false;
     }
     get scaled() {
         return new Set(seriesNames(this.secondary));
@@ -36,11 +38,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
         const scaled = this.scaled;
-        const own = (one) => scaled.has(one.name.trim().toLowerCase());
+        const own = (one) => scaled.has(seriesKey(one.name));
         const shown = series.filter((one) => this.showsSeries(one.name));
         const values = shown.flatMap((one) => one.points.map((point) => point.value));
+        const lined = this.lined;
+        const readingsOf = (group) => this.stacked
+            ? stackedReadings(group, categories.length, (one) => lined.has(seriesKey(one.name)))
+            : group.flatMap((one) => one.points.map((point) => point.value));
         const on = (which) => {
-            const found = shown.filter(which).flatMap((one) => one.points.map((point) => point.value));
+            const found = readingsOf(shown.filter(which));
             return found.length > 0 ? found : values.length > 0 ? values : [0];
         };
         const [low, high] = extent(scaled.size === 0 ? on(() => true) : on((one) => !own(one)));
@@ -66,7 +72,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const columns = this.plottedColumns;
         const highest = series.flatMap((one, depth) => {
             const top = one.points.reduce((best, point) => (best === undefined || point.value > best.value ? point : best), undefined);
-            if (top === undefined) {
+            if (top === undefined || !this.showsSeries(one.name)) {
                 return [];
             }
             const text = rows[top.at]?.cells[columns[depth] ?? -1]?.text ?? String(top.value);
@@ -80,18 +86,20 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const slot = 100 / categories.length;
         const lined = this.lined;
         const scaled = this.scaled;
-        const own = (one) => scaled.has(one.name.trim().toLowerCase());
+        const own = (one) => scaled.has(seriesKey(one.name));
         const against = (one) => z !== undefined && own(one) ? z : y;
         const columns = series
             .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
-            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name));
-        const stride = (slot * 0.72) / Math.max(columns.length, 1);
-        const gap = columns.length > 1 ? stride * 0.08 : 0;
+            .filter(({ one }) => !lined.has(seriesKey(one.name)) && this.showsSeries(one.name));
+        const abreast = this.stacked ? 1 : columns.length;
+        const stride = (slot * 0.72) / Math.max(abreast, 1);
+        const gap = abreast > 1 ? stride * 0.08 : 0;
         const thickness = stride - gap;
-        const bar = (value, index, depth, tone, scale) => {
+        const bar = (value, index, depth, tone, scale, from) => {
             const at = scale(value);
-            const along = Math.min(floor, at);
-            const size = Math.abs(floor - at);
+            const base = from === undefined ? floor : scale(from);
+            const along = Math.min(base, at);
+            const size = Math.abs(base - at);
             const across = index * slot + slot * 0.14 + depth * stride + gap / 2;
             return sideways
                 ? svg `<rect
@@ -151,20 +159,33 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
               data-active=${this.pointer.at === index ? '' : nothing}
               part="group${this.pointer.at === index ? ' group-active' : ''}"
             >
-              ${columns.map(({ slots, one, tone }, depth) => {
-            const point = slots[index];
-            return point === undefined
-                ? nothing
-                : bar(point.value, index, depth, tone, against(one));
-        })}
+              ${this.stacked
+            ? this.renderStack(columns, index, against, bar)
+            : columns.map(({ slots, one, tone }, depth) => {
+                const point = slots[index];
+                return point === undefined
+                    ? nothing
+                    : bar(point.value, index, depth, tone, against(one));
+            })}
             </g>`)}
-        ${series.map((one) => lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name)
+        ${series.map((one) => lined.has(seriesKey(one.name)) && this.showsSeries(one.name)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
             : nothing)}
       </svg>
       ${this.renderTooltip()}
     </div>`;
     }
+    renderStack(columns, index, against, bar) {
+        const scales = [...new Set(columns.map(({ one }) => against(one)))];
+        return scales.flatMap((scale) => {
+            const mine = columns.filter(({ one }) => against(one) === scale);
+            const spans = stackSpans(mine.map(({ slots }) => slots[index]?.value));
+            return mine.flatMap(({ tone }, place) => {
+                const span = spans[place];
+                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0])];
+            });
+        });
+    }
     renderAxis(scale, domain, which, sideways, widest, tint) {
         const sizing = sideways ? undefined : `--bar-chart-axis: ${widest}ch`;
         return html `<div
@@ -234,10 +255,14 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return drawTooltip(this.sourceRows, at, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const shown = series.filter((one) => this.showsSeries(one.name));
-        const values = shown
+        const reached = shown
             .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined);
-        const all = shown.flatMap((one) => one.points.map((point) => point.value));
+        const values = this.stacked ? stackEnds([reached]) : reached;
+        const lined = this.lined;
+        const all = this.stacked
+            ? stackedReadings(shown, this.readings, (one) => lined.has(seriesKey(one.name)))
+            : shown.flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(all.length > 0 ? all : [0]);
         const domain = [Math.min(0, low), Math.max(0, high)];
         const sideways = this.orientation === 'horizontal';
@@ -268,6 +293,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessBarChart.prototype, "secondary", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessBarChart.prototype, "stacked", void 0);
 HelixHeadlessBarChart = __decorate([
     customElement('helix-headless-bar-chart')
 ], HelixHeadlessBarChart);

package/dist/bar-chart/stack.d.ts

@@ -0,0 +1,25 @@
+import { type Series } from '@fusion.dev/helix-core';
+/** Where a column starts and ends along the measure, in the data's own units. */
+export type Span = readonly [from: number, to: number];
+/**
+ * Each column's span in one category, in the order given: a positive reading
+ * stacks up from zero on the positives before it, and a negative one down
+ * from zero on the negatives before it, so neither hides the other. A blank
+ * has no span.
+ */
+export declare const stackSpans: (values: readonly (number | undefined)[]) => (Span | undefined)[];
+/**
+ * Every end a stack reaches across the categories, which is what its scale
+ * has to hold: the top of each stack of positives and the foot of each stack
+ * of negatives. `categories` holds each category's readings, one per column.
+ */
+export declare const stackEnds: (categories: readonly (readonly (number | undefined)[])[]) => number[];
+/**
+ * The readings a stacked scale has to hold, over `count` categories: every
+ * reading of a series drawn as a line, which `lined` says, and the top and
+ * foot of each category's stack of the others.
+ *
+ * The plot's scale and the tooltip's placing ask the same question, and
+ * answered apart they disagreed about the lines.
+ */
+export declare const stackedReadings: (group: readonly Series[], count: number, lined: (one: Series) => boolean) => number[];

package/dist/bar-chart/stack.js

@@ -0,0 +1,27 @@
+import { byRow } from '@fusion.dev/helix-core';
+export const stackSpans = (values) => {
+    let up = 0;
+    let down = 0;
+    return values.map((value) => {
+        if (value === undefined) {
+            return undefined;
+        }
+        const from = value >= 0 ? up : down;
+        const to = from + value;
+        if (value >= 0) {
+            up = to;
+        }
+        else {
+            down = to;
+        }
+        return [from, to];
+    });
+};
+export const stackEnds = (categories) => categories.flatMap((values) => stackSpans(values).flatMap((span) => (span === undefined ? [] : [span[1]])));
+export const stackedReadings = (group, count, lined) => {
+    const slots = group.filter((one) => !lined(one)).map((one) => byRow(one, count));
+    return [
+        ...group.filter(lined).flatMap((one) => one.points.map((point) => point.value)),
+        ...stackEnds(Array.from({ length: count }, (_, at) => slots.map((one) => one[at]?.value))),
+    ];
+};

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -37,6 +37,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart link - The crumb itself, which is an `<a>` where `href` is set.
  * @csspart separator - The separator preceding the item.
  * @csspart separator-mark - The chevron between crumbs, shown when no separator is slotted.
+ *
+ * @cssstate end - While the `end` slot holds something, so a stylesheet can join
+ * the label and what follows it into one control.
  */
 export declare class HelixHeadlessBreadcrumb extends HelixElement {
     /**
@@ -74,6 +77,17 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      */
     target: string;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Says whether anything sits after the label.
+     *
+     * A switcher's trigger in `end` makes the crumb a split control, and its
+     * label is drawn as the first half of it. No selector can ask a slot what was
+     * assigned to it, so this is script. Answered from a DOM, so the server
+     * writes the resting answer and the first client update corrects it.
+     */
+    private markEnd;
+    private readonly handleEnd;
     /**
      * The mark between one crumb and the next.
      *

package/dist/breadcrumbs/breadcrumb/breadcrumb.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -15,12 +15,22 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
         this.current = false;
         this.rel = '';
         this.target = '';
+        this.handleEnd = () => {
+            this.markEnd();
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
         this.internals.ariaCurrent = this.current ? 'page' : null;
     }
+    updated(changed) {
+        super.updated(changed);
+        this.markEnd();
+    }
+    markEnd() {
+        this.toggleState('end', slotFilled(this.renderRoot?.querySelector('slot[name="end"]')));
+    }
     renderSeparator() {
         return html `<slot name="separator"
       ><svg part="separator-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox}>
@@ -41,7 +51,7 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
               rel=${this.rel || nothing}
               >${label}</a
             >`
-            : html `<span part="link">${label}</span>`}<slot name="end"></slot>`;
+            : html `<span part="link">${label}</span>`}<slot name="end" @slotchange=${this.handleEnd}></slot>`;
     }
 };
 __decorate([

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

@@ -35,6 +35,12 @@ export interface BreadcrumbItem {
  * array of `{ label, href }`, drawn as crumbs in order, the last one as the
  * current page. Slotted crumbs follow them. Use one way or the other in a trail.
  *
+ * With `max-items`, a trail drawn from `items` that is longer folds its middle
+ * into one crumb: the first crumb, a button, then the last `max-items` less one.
+ * The button is named by `expand-label` and shows the whole trail, moving focus
+ * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
+ * do not fold; write the folded crumb where the gap should be.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -45,13 +51,20 @@ export interface BreadcrumbItem {
  * the crumb that holds the folded items where the gap should appear.
  *
  * @csspart crumb - Each crumb drawn from `items`.
+ * @csspart crumb-collapsed - The crumb that holds the folded middle of a trail longer than `max-items`.
  * @csspart crumb-current - The crumb drawn from `items` for the current page.
  * @csspart crumb-link - The link, or the current page's words, of a crumb drawn from `items`.
  * @csspart crumb-separator - The separator before a crumb drawn from `items`.
  * @csspart crumb-separator-mark - The chevron before a crumb drawn from `items`.
+ * @csspart expand - The button in the folded crumb that shows the whole trail.
  * @csspart list - The ordered list.
  */
 export declare class HelixHeadlessBreadcrumbs extends HelixElement {
+    /**
+     * The name of the button that shows a folded trail's hidden crumbs. `{count}`
+     * is replaced by how many it shows. Translate it with the page.
+     */
+    expandLabel: string;
     /**
      * The trail as data, drawn as crumbs before any you slot. The last item is the
      * current page.
@@ -65,7 +78,19 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
      * wins over it.
      */
     label: string;
+    /**
+     * The most crumbs a trail drawn from `items` shows before it folds its middle
+     * into one, counting the first and the last. Unset, it never folds. At least
+     * 2, so the first crumb and the current page always show.
+     */
+    maxItems?: number;
+    /** Whether a reader has asked to see the whole of a folded trail. */
+    private expanded;
+    /** Shows the whole trail and moves focus to the first crumb it brought back. */
+    private readonly expand;
     protected willUpdate(changed: PropertyValues): void;
+    /** How many crumbs drawn from `items` are folded away, or 0. */
+    private get folded();
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -4,21 +4,38 @@ 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 { customElement, fillTemplate, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import '../breadcrumb/breadcrumb.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
     constructor() {
         super(...arguments);
+        this.expandLabel = 'Show {count} more';
         this.items = [];
         this.label = 'Breadcrumb';
+        this.expanded = false;
+        this.expand = () => {
+            this.expanded = true;
+            this.updateComplete.then(() => {
+                const crumb = this.renderRoot.querySelectorAll('[part~="crumb"]')[1];
+                crumb?.shadowRoot?.querySelector('a, [part="link"]')?.focus();
+            });
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
+        if (changed.has('items') && changed.get('items') !== undefined) {
+            this.expanded = false;
+        }
+    }
+    get folded() {
+        const most = this.maxItems ?? 0;
+        const count = this.items.length;
+        return !this.expanded && most >= 2 && count > most ? count - most : 0;
     }
     renderItems() {
         if (this.items.length === 0) {
@@ -26,7 +43,27 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
         }
         const crumb = this.tag('breadcrumb');
         const last = this.items.length - 1;
-        return html `${repeat(this.items, (item, index) => html `<${crumb}
+        const folded = this.folded;
+        const shown = this.items
+            .map((item, index) => ({ index, item }))
+            .filter(({ index }) => folded === 0 || index === 0 || index > folded);
+        const fold = folded === 0
+            ? nothing
+            : html `<${crumb}
+            part="crumb crumb-collapsed"
+            exportparts="link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
+            ><button
+              part="expand"
+              type="button"
+              aria-label=${fillTemplate(this.expandLabel, { count: String(folded) })}
+              @click=${this.expand}
+            >
+              …
+            </button></${crumb}
+          >`;
+        const first = shown.slice(0, 1);
+        const rest = shown.slice(1);
+        const draw = ({ index, item }) => html `<${crumb}
         part="crumb${index === last ? ' crumb-current' : ''}"
         exportparts="link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
         href=${index === last ? nothing : (item.href ?? nothing)}
@@ -34,7 +71,8 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
         target=${item.target ?? nothing}
         ?current=${index === last}
         >${item.label}</${crumb}
-      >`)}`;
+      >`;
+        return html `${repeat(first, ({ index }) => index, draw)}${fold}${repeat(rest, ({ index }) => index, draw)}`;
     }
     render() {
         return html `<ol part="list" role="list">
@@ -42,12 +80,21 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     </ol>`;
     }
 };
+__decorate([
+    property({ attribute: 'expand-label' })
+], HelixHeadlessBreadcrumbs.prototype, "expandLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessBreadcrumbs.prototype, "items", void 0);
 __decorate([
     property()
 ], HelixHeadlessBreadcrumbs.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'max-items', type: Number })
+], HelixHeadlessBreadcrumbs.prototype, "maxItems", void 0);
+__decorate([
+    state()
+], HelixHeadlessBreadcrumbs.prototype, "expanded", void 0);
 HelixHeadlessBreadcrumbs = __decorate([
     customElement('helix-headless-breadcrumbs')
 ], HelixHeadlessBreadcrumbs);

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

@@ -18,13 +18,12 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * The inner control is always `type="button"`, because a
  * `<button type="submit">` inside a shadow root cannot submit a form outside
- * it. To submit, the button calls `requestSubmit()` on its form, which runs
- * validation, unlike `submit()`.
- *
- * A `submit` listener reads `event.submitter` as `null`, because the platform
- * accepts only a native submit button there. The button's `name` and `value`
- * are in the form data, so read them from `new FormData(form)` to tell two
- * submit buttons apart.
+ * it. To submit, the button puts a hidden native submit button carrying its
+ * `name`, `value` and `form*` overrides into the form, calls
+ * `requestSubmit()` with it, which runs validation, unlike `submit()`, and
+ * takes it out again, as Shoelace and Web Awesome do. A `submit` listener
+ * reads that button as `event.submitter`, so `event.submitter.value` and
+ * `new FormData(form, event.submitter)` tell two submit buttons apart.
  *
  * As the first submit button in its form, it is the form's default button:
  * Enter in a text field of the form presses it, as it presses a native one.
@@ -32,6 +31,15 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * Set `pending` while the action a press started is still running. The button
  * keeps focus and refuses presses, and a reader on it hears `pending-label`.
  *
+ * Every press that acts sends `helix-press` with what pressed it in
+ * `detail.pointerType`: `mouse`, `pen`, `touch`, `keyboard`, or `virtual` for
+ * a screen reader's press or a script's `click()`, as React Aria's `onPress`
+ * does. It is sent once the press has done its own work, before `click`
+ * reaches listeners on the element, and never for a disabled or pending
+ * button.
+ *
+ * **Keyboard.** Enter and Space press the button, as on a native one.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -41,8 +49,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - Content after the label.
  * @slot start - Content before the label, usually an icon.
  *
+ * @event {HelixPressEvent} helix-press - Fired when a press acts, with `detail.pointerType` saying what pressed the button.
+ *
  * @csspart button - The inner control.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending, and the styled button clips it out of view.
+ * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the words. It is rendered only while the button is pending.
  * @csspart text - The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
  *
  * @cssstate pending - The button is pending: `pending` is set.
@@ -124,18 +135,13 @@ export declare class HelixHeadlessButton extends HelixFormElement {
     /**
      * Where this button's submission goes, overriding the form's own.
      *
-     * **The five `form*` overrides work by writing the form and putting it back**,
-     * which is the only mechanism available and is closer to the platform than it
-     * sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-     * and it refuses ours twice over: the inner `<button>` is `type="button"` so
-     * it is not a submit button, and it sits in this shadow root so its form owner
-     * is not the consumer's form. Both throw. So the submission is started with no
-     * submitter and the overrides are applied to the form for the duration of it.
-     *
-     * The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-     * the window is one call and a `finally` closes it whether or not a listener
-     * refused. What a `submit` handler observes during that window is the form a
-     * native submitter would have given it, which is the point.
+     * **The five `form*` overrides ride on a native submit button that stands in
+     * for this one**, because `requestSubmit(submitter)` refuses the inner
+     * `<button>` twice over: it is `type="button"`, and it sits in this shadow
+     * root, so its form owner is not the consumer's form. The stand-in is a
+     * hidden `<button type="submit">` in the form for the one synchronous call,
+     * so the platform applies the overrides to that submission alone and leaves
+     * the form as it was. See `submitAs`.
      */
     formAction: string;
     /**
@@ -214,7 +220,22 @@ export declare class HelixHeadlessButton extends HelixFormElement {
     protected renderLive(): TemplateResult | typeof nothing;
     /** Moves focus to the inner control, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
+    /** What the control saw before a click that the click may not carry. */
+    private recent;
+    /**
+     * @internal Records what starts a press, a pointer's kind or Enter or Space,
+     * for `helix-press`. Bound on the inner control by this render and by any
+     * subclass that draws its own.
+     */
+    protected readonly notePress: (event: Event) => void;
+    /**
+     * @internal Sends `helix-press` for a click that acted, with what pressed it,
+     * and forgets what started it.
+     */
+    protected announcePress(click: Event): void;
     private readonly handleClick;
+    /** What a press does: sends the command, and submits or resets the form. */
+    private act;
     /**
      * What activating the button does to its form.
      */
@@ -223,13 +244,10 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * The value this button submits under its own `name`, as a native submit
      * button does.
      *
-     * **Reported for exactly the submission this button starts and not otherwise.**
+     * **Sent with exactly the submission this button starts and not otherwise.**
      * A native submit button contributes `name=value` only when it is the one
-     * that submitted, and every other button on the form contributes nothing. A
-     * form-associated element reporting a value continuously would contribute on
-     * every submission whoever started it, which is a different feature wearing
-     * the same name, so `submit` below sets it, submits, and clears it inside one
-     * synchronous call.
+     * that submitted, and every other button on the form contributes nothing,
+     * which is what the native button standing in for this one at submit does.
      *
      * `CopyButton` has a `value` of its own meaning the text to put on the
      * clipboard, which is not this and is why it is declared there rather than
@@ -237,19 +255,8 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      */
     value: string;
     /**
-     * Submits the form as this button, for the length of one call.
-     *
-     * Everything a native submitter carries is written onto the form, the
-     * submission is started, and everything is put back. See `formAction` for why
-     * `requestSubmit(submitter)` is not available to a control inside a shadow
-     * root.
-     *
-     * `novalidate` is in the same list rather than reached by `form.submit()`,
-     * which looks like the shortcut and is not: `submit()` skips the `submit`
-     * event as well as the validation, so a consumer's handler would stop running
-     * the moment somebody wrote `formnovalidate`. Turning the flag on and calling
-     * `requestSubmit()` skips the validation alone, which is what the attribute
-     * means.
+     * Submits the form as this button, through a native submit button carrying
+     * its name, value and overrides. See `formAction`.
      */
     private submit;
     /**
@@ -320,6 +327,11 @@ export declare class HelixHeadlessButton extends HelixFormElement {
     /** Called by the browser when the button's form changes. */
     formAssociatedCallback(form: HTMLFormElement | null): void;
     protected render(): TemplateResult;
+    /**
+     * The ring a pending button turns, behind a seam a tier can move: an empty
+     * element, hidden from a screen reader, which hears `pending-label` instead.
+     */
+    protected renderSpinner(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {