@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/blockquote/root/blockquote-root.js

@@ -4,33 +4,110 @@ 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, markRegion } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { customElement, HelixElement, markRegion, reportRuntime } from '@fusion.dev/helix-core';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
+import { typedMarks } from '../../quote/marks.js';
 let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement {
     constructor() {
         super(...arguments);
+        this.attribution = '';
         this.cite = '';
+        this.marks = false;
+        this.warned = false;
+        this.citeWarned = false;
+        this.readPassage = () => {
+            if (!this.marks || this.warned) {
+                return;
+            }
+            const text = [...this.childNodes]
+                .filter((node) => !(node instanceof Element) || !node.slot)
+                .map((node) => node.textContent ?? '')
+                .join('')
+                .trim();
+            if (!typedMarks(text.charAt(0))) {
+                return;
+            }
+            this.warned = true;
+            reportRuntime({
+                kind: 'typed-marks',
+                message: `<${this.localName} marks> starts with a typed quotation mark, and the element draws its own, so the mark shows twice. Take the typed mark out.`,
+                tag: this.localName,
+            });
+        };
     }
+    static { this.styles = css `
+    :host([marks]) [part='blockquote']::before {
+      content: open-quote / '';
+    }
+
+    :host([marks]) [part='blockquote']::after {
+      content: no-close-quote;
+    }
+  `; }
     markEmpty() {
-        markRegion(this.renderRoot, 'attribution', ['attribution']);
+        markRegion(this.renderRoot, 'attribution', ['attribution'], {
+            occupied: 'slot[name="attribution"] > *',
+        });
+        const named = !this.partNamed('attribution')?.hasAttribute('data-empty');
+        const figure = this.partNamed('figure');
+        if (named) {
+            figure?.setAttribute('role', 'figure');
+            figure?.setAttribute('aria-labelledby', 'attribution');
+        }
+        else {
+            figure?.removeAttribute('role');
+            figure?.removeAttribute('aria-labelledby');
+        }
+    }
+    readCite() {
+        if (this.citeWarned || !/\S\s+\S/.test(this.cite || '')) {
+            return;
+        }
+        this.citeWarned = true;
+        reportRuntime({
+            kind: 'cite-not-url',
+            message: `<${this.localName} cite="${this.cite}"> holds words, and \`cite\` takes the URL of the source. Put who said it in \`attribution\`.`,
+            tag: this.localName,
+        });
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', this.readPassage);
     }
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
+        if (changed.has('marks')) {
+            this.readPassage();
+        }
+        if (changed.has('cite')) {
+            this.readCite();
+        }
     }
     render() {
-        return html `<figure aria-labelledby="attribution" part="figure">
+        return html `<div aria-labelledby="attribution" part="figure" role="figure">
       <blockquote part="blockquote" cite=${this.cite || nothing}><slot></slot></blockquote>
-      <figcaption id="attribution" part="attribution"
-        ><slot name="attribution" @slotchange=${() => this.markEmpty()}></slot
-      ></figcaption>
-    </figure>`;
+      ${this.renderAttribution()}
+    </div>`;
+    }
+    renderAttribution() {
+        return html `<div id="attribution" part="attribution"
+      ><slot name="attribution" @slotchange=${() => this.markEmpty()}
+        >${this.attribution ? html `<span>${this.attribution}</span>` : nothing}</slot
+      ></div
+    >`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessBlockquote.prototype, "attribution", void 0);
 __decorate([
     property()
 ], HelixHeadlessBlockquote.prototype, "cite", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessBlockquote.prototype, "marks", void 0);
 HelixHeadlessBlockquote = __decorate([
     customElement('helix-headless-blockquote')
 ], HelixHeadlessBlockquote);

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, slotNamed, } 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(slotNamed(this.renderRoot, '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.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, fillTemplate, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -55,7 +55,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             ><button
               part="expand"
               type="button"
-              aria-label=${this.expandLabel.replace('{count}', String(folded))}
+              aria-label=${fillTemplate(this.expandLabel, { count: String(folded) })}
               @click=${this.expand}
             >
               …

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.
@@ -54,6 +53,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @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.
@@ -135,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;
     /**
@@ -249,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
@@ -263,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;
     /**
@@ -346,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 {

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
+import { submitAs } from '../submitter.js';
 let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
     constructor() {
         super(...arguments);
@@ -103,42 +104,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         }
     }
     submit(form) {
-        const undo = [];
-        const override = (attribute, value) => {
-            if (value === null) {
-                return;
-            }
-            const had = form.getAttribute(attribute);
-            form.setAttribute(attribute, value);
-            undo.push(() => {
-                if (had === null) {
-                    form.removeAttribute(attribute);
-                }
-                else {
-                    form.setAttribute(attribute, had);
-                }
-            });
-        };
-        override('action', this.formAction || null);
-        override('enctype', this.formEnctype || null);
-        override('method', this.formMethod || null);
-        override('novalidate', this.formNoValidate ? '' : null);
-        override('target', this.formTarget || null);
-        const reports = this.name !== '';
-        if (reports) {
-            this.internals.setFormValue(this.value);
-        }
-        try {
-            form.requestSubmit();
-        }
-        finally {
-            for (const put of undo) {
-                put();
-            }
-            if (reports) {
-                this.internals.setFormValue(null);
-            }
-        }
+        submitAs(form, this);
     }
     get commandForElement() {
         const button = this.renderRoot?.querySelector('button');
@@ -222,9 +188,12 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       @keydown=${this.notePress}
       @pointerdown=${this.notePress}
     >
-      ${label}
+      ${label}${this.renderSpinner()}
     </button>${this.renderLive()}`;
     }
+    renderSpinner() {
+        return this.pending ? html `<span part="spinner" aria-hidden="true"></span>` : nothing;
+    }
 };
 __decorate([
     property()

package/dist/button/submitter.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Submitting a form through a native submit button that stands in for one in a
+ * shadow root.
+ *
+ * `requestSubmit(submitter)` takes only a native submit button whose form is
+ * the form, and a button inside a shadow root is neither. A hidden native
+ * `<button type="submit">` carrying the same name, value and `form*`
+ * overrides is put into the form for the one synchronous call, as Shoelace and
+ * Web Awesome do, so the platform does the rest: `event.submitter` is a
+ * button with the name and value, `new FormData(form, event.submitter)`
+ * includes them, and the overrides apply to that submission alone.
+ */
+/** What a submit button carries into the submission it starts. */
+export interface Carried {
+    formAction: string;
+    formEnctype: string;
+    formMethod: string;
+    formNoValidate: boolean;
+    formTarget: string;
+    name: string;
+    value: string;
+}
+/**
+ * Submits `form` as a native submit button carrying `carried` would, and takes
+ * that button out again whether or not a listener refused the submission.
+ */
+export declare const submitAs: (form: HTMLFormElement, carried: Carried) => void;

package/dist/button/submitter.js

@@ -0,0 +1,25 @@
+export const submitAs = (form, carried) => {
+    const stand = form.ownerDocument.createElement('button');
+    stand.type = 'submit';
+    stand.hidden = true;
+    for (const [attribute, value] of [
+        ['formaction', carried.formAction],
+        ['formenctype', carried.formEnctype],
+        ['formmethod', carried.formMethod],
+        ['formtarget', carried.formTarget],
+        ['name', carried.name],
+    ]) {
+        if (value !== '') {
+            stand.setAttribute(attribute, value);
+        }
+    }
+    stand.value = carried.value;
+    stand.formNoValidate = carried.formNoValidate;
+    form.append(stand);
+    try {
+        form.requestSubmit(stand);
+    }
+    finally {
+        stand.remove();
+    }
+};

package/dist/button-group/arrows.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The index a key moves focus to, or `-1` for a key that moves nothing.
+ *
+ * Down and Up step forward and back, and Left and Right step by `step`, which
+ * core's `inlineStep` turns on a right-to-left page. Home and End go to the
+ * ends. A step wraps from the last button round to the first, as a toolbar's
+ * does.
+ *
+ * @param key The key pressed.
+ * @param step `1` or `-1` for Left and Right, from `inlineStep`, and `0` otherwise.
+ * @param from The index focus is on, or `-1` where it is on none of them.
+ * @param count How many buttons focus can move between.
+ */
+export declare const arrowTarget: (key: string, step: number, from: number, count: number) => number;

package/dist/button-group/arrows.js

@@ -0,0 +1,10 @@
+export const arrowTarget = (key, step, from, count) => {
+    const by = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : step;
+    if (from < 0 || count === 0) {
+        return -1;
+    }
+    if (key === 'Home' || key === 'End') {
+        return key === 'Home' ? 0 : count - 1;
+    }
+    return by === 0 ? -1 : (from + by + count) % count;
+};

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

@@ -9,19 +9,62 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * controls, and a development build warns once with the kind `missing-name`.
  *
  * The group does not manage focus, so each button keeps its own tab stop. For
- * one tab stop with arrow keys between the buttons, the APG toolbar pattern,
- * use Toolbar.
+ * one tab stop with arrow keys between a mix of controls, the APG toolbar
+ * pattern, use Toolbar.
  *
  * Buttons are slotted, so they stay your own elements and keep their own
  * appearance and size.
  *
+ * **Buttons that stay pressed.** With `selection-mode`, each button with a
+ * `value` is a toggle button: a press presses or releases it, and it says so
+ * with `aria-pressed`. `single` keeps one pressed at a time, and a press on the
+ * pressed one releases it. `multiple` lets any number be pressed. `value` is
+ * the pressed values, comma separated. A press sends a cancelable
+ * `helix-before-change` with the value it would leave, then `change`.
+ *
+ * The pressed state is written on the control inside each button's shadow
+ * root, so the markup you rendered is never changed and a framework hydrating
+ * it sees what its server sent. That is also why only Helix buttons are
+ * toggles: a native `<button>` or a button without a `value` stays a plain
+ * action button in the group, and a native one without its own
+ * `aria-pressed` warns once, with the runtime kind `untold-toggle`. The inner
+ * control also carries
+ * `--button-group-pressed`, `1` or `0`, for a `::part(button)` rule of yours.
+ *
+ * Use Toggle Group instead for a choice that belongs in a form, or one where
+ * the arrow keys choose as they move: it is a `radiogroup` of options with a
+ * form value, `required` and validation. A Button Group in a selection mode is
+ * a set of actions that stay on, such as bold and italic, or a view that a
+ * press switches, and it submits nothing.
+ *
+ * **Keyboard.** In a selection mode the group is one tab stop: the button
+ * focus was last on, then the first pressed one, then the first one.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Moves to the next button, from the last back to the first. |
+ * | Left, Up | Moves to the button before, from the first round to the last. |
+ * | Home, End | Moves to the first or the last button. |
+ * | Space, Enter | Presses or releases the focused button. |
+ *
+ * Left and Right swap on a right-to-left page, and a disabled button is
+ * passed over. In a selection mode the group is a `toolbar`, with
+ * `aria-orientation` under `orientation="vertical"`. Inside a toolbar it stays
+ * a named `group`, and the toolbar's own arrow keys walk its buttons, so a
+ * reader meets one toolbar.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
- * @aliases Segmented buttons, Split button
+ * @aliases Segmented buttons, Split button, Toggle buttons
  * @documentation https://fusion.dev/helix/components/button-group
  *
  * @slot - The buttons in the group.
+ *
+ * @event {Event} change - Fired after a press changes `value`, in a selection mode.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes `value`, with the value it would leave in `detail.value`. Cancelable: call `preventDefault()` to keep the buttons as they are.
+ *
+ * @cssproperty --button-group-pressed - Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look.
  */
 export declare class HelixHeadlessButtonGroup extends HelixElement {
     /**
@@ -51,8 +94,103 @@ export declare class HelixHeadlessButtonGroup extends HelixElement {
      * column.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether the buttons stay pressed: `single` keeps one pressed at a time and
+     * `multiple` any number. Unset, they are action buttons, each its own tab
+     * stop, as before.
+     *
+     * Optional, so the attribute is absent until a consumer writes it.
+     */
+    selectionMode?: 'multiple' | 'single';
+    /**
+     * The values of the pressed buttons, comma separated, in a selection mode.
+     * A button's own `value` names it, so a value holds no comma.
+     *
+     * The attribute is the seed, and a press changes the property, which does
+     * not reflect, as a native control's `value` does not.
+     */
+    value: string;
+    /**
+     * The Helix buttons of a group in a selection mode, in the order they are
+     * written, and none otherwise. Empty on a server, which has no tree.
+     */
+    private get buttons();
+    /**
+     * Whether the group holds the tab stop and the arrow keys: in a selection
+     * mode, and not inside a toolbar, whose own keys walk the buttons.
+     */
+    private get roving();
+    /** Whether a button is pressed: its value is among the group's. */
+    private pressed;
+    /** The button focus was last on, which holds the tab stop. */
+    private lastFocused;
+    /**
+     * The buttons this group has told something, each with whether it moved
+     * their tab stop, so a button that leaves the group, or a group that leaves
+     * its selection mode, is put back as it was.
+     */
+    private readonly told;
+    private watcher;
+    /**
+     * Tells every button whether it is pressed and whether it holds the stop,
+     * and puts back the ones that left.
+     */
+    private sync;
+    /** Whether this group has said a native button in it cannot be a toggle, so it says so once. */
+    private warned;
+    /**
+     * Says once that a native `<button>` in a selection mode stays an action
+     * button, since its pressed state would be an attribute on the page's markup.
+     * One with its own `aria-pressed` is the page's to say, and is not reported.
+     */
+    private warn;
+    /**
+     * Writes a button's pressed state onto its control, once the button has
+     * rendered it, and takes it off a button the group no longer holds.
+     *
+     * **On the control inside the button's shadow root, never on the button.**
+     * An attribute written on the consumer's element is a hydration mismatch a
+     * React consumer's hydration reports and does not patch up, which is why
+     * `tellDisclosure` hands a trigger `expanded` as a property. Inside the
+     * button's own shadow root no framework compares the attribute, and the
+     * reader is on that control. Read at the moment of the write, so the last
+     * press wins whatever order renders finish in.
+     *
+     * The control is the `<button>` a Helix button renders, which is where its
+     * `delegatesFocus` sends focus and what a reader is on.
+     *
+     * A button that carries `aria-pressed` itself is the consumer's to say, and
+     * its own forwarding carries that down instead.
+     */
+    private mark;
+    /**
+     * Says on a button's control whether it is pressed, or that it is no toggle
+     * at all where `pressed` is undefined. A styled tier draws the look here.
+     *
+     * @param control The focusable control inside the button's shadow root.
+     * @param pressed Whether the button is pressed, or undefined where it is not a toggle.
+     */
+    protected markPressed(control: HTMLElement, pressed: boolean | undefined): void;
+    /**
+     * Presses or releases the button a press acted on. `helix-press` rather than
+     * `click`, since a button sends it only for a press that acted: never while
+     * it is disabled or pending.
+     */
+    private readonly handlePress;
+    /**
+     * Moves focus between the buttons without pressing them, a toolbar's
+     * reading: a press is its own act, on Space or Enter, which the button
+     * answers natively. Both axes, as every set here answers both, and the
+     * horizontal pair turns on a right-to-left page.
+     */
+    private readonly handleKeydown;
+    /** Moves the tab stop to the button focus arrived on. */
+    private readonly noteFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {