@fusion.dev/helix-headless 0.149.0 → 0.150.0

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

@@ -222,6 +222,11 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * inconsistently.
      */
     private sayPending;
+    /**
+     * @internal Says `words` in the button's live region, for a subclass with
+     * news of its own, as `CopyButton` says the result of a copy.
+     */
+    protected sayStatus(words: string): void;
     /**
      * @internal The live region a pending button speaks in, for a subclass that
      * replaces the template, as `CopyButton` does.

package/dist/button/root/button-root.js

@@ -74,6 +74,9 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         }
         this.status.say(this.pending && focused ? this.pendingLabel : '', { clear: false });
     }
+    sayStatus(words) {
+        this.status.say(words);
+    }
     renderLive() {
         return drawStatus(this.status);
     }

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

@@ -45,6 +45,7 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @slot end - Content at the trailing end, before the trigger.
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help text under the field.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot panel-footer - Content in the panel under the picker, such as a note or an action.
  * @slot panel-header - Content in the panel above the picker, such as a heading or a shortcut.
  * @slot start - Content at the leading end of the field, inside its border.

package/dist/color-picker/root/color-picker-root.js

@@ -503,6 +503,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           min="0"
           max="100"
           tabindex="-1"
+          style="writing-mode: vertical-lr; direction: rtl"
           aria-label=${axisName(this.brightnessLabel)}
           aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${reversed}

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

@@ -31,6 +31,9 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |
  * | Tab | Closes the list and moves on. |
  * | Backspace | With `multiple`, on an empty field, removes the last tag. |
+ * | Left | With `multiple`, with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. |
+ * | Left, Right on a tag | Move between the tags, and past the last back to the text. |
+ * | Delete, Backspace on a tag | Removes the tag. |
  * | Space, Home, End, letters | Edit the text. |
  *
  * **ARIA.** The input is the `combobox`, named by the label, with
@@ -46,7 +49,8 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * Set `autocomplete` to let a browser's autofill choose an option.
  *
  * With `multiple`, each chosen option is a tag in the field with its own remove
- * control. The panel stays open and the filter clears after each choice, so the
+ * control. The text is the field's one tab stop, and the arrow keys reach the
+ * tags from it. The panel stays open and the filter clears after each choice, so the
  * next choice starts from the whole list.
  *
  * With `creatable`, the combobox offers a create row and fires `helix-create`.
@@ -584,6 +588,13 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * tag does.
      */
     protected removeLastToken(): void;
+    /** The tags, which the arrow keys reach from the text. */
+    protected tokenElements(): HTMLElement[];
+    /**
+     * Focus goes to the text field, the one tab stop, and never to a tag's remove
+     * button ahead of it, where Enter or Space would take a choice away.
+     */
+    protected get focusTarget(): HTMLElement | null;
     /** One tag asking to be taken out of the set. */
     private readonly handleDismiss;
     /**

package/dist/combobox/root/combobox-root.js

@@ -446,6 +446,12 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             this.drop(last);
         }
     }
+    tokenElements() {
+        return [...this.renderRoot.querySelectorAll('[part="tag"]')];
+    }
+    get focusTarget() {
+        return this.partNamed('control') ?? super.focusTarget;
+    }
     sync() {
         if (this.multiple) {
             reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
@@ -574,6 +580,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                     data-value=${option.value}
                     dismiss-label=${formatWords(this, 'removeLabel', { name: option.text })}
                     ?dismissible=${!this.isDisabled && !this.readOnly}
+                    .dismissTabStop=${false}
                     @helix-dismiss=${this.handleDismiss}
                     >${option.text}</${this.tag('tag')}
                   >`;
@@ -619,6 +626,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-describedby=${this.describedBy ?? nothing}
           aria-invalid=${this.invalidity ?? nothing}
+          aria-required=${this.required ? 'true' : nothing}
           placeholder=${(this.chosen.length > 0 || this.unresolved ? '' : this.placeholder) || nothing}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readOnly}

package/dist/copy-button/root/copy-button-root.d.ts

@@ -29,8 +29,9 @@ import '../../tooltip/index.js';
  * **Keyboard.** Enter and Space copy, as they press a native button.
  *
  * The button is named `label`, or the host's `aria-label`, and its name
- * changes to `copied-label` or `error-label` for the moment after a press,
- * which is what a screen reader on it hears. The tooltip shows the same words.
+ * changes to `copied-label` or `error-label` for the moment after a press. The
+ * same words are said in a live region, so a screen reader hears the result,
+ * and the tooltip shows them.
  *
  * @since 0.1.0
  * @status stable
@@ -46,7 +47,7 @@ import '../../tooltip/index.js';
  * @event {HelixCopyErrorEvent} helix-copy-error - Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy.
  *
  * @csspart button - The inner button.
- * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
+ * @csspart live - The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
  * @csspart mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
  * @csspart tooltip - The tooltip bubble, forwarded from the tooltip inside the button.

package/dist/copy-button/root/copy-button-root.js

@@ -37,7 +37,11 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
             const copying = this.clipboard.copy(this.text);
             this.announcePress(event);
             const wrote = await copying;
-            if (!wrote && this.isConnected) {
+            if (!this.isConnected) {
+                return;
+            }
+            this.sayStatus(wrote ? this.copiedLabel : this.errorLabel);
+            if (!wrote) {
                 this.dispatchEvent(new HelixCopyErrorEvent());
             }
         };

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

@@ -35,6 +35,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  *
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot next-icon - The icon on the calendar's next month control.
  * @slot panel-footer - Content in the panel under the calendar, such as a note or an action.
  * @slot panel-header - Content in the panel above the calendar, such as a heading or a shortcut.

package/dist/element-events.generated.js

@@ -262,7 +262,7 @@ registerElementEvents({
     'helix-headless-time-picker': ['change', 'helix-before-change', 'input'],
     'helix-headless-toast': ['helix-dismiss'],
     'helix-headless-toast-item': ['helix-dismiss'],
-    'helix-headless-toggle': ['helix-select'],
+    'helix-headless-toggle': ['change', 'helix-select'],
     'helix-headless-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-headless-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-tour': [

package/dist/filter-input/chip/filter-chip.d.ts

@@ -29,7 +29,8 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  *
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
  * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
- * field asks to remove the last chip.
+ * field asks to remove the last chip, the arrow keys move between the field
+ * and the chips, and Delete or Backspace on a chip asks to remove it.
  *
  * The remove button is named `dismiss-label` followed by the chip's words,
  * such as "Remove filter Status is not open", so a row of chips says which

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

@@ -43,6 +43,9 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * | Home, End | Highlights the first or the last suggestion while the panel is open. |
  * | Escape | Closes the panel and stops there, so a dialog around the field stays open. |
  * | Backspace | In an empty field, asks the last token to go. |
+ * | Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |
+ * | Left, Right on a token | Move between the tokens, and past the last back to the text. |
+ * | Delete, Backspace on a token | Asks the token to go. |
  *
  * **Typed filters.** The field parses only the fields you declare. Write
  * `FilterField` elements, usually inside the `FilterMenu` slotted into `start`,
@@ -425,6 +428,8 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     private readonly handleLeading;
     /** The row again, whenever what is in it changes. */
     private readonly handleTokens;
+    /** The tokens slotted in `tags`, which the arrow keys reach from the text. */
+    protected tokenElements(): HTMLElement[];
     /**
      * Asks the last token to go, rather than taking it.
      *

package/dist/filter-input/root/filter-input-root.js

@@ -84,6 +84,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             }
         };
         this.handleKeydown = (event) => {
+            if (event.isComposing) {
+                return;
+            }
             if (this.tokenKeydown(event, this.value)) {
                 return;
             }
@@ -310,6 +313,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.suggesting = options.length > 0;
         this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
     }
+    tokenElements() {
+        return (this.tokens?.assignedElements({ flatten: true }) ?? []);
+    }
     removeLastToken() {
         const last = this.tokens
             ?.assignedElements({ flatten: true })
@@ -368,6 +374,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         const active = this.open ? options[this.activeAt] : undefined;
         for (const [at, option] of options.entries()) {
             option.active = this.open && at === this.activeAt;
+            option.selectionFollowsActive = true;
         }
         const control = this.control;
         if (control && 'ariaActiveDescendantElement' in control) {

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

@@ -381,6 +381,8 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * saving on `change` kept 150 while the form submitted 100.
      */
     private readonly handleChange;
+    /** The value Enter settled and announced, until the field's `change` or the next keystroke. */
+    private enterCommit;
     /**
      * The four keys a spinner answers, which `Input` does not bind.
      *
@@ -423,6 +425,10 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      *
      * On `keypress`, where the platform runs its own implicit submission, so a
      * consumer who prevents the `keydown` for Enter stops this too.
+     *
+     * **Settled first**, as blur settles it. The typed text is read as a number,
+     * `change` announces it, and the form value is written before the form is
+     * submitted, so a field showing `$2,500.50` submits 2500.5.
      */
     private readonly handleKeypress;
     /** @internal A single line of text counts against implicit submission. */

package/dist/number-input/root/number-input-root.js

@@ -96,6 +96,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         };
         this.handleInput = (event) => {
             event.stopPropagation();
+            this.enterCommit = undefined;
             const control = event.target;
             this.requestValue(control.value);
             restoreValue(control, this.shown);
@@ -109,7 +110,11 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.handleChange = (event) => {
             event.stopPropagation();
             this.settle();
-            this.announceChange();
+            const announced = this.enterCommit === this.value;
+            this.enterCommit = undefined;
+            if (!announced) {
+                this.announceChange();
+            }
         };
         this.handleKeydown = (event) => {
             if (event.key === 'ArrowUp') {
@@ -142,9 +147,15 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             event.preventDefault();
         };
         this.handleKeypress = (event) => {
-            if (event.key === 'Enter' && !event.defaultPrevented) {
-                submitImplicitly(this.form);
+            if (event.key !== 'Enter' || event.defaultPrevented) {
+                return;
+            }
+            if (this.settle()) {
+                this.sync();
+                this.enterCommit = this.value;
+                this.announceChange();
             }
+            submitImplicitly(this.form);
         };
     }
     static { this.words = 'helix-number-input'; }

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

@@ -44,7 +44,9 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @documentation https://fusion.dev/helix/components/option
  *
  * @slot - The option's label.
+ * @slot description - A second line under the label, for content richer than the `description` text.
  * @slot end - Content after the label, such as a shortcut or a count.
+ * @slot indicator - An icon shown while the option is chosen, in place of the check the styled option draws.
  * @slot start - Content before the label, such as an icon or an avatar.
  *
  * @event {HelixSelectEvent} helix-select - The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`.
@@ -57,6 +59,8 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @csspart text - The label and the description under it, as one column.
  *
  * @cssstate active - While the keyboard is on the option, which is the option `aria-activedescendant` names.
+ * @cssstate disabled - While the option cannot be chosen.
+ * @cssstate has-indicator - An icon is slotted into `indicator`.
  * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {
@@ -136,14 +140,10 @@ export declare class HelixHeadlessOption extends HelixElement {
      * ends. Matching still reads the label, so what somebody types is matched
      * against the name rather than against prose about it.
      *
-     * **A property and not a slot, which is the departure worth explaining.** The
-     * area rules say a content property is its slot's fallback, and that holds for
-     * a region always drawn: `Avatar`'s initials, `Tooltip`'s text. This one is
-     * usually absent, and a wrapped slot generates a box whether or not it is
-     * filled, so every option without a caption would carry an empty line. The
-     * detection that would avoid it does not exist, `:host(:has())` being invalid
-     * and the server having no children to inspect. A property is known at render
-     * time, so the component can decline to draw the box at all.
+     * For a caption richer than a string, slot it into `description`. The
+     * property is that slot's fallback inside the `description` part. With no
+     * property the slot is drawn bare, which takes no box while it is empty, so
+     * an option without a caption carries no empty line.
      *
      * It does not reflect, per the rule that payload state stays off the host: a
      * string is not a fact a selector needs.
@@ -198,6 +198,15 @@ export declare class HelixHeadlessOption extends HelixElement {
      * Written by the listbox.
      */
     selected: boolean;
+    /**
+     * Whether the option says it is selected while the keyboard is on it.
+     *
+     * Written by a control whose list holds suggestions, such as `FilterInput`:
+     * nothing there stays chosen, so the row the keyboard is on is the
+     * selection, as the APG combobox's list with selection that follows focus
+     * says. No attribute: it is coordination between elements.
+     */
+    selectionFollowsActive: boolean;
     /**
      * Where the link opens, such as `_blank`, for an option with an `href`.
      */

package/dist/option/root/option-root.js

@@ -4,8 +4,8 @@ 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, followLink, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { customElement, followLink, HelixElement, HelixSelectEvent, slotFilled, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const optionsAmong = (elements) => {
     const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
@@ -23,6 +23,7 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.label = '';
         this.rel = '';
         this.selected = false;
+        this.selectionFollowsActive = false;
         this.target = '';
         this.textValue = '';
         this.value = '';
@@ -59,10 +60,14 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
         this.toggleState('active', this.active);
+        this.toggleState('disabled', this.disabled);
     }
     render() {
         this.internals.role = 'option';
-        this.internals.ariaSelected = this.href === '' ? String(this.selected) : null;
+        this.internals.ariaSelected =
+            this.href === ''
+                ? String(this.selected || (this.selectionFollowsActive && this.active))
+                : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.internals.ariaDescription =
             this.alternate !== '' && this.alternateLabel !== '' ? this.alternateLabel : null;
@@ -73,9 +78,15 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
       <slot name="start"></slot>
       <span part="text">
         <span part="label"><slot>${this.label}</slot></span>
-        ${this.description ? html `<span part="description">${this.description}</span>` : nothing}
+        ${this.description
+            ? html `<span part="description"><slot name="description">${this.description}</slot></span>`
+            : html `<slot name="description"></slot>`}
       </span>
       <slot name="end"></slot>
+      <slot
+        name="indicator"
+        @slotchange=${(event) => this.toggleState('has-indicator', slotFilled(event.target))}
+      ></slot>
     </div>`;
     }
 };
@@ -109,6 +120,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessOption.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessOption.prototype, "selectionFollowsActive", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "target", void 0);

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

@@ -114,8 +114,15 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
     valueMissingMessage: string;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
-    /** The radios, in light-DOM order. Client only: the server has no tree. */
+    /**
+     * The radios, in light-DOM order. Client only: the server has no tree.
+     *
+     * Descendants, as `Checkbox.Group` reads its boxes, so a radio inside a
+     * layout wrapper of yours is one of the group's. A radio held by a group
+     * nested inside this one is that group's.
+     */
     get items(): HelixHeadlessRadio[];
+    private observer;
     /**
      * Announces before it applies, so a listener can refuse the change.
      *

package/dist/radio/group/radio-group.js

@@ -42,7 +42,10 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     }
     static { this.words = 'helix-radio-group'; }
     get items() {
-        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessRadio);
+        if (this.children === undefined) {
+            return [];
+        }
+        return [...this.querySelectorAll('*')].filter((element) => element instanceof HelixHeadlessRadio && nearestGroup(element) === this);
     }
     get answer() {
         return this.items.find((item) => item.value === this.value);
@@ -91,10 +94,14 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.observer = new MutationObserver(() => this.requestUpdate());
+        this.observer.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.observer?.disconnect();
+        this.observer = undefined;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -134,3 +141,10 @@ HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);
 export { HelixHeadlessRadioGroup };
+function nearestGroup(radio) {
+    let parent = radio.parentElement;
+    while (parent && !(parent instanceof HelixHeadlessRadioGroup)) {
+        parent = parent.parentElement;
+    }
+    return parent;
+}

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

@@ -290,6 +290,14 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * from the origin to the thumb as `--slider-from` and `--slider-to`.
      */
     private get fillStyle();
+    /**
+     * The range's axis, written on it, so a vertical slider is vertical to the
+     * accessibility tree with no stylesheet: Chromium reads a range's
+     * orientation off its writing mode and ignores `aria-orientation` there.
+     * `direction: rtl` puts the maximum at the top, which `vertical-lr` alone
+     * puts at the foot.
+     */
+    private get axis();
     /**
      * A value snapped to the step, counted from `min` the way a range counts it.
      *

package/dist/slider/root/slider-root.js

@@ -112,10 +112,13 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     get fillStyle() {
         const fraction = this.fraction;
         if (!this.origin) {
-            return `--slider-fraction: ${fraction}`;
+            return `--slider-fraction: ${fraction}${this.axis}`;
         }
         const at = { center: 0.5, end: 1, start: 0 }[this.origin] ?? 0;
-        return `--slider-fraction: ${fraction}; --slider-from: ${Math.min(at, fraction)}; --slider-to: ${Math.max(at, fraction)}`;
+        return `--slider-fraction: ${fraction}; --slider-from: ${Math.min(at, fraction)}; --slider-to: ${Math.max(at, fraction)}${this.axis}`;
+    }
+    get axis() {
+        return this.orientation === 'vertical' ? '; writing-mode: vertical-lr; direction: rtl' : '';
     }
     snapped(at) {
         if (!(this.step > 0)) {
@@ -208,7 +211,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         id=${which === 'start' ? 'control' : 'control-end'}
         data-thumb=${which}
         type="range"
-        style="--slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}"
+        style="--slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}${this.axis}"
         min=${this.min}
         max=${this.max}
         step=${this.step}

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']);