@fusion.dev/helix-headless 0.149.1 → 0.150.0

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

@@ -70,6 +70,15 @@ export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
      * tag's words in it, so a translation puts them where its language does.
      */
     dismissLabel: string;
+    /**
+     * Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
+     *
+     * A field that holds tags as its tokens, such as a `multiple` Combobox,
+     * writes `false`: the field's text is its one tab stop, and the arrow keys
+     * move from the text to the tags. No attribute: it is coordination between
+     * elements, as `focusable` is.
+     */
+    dismissTabStop: boolean;
     /**
      * Whether the tag holds its group's tab stop.
      *

package/dist/tag/root/tag-root.js

@@ -12,6 +12,7 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         super(...arguments);
         this.disabled = false;
         this.dismissLabel = 'Remove {label}';
+        this.dismissTabStop = true;
         this.href = '';
         this.value = '';
     }
@@ -87,7 +88,7 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
             label: this.removeName,
             mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
             onDismiss: () => this.dismiss(),
-            tabindex: this.grouped ? '-1' : undefined,
+            tabindex: this.grouped || !this.dismissTabStop ? '-1' : undefined,
         });
     }
 };
@@ -98,6 +99,9 @@ __decorate([
     words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessTag.prototype, "dismissLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTag.prototype, "dismissTabStop", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTag.prototype, "focusable", void 0);

package/dist/time-input/root/time-input-root.d.ts

@@ -42,6 +42,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  *
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help under the field.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot panel-footer - Content in the panel under the times, such as a note or an action.
  * @slot panel-header - Content in the panel above the times, such as a heading or a shortcut.
  * @slot trigger - The icon on the field that shows a list opens.

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

@@ -191,7 +191,13 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     private readonly indicator;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
+    /**
+     * The toggles, in light-DOM order, at any depth, so a toggle inside a layout
+     * wrapper of yours is one of the group's. A toggle held by a group nested
+     * inside this one is that group's.
+     */
     private get items();
+    private observer;
     private readonly handleSelection;
     /**
      * Whether the group holds an answer the form can submit: a value an item

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

@@ -101,7 +101,10 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             null);
     }
     get items() {
-        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessToggle);
+        if (this.children === undefined) {
+            return [];
+        }
+        return [...this.querySelectorAll('*')].filter((element) => element instanceof HelixHeadlessToggle && nearestGroup(element) === this);
     }
     get answered() {
         if (this.value === '') {
@@ -118,11 +121,15 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
         this.addEventListener('focusin', this.noteFocus);
+        this.observer = new MutationObserver(this.handleItems);
+        this.observer.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
         this.removeEventListener('focusin', this.noteFocus);
+        this.observer?.disconnect();
+        this.observer = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -146,6 +153,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.adopt();
         hostAria(this.internals, { label: this.label, role: this.groupRole });
         this.internals.ariaOrientation = this.orientation ?? null;
+        this.internals.ariaRequired = this.required && !this.multiple ? 'true' : null;
         if (!this.answered) {
             this.internals.setFormValue(null);
         }
@@ -203,3 +211,10 @@ HelixHeadlessToggleGroup = __decorate([
     customElement('helix-headless-toggle-group')
 ], HelixHeadlessToggleGroup);
 export { HelixHeadlessToggleGroup };
+function nearestGroup(toggle) {
+    let parent = toggle.parentElement;
+    while (parent && !(parent instanceof HelixHeadlessToggleGroup)) {
+        parent = parent.parentElement;
+    }
+    return parent;
+}

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

@@ -2,13 +2,18 @@ import { HelixElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
- * @summary One option in a toggle group.
+ * @summary One option in a toggle group, or a toggle button on its own.
  *
  * @description
  * Renders a `<button role="radio">` for use as a form control. In a group with
  * `selection-mode="multiple"` it is a `<button>` that says whether it is
  * pressed with `aria-pressed`.
  *
+ * **On its own, outside a `Toggle.Group`, it is a toggle button**, as React
+ * Aria's `ToggleButton`: a `<button>` with `aria-pressed`. A press, Enter or
+ * Space sends `helix-select`, which you can cancel, then flips `selected` and
+ * sends `change`. Write `selected` in the markup to start it pressed.
+ *
  * Do not use it for navigation. For navigation, use links marked with
  * `aria-current` and styled by the `data-navigation-item` recipe in the base
  * layer. The recipe has the same look, and links are not announced as choices.
@@ -21,6 +26,7 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  *
  * @slot - The item's label.
  *
+ * @event {Event} change - Fired after a toggle button on its own is pressed or released.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
  *
  * @csspart item - The radio button.
@@ -61,8 +67,8 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
     get defaultSelected(): boolean;
     set defaultSelected(next: boolean);
     /**
-     * Whether the item holds the group's tab stop. Unset, the chosen item holds
-     * it.
+     * Whether the item holds the group's tab stop. Unset, no group holds the
+     * item, and it is a toggle button with a tab stop of its own.
      *
      * Written by the group on every item: `true` for the chosen item, or for the
      * first item that can be chosen while there is no selection to carry the
@@ -79,6 +85,18 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
      * Written by the group, like `selected`, so no attribute.
      */
     pressed?: boolean | undefined;
+    /**
+     * Whether no `Toggle.Group` holds the item, which makes it a toggle button
+     * of its own. A group writes `focusable` on every item it holds. A server,
+     * and the render that hydrates its markup, cannot tell, and draw the item a
+     * group holds.
+     */
+    private get alone();
+    /**
+     * Chooses the item in its group, or, on its own, flips `selected` once
+     * `helix-select` stands and sends `change`.
+     */
+    select(): boolean;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every

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

@@ -18,23 +18,40 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
+    get alone() {
+        return this.focusable === undefined && this.childrenKnown;
+    }
+    select() {
+        if (!this.alone) {
+            return super.select();
+        }
+        if (!super.select()) {
+            return false;
+        }
+        this.selected = !this.selected;
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+        return true;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.toggleState('pressed', this.pressed === true);
+        this.toggleState('pressed', this.alone ? this.selected : this.pressed === true);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
     }
     render() {
+        const alone = this.alone;
+        const radio = !alone && this.pressed === undefined;
+        const pressed = alone ? this.selected : this.pressed;
         return html `<button
       part="item"
       type="button"
-      role=${this.pressed === undefined ? 'radio' : nothing}
-      aria-checked=${this.pressed === undefined ? String(this.selected) : nothing}
-      aria-pressed=${this.pressed === undefined ? nothing : String(this.pressed)}
+      role=${radio ? 'radio' : nothing}
+      aria-checked=${radio ? String(this.selected) : nothing}
+      aria-pressed=${radio || pressed === undefined ? nothing : String(pressed)}
       ?disabled=${this.disabled}
-      tabindex=${(this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
+      tabindex=${alone || (this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     ><slot></slot></button>`;
     }