@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/avatar/group/avatar-group.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, reportRuntime, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixElement, hostAria, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const FOLDS_UP_TO = 12;
@@ -12,17 +12,15 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     constructor() {
         super(...arguments);
         this.label = '';
-        this.overflowLabel = '{count} more';
+        this.overflowLabel = '{count} more: {names}';
         this.folded = new WeakSet();
-        this.warned = false;
     }
     get avatars() {
         return this.knownChildren.filter((child) => child instanceof HTMLElement);
     }
     get overflow() {
         const limit = this.max ?? 0;
-        const limited = limit > 0 && limit <= FOLDS_UP_TO;
-        return limited ? Math.max(this.avatars.length - limit, 0) : 0;
+        return limit > 0 ? Math.max(this.avatars.length - limit, 0) : 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -35,23 +33,11 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     updated(changed) {
         super.updated(changed);
         this.fold();
-        const limit = this.max ?? 0;
-        if (limit > FOLDS_UP_TO && this.avatars.length > limit && !this.warned) {
-            this.warned = true;
-            reportRuntime({
-                kind: 'max-past-fold',
-                message: `<${this.localName}> has max="${this.max}", past the ${FOLDS_UP_TO} the fold is written for, ` +
-                    'so every avatar is shown and none are counted. Lower `max`, or hand the group the ' +
-                    'avatars you want shown.',
-                tag: this.localName,
-            });
-        }
     }
     fold() {
         const limit = this.max ?? 0;
-        const limited = limit > 0 && limit <= FOLDS_UP_TO;
         for (const [index, avatar] of this.avatars.entries()) {
-            const past = limited && index >= limit;
+            const past = limit > 0 && index >= limit;
             if (past && !avatar.hidden) {
                 this.folded.add(avatar);
                 whenHydrated(avatar, () => {
@@ -66,6 +52,15 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
             }
         }
     }
+    foldedNames() {
+        const limit = this.max ?? 0;
+        return this.avatars
+            .slice(limit)
+            .map((avatar) => avatar.name ||
+            avatar.getAttribute('aria-label') ||
+            '')
+            .filter(Boolean);
+    }
     render() {
         const past = this.overflow;
         return html `<slot @slotchange=${() => this.requestUpdate()}></slot>
@@ -73,7 +68,10 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
             ? html `<span
               part="overflow"
               role="img"
-              aria-label=${this.overflowLabel.replace('{count}', String(past))}
+              aria-label=${fillTemplate(this.overflowLabel, {
+                count: String(past),
+                names: this.foldedNames().join(', '),
+            }).replace(/[\s:,]+$/, '')}
               >+${past}</span
             >`
             : ''}`;

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

@@ -44,7 +44,9 @@ export declare class HelixHeadlessBadge extends HelixElement {
     /**
      * The badge's name, read by screen readers.
      *
-     * Required for a dot, which has no text to read.
+     * Required for a dot, which has no text to read. `{count}` is replaced with
+     * what the badge shows, so `label="{count} unread"` reads "8 unread" and
+     * stays current as `value` changes, with no label of yours to keep in step.
      */
     label: string;
     /**

package/dist/badge/root/badge-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
@@ -36,7 +36,7 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
-        aria-label=${announced ? this.label || text : nothing}
+        aria-label=${announced ? fillTemplate(this.label, { count: text }) || text : nothing}
         >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }

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

@@ -176,6 +176,17 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * of any scale question the picture raises.
      */
     secondary?: string;
+    /**
+     * Stacks a category's columns into one, each series standing on the ones
+     * before it, so the column's height is the category's total.
+     *
+     * Absent stands them side by side, as it always did. A negative reading
+     * hangs below zero on the negatives before it, so neither direction hides
+     * the other. The scale fits the stacks. A series
+     * in `lines` is still a line, measured on its own reading; columns on the
+     * second scale stack among themselves.
+     */
+    stacked: boolean;
     /** The series names on the second scale, lowercased and trimmed. */
     private get scaled();
     /** The series names drawn as a line, lowercased and trimmed for matching. */
@@ -204,7 +215,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      *
      * The highest, because which category leads is the question a bar chart is
      * read for, and the table beside it has every other number. The reading is
-     * written the way the table writes it, such as `$128k` for `128000`.
+     * written the way the table writes it, such as `$128k` for `128000`. A
+     * series a legend hid is not drawn and is not said.
      */
     protected renderSummary(series: Series[]): TemplateResult;
     /**
@@ -214,6 +226,11 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * and a screen reader hearing both hears the same numbers twice.
      */
     protected renderPlot(series: Series[], categories: string[], y: (value: number) => number, domain: [number, number], floor: number, z?: (value: number) => number): TemplateResult;
+    /**
+     * One category's columns stacked into one, each on the ones before it on
+     * its own scale, through the pure `stackSpans`.
+     */
+    private renderStack;
     /**
      * The numbers along one scale, drawn only where there are two of them.
      *

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

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
+import { stackEnds, 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));
@@ -39,8 +41,22 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const own = (one) => scaled.has(one.name.trim().toLowerCase());
         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) => {
+            if (!this.stacked) {
+                return group.flatMap((one) => one.points.map((point) => point.value));
+            }
+            const columns = group.filter((one) => !lined.has(one.name.trim().toLowerCase()));
+            const slots = columns.map((one) => byRow(one, categories.length));
+            return [
+                ...group
+                    .filter((one) => lined.has(one.name.trim().toLowerCase()))
+                    .flatMap((one) => one.points.map((point) => point.value)),
+                ...stackEnds(categories.map((_, at) => slots.map((one) => one[at]?.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 +82,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);
@@ -85,13 +101,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         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;
+        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,12 +169,14 @@ 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)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
@@ -165,6 +185,17 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       ${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 +265,13 @@ 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 all = this.stacked
+            ? stackEnds(Array.from({ length: this.readings }, (_, row) => shown.map((one) => byRow(one, this.readings)[row]?.value)))
+            : 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 +302,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,15 @@
+/** 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[];

package/dist/bar-chart/stack.js

@@ -0,0 +1,19 @@
+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]])));

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

@@ -1,5 +1,17 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../breadcrumb/breadcrumb.js';
+/** One step of a trail written as data, for `items`. */
+export interface BreadcrumbItem {
+    /** The URL the step links to. The last step is the current page and takes none. */
+    href?: string;
+    /** The step's words. */
+    label: string;
+    /** The link's `rel`. */
+    rel?: string;
+    /** Where the link opens. */
+    target?: string;
+}
 /**
  * @summary Shows the path to the current page.
  *
@@ -19,6 +31,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The trail does not measure itself, and you write its overflow in markup: put
  * the crumb that holds the folded items where the gap should appear.
  *
+ * A trail built from data, such as a router's matched routes, takes `items`: an
+ * 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
@@ -28,15 +50,49 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The trail's items, in order from the root to the current page. Put
  * 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.
+     *
+     * React Aria's `items`. A property only: a trail is built by script, and an
+     * attribute would put the whole path into the markup twice.
+     */
+    items: BreadcrumbItem[];
     /**
      * The landmark's name, read by screen readers. An `aria-label` on the host
      * 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;
 }
 declare global {

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

@@ -5,26 +5,96 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { nothing } from 'lit';
+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) {
+            return nothing;
+        }
+        const crumb = this.tag('breadcrumb');
+        const last = this.items.length - 1;
+        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=${this.expandLabel.replace('{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)}
+        rel=${item.rel ?? nothing}
+        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">
-      <slot></slot>
+      ${this.renderItems()}<slot></slot>
     </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

@@ -32,6 +32,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,6 +50,8 @@ 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 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.
@@ -214,7 +225,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.
      */

package/dist/button/root/button-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, StatusController, supportsInvokers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, defaultButton, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, HelixPressEvent, pressType, StatusController, submitsOnEnter, supportsInvokers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
@@ -27,27 +27,23 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.pending = false;
         this.pendingLabel = 'Loading';
         this.status = new StatusController(this);
+        this.recent = {};
+        this.notePress = (event) => {
+            if (event.type === 'pointerdown') {
+                this.recent = { pointer: event.pointerType };
+            }
+            else if (event.key === 'Enter' || event.key === ' ') {
+                this.recent = { key: true };
+            }
+        };
         this.handleClick = (event) => {
             if (this.pending) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 return;
             }
-            this.linkCommand();
-            this.sendCommand();
-            if (this.type === 'button') {
-                return;
-            }
-            const { form } = this;
-            if (!form) {
-                return;
-            }
-            if (this.type === 'submit') {
-                this.submit(form);
-            }
-            else {
-                form.reset();
-            }
+            this.act();
+            this.announcePress(event);
         };
         this.type = 'button';
         this.value = '';
@@ -57,8 +53,8 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
             if (event.key !== 'Enter' ||
                 event.defaultPrevented ||
                 !form ||
-                !HelixFormElement.submitsOnEnter(event.composedPath()[0], form) ||
-                HelixFormElement.defaultButton(form) !== this) {
+                !submitsOnEnter(event.composedPath()[0], form) ||
+                defaultButton(form) !== this) {
                 return;
             }
             event.preventDefault();
@@ -84,6 +80,28 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
     }; }
+    announcePress(click) {
+        const pointerType = pressType(click, this.recent);
+        this.recent = {};
+        this.dispatchEvent(new HelixPressEvent({ pointerType }));
+    }
+    act() {
+        this.linkCommand();
+        this.sendCommand();
+        if (this.type === 'button') {
+            return;
+        }
+        const { form } = this;
+        if (!form) {
+            return;
+        }
+        if (this.type === 'submit') {
+            this.submit(form);
+        }
+        else {
+            form.reset();
+        }
+    }
     submit(form) {
         const undo = [];
         const override = (attribute, value) => {
@@ -201,6 +219,8 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       tabindex=${stop}
       ?disabled=${this.isDisabled}
       @click=${this.handleClick}
+      @keydown=${this.notePress}
+      @pointerdown=${this.notePress}
     >
       ${label}
     </button>${this.renderLive()}`;