@fusion.dev/helix-headless 0.0.0-dev

package/dist/toggle/group/toggle-group.js

@@ -0,0 +1,278 @@
+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, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { HelixHeadlessToggle } from '../root/toggle-root.js';
+/**
+ * @summary A row of options with the selection marked by a moving indicator.
+ *
+ * @description
+ * The indicator is one element that travels, not a background that appears on
+ * whichever item is current. That difference is the whole point: a fill that
+ * swaps is two things changing at once and reads as a flicker, while one that
+ * moves is a single object the eye follows, and it says where the selection
+ * came from as well as where it went.
+ *
+ * Its whole box is measured from the selected item and written onto
+ * the indicator as custom properties, because labels are different lengths and
+ * no proportion of the group is the right answer. Measurement is client-side by
+ * necessity, so the server renders the indicator hidden and it fades in once it
+ * has somewhere to be, which is the harmless direction: it appears rather than
+ * jumping from a wrong place.
+ *
+ * A radio group, and only that. Navigation is links marked with `aria-current`
+ * and styled by the `data-navigation-item` recipe: radio semantics would announce a
+ * set of destinations as a set of choices. A tab controls a panel.
+ *
+ * Being a radio group, it is a form control, and it says so through
+ * `HelixFormElement`: it reports its value under a `name`, comes back to the
+ * markup's choice on reset, and restores the one a reader made when the browser
+ * brings a form back.
+ *
+ * The semantics were already right: the host has carried `role="radiogroup"`
+ * and the items `role="radio"` from the start. What none of it did was reach a
+ * form. A button in a shadow root submits nothing whatever its role, so the
+ * value has to be reported by the host, which is the only thing a form can
+ * see.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases SegmentedControl, Segmented, Navigation, Switcher
+ * @documentation https://helix.fusion.dev/components/toggle-group
+ *
+ * @slot - The group's items.
+ *
+ * @event {Event} change - Announced once the value has moved.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the answer moves, and cancelable. The only way to refuse one.
+ * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} input - Announced once the value has moved.
+ *
+ * @csspart divider - The rule after an inline label, separating it from the items.
+ * @csspart feedback - What is wrong with it.
+ * @csspart hint - Help under the row, while nothing is wrong.
+ * @csspart indicator - The moving marker behind the selected item.
+ * @csspart label - The question, over the row.
+ * @csspart row - The line the track sits on, with whatever flanks it.
+ * @csspart track - The bar the items sit in.
+ */
+let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
+    constructor() {
+        super(...arguments);
+        /* The mark. The selection sync it used to share a method with is `sync()`. */
+        this.indicator = new IndicatorController(this, {
+            // The same exact match `sync` makes: nothing chosen means nothing marked,
+            // and the controller takes the mark away rather than parking it on item one.
+            active: () => this.items.find((item) => item.value === this.value),
+            indicator: () => this.renderRoot?.querySelector('[part="indicator"]'),
+            surface: () => this.renderRoot?.querySelector('[part="track"]'),
+        });
+        /* Moving and choosing are one act, which is the radio group pattern this
+           control also follows, and is what the controller exists to stop being
+           written per component. */
+        /* Registered rather than held. A controller adds itself to the host, so there
+           is no reference to keep: nothing here talks to it after construction, which
+           is why it is `protected` and not `private`. A private field nothing reads
+           is an unused one, and the honest reading is that the subclass tier is where
+           a consumer would reach for it. */
+        this.keys = new KeyboardNavigationController(this, { items: () => this.items });
+        /* Stated once, and the group never thinks about it again. See the
+           controller: the cascade was four hand calls from four different
+           methods, so which paths reached it differed by component and a fifth
+           group would have got none at all. */
+        this.cascade = new DisabledCascadeController(this, {
+            items: () => this.items,
+        });
+        this.handleSelection = (event) => {
+            this.requestValue(event.detail.value);
+        };
+    }
+    /**
+     * Marks the chosen item, which used to happen inside the placing method.
+     *
+     * They were one method because the geometry needed the active item anyway,
+     * and that made a selection change look like a layout concern. `resolveActiveItem`
+     * rather than the first item, because a group opening on a disabled segment
+     * marked it as chosen.
+     */
+    sync() {
+        /* An exact match and nothing else.
+         *
+         * This went through `resolveActiveItem`, which falls back to the first
+         * enabled item, so a group with no value marked one anyway:
+         * `aria-checked="true"`, the thumb placed under it, full selected styling,
+         * while the group reported nothing. A `required` group showed an answer it
+         * did not have, and a reader who submitted without touching it was told a
+         * value was missing while looking at one.
+         *
+         * The fallback is right where it came from. A tab set always shows a panel,
+         * so something has to be current; a group that reports a form value has the
+         * honest option of reporting none. */
+        const active = this.items.find((item) => item.value === this.value);
+        /* With nothing chosen there is no selection to carry the tab stop, so the
+           first item holds one until there is. Otherwise an unanswered group is a
+           control the keyboard cannot enter, which is what the fallback was quietly
+           also doing for it. */
+        const entry = active ? undefined : this.items.find((item) => !item.disabled);
+        for (const item of this.items) {
+            item.selected = item === active;
+            item.focusable = item === entry;
+        }
+    }
+    get items() {
+        return [...this.children].filter((child) => child instanceof HelixHeadlessToggle);
+    }
+    /**
+     * Watches the group and every item it currently holds.
+     *
+     * Called again on `slotchange`, because the set was read once at first paint:
+     * an item added later was measured by nothing, so a group whose options
+     * arrive with the data had a thumb that stopped following the moment one of
+     * them changed width. Observing the same element twice is a no-op, so there
+     * is nothing to unwind first.
+     */
+    watch() {
+        this.observer?.observe(this);
+        for (const item of this.items) {
+            this.observer?.observe(item);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('helix-select', this.handleSelection);
+        /* The observer is rebuilt here, because nothing else does it.
+         *
+         * `firstUpdated` runs once for the life of the element and
+         * `disconnectedCallback` runs every time it moves, so a framework
+         * reordering a list left this permanently dead: the observer gone, nothing
+         * to rebuild it, and the component still rendering as though it were
+         * watching. Guarded on `hasUpdated`, because the first connection happens
+         * before the first render and there is nothing to watch yet.
+         * `check:observers` holds it. */
+        if (this.hasUpdated) {
+            this.measure();
+            this.watch();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleSelection);
+        this.observer?.disconnect();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.sync();
+        this.indicator.place();
+        /* Per item, not only the host, which is what the controller's own observer
+           covers. An item can change width inside a track that keeps its size, and
+           the host never fires for that. */
+        this.measure();
+        this.watch();
+    }
+    /** The observer the items are registered on, rebuilt with them. */
+    measure() {
+        this.observer?.disconnect();
+        this.observer = new ResizeObserver(() => this.indicator.place());
+    }
+    updated(changed) {
+        super.updated(changed);
+        // Every update, not only the ones that name `value`: see the note on
+        // `ColorInput.updated`. The placement stays gated, because the indicator
+        // controller already places on every update of its own host.
+        this.sync();
+        if (changed.has('value')) {
+            this.indicator.place();
+        }
+        this.validate();
+        /* Every update, because the label and the message come and go with the
+           properties behind them, and an element reference to a node that has been
+           re-rendered is a reference to nothing. */
+        this.linkHost();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        // Through internals, so nothing lands on the host as an attribute. A nav
+        // renders a real `<nav>` in the shadow root and takes its semantics from
+        // that, so the host stays neutral.
+        /* The label goes on as a string as well as the element reference
+           `linkHost` sets, because this is the half a server can write. The
+           reference wins on the client, which is what lets a consumer slot a label
+           richer than a string. */
+        hostAria(this.internals, { label: this.label, role: 'radiogroup' });
+        // `null` rather than an empty string when nothing is chosen, which is the
+        // difference between a control that submits nothing and one that submits a
+        // blank.
+        this.internals.setFormValue(this.value === '' ? null : this.value);
+    }
+    /**
+     * The verdict on the answer, which `required` had been asking for and not
+     * getting.
+     *
+     * `required` arrived with `MixinField` and nothing enforced it: the attribute
+     * reflected, the marker rendered beside the label, and a form with an
+     * unanswered group submitted anyway. An API that exists and does nothing is
+     * worse than one that is missing, because the marker is a promise to the
+     * reader that something will stop them.
+     *
+     * The anchor is the track rather than the host, so the browser's own bubble
+     * points at the control rather than at a box with nothing in it.
+     */
+    validate() {
+        this.reportRequired(this.value === '', 'Choose one to continue.', 'track');
+    }
+    /**
+     * The row the track sits in, so something can sit beside it.
+     *
+     * **Bare slots, and a wrapper only around the row itself.** An unassigned
+     * slot is `display: contents` in the UA stylesheet and generates no box at
+     * all, so a group with nothing slotted lays out exactly as it did before this
+     * existed: no grid track, no flex item, no gap. Wrapping each side in a div
+     * instead would paint an empty inset band on every group in the library that
+     * never asked for one, which is the measurement Card already paid for.
+     *
+     * The row does always generate a box, and is entitled to: the track is always
+     * in it.
+     */
+    render() {
+        /* The track is an element now, where it used to be the host itself.
+           It has to be: the label, the hint and the message are the host's children
+           too, and with the track on the host they were flex items in the same row
+           as the segments. The track also owns the box the indicator is measured
+           against, which is why `place` reads it rather than `this`. */
+        /* **Inside the track when it is placed at the start, not beside it.** A
+           label sitting outside reads as a field's label that happens to be on one
+           line; inside, with a rule after it, the group reads as one control that
+           says what it is for. The divider is what makes that legible: without it
+           the word is a first segment that cannot be pressed. */
+        const inside = this.labelPlacement === 'start';
+        const label = this.renderGroupLabel();
+        return html `${inside ? nothing : label}
+      <div part="row">
+        <slot name="start"></slot>
+        <div part="track">
+        ${inside ? html `${label}<div part="divider" aria-hidden="true"></div>` : nothing}
+        <div part="indicator" aria-hidden="true"></div>
+        <slot
+          @slotchange=${() => {
+            this.watch();
+            this.sync();
+            this.indicator.place();
+        }}
+          ></slot>
+        </div>
+        <slot name="end"></slot>
+      </div>
+      ${this.renderHint()}${this.renderFeedback()}`;
+    }
+};
+__decorate([
+    property({ attribute: 'label-placement', reflect: true })
+], HelixHeadlessToggleGroup.prototype, "labelPlacement", void 0);
+HelixHeadlessToggleGroup = __decorate([
+    customElement('helix-headless-toggle-group')
+], HelixHeadlessToggleGroup);
+export { HelixHeadlessToggleGroup };

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './group/toggle-group.js';
+export * from './root/toggle-root.js';

package/dist/toggle/index.js

@@ -0,0 +1,2 @@
+export * from './group/toggle-group.js';
+export * from './root/toggle-root.js';

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

@@ -0,0 +1,99 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary One option in a toggle group.
+ *
+ * @description
+ * Renders a `<button role="radio">`. This is a form control and nothing else.
+ *
+ * Navigation is not this. It is links marked with `aria-current` and styled by
+ * the `data-navigation-item` recipe in the base layer, which carries the same look
+ * without radio semantics announcing destinations as choices.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases Segment, NavItem, Option
+ * @documentation https://helix.fusion.dev/components/toggle
+ *
+ * @slot - The item's label.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart item - The radio button.
+ */
+export declare class HelixHeadlessToggle extends HelixElement {
+    /**
+     * Identifies the item to the group.
+     */
+    value: string;
+    /**
+     * Whether the markup declared this one chosen, which is what a reset returns to.
+     *
+     * `<option selected>` reflects to `defaultSelected` and `option.selected` is
+     * live state that does not reflect, and those are two different facts. This
+     * element has one `selected` doing both jobs, so what is captured here is what
+     * the markup said at upgrade, before anything could overwrite it: read the
+     * attribute later and the listbox's own writes answer instead.
+     *
+     * **The deeper half is 302 and is not this.** State reflecting under the
+     * declaration's name is the fault `TreeItem` already avoids by mirroring to
+     * `data-selected`, and four families here still write `selected` back into a
+     * consumer's markup. Splitting them means moving what every stylesheet selects
+     * on, which is a change of its own rather than a property being added.
+     */
+    get defaultSelected(): boolean;
+    set defaultSelected(next: boolean);
+    /** What the markup said, read once at construction for the reason above. */
+    private seeded;
+    /**
+     * Whether this item is the current one.
+     */
+    selected: boolean;
+    /**
+     * Whether the item can be chosen.
+     */
+    disabled: boolean;
+    /**
+     * Moves focus to this item's own control.
+     *
+     * The group drives arrow-key navigation and cannot reach the control itself,
+     * which is inside this shadow root. Exposing the intent as a method keeps the
+     * group out of the child's internals.
+     */
+    focusItem(): void;
+    /** Chooses this item and announces it. */
+    select(): void;
+    /**
+     * Whether this item holds the group's tab stop while nothing is chosen.
+     *
+     * The stop normally rides on the selection, and an unanswered group has no
+     * selection, so it had no stop and the keyboard could not reach it. Written
+     * by the group, with no attribute: it is coordination between elements, and
+     * `tabindex` on a host the consumer rendered is the change a React consumer's
+     * hydration reports and does not patch up.
+     */
+    focusable: boolean;
+    /**
+     * Mirrors the chosen state where a stylesheet can select on it.
+     *
+     * **A custom state and not the `selected` attribute it used to reflect.** The
+     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
+     * radio group answering for its set. Reflected, that put the element's own
+     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
+     * which React reconciles and reports as a mismatch, and which a serialized
+     * element pasted back declares as a choice nobody made. `ElementInternals`
+     * holds it instead, where it is not in the DOM at all.
+     *
+     * Reading `selected` is unaffected and so is writing it: the attribute still
+     * seeds the property, which is what `<helix-toggle selected>` in a consumer's
+     * markup means. What stops is the write back. See 302 and 304.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-toggle': HelixHeadlessToggle;
+    }
+}

package/dist/toggle/root/toggle-root.js

@@ -0,0 +1,146 @@
+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, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary One option in a toggle group.
+ *
+ * @description
+ * Renders a `<button role="radio">`. This is a form control and nothing else.
+ *
+ * Navigation is not this. It is links marked with `aria-current` and styled by
+ * the `data-navigation-item` recipe in the base layer, which carries the same look
+ * without radio semantics announcing destinations as choices.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases Segment, NavItem, Option
+ * @documentation https://helix.fusion.dev/components/toggle
+ *
+ * @slot - The item's label.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart item - The radio button.
+ */
+let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Identifies the item to the group.
+         */
+        this.value = '';
+        /** What the markup said, read once at construction for the reason above. */
+        this.seeded = this.hasAttribute('selected');
+        /**
+         * Whether this item is the current one.
+         */
+        this.selected = false;
+        /**
+         * Whether the item can be chosen.
+         */
+        this.disabled = false;
+        /**
+         * Whether this item holds the group's tab stop while nothing is chosen.
+         *
+         * The stop normally rides on the selection, and an unanswered group has no
+         * selection, so it had no stop and the keyboard could not reach it. Written
+         * by the group, with no attribute: it is coordination between elements, and
+         * `tabindex` on a host the consumer rendered is the change a React consumer's
+         * hydration reports and does not patch up.
+         */
+        this.focusable = false;
+    }
+    /**
+     * Whether the markup declared this one chosen, which is what a reset returns to.
+     *
+     * `<option selected>` reflects to `defaultSelected` and `option.selected` is
+     * live state that does not reflect, and those are two different facts. This
+     * element has one `selected` doing both jobs, so what is captured here is what
+     * the markup said at upgrade, before anything could overwrite it: read the
+     * attribute later and the listbox's own writes answer instead.
+     *
+     * **The deeper half is 302 and is not this.** State reflecting under the
+     * declaration's name is the fault `TreeItem` already avoids by mirroring to
+     * `data-selected`, and four families here still write `selected` back into a
+     * consumer's markup. Splitting them means moving what every stylesheet selects
+     * on, which is a change of its own rather than a property being added.
+     */
+    get defaultSelected() {
+        return this.seeded;
+    }
+    set defaultSelected(next) {
+        this.seeded = next;
+    }
+    /**
+     * Moves focus to this item's own control.
+     *
+     * The group drives arrow-key navigation and cannot reach the control itself,
+     * which is inside this shadow root. Exposing the intent as a method keeps the
+     * group out of the child's internals.
+     */
+    focusItem() {
+        this.renderRoot.querySelector('[part="item"]')?.focus();
+    }
+    /** Chooses this item and announces it. */
+    select() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+    }
+    /**
+     * Mirrors the chosen state where a stylesheet can select on it.
+     *
+     * **A custom state and not the `selected` attribute it used to reflect.** The
+     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
+     * radio group answering for its set. Reflected, that put the element's own
+     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
+     * which React reconciles and reports as a mismatch, and which a serialized
+     * element pasted back declares as a choice nobody made. `ElementInternals`
+     * holds it instead, where it is not in the DOM at all.
+     *
+     * Reading `selected` is unaffected and so is writing it: the attribute still
+     * seeds the property, which is what `<helix-toggle selected>` in a consumer's
+     * markup means. What stops is the write back. See 302 and 304.
+     */
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('selected', this.selected);
+    }
+    render() {
+        return html `<button
+      part="item"
+      type="button"
+      role="radio"
+      aria-checked=${this.selected ? 'true' : 'false'}
+      ?disabled=${this.disabled}
+      tabindex=${this.selected || this.focusable ? '0' : '-1'}
+      @click=${() => this.select()}
+    >
+      <slot></slot>
+    </button>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessToggle.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessToggle.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessToggle.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggle.prototype, "focusable", void 0);
+HelixHeadlessToggle = __decorate([
+    customElement('helix-headless-toggle')
+], HelixHeadlessToggle);
+export { HelixHeadlessToggle };

package/dist/toolbar/index.d.ts

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

package/dist/toolbar/index.js

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

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

@@ -0,0 +1,105 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A group of controls that share one tab stop.
+ *
+ * @description
+ * Separate from a button group, and the difference is what it holds: a group is
+ * homogeneous, a toolbar is not. A toolbar mixes buttons, toggles, and menus,
+ * which is why it is its own component rather than a variant of something.
+ *
+ * The whole toolbar is one tab stop and the arrows move between controls, so a
+ * page with three toolbars costs three presses of Tab to get past rather than
+ * thirty. Controls are found by asking the browser what is focusable rather
+ * than by matching tag names, so a toolbar works with anything put in it,
+ * including a consumer's own elements.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Actions, Action bar
+ * @documentation https://helix.fusion.dev/components/toolbar
+ *
+ * @slot - The toolbar's controls.
+ *
+ * @csspart toolbar - The toolbar container.
+ */
+export declare class HelixHeadlessToolbar extends HelixElement {
+    /**
+     * Accessible name for the toolbar.
+     */
+    label: string;
+    /**
+     * Which way the arrow keys move.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    private watcher;
+    /**
+     * Children that can take the tab stop, in document order.
+     *
+     * Every child that is not `disabled` and not `aria-hidden`, which is
+     * deliberately a test on the element rather than a list of tag names: a
+     * toolbar holds anything, including elements this package has never heard of.
+     * Client only, there being no tree to walk on the server.
+     *
+     * **It does not ask a child whether it is focusable, and the description said
+     * it did.** That would mean reading a `focusable` property off each one, which
+     * `focus` below does when moving the stop and this does not when choosing the
+     * set. The two are separable and only one of them was ever written: an element
+     * that is neither disabled nor hidden and still cannot take focus is counted
+     * here and skipped there.
+     */
+    private get controls();
+    /**
+     * Moves the single tab stop to one control.
+     *
+     * Prefers the control's own `focusable` property to writing `tabindex` on it.
+     * The attribute is a change to markup the consumer rendered, which a React
+     * consumer's hydration reports and does not patch up; a control that offers
+     * the property moves the stop inside its own shadow root instead.
+     *
+     * `tabindex` stays as the fallback, because a toolbar has to hold controls
+     * this package has never heard of.
+     */
+    private setTabStop;
+    /**
+     * Sets the first tab stop once every custom control has upgraded.
+     *
+     * A custom element has no properties at all before it upgrades, so a pass
+     * that ran first would find no `focusable`, take the `tabindex` fallback, and
+     * write the very attribute this exists to avoid.
+     */
+    private claimTabStop;
+    private readonly handleFocusIn;
+    /**
+     * Gives the tab stop back to a control that still exists.
+     *
+     * `controls` excludes anything disabled or hidden, so disabling the control
+     * holding the stop dropped it out of the list while every other control was
+     * already at `-1`. The toolbar then had no tab stop at all and the keyboard
+     * could not reach it again, from a change as ordinary as a Save button
+     * disabling itself once the form is clean.
+     *
+     * `foreign` stays false, the same as the first claim: a control this package
+     * has never heard of that was never given `tabindex="-1"` is still in the
+     * document's own tab order, so it is never the one that gets stranded.
+     */
+    private readonly restoreTabStop;
+    /**
+     * The orientation in force.
+     *
+     * Unset is horizontal, and stays unset: the default is the absent attribute,
+     * so a reflected default cannot appear on the host after hydration.
+     */
+    private get axis();
+    private readonly handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-toolbar': HelixHeadlessToolbar;
+    }
+}