@fusion.dev/helix-headless 0.149.1 → 0.151.0

package/dist/table/root/table-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 { AriaForwardController, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -44,9 +44,12 @@ const SAMPLE = 200;
 const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
 const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
+const STATUS = new Set(['empty', 'loading']);
+const NAMED = new Set([...STATUS, 'heading']);
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.columns = '';
@@ -82,7 +85,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             on: () => this.grid,
             part: (name) => this.partNamed(name),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
-            selectAll: () => this.selectable && this.requestSelected(new Set(this.everyKey)),
+            rowWords: () => this.arrangedRows.map((row) => textOf(row.children[0])),
+            selectAll: () => this.selectable && this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
+            selectRange: (to, from) => this.selectRange(to, from),
         });
         this.reorder = new ReorderController(this, {
             axis: 'block',
@@ -125,6 +130,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             event.preventDefault();
             this.chooseRow(found.key, event.detail.checked);
         };
+        this.anchorKey = undefined;
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
             if (!path.some((node) => node instanceof Element && node.getAttribute('part') === 'sort')) {
@@ -260,10 +266,35 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     get everyKey() {
         return this.keyed.map(({ key }) => key);
     }
+    get enabledKeys() {
+        return this.keyed.filter(({ row }) => !row.disabled).map(({ key }) => key);
+    }
+    isDisabled(key) {
+        return this.keyed.find((one) => one.key === key)?.row.disabled === true;
+    }
     chooseAll() {
-        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.enabledKeys)));
+    }
+    selectRange(to, from) {
+        if (!this.selectable) {
+            return false;
+        }
+        const keyOf = new Map(this.keyed.map(({ key, row }) => [row, key]));
+        const keys = this.arrangedRows.map((row) => keyOf.get(row) ?? '');
+        const { anchor, anchorKey } = anchorAt(keys, this.anchorKey, from);
+        this.anchorKey = anchorKey;
+        const now = this.chosen;
+        const next = rangeAdd([...now], keys, anchor, to)?.filter((key) => now.has(key) || !this.isDisabled(key));
+        if (next && next.length > now.size) {
+            this.requestSelected(new Set(next));
+        }
+        return true;
     }
     chooseRow(key, on) {
+        if (this.isDisabled(key)) {
+            return;
+        }
+        this.anchorKey = key;
         const keys = this.chosen;
         if (on) {
             keys.add(key);
@@ -298,7 +329,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.chooseRow(found.key, !this.chosen.has(found.key));
             return true;
         }
-        if (event.key === 'Enter' && row?.href) {
+        if (event.key === 'Enter' && row?.href && !row.disabled) {
             followLink(this.ownerDocument, { href: row.href, rel: row.rel, target: row.target }, event);
             return true;
         }
@@ -418,7 +449,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }; }
     get slotted() {
         const columns = new Set(this.tableColumns);
-        return [...(this.children ?? [])].filter((child) => !columns.has(child) && child.getAttribute('slot') !== 'heading');
+        return [...(this.children ?? [])].filter((child) => !columns.has(child) && !NAMED.has(child.getAttribute('slot') ?? ''));
     }
     assign() {
         if (this.assignsByName) {
@@ -429,7 +460,14 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }
         const columns = new Set(this.tableColumns);
         const headings = new Set(this.headings);
-        assignSlots(this.renderRoot, [...columns, ...headings, ...this.arrangedRows], (child) => (columns.has(child) ? 'columns' : headings.has(child) ? 'heading' : ''));
+        const status = [...(this.children ?? [])].filter((child) => STATUS.has(child.getAttribute('slot') ?? ''));
+        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...this.arrangedRows], (child) => columns.has(child)
+            ? 'columns'
+            : headings.has(child)
+                ? 'heading'
+                : status.includes(child)
+                    ? (child.getAttribute('slot') ?? '')
+                    : '');
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -483,7 +521,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         if (!this.selectable) {
             return nothing;
         }
-        const every = this.childrenKnown ? this.keyed.map(({ key }) => key) : [];
+        const every = this.childrenKnown ? this.enabledKeys : [];
         const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
         const grid = this.grid;

package/dist/table/row/table-row.d.ts

@@ -13,7 +13,8 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * it, or make it interactive.
  *
  * In a `selectable` table the row draws a checkbox cell before its own cells,
- * and `value` is the key the table's `selected` lists it by.
+ * and `value` is the key the table's `selected` lists it by. `disabled` keeps
+ * the row out of the selection and out of its link.
  *
  * In a `reorderable` table the row draws a grip cell before those, holding a
  * button named by the table's `move-row-label`, and `value` is the key
@@ -56,7 +57,7 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * @cssstate dragging - The row is being moved, in a `reorderable` table.
  * @cssstate drop-after - The row being moved goes after this one when it is dropped.
  * @cssstate drop-before - The row being moved goes before this one when it is dropped.
- * @cssstate link - While the row has `href`, so a press on it follows the link.
+ * @cssstate link - While the row has `href` and is not `disabled`, so a press on it follows the link.
  * @cssstate selected - While the row is selected, in a `selectable` table.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
@@ -65,6 +66,15 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * finds its columns. Not a consumer's to read or set.
      */
     readonly isTableRow = true;
+    /**
+     * Takes the row out of the table's selection and out of its link: the row's
+     * checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
+     * pass over it, and a press does not follow `href`. A row already selected
+     * stays selected. A screen reader hears it as unavailable, and in a `grid`
+     * table the arrow keys still reach it, as a disabled cell in a grid is
+     * reached.
+     */
+    disabled: boolean;
     /**
      * The URL a press on the row follows, which makes the whole row a link.
      * Empty, the default, leaves presses to the row's cells.

package/dist/table/row/table-row.js

@@ -15,6 +15,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     constructor() {
         super(...arguments);
         this.isTableRow = true;
+        this.disabled = false;
         this.href = '';
         this.rel = '';
         this.target = '';
@@ -30,7 +31,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.selectStop = false;
         this.columnRules = undefined;
         this.handleClick = (event) => {
-            if (this.href === '' || event.button !== 0 || event.defaultPrevented) {
+            if (this.disabled || this.href === '' || event.button !== 0 || event.defaultPrevented) {
                 return;
             }
             const cell = event
@@ -68,8 +69,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
+        this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.toggleState('selected', this.selectable && this.selected);
-        this.toggleState('link', this.href !== '');
+        this.toggleState('link', this.href !== '' && !this.disabled);
         this.toggleState('dragging', this.move === 'dragging');
         this.toggleState('drop-after', this.move === 'drop-after');
         this.toggleState('drop-before', this.move === 'drop-before');
@@ -100,6 +102,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
           mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
           mark-indeterminate: checkbox-mark-indeterminate"
         aria-label=${this.selectLabel}
+        ?disabled=${this.disabled}
         .checked=${this.selected}
       ></${checkbox}
     ></span>`;
@@ -126,6 +129,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTableRow.prototype, "disabled", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "href", void 0);

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

@@ -15,7 +15,10 @@ export type TagSelectionMode = SelectionMode;
  * focus moves to the next tag, or the previous one after the last.
  *
  * `selection-mode` lets a reader select tags, with Space, Enter or a press:
- * `single` selects one at a time and `multiple` any number. `value` holds the
+ * `single` selects one at a time and `multiple` any number. In `multiple`,
+ * Shift with an arrow, Home or End selects the range from the tag last
+ * pressed to the tag focus moves to, and Control or Command with A selects
+ * every tag that is not disabled. `value` holds the
  * selected tags' values, separated by commas, and a change asks with
  * `helix-before-change` and tells with `change`. Enter on a tag with an
  * `href` follows its link. A `disabled` tag is passed over. A selected tag
@@ -30,6 +33,8 @@ export type TagSelectionMode = SelectionMode;
  * set is a `group`, and focus moves to its `empty` part,
  * which holds the `empty` slot: put words there such as "No filters" for a
  * reader to hear. With nothing slotted it says `empty-label`, "No tags".
+ * Where only disabled tags are left, the first of them holds the tab stop and
+ * takes focus, so the reader stays in the set.
  *
  * @since 0.1.0
  * @status stable
@@ -77,6 +82,12 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
     value: string | readonly string[];
     /** The tag the reader was last on, which keeps the tab stop. */
     private last;
+    /**
+     * Where a range chosen with Shift and an arrow starts, and where it reached,
+     * in `multiple`: the tag last pressed or moved to without Shift.
+     */
+    private anchor;
+    private reached;
     /**
      * The arrow keys, Home, End and typed letters, moving focus and choosing
      * nothing. From the focused tag rather than the selection, since a reader
@@ -119,6 +130,16 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * has moved.
      */
     protected press(tag: HelixHeadlessTag): void;
+    /** The reachable tags from one to the other, either way round. */
+    private span;
+    /**
+     * Shift and an arrow, Home or End, in `multiple`: the range from the anchor
+     * to the tag focus moved to is selected, in place of the range the last such
+     * key selected, as React Aria's selection extends.
+     */
+    private extend;
+    /** Asks for `value` to hold these tags' values, in their order. */
+    private choose;
     private readonly handleKeydown;
     private readonly handleClick;
     /**

package/dist/tag/group/tag-group.js

@@ -23,7 +23,29 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         });
         this.handleKeydown = (event) => {
             const tag = this.tagOf(event);
-            if (!tag || tag.disabled || event.altKey || event.ctrlKey || event.metaKey) {
+            if (!tag || tag.disabled || event.altKey) {
+                return;
+            }
+            const multiple = this.selectionMode === 'multiple';
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+                if (multiple) {
+                    event.preventDefault();
+                    this.choose(this.reachable);
+                }
+                return;
+            }
+            if (event.ctrlKey || event.metaKey) {
+                return;
+            }
+            if (MOVES.has(event.key)) {
+                const to = this.last;
+                if (multiple && event.shiftKey && to && to !== tag) {
+                    this.extend(tag, to);
+                }
+                else if (!event.shiftKey) {
+                    this.anchor = to;
+                    this.reached = to;
+                }
                 return;
             }
             if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -70,7 +92,15 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
                 }
                 const active = document.activeElement;
-                if (!had || this.tags.length > 0 || (active !== null && active !== document.body)) {
+                if (!had || (active !== null && active !== document.body)) {
+                    return;
+                }
+                const [first] = this.tags;
+                if (first) {
+                    if (this.reachable.length === 0) {
+                        this.sync();
+                        first.focusItem();
+                    }
                     return;
                 }
                 this.requestUpdate();
@@ -126,7 +156,10 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             selected: chosen.has(this.valueFor(tag)),
             tag,
         }));
-        const holder = rovingStop(items, items.find((item) => item.tag === this.last), { disabled: (item) => item.disabled, selected: (item) => item.selected })?.tag;
+        const holder = rovingStop(items, items.find((item) => item.tag === this.last), {
+            disabled: (item) => item.disabled,
+            selected: (item) => item.selected,
+        })?.tag ?? tags[0];
         for (const tag of tags) {
             whenHydrated(tag, () => {
                 tag.focusable = tag === holder;
@@ -144,10 +177,36 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         if (mode === 'none' || tag.disabled) {
             return;
         }
+        this.anchor = tag;
+        this.reached = tag;
         requestValue(this, pressedValue(mode, this.written, this.valueFor(tag)), (value) => {
             this.value = value;
         });
     }
+    span(from, to) {
+        const tags = this.reachable;
+        const [start, end] = [tags.indexOf(from), tags.indexOf(to)].sort((a, b) => a - b);
+        return start === undefined || end === undefined || start < 0 ? [] : tags.slice(start, end + 1);
+    }
+    extend(from, to) {
+        const anchor = this.anchor?.isConnected ? this.anchor : from;
+        const before = new Set(this.span(anchor, this.reached?.isConnected ? this.reached : from));
+        const after = this.span(anchor, to);
+        this.anchor = anchor;
+        this.reached = to;
+        const kept = this.tags.filter((tag) => commaList(this.written).includes(this.valueFor(tag)) && !before.has(tag));
+        const chosen = [...new Set([...kept, ...after])];
+        this.choose(this.tags.filter((tag) => chosen.includes(tag)));
+    }
+    choose(tags) {
+        const next = [...new Set(tags.map((tag) => this.valueFor(tag)))].join(', ');
+        if (next === this.written) {
+            return;
+        }
+        requestValue(this, next, (value) => {
+            this.value = value;
+        });
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
@@ -199,3 +258,4 @@ HelixHeadlessTagGroup = __decorate([
     customElement('helix-headless-tag-group')
 ], HelixHeadlessTagGroup);
 export { HelixHeadlessTagGroup };
+const MOVES = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);

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>`;
     }

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

@@ -316,6 +316,12 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * Whether the video starts again at the end.
      */
     loop: boolean;
+    /**
+     * The title the device's own media controls show while the video plays,
+     * such as on a lock screen. Empty, the default, shows `label`. A playlist
+     * writes the current entry's name here.
+     */
+    mediaTitle: string;
     /**
      * What the button that opens `overflow-controls` is called.
      */

package/dist/video/root/video-root.js

@@ -47,6 +47,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.label = '';
         this.loadingLabel = 'Loading';
         this.loop = false;
+        this.mediaTitle = '';
         this.moreLabel = 'More controls';
         this.muteLabel = 'Mute';
         this.nextLabel = 'Next';
@@ -351,7 +352,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     claimSession() {
         const skips = writtenList(`${this.extraControls} ${this.overflowControls}`);
-        this.session.claim({ artwork: this.poster, title: this.label }, {
+        this.session.claim({ artwork: this.poster, title: this.mediaTitle || this.label }, {
             next: skips.includes('next') ? () => this.skip(false) : null,
             previous: skips.includes('previous') ? () => this.skip(true) : null,
             seek: (seconds) => this.seek(seconds),
@@ -954,6 +955,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'media-title' })
+], HelixHeadlessVideo.prototype, "mediaTitle", void 0);
 __decorate([
     words,
     property({ attribute: 'more-label' })

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -30,6 +30,10 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * sends `helix-end`. `shuffle` plays the entries in a random order, starting
  * from the one that is current, and `previous` retraces that order.
  *
+ * **The player is named by the current entry**, and the device's own media
+ * controls show the entry as the title. A player you gave a `label` keeps
+ * your name, and only the title follows the entry.
+ *
  * **Keyboard.** Each entry is a button in the tab order, and Enter or Space
  * plays it. The current entry carries `aria-current`. While focus is on the
  * player, the player's own keys work, and `Video` lists them. Its previous

package/dist/video-playlist/root/video-playlist-root.js

@@ -125,7 +125,10 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         if (player.src !== current.src) {
             player.src = current.src;
             player.poster = current.poster;
-            player.label = current.text;
+            player.mediaTitle = current.text;
+            if (!player.hasAttribute('label')) {
+                player.label = current.text;
+            }
             if (this.chased) {
                 void player.updateComplete?.then(() => player.play()).catch(() => { });
             }