@fusion.dev/helix-headless 0.0.0-dev

package/dist/toast/item/toast-item.js

@@ -0,0 +1,345 @@
+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, MixinDismissible, requestChange, toneMark, } from '@fusion.dev/helix-core';
+import { x } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+/**
+ * @summary One message in the toast region.
+ *
+ * @description
+ * An element rather than a slot, because it carries a timeout, a tone, a
+ * dismiss control and a lifetime that pauses: behavior, state and API, which
+ * is the test for whether a region becomes an element in this library.
+ *
+ * **The timer is the item's own.** Held by the region, one message arriving
+ * would restart another's, so a stack of three would go from three seconds each
+ * to nine for the last one. Each message is on its own clock from the moment it
+ * is rendered.
+ *
+ * **A message is the opposite of the page it is over.** Inverted by default,
+ * because a thing arriving in a corner has to be told apart from the page in
+ * the moment before it is read, and inverting does that without spending a
+ * color that means something. It is a flip of `color-scheme` rather than a
+ * named inverse surface: every token in the subtree re-resolves, so a `Retry`
+ * a consumer slots in comes out right without knowing where it is. `Tooltip`
+ * can name the inverse surface directly because it holds no controls; this
+ * cannot. Set `data-color-mode` on the region to take the page's mode instead.
+ *
+ * **No duration means it stays.** That is the safe default rather than the
+ * common one: anything carrying an action has to still be there when the reader
+ * decides to take it, and a component cannot tell from the outside whether the
+ * message it was given is disposable.
+ *
+ * **The clock stops while it is being read.** Hover pauses it, and so does
+ * focus landing anywhere inside, which is the case that matters more: a
+ * keyboard reader tabbing towards the action in a toast is exactly the person a
+ * timer must not race. Both resume where they left off rather than starting
+ * again, so a message half-read does not get a full second life every time a
+ * pointer crosses it.
+ *
+ * **Going away is a request, never an act.** It dispatches a cancelable
+ * `helix-dismiss` and does nothing else: the consumer owns the list, so the
+ * item removing itself would leave the two disagreeing. Auto-dismiss and the
+ * dismiss control raise the same event, so a consumer handles one path and not
+ * two.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @slot - The message.
+ * @slot actions - What to do about it, usually a button or a link.
+ * @slot dismiss-icon - Replaces the glyph inside the dismiss control.
+ * @slot icon - Replaces the tone mark. Matches `Callout`, which is why the
+ *   dismiss control's own glyph is `dismiss-icon` rather than this: two slots
+ *   cannot share a name, assignment goes to whichever comes first in the tree,
+ *   and the tone mark is the one a consumer reaches for.
+ *
+ * @event {HelixDismissEvent} helix-dismiss - Fired when it asks to go, whether by the control or by its timer. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart actions - The region holding what to do about it.
+ * @csspart content - The message.
+ * @csspart dismiss - The control that asks to close.
+ * @csspart dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart icon - The tone mark, where the message has one.
+ * @csspart icon-mark - The tone glyph, where none is slotted.
+ * @csspart item - The message's own surface.
+ * @csspart timer - The bar showing how long is left, where a duration was given.
+ *
+ * @cssproperty --toast-duration - How long this message stays, in milliseconds, for a progress hint.
+ */
+let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissible(HelixElement) {
+    constructor() {
+        super(...arguments);
+        /** Whether it is showing, whoever said so, and `undefined` until somebody has. */
+        this.openState = undefined;
+        /* Arrows, so `this` is the item wherever the listener ends up. Lit does bind
+           a template listener to its host, and relying on that puts a load-bearing
+           fact about a library in a place nobody reading this file would look. */
+        /**
+         * How many reasons there are to hold the clock, rather than whether there is
+         * one.
+         *
+         * Hover and focus both stopped the same timer with nothing counting them, so
+         * a reader who tabbed into a message and then moved the pointer off it had
+         * the clock restarted underneath them while they were still reading it. That
+         * is the case the pause exists for, and it was the case that broke it.
+         *
+         * The two are genuinely independent: a pointer can leave while focus stays,
+         * and focus can leave while the pointer stays. Only the last one out starts
+         * it again.
+         */
+        this.holds = 0;
+        this.handlePause = () => {
+            this.holds += 1;
+            this.pause();
+        };
+        this.handleResume = () => {
+            this.holds = Math.max(this.holds - 1, 0);
+            if (this.holds === 0) {
+                this.resume();
+            }
+        };
+    }
+    /**
+     * Whether the message is still showing.
+     *
+     * The same decide-once contract every other stateful thing here carries, and
+     * it was the one exception: this waited to be told in every case, so
+     * `duration` did nothing at all without consumer script and the dismiss
+     * control looked broken to anyone who pressed it. `Dialog` closes itself,
+     * `Accordion` closes itself, and there was no reason a message should not.
+     *
+     * Declared by the markup and it is the consumer's: the item announces and
+     * waits. Not declared and it is the item's: it goes when it is asked to, and
+     * the consumer still hears `helix-dismiss` and takes it out of their own
+     * list. Read once, at the first update.
+     *
+     * **No `default-open`, unlike the four mixins.** A `default-` seed exists so
+     * markup can choose a starting state without claiming ownership, and there is
+     * only one starting state that makes sense: a message that has been rendered
+     * is showing. An attribute whose only legal value is the default is an
+     * attribute nobody can use.
+     *
+     *
+     */
+    get open() {
+        return this.openState ?? true;
+    }
+    set open(next) {
+        const previous = this.open;
+        this.openState = next;
+        this.requestUpdate('open', previous);
+    }
+    /**
+     * Asks to be taken away, and reports whether the request stood.
+     *
+     * Announced before anything happens, so `preventDefault()` is a refusal and
+     * the message stays. The event still carries the label, because a consumer
+     * removing this from their own state has to know which one went, and that is
+     * true whether or not the item hid itself first.
+     */
+    dismiss() {
+        if (!this.open) {
+            return true;
+        }
+        /* The clock stops either way. A timer left running on a message that has
+           gone would fire into nothing, and would hold the item alive until it
+           did. */
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        return requestChange({
+            apply: () => {
+                const previous = this.open;
+                this.openState = false;
+                this.requestUpdate('open', previous);
+            },
+            /* `helix-dismiss` answers a controlled `open`, which reads oddly and is
+               exact. A toast is not an overlay that opens and closes: `next` below is
+               `false` and nothing here ever calls `requestOpen(true)`, so it only
+               ever asks in one direction, and the verb for that direction is
+               `dismiss`. `HelixDismissEvent` already carries it for a tag leaving a
+               list and an announcement closing itself, which is the same act from the
+               element's side. A consumer controlling `open` therefore answers
+               `onhelix-dismiss`, and the generated types ask for exactly that. */
+            event: () => this.dismissEvent(),
+            host: this,
+            next: false,
+        });
+    }
+    /** Stops the clock, leaving whatever is left of it. */
+    pause() {
+        if (this.timer === undefined || this.startedAt === undefined) {
+            return;
+        }
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.remaining = Math.max((this.remaining ?? 0) - (Date.now() - this.startedAt), 0);
+        this.startedAt = undefined;
+        /* Said on the host so the indicator can freeze with the clock. A `data-`
+           attribute rather than a property, because it is written after upgrade
+           from a pointer moving: nothing declares it and no server rendered it,
+           which is the same reason `Carousel` names its slides from here. */
+        this.toggleAttribute('data-paused', true);
+    }
+    /** Starts it again from where it stopped. */
+    resume() {
+        if (this.timer !== undefined || this.remaining === undefined || this.remaining <= 0) {
+            return;
+        }
+        this.startedAt = Date.now();
+        this.toggleAttribute('data-paused', false);
+        this.timer = setTimeout(() => {
+            this.timer = undefined;
+            this.dismiss();
+        }, this.remaining);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // A message removed while its timer is running would otherwise fire into
+        // nothing, and hold the item alive until it did.
+        clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* Before anything else reads it, and only the first time. Everything that
+           declares the mode has arrived by now: attributes from markup or from a
+           server's output, and properties a framework assigned on mount. */
+        /* Mirrored for CSS rather than reflected onto `open` itself, which is the
+           library's rule about state: a reflected `open` is indistinguishable from
+           one the consumer declared, and that attribute is what ownership is read
+           from. `data-closed` can never be mistaken for a declaration. */
+        /* **`data-closed`, because open is the resting state.** It was `data-open`,
+           written whenever the toast was open, and a toast opens by default: a
+           consumer server-rendering `<helix-toast-item>` got a `data-open` back that
+           React never sent. Inverting keeps a `data-` hook for the headless consumer
+           this publishes it for, and moves the write to the side that only happens
+           after somebody dismisses the message, which is long past hydration. */
+        this.toggleAttribute('data-closed', !this.open);
+        /* And `hidden` beside it, because `data-closed` is a hook and not a
+           mechanism. A dismissed toast was hidden by `opacity: 0` and
+           `visibility: hidden` in the styled sheet and by nothing at all here, so a
+           consumer on this tier had a message that never went away: measured, a
+           closed base toast printed its text on the page.
+           It costs the styled tier nothing, the same as the accordion: `:host` sets
+           `display: grid` unconditionally so the author rule beats the UA sheet,
+           and the exit still animates its row down from `1fr`. */
+        this.toggleAttribute('hidden', !this.open);
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        /* Here rather than in `connectedCallback`, which the server never calls, and
+           started only once: the clock belongs to this message's life on screen. */
+        if (this.duration !== undefined && this.duration > 0) {
+            this.remaining = this.duration;
+            this.resume();
+        }
+    }
+    /**
+     * The mark for the message's tone, behind a seam.
+     *
+     * Slot fallback, so a consumer replaces it by slotting; and a method, so the
+     * tier above replaces it by overriding. Those answer different people: the
+     * slot is for the page and the method is for whoever is building the styled
+     * layer, and a fallback with only the first is one a tier can restyle and
+     * cannot change.
+     *
+     * The mark is passed in rather than looked up again, since `render` has
+     * already resolved the tone and a second lookup is a second place for the
+     * fallback to disagree with the tone around it.
+     */
+    renderIcon(mark) {
+        return html `<slot name="icon">
+      <svg part="icon-mark"
+        fill="currentColor"
+        viewBox=${mark.icon.viewBox}
+        role="img"
+        aria-label=${mark.label}
+      >
+        ${unsafeSVG(mark.icon.content)}
+      </svg>
+    </slot>`;
+    }
+    /**
+     * The mark on the dismiss control, behind a seam.
+     *
+     * Slot fallback, so a consumer replaces it by slotting; and a method, so the
+     * tier above replaces it by overriding. Those answer different people: the
+     * slot is for the page and the method is for whoever is building the styled
+     * layer, and a fallback with only the first is one a tier can restyle and
+     * cannot change.
+     */
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      <svg part="dismiss-mark" viewBox=${x.viewBox} fill="currentColor" aria-hidden="true">
+        ${unsafeSVG(x.content)}
+      </svg>
+    </slot>`;
+    }
+    render() {
+        /* Nothing when no tone was given, which is the common message: "Project
+           saved" is not an error, a warning or an announcement, and an icon there
+           would be decoration standing where meaning is supposed to be. `Callout`
+           falls back to `info` because a callout exists to set a passage apart and
+           is always *about* something; a toast is just the next thing that
+           happened. */
+        const mark = toneMark(this.tone);
+        return html `<div
+      part="item"
+      @mouseenter=${this.handlePause}
+      @mouseleave=${this.handleResume}
+      @focusin=${this.handlePause}
+      @focusout=${this.handleResume}
+    >
+      ${mark
+            ? html `<span part="icon">
+              ${this.renderIcon(mark)}
+            </span>`
+            : nothing}
+      <div part="content"><slot></slot></div>
+      <div part="actions"><slot name="actions"></slot></div>
+      ${this.dismissible
+            ? html `<button
+              part="dismiss"
+              type="button"
+              aria-label=${this.dismissLabel}
+              @click=${() => this.dismiss()}
+            >
+              ${this.renderDismissIcon()}
+            </button>`
+            : nothing}
+      ${this.duration
+            ? html `<div
+              part="timer"
+              style=${`--toast-duration: ${this.duration}ms`}
+              aria-hidden="true"
+            ></div>`
+            : nothing}
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: Number })
+], HelixHeadlessToastItem.prototype, "duration", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToastItem.prototype, "tone", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessToastItem.prototype, "open", null);
+HelixHeadlessToastItem = __decorate([
+    customElement('helix-headless-toast-item')
+], HelixHeadlessToastItem);
+export { HelixHeadlessToastItem };

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

@@ -0,0 +1,72 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary The region messages arrive in, and the only thing that announces them.
+ *
+ * @description
+ * **The region is why this is one family rather than two.** A live region has
+ * to be in the document *before* a message is put into it: assistive technology
+ * subscribes to the region, and a region that arrives already holding its
+ * message is frequently not announced at all. So the container is a part of the
+ * family and not an arranger of complete things, which is the same reasoning
+ * that puts `Radio.Group` inside its own family.
+ *
+ * **Polite, never assertive.** `role="alert"` interrupts whatever a reader is
+ * being told, and almost nothing that arrives in a corner of the screen has
+ * earned that. Something that genuinely cannot wait is a `Dialog`, which stops
+ * the page for everyone rather than only for the people who cannot see it.
+ *
+ * **It never creates or destroys anything.** The consumer renders items and
+ * removes them; asking to go is a cancelable `helix-dismiss` from the item.
+ * That is still exactly true of the region: an item that has gone hides itself
+ * and stays in the tree, so a consumer whose state still lists it does not have
+ * their framework fighting a node this component took away. What changed is
+ * that the item no longer waits to be told before hiding, unless the consumer
+ * declared `open` and said the state is theirs.
+ * There is no `toast.show()`, because an imperative queue inside a component is
+ * a second copy of the application's state that nothing can render from: an app
+ * that wants a `toast()` function writes a thin one over the state it already
+ * has, and keeps the ability to render the same messages on the server, in a
+ * test, or twice.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Toaster, Snackbar, Notifications
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @slot - The messages, as `helix-toast-item` elements.
+ *
+ * @csspart region - The stack the messages are in.
+ */
+export declare class HelixHeadlessToast extends HelixElement {
+    /**
+     * Accessible name for the region, such as "Notifications".
+     */
+    label: string;
+    /**
+     * Which corner or edge the stack sits at.
+     *
+     * Named here rather than on each message, because where a page puts its
+     * toasts is a fact about the page: a stack whose members disagreed about
+     * where they were would not be a stack.
+     *
+     * **Optional, and bottom-end is the absence of it.** It reflected *and*
+     * defaulted, which is the pair that writes onto a host: every toast region
+     * anybody rendered gained a `placement="bottom-end"` nobody typed, and a
+     * React consumer's server markup does not have it. The styled sheet carries
+     * the resting arrangement in its own `:host` rule now and the selectors
+     * describe only the departures, which is what `orientation` has always done.
+     *
+     * The SSR spec could never have caught it: it passed a placement explicitly,
+     * so the attribute it asserted was one the consumer had written.
+     */
+    placement?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-toast': HelixHeadlessToast;
+    }
+}

package/dist/toast/root/toast-root.js

@@ -0,0 +1,87 @@
+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, hostAria } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary The region messages arrive in, and the only thing that announces them.
+ *
+ * @description
+ * **The region is why this is one family rather than two.** A live region has
+ * to be in the document *before* a message is put into it: assistive technology
+ * subscribes to the region, and a region that arrives already holding its
+ * message is frequently not announced at all. So the container is a part of the
+ * family and not an arranger of complete things, which is the same reasoning
+ * that puts `Radio.Group` inside its own family.
+ *
+ * **Polite, never assertive.** `role="alert"` interrupts whatever a reader is
+ * being told, and almost nothing that arrives in a corner of the screen has
+ * earned that. Something that genuinely cannot wait is a `Dialog`, which stops
+ * the page for everyone rather than only for the people who cannot see it.
+ *
+ * **It never creates or destroys anything.** The consumer renders items and
+ * removes them; asking to go is a cancelable `helix-dismiss` from the item.
+ * That is still exactly true of the region: an item that has gone hides itself
+ * and stays in the tree, so a consumer whose state still lists it does not have
+ * their framework fighting a node this component took away. What changed is
+ * that the item no longer waits to be told before hiding, unless the consumer
+ * declared `open` and said the state is theirs.
+ * There is no `toast.show()`, because an imperative queue inside a component is
+ * a second copy of the application's state that nothing can render from: an app
+ * that wants a `toast()` function writes a thin one over the state it already
+ * has, and keeps the ability to render the same messages on the server, in a
+ * test, or twice.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Toaster, Snackbar, Notifications
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @slot - The messages, as `helix-toast-item` elements.
+ *
+ * @csspart region - The stack the messages are in.
+ */
+let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Accessible name for the region, such as "Notifications".
+         */
+        this.label = 'Notifications';
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* On the host through internals, so the region is a landmark to anything
+           walking the light DOM as well as to a screen reader, and so nothing is
+           written onto the host as an attribute a server's markup never had. */
+        hostAria(this.internals, { label: this.label, role: 'status' });
+        this.internals.ariaLive = 'polite';
+        /* Additions are what a reader needs; a message going away is not news, and
+           announcing removals means every dismissal is read out. */
+        this.internals.ariaRelevant = 'additions';
+        /* `role="status"` carries an implicit `aria-atomic="true"`, which means the
+           whole region is re-read whenever any part of it changes. With a stack of
+           four, the fifth arrival announces all five. `additions` alone does not
+           help: it says which mutations count, not how much is read out when one
+           does. Both are needed, and only one was here. */
+        this.internals.ariaAtomic = 'false';
+    }
+    render() {
+        return html `<div part="region"><slot></slot></div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessToast.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToast.prototype, "placement", void 0);
+HelixHeadlessToast = __decorate([
+    customElement('helix-headless-toast')
+], HelixHeadlessToast);
+export { HelixHeadlessToast };

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

@@ -0,0 +1,140 @@
+import { DisabledCascadeController, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+/**
+ * @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.
+ */
+export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_base {
+    /**
+     * 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.
+     */
+    private sync;
+    private readonly indicator;
+    private observer;
+    protected readonly keys: KeyboardNavigationController;
+    protected readonly cascade: DisabledCascadeController;
+    private get items();
+    /**
+     * 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.
+     */
+    private watch;
+    private readonly handleSelection;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /** The observer the items are registered on, rebuilt with them. */
+    private measure;
+    protected updated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * 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.
+     */
+    private validate;
+    /**
+     * Where the group's label sits, `start` putting it on the track's line.
+     *
+     * Absent is above, which is what a field looks like and what almost every
+     * group wants. `start` is for a row of controls that are labeled rather than
+     * a form of fields: a toolbar reads as one line, and a label stacked over
+     * every group in it turns one row into two.
+     *
+     * **A placement rather than a slot, and that is the whole point of it.** A
+     * `start` slot would let a consumer put the word there, and would also let
+     * them put it there *instead of* setting `label`, which is the group's
+     * accessible name: the set would then be named for nobody using a screen
+     * reader while looking correct to everybody else. Worse, setting both draws
+     * it twice. One property moves the label the consumer already has to give,
+     * and cannot be used to remove it.
+     */
+    labelPlacement?: 'start';
+    /**
+     * 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.
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-toggle-group': HelixHeadlessToggleGroup;
+    }
+}
+export {};