@fusion.dev/helix-headless 0.142.0 → 0.143.0

package/dist/time-picker/root/time-picker-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 { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
+import { valueAsTime as asTime, customElement, elementById, fillTemplate, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, writtenList, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -12,17 +12,22 @@ import '../../listbox/index.js';
 import '../../option/index.js';
 const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, { timeStyle: 'short' }).resolvedOptions().hour12 ===
     true;
+const dayPeriod = (half, locale) => new Intl.DateTimeFormat(locale || undefined, { hour: 'numeric', hour12: true, timeZone: 'UTC' })
+    .formatToParts(new Date(Date.UTC(1970, 0, 1, half === 'AM' ? 9 : 21)))
+    .find((part) => part.type === 'dayPeriod')?.value ?? half;
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
         this.disableTimes = '';
+        this.hourLabel = 'Hour';
         this.invalid = false;
         this.label = 'Time';
         this.locale = '';
+        this.manual = false;
         this.max = '23:59';
+        this.meridiemLabel = 'Before or after noon';
         this.min = '00:00';
-        this.readOnly = false;
-        this.required = false;
+        this.minuteLabel = 'Minute';
         this.handleListInput = (event) => {
             event.stopPropagation();
         };
@@ -69,14 +74,17 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
                 const half = hour % 12;
                 next = (half + (to === 'PM' ? 12 : 0)) * 60 + minute;
             }
-            const whole = minutesAsValue(next);
+            const whole = minutesAsValue(this.nearest(next));
             if (this.barred(whole)) {
                 return;
             }
             this.requestValue(whole);
         };
+        this.readOnly = false;
+        this.required = false;
         this.step = 15;
         this.listRevealed = false;
+        this.naming = undefined;
     }
     get times() {
         const from = valueAsMinutes(this.min) ?? 0;
@@ -89,11 +97,17 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return found;
     }
     barred(at) {
-        return this.disableTimes
-            .split(',')
-            .map((one) => one.trim())
-            .filter(Boolean)
-            .includes(at);
+        return writtenList(this.disableTimes).includes(at);
+    }
+    nearest(minutes) {
+        const times = this.times;
+        let best = times[0] ?? minutes;
+        for (const at of times) {
+            if (Math.abs(at - minutes) < Math.abs(best - minutes)) {
+                best = at;
+            }
+        }
+        return best;
     }
     wholeHourBarred(shown, half) {
         const whole = half === undefined ? shown : (shown % 12) + (half === 'PM' ? 12 : 0);
@@ -148,6 +162,34 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         }
         return super.requestValue(next);
     }
+    fault(at) {
+        const minutes = valueAsMinutes(at) ?? 0;
+        const floor = valueAsMinutes(this.min) ?? 0;
+        const ceiling = valueAsMinutes(this.max) ?? 1439;
+        if (minutes < floor) {
+            return [
+                'rangeUnderflow',
+                fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                    min: writeTime(this.min, this.locale),
+                }),
+            ];
+        }
+        if (minutes > ceiling) {
+            return [
+                'rangeOverflow',
+                fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                    max: writeTime(this.max, this.locale),
+                }),
+            ];
+        }
+        if (this.barred(at)) {
+            return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
+        }
+        if (!this.times.includes(minutes)) {
+            return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+        }
+        return undefined;
+    }
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
@@ -162,10 +204,17 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
                     : 'Enter times as HH:mm, separated by commas.'), anchor);
             return;
         }
+        for (const one of held) {
+            const fault = this.fault(one);
+            if (fault) {
+                this.internals.setValidity({ [fault[0]]: true }, fault[1], anchor);
+                return;
+            }
+        }
         this.internals.setValidity({});
     }
     report() {
-        if (this.disabled) {
+        if (this.isDisabled) {
             this.internals.setFormValue(null);
             return;
         }
@@ -178,6 +227,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         await Promise.all(settling.map((one) => one.updateComplete));
         this.reveal();
     }
+    get listName() {
+        const named = (this.getAttribute('aria-labelledby') ?? '')
+            .split(/\s+/)
+            .filter(Boolean)
+            .map((id) => elementById(this, id)?.textContent?.trim() ?? '')
+            .filter(Boolean)
+            .join(' ');
+        return named || this.getAttribute('aria-label') || this.label;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.naming = new MutationObserver(() => this.requestUpdate());
+        this.naming.observe(this, { attributeFilter: ['aria-label', 'aria-labelledby'] });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.naming?.disconnect();
+        this.naming = undefined;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaInvalid = this.invalid ? 'true' : null;
@@ -196,7 +264,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         }
     }
     focus(options) {
-        this.partNamed('list')?.focus(options);
+        ;
+        (this.partNamed('list') ?? this.partNamed('column'))?.focus(options);
     }
     renderColumn(part, label, values, written, value, barred = () => false) {
         return html `<${this.tag('listbox')}
@@ -234,11 +303,16 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         const hours = twelve
             ? [...new Set(this.hours.map((one) => (one % 12 === 0 ? 12 : one % 12)))].sort((a, b) => a - b)
             : this.hours;
-        return html `<div part="columns" data-unset=${this.value === '' ? '' : nothing}>
-      ${this.renderColumn('hour', 'Hour', hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), shownHour, (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
-      ${this.renderColumn('minute', 'Minute', this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(minutesAsValue(hour * 60 + Number(one))))}
+        return html `<div
+      part="columns"
+      role="group"
+      aria-label=${this.listName}
+      data-unset=${this.value === '' ? '' : nothing}
+    >
+      ${this.renderColumn('hour', this.hourLabel, hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), shownHour, (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
+      ${this.renderColumn('minute', this.minuteLabel, this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(minutesAsValue(hour * 60 + Number(one))))}
       ${twelve
-            ? this.renderColumn('meridiem', 'Before or after noon', ['AM', 'PM'], (one) => one, meridiem, (one) => this.halfBarred(one))
+            ? this.renderColumn('meridiem', this.meridiemLabel, ['AM', 'PM'], (one) => dayPeriod(one, this.locale), meridiem, (one) => this.halfBarred(one))
             : nothing}
     </div>`;
     }
@@ -249,9 +323,10 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       exportparts="empty: list-empty, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"
-      aria-label=${this.label}
+      aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}
+      ?manual=${this.manual}
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
       @helix-before-change=${this.handleChange}
@@ -299,6 +374,9 @@ __decorate([
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
+__decorate([
+    property({ attribute: 'hour-label' })
+], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "invalid", void 0);
@@ -308,15 +386,30 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimePicker.prototype, "manual", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'meridiem-label' })
+], HelixHeadlessTimePicker.prototype, "meridiemLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'minute-label' })
+], HelixHeadlessTimePicker.prototype, "minuteLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "mode", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessTimePicker.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "readOnly", void 0);
@@ -326,6 +419,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'step-mismatch-message' })
+], HelixHeadlessTimePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'unavailable-message' })
+], HelixHeadlessTimePicker.prototype, "unavailableMessage", void 0);
 __decorate([
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);

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

@@ -23,6 +23,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * your app's state, which also lets you render the same messages on the server,
  * in a test, or more than once.
  *
+ * **The stack is in the top layer.** The `region` part is a `popover="manual"`
+ * shown while a message is showing, and shown again above a modal dialog that
+ * opened after it. Position the `region` part, which is the box in the top
+ * layer. While a modal `Dialog`, `Drawer` or `Lightbox` is open, the browser
+ * makes everything outside it inert, the stack included, so a message stays
+ * visible and its actions cannot be pressed. Where the browser has
+ * `ariaNotify`, a message that arrives then is announced through it. For a
+ * message with an action, render a second region inside the dialog.
+ *
+ * When a message with focus inside it is dismissed, focus moves to the next
+ * message, then the one before it, then back to where it was before it entered
+ * the stack.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -33,7 +46,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixDismissEvent} helix-dismiss - A message is being dismissed, by its control or by its timer. The message sends it, and you can listen for it on the region. Cancelable: canceling it keeps the message.
  *
- * @csspart region - The stack the messages are in.
+ * @csspart region - The stack the messages are in. It is in the top layer while a message shows.
  */
 export declare class HelixHeadlessToast extends HelixElement {
     /**
@@ -68,6 +81,56 @@ export declare class HelixHeadlessToast extends HelixElement {
      */
     placement?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
     protected willUpdate(changed: PropertyValues): void;
+    /** The element focus came from when it entered the stack. */
+    private focusOrigin;
+    /** Watches the messages arrive and hide, to raise or lower the stack. */
+    private watcher;
+    /** The messages that are showing, in order. */
+    private get showing();
+    private get region();
+    /**
+     * Puts the stack in the top layer while a message shows, and on top of it.
+     *
+     * Shown again when a message arrives under a modal opened after it, because
+     * the top layer is ordered by when each element entered it. Only then,
+     * because showing it again starts every message's entrance over.
+     */
+    private place;
+    /**
+     * Takes the stack out of the top layer once the last message has finished
+     * leaving. Hidden at once, the stack would cut the exit short.
+     */
+    private lowerWhenStill;
+    /**
+     * Whether a modal dialog this stack is not inside is open, which makes the
+     * stack inert.
+     *
+     * Two places to look: the modal `Dialog` and `Drawer` the scroll lock
+     * records, whose `<dialog>` is in a shadow root, and an open modal `<dialog>`
+     * in the document itself.
+     */
+    private blocked;
+    /**
+     * Announces messages that arrived while the live region is inert.
+     *
+     * `ariaNotify` speaks without a live region in the accessibility tree, which
+     * is the one channel left under a modal. A browser without it says nothing,
+     * as it did before.
+     */
+    private notify;
+    /** Remembers where focus came from when it enters the stack. */
+    private readonly handleFocusIn;
+    /**
+     * Keeps focus on the stack when the message holding it goes.
+     *
+     * Read after the item's update, because the dismissal is a request a
+     * listener after this one can still refuse. A refused one leaves the
+     * message, and focus with it.
+     */
+    private readonly handleDismiss;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,13 +4,56 @@ 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, deepActiveElement, deepContains, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Notifications';
+        this.handleFocusIn = (event) => {
+            const from = event.relatedTarget;
+            if (from instanceof HTMLElement && !deepContains(this, from)) {
+                this.focusOrigin = from;
+            }
+        };
+        this.handleDismiss = (event) => {
+            const item = event.target;
+            if (!(item instanceof HTMLElement) || item.parentElement !== this) {
+                return;
+            }
+            if (!deepContains(item, deepActiveElement())) {
+                return;
+            }
+            const before = this.showing;
+            const at = before.indexOf(item);
+            void Promise.resolve()
+                .then(() => item.updateComplete)
+                .then(() => {
+                if (!item.hidden) {
+                    return;
+                }
+                const active = deepActiveElement();
+                if (active && active !== document.body && !deepContains(item, active)) {
+                    return;
+                }
+                const after = before.slice(at + 1).filter((one) => !one.hidden);
+                const earlier = before
+                    .slice(0, at)
+                    .filter((one) => !one.hidden)
+                    .reverse();
+                for (const next of [...after, ...earlier]) {
+                    const target = focusTarget(next);
+                    if (target) {
+                        target.focus();
+                        return;
+                    }
+                }
+                if (this.focusOrigin?.isConnected) {
+                    this.focusOrigin.focus();
+                }
+            });
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -19,8 +62,99 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.internals.ariaRelevant = 'additions';
         this.internals.ariaAtomic = 'false';
     }
+    get showing() {
+        return [...this.children].filter((one) => one instanceof HTMLElement && !one.hidden);
+    }
+    get region() {
+        return this.partNamed('region');
+    }
+    place(added = []) {
+        const region = this.region;
+        if (!region || typeof region.showPopover !== 'function') {
+            return;
+        }
+        const showing = this.showing;
+        const open = popoverOpen(region);
+        if (showing.length === 0) {
+            if (open) {
+                this.lowerWhenStill(region);
+            }
+            return;
+        }
+        const arrived = added.filter((one) => one instanceof HTMLElement && showing.includes(one));
+        const blocked = arrived.length > 0 && this.blocked();
+        if (open && blocked) {
+            region.hidePopover();
+        }
+        if (!open || blocked) {
+            region.showPopover();
+        }
+        if (blocked) {
+            this.notify(arrived);
+        }
+    }
+    lowerWhenStill(region) {
+        const running = typeof this.getAnimations === 'function' ? this.getAnimations({ subtree: true }) : [];
+        void Promise.allSettled(running.map((one) => one.finished)).then(() => {
+            if (this.showing.length === 0 && popoverOpen(region)) {
+                region.hidePopover();
+            }
+        });
+    }
+    blocked() {
+        const holders = scrollHolders();
+        try {
+            const native = document.querySelector('dialog:modal');
+            if (native) {
+                holders.push(native);
+            }
+        }
+        catch {
+        }
+        return holders.some((holder) => !deepContains(holder, this));
+    }
+    notify(arrived) {
+        const speaker = document;
+        if (typeof speaker.ariaNotify !== 'function') {
+            return;
+        }
+        for (const one of arrived) {
+            const words = (one.textContent ?? '').replace(/\s+/gu, ' ').trim();
+            if (words !== '') {
+                speaker.ariaNotify(words);
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('helix-dismiss', this.handleDismiss);
+        this.watcher = new MutationObserver((records) => {
+            this.place(records.flatMap((record) => [...record.addedNodes]));
+        });
+        this.watcher.observe(this, {
+            attributeFilter: ['hidden'],
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        if (this.hasUpdated) {
+            this.place();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('helix-dismiss', this.handleDismiss);
+        this.watcher?.disconnect();
+        this.watcher = undefined;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.place();
+    }
     render() {
-        return html `<div part="region"><slot></slot></div>`;
+        return html `<div part="region" popover="manual"><slot></slot></div>`;
     }
 };
 __decorate([
@@ -33,3 +167,14 @@ HelixHeadlessToast = __decorate([
     customElement('helix-headless-toast')
 ], HelixHeadlessToast);
 export { HelixHeadlessToast };
+const popoverOpen = (region) => {
+    try {
+        return region.matches(':popover-open');
+    }
+    catch {
+        return false;
+    }
+};
+const focusTarget = (item) => item.shadowRoot?.querySelector('[part="dismiss"]') ??
+    focusableElements(item)[0] ??
+    null;

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

@@ -21,10 +21,13 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  *
  * @slot - The group's items.
  * @slot end - Content after the track, on the same line, such as a count or a reset.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the track, on the same line, such as an icon or a caption.
  *
  * @event {Event} change - Fired after the value changes.
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the choice changes. Cancelable: call `preventDefault()` to keep the current choice. It is the only way to block a change.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the choice changes. Cancelable: call `preventDefault()` to keep the current choice.
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. The item sends it, and you listen for it on the group. Cancelable: call `preventDefault()` to keep the current choice.
  * @event {Event} input - Fired after the value changes.
  *
@@ -85,11 +88,45 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     private adopt;
     /** Marks the chosen item, separately from placing the indicator. */
     private sync;
+    /**
+     * The item that holds the group's tab stop: the chosen one.
+     *
+     * 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. A disabled answer takes no focus either, so the entry
+     * goes to the first item that can be chosen, as in `Radio.Group`.
+     */
+    private entry;
+    /**
+     * Whether the group holds a tab stop of its own.
+     *
+     * A toolbar is one tab stop, so a toolbar the group sits in sets this to
+     * `false` while its stop is on another control, and every item, the chosen
+     * one too, is then out of the tab order. The arrow keys inside the group
+     * work as before once focus is in it.
+     *
+     * No attribute: it is coordination between elements, and a consumer has no
+     * reason to set it.
+     */
+    focusable: boolean;
+    /**
+     * Focus goes to the item that holds the stop, and to the item that would
+     * hold it while a toolbar holds the stop instead, so a label press or a
+     * refused submission still lands in the group.
+     */
+    protected get focusTarget(): HTMLElement | null;
     private readonly indicator;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     private get items();
     private readonly handleSelection;
+    /**
+     * Whether the group holds an answer the form can submit: a value an item
+     * here carries. A chosen item that was removed is no longer an answer, and
+     * `value` keeps the name for an item that arrives later.
+     */
+    private get answered();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;

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

@@ -11,6 +11,7 @@ import { HelixHeadlessToggle } from '../root/toggle-root.js';
 let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.focusable = true;
         this.indicator = new IndicatorController(this, {
             active: () => this.items.find((item) => item.value === this.value),
             indicator: () => this.partNamed('indicator'),
@@ -22,10 +23,12 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             items: () => this.items,
         });
         this.handleSelection = (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            this.requestValue(event.detail.value);
+            queueMicrotask(() => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                this.requestValue(event.detail.value);
+            });
         };
     }
     adopt() {
@@ -39,14 +42,33 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
     }
     sync() {
         const active = this.items.find((item) => item.value === this.value);
-        const entry = active ? undefined : this.items.find((item) => !item.disabled);
+        const entry = this.focusable ? this.entry() : undefined;
         for (const item of this.items) {
             item.selected = item === active;
             item.focusable = item === entry;
         }
     }
+    entry() {
+        const active = this.items.find((item) => item.value === this.value);
+        return active && !active.disabled ? active : this.items.find((item) => !item.disabled);
+    }
+    get focusTarget() {
+        return (super.focusTarget ??
+            this.entry()?.shadowRoot?.querySelector('[part="item"]') ??
+            null);
+    }
     get items() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessToggle);
+        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessToggle);
+    }
+    get answered() {
+        if (this.value === '') {
+            return false;
+        }
+        if (this.children === undefined) {
+            return true;
+        }
+        const items = this.items;
+        return items.length === 0 || items.some((item) => item.value === this.value);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -71,10 +93,10 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         super.willUpdate(changed);
         this.adopt();
         hostAria(this.internals, { label: this.label, role: 'radiogroup' });
-        this.internals.setFormValue(this.value === '' ? null : this.value);
+        this.internals.setFormValue(this.answered ? this.value : null);
     }
     validate() {
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'track');
+        this.reportRequired(!this.answered, 'Choose one to continue.', 'track');
     }
     render() {
         const inside = this.labelPlacement === 'start';
@@ -90,6 +112,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             this.adopt();
             this.sync();
             this.indicator.place();
+            this.requestUpdate();
         }}
           ></slot>
         </div>
@@ -98,6 +121,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggleGroup.prototype, "focusable", void 0);
 __decorate([
     property({ attribute: 'label-placement', reflect: true })
 ], HelixHeadlessToggleGroup.prototype, "labelPlacement", void 0);