@fusion.dev/helix-headless 0.142.1 → 0.143.0

package/dist/listbox/root/listbox-root.js

@@ -4,14 +4,16 @@ 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, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessOptionGroup } from '../../option/group/option-group.js';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
-const MOVES = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home']);
+const MOVES = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp']);
+const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+const PAGE = 10;
 const matched = new Map();
 const HIGHLIGHT = 'helix-filter-match';
 const paintable = () => typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined';
@@ -67,8 +69,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.filterState = undefined;
         this.filterable = false;
         this.filterLabel = 'Filter';
+        this.manual = false;
         this.multiple = false;
         this.activeValue = '';
+        this.parked = false;
+        this.typeahead = new Typeahead();
+        this.seen = new Set();
         this.forwarded = false;
         this.hasMatches = true;
         this.counted = false;
@@ -88,39 +94,70 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             if (shown.length === 0) {
                 return;
             }
-            if (event.key === ' ' || event.key === 'Enter') {
-                event.preventDefault();
+            const typing = this.forwarded || event.composedPath()[0] === this.partNamed('search-field');
+            if (event.key === 'Enter' || (event.key === ' ' && !typing && !this.typeahead.typing())) {
                 if (this.activeValue !== '') {
+                    event.preventDefault();
                     this.choose(this.activeValue);
                 }
+                else if (event.key === ' ') {
+                    event.preventDefault();
+                }
                 return;
             }
-            if (!MOVES.has(event.key) && event.key !== 'Enter') {
+            if (this.multiple &&
+                !typing &&
+                event.key.toLowerCase() === 'a' &&
+                (event.ctrlKey || event.metaKey) &&
+                !event.altKey) {
+                event.preventDefault();
+                const reachable = shown.map((option) => option.value);
+                const all = reachable.every((value) => this.values.includes(value));
+                const kept = this.values.filter((value) => !reachable.includes(value));
+                this.requestValue((all ? kept : [...kept, ...reachable]).join(','));
+                return;
+            }
+            if (!typing && typesCharacter(event)) {
+                event.preventDefault();
+                const value = this.typeaheadTo(event.key);
+                if (value !== undefined) {
+                    this.arrive(value);
+                }
+                return;
+            }
+            if (!(typing ? FIELD_MOVES : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
+            this.typeahead.reset();
             const from = this.currentValue;
             const at = shown.findIndex((option) => option.value === from);
+            const last = shown.length - 1;
             let next = at;
             if (event.key === 'ArrowDown') {
                 next = at < 0 ? 0 : (at + 1) % shown.length;
             }
             else if (event.key === 'ArrowUp') {
-                next = at < 0 ? shown.length - 1 : (at - 1 + shown.length) % shown.length;
+                next = at < 0 ? last : (at - 1 + shown.length) % shown.length;
             }
             else if (event.key === 'Home') {
                 next = 0;
             }
+            else if (event.key === 'End') {
+                next = last;
+            }
+            else if (event.key === 'PageDown') {
+                next = at < 0 ? 0 : Math.min(at + this.pageSize(), last);
+            }
             else {
-                next = shown.length - 1;
+                next = at < 0 ? last : Math.max(at - this.pageSize(), 0);
             }
             const target = shown[next];
-            if (!target) {
-                return;
-            }
-            this.activeValue = target.value;
-            if (!this.multiple && !this.forwarded) {
-                this.choose(target.value);
+            if (target) {
+                this.arrive(target.value);
+                if (this.multiple && !typing && event.shiftKey && !this.values.includes(target.value)) {
+                    this.choose(target.value);
+                }
             }
         };
         this.handleFilter = (event) => {
@@ -138,7 +175,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 this.requestFilter('');
                 return;
             }
-            if (!MOVES.has(event.key)) {
+            if (!FIELD_MOVES.has(event.key)) {
                 return;
             }
             event.stopPropagation();
@@ -160,6 +197,42 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         const option = this.options[at];
         this.value = option?.value ?? '';
     }
+    highlight(where) {
+        const shown = this.shown.filter((option) => !option.disabled);
+        this.typeahead.reset();
+        this.parked = where === 'none';
+        if (where === 'none') {
+            this.activeValue = '';
+        }
+        else if (where === 'first') {
+            this.activeValue = shown[0]?.value ?? '';
+        }
+        else if (where === 'last') {
+            this.activeValue = shown.at(-1)?.value ?? '';
+        }
+        else {
+            const chosen = shown.find((option) => this.values.includes(option.value));
+            this.activeValue = (chosen ?? shown[0])?.value ?? '';
+        }
+        if (this.childrenKnown) {
+            this.place();
+        }
+    }
+    typeaheadTo(key) {
+        const shown = this.shown.filter((option) => !option.disabled);
+        const from = shown.findIndex((option) => option.value === this.currentValue);
+        const at = this.typeahead.match(key, shown.map((option) => option.text), from);
+        const target = shown[at];
+        if (!target) {
+            return undefined;
+        }
+        this.parked = false;
+        this.activeValue = target.value;
+        return target.value;
+    }
+    get typing() {
+        return this.typeahead.typing();
+    }
     get type() {
         return this.multiple ? 'select-multiple' : 'select-one';
     }
@@ -218,6 +291,19 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         this.requestValue(joined);
     }
+    arrive(value) {
+        this.parked = false;
+        this.activeValue = value;
+        if (!this.multiple && !this.manual && !this.forwarded) {
+            this.choose(value);
+        }
+    }
+    pageSize() {
+        const items = this.partNamed('items');
+        const row = this.shown[0]?.getBoundingClientRect().height ?? 0;
+        const height = items?.clientHeight ?? 0;
+        return row > 0 && height > 0 ? Math.max(1, Math.floor(height / row) - 1) : PAGE;
+    }
     navigate(event) {
         this.forwarded = true;
         try {
@@ -247,6 +333,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     place() {
+        this.forgetRemoved();
         const needle = this.filter.trim().toLowerCase();
         const chosen = new Set(this.values);
         for (const option of this.options) {
@@ -258,7 +345,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             group.hidden = inside.length > 0 && inside.every((option) => option.hidden);
         }
         const shown = this.shown;
-        const rescue = needle !== '' || this.activeValue !== '';
+        const rescue = !this.parked && (needle !== '' || this.activeValue !== '');
         if (rescue && !shown.some((option) => option.value === this.activeValue)) {
             this.activeValue = shown.find((option) => !option.disabled)?.value ?? '';
         }
@@ -278,6 +365,21 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         this.counted = true;
     }
+    get owned() {
+        const root = this.getRootNode();
+        return root instanceof ShadowRoot && root.host.localName.startsWith('helix-');
+    }
+    forgetRemoved() {
+        if (this.owned) {
+            return;
+        }
+        const present = new Set(this.options.map((option) => option.value));
+        const gone = this.values.filter((value) => this.seen.has(value) && !present.has(value));
+        this.seen = present;
+        if (gone.length > 0) {
+            this.value = this.values.filter((value) => !gone.includes(value)).join(',');
+        }
+    }
     followActive() {
         const active = this.shown.find((option) => option.value === this.activeValue);
         if (active) {
@@ -309,10 +411,31 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: '' });
+        if (changed.has('value') &&
+            !this.multiple &&
+            this.activeValue !== '' &&
+            !this.values.includes(this.activeValue)) {
+            this.activeValue = '';
+            this.typeahead.reset();
+        }
+        if (this.childrenKnown) {
+            this.seedDeclared();
+        }
         if (this.childrenKnown) {
             this.place();
         }
     }
+    seedDeclared() {
+        if (this.owned || this.defaultValue !== '' || this.hasAttribute('default-value')) {
+            return;
+        }
+        const declared = this.options
+            .filter((option) => option.defaultSelected)
+            .map((option) => option.value);
+        if (declared.length > 0) {
+            this.defaultValue = this.multiple ? declared.join(',') : (declared.at(-1) ?? '');
+        }
+    }
     get currentValue() {
         return this.activeValue || (this.value.split(',')[0] ?? '');
     }
@@ -338,6 +461,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             apply: (value) => {
                 const previous = this.filter;
                 this.filterState = value;
+                this.parked = false;
                 this.requestUpdate('filter', previous);
             },
             event: (value) => new HelixFilterEvent({ value }),
@@ -376,6 +500,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 .value=${this.filter}
                 placeholder=${this.filterLabel}
                 aria-label=${this.filterLabel}
+                aria-autocomplete="list"
                 aria-controls="items"
                 ?disabled=${this.isDisabled}
                 @input=${this.handleFilter}
@@ -394,7 +519,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         aria-multiselectable=${this.multiple ? 'true' : nothing}
         aria-required=${this.required ? 'true' : nothing}
         ${''}
-        tabindex=${this.isDisabled ? -1 : 0}
+        tabindex=${this.filterable ? nothing : this.isDisabled ? -1 : 0}
       >
         <slot @slotchange=${() => this.place()}></slot>
         ${this.renderStatus(shown)}
@@ -420,6 +545,9 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessListbox.prototype, "manual", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "multiple", void 0);

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

@@ -43,14 +43,17 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  *
  * Add `layers` to `controls` for a layers button. It opens a menu with a tile
  * for each layer, which sets the layer's `hidden` attribute. Layers with the
- * same `group`, such as a route and its dotted legs, share one tile.
+ * same `group`, such as a route and its dotted legs, share one tile. A tile
+ * sends `helix-before-toggle` from the layer first, so you can store the
+ * choice or refuse it.
  *
  * Imagery, a `helix-map-raster` with `ground`, is a map type and not a tile.
  * The menu opens with a card for each type, Standard, Hybrid, and Satellite,
  * with a picture of the map in it, and `map-type` says which is chosen.
  * Standard hides the imagery, Hybrid draws it under the roads and names, and
- * Satellite draws it alone. `connectMap` does not draw a hidden layer, so a layer you write with
- * `hidden` starts turned off.
+ * Satellite draws it alone. Choosing one sends `helix-before-change` with its
+ * name, and `change` once `map-type` holds it. `connectMap` does not draw a
+ * hidden layer, so a layer you write with `hidden` starts turned off.
  *
  * Markers, routes, areas, live positions, and points layers go inside the
  * frame as child elements.
@@ -66,7 +69,10 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @slot footer - Content below the map, such as a legend or a scale.
  * @slot header - Content above the map, such as a title or a search field.
  *
+ * @event {Event} change - The layers menu changed the map type, which `map-type` now holds.
  * @event {HelixActivateEvent} helix-activate - A marker was pressed. The value is the marker's `name`, or its `label` if it has no name. A cluster sends `helix-map-cluster` instead.
+ * @event {HelixBeforeChangeEvent} helix-before-change - A map type was chosen in the layers menu, with its name: `standard`, `hybrid`, or `satellite`. Cancelable: cancel it to keep the current type.
+ * @event {HelixBeforeToggleEvent} helix-before-toggle - A layer's tile in the layers menu was pressed. Sent from the layer, with `checked` true when it is to be shown. Cancelable: cancel it to keep the layer as it is.
  * @event {HelixMapClusterEvent} helix-map-cluster - A cluster was pressed. Sent from the marker that shows the cluster, with the names of its places.
  * @event {HelixMapPanEvent} helix-map-pan - A pan button or arrow key was pressed. Move your map in response.
  * @event {HelixMapPartChangeEvent} helix-map-part-change - Clustering was turned on or off. Used by `connectMap`; pages do not need to listen for it.
@@ -279,8 +285,17 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     private shown;
     /** A map type's name on its card. */
     private nameOf;
-    /** Shows or hides layers, which `connectMap` draws or takes off the map. */
+    /**
+     * Shows or hides layers, which `connectMap` draws or takes off the map.
+     *
+     * **Asked first, from the layer.** The tile wrote `hidden` onto the
+     * consumer's element and said nothing, so a page could neither keep the
+     * choice nor keep its own state in step. The request comes from the first
+     * layer of the tile, which is the element the page wrote.
+     */
     private showLayers;
+    /** Asks for a map type, and sends `change` once it holds. */
+    private chooseMapType;
     /**
      * The layers menu's entries, in the order the layers are written: a layer
      * of its own, or every layer in a group, at the place of the first.

package/dist/map/root/map-root.js

@@ -4,10 +4,11 @@ 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, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } from '@fusion.dev/helix-core';
 import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
 const iconOf = (layer) => {
@@ -205,10 +206,37 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 : this.standardLabel;
     }
     showLayers(layers, shown) {
-        for (const layer of layers) {
-            layer.hidden = !shown;
+        const first = layers[0];
+        if (!first) {
+            return;
+        }
+        requestChange({
+            apply: () => {
+                for (const layer of layers) {
+                    layer.hidden = !shown;
+                }
+                this.requestUpdate();
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: first,
+            next: shown,
+        });
+    }
+    chooseMapType(type) {
+        const applied = requestChange({
+            apply: (value) => {
+                this.mapType = value === 'standard' ? undefined : value;
+            },
+            event: (value) => new HelixBeforeChangeEvent({ value }),
+            host: this,
+            next: type,
+        });
+        if (applied) {
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        else {
+            this.requestUpdate();
         }
-        this.requestUpdate();
     }
     get layerEntries() {
         const entries = [];
@@ -382,9 +410,10 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
           <input
             type="radio"
             name="map-type"
-            .checked=${chosen === type}
-            @change=${() => {
-                this.mapType = type === 'standard' ? undefined : type;
+            .checked=${live(chosen === type)}
+            @change=${(event) => {
+                event.stopPropagation();
+                this.chooseMapType(type);
             }}
           />
           ${preview

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

@@ -31,7 +31,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - The panel is about to close. Cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - The panel is about to open. Cancelable.
- * @event {Event} toggle - The panel opened or closed. Carries `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - The panel opened or closed. Carries `newState` and `oldState`.
  *
  * @csspart surface - The floating panel that opens.
  * @csspart trigger - The default trigger button, shown when the `trigger` slot is empty.
@@ -194,6 +194,15 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     private readonly handlePointerDown;
     private readonly handlePointerEnter;
     private readonly handlePointerLeave;
+    /**
+     * Closes the panel when keyboard focus leaves it for the page.
+     *
+     * Only when focus went somewhere: a `relatedTarget` of null is focus leaving
+     * the document, such as a switch to another window, and a reader who comes
+     * back expects the panel as they left it. `requestOpen` rather than `close`,
+     * because focus has already gone where the reader sent it.
+     */
+    private readonly handleFocusOut;
     private readonly handleTriggerClick;
     /**
      * Shuts the panel when a reader takes one of the destinations in it.

package/dist/megamenu/root/megamenu-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessMegamenu_1;
-import { anchorElement, customElement, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, deepContains, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let showing;
@@ -57,6 +57,13 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
                 this.requestOpen(false);
             });
         };
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (!this.open || next === null || deepContains(this, next)) {
+                return;
+            }
+            this.requestOpen(false);
+        };
         this.handleTriggerClick = (event) => {
             this.stop();
             if (this.openOn !== 'hover') {
@@ -154,6 +161,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.addEventListener('click', this.handleContentClick);
         this.addEventListener('pointerenter', this.handlePointerEnter);
         this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('focusout', this.handleFocusOut);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -164,6 +172,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.removeEventListener('click', this.handleContentClick);
         this.removeEventListener('pointerenter', this.handlePointerEnter);
         this.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.stop();
         if (showing === this) {
             showing = undefined;

package/dist/menu/item/menu-item.d.ts

@@ -14,6 +14,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * only one can be on. A row that opens a page keeps `menuitem` and sets
  * `aria-haspopup`.
  *
+ * Choosing a choice row checks or unchecks it before `helix-select` is sent,
+ * so a listener reads the new `checked`. An `exclusive` row turns on and turns
+ * off the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a
+ * row as it is and set `checked` yourself.
+ *
  * The menu sets whether the row's page is showing as a property, never as an
  * attribute. An attribute written onto your element after it upgrades causes a
  * hydration mismatch.
@@ -27,12 +32,15 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content before the label, such as an icon.
  * @slot submenu - The rows of a submenu that this row opens.
  *
+ * @event {HelixBeforeToggleEvent} helix-before-toggle - A choice row is about to be checked or unchecked, carrying the state asked for. Cancelable: cancel it to keep the row as it is.
  * @event {HelixSelectEvent} helix-select - The row was chosen. Cancelable: cancel it to keep the menu open.
  *
  * @csspart item - The row, which is an `<a>` where `href` is set.
  * @csspart mark - The trailing mark: a check mark when the row is checked, or a caret
  * when it opens a submenu. A row never shows both, so they share one column.
  * @csspart start - The leading column that holds the `start` slot. It is always rendered.
+ *
+ * @cssstate checked - The row is checked.
  */
 export declare class HelixHeadlessMenuItem extends HelixElement {
     /**
@@ -45,10 +53,16 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * thing they are not.
      *
      * `checked` implies it, so a row that is on never has to say both.
+     *
+     * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
+     * you can cancel.
      */
     checkable: boolean;
     /**
      * Whether the row is checked.
+     *
+     * The row changes it when it is chosen. Not reflected: the attribute is the
+     * state you start the row in, and `:state(checked)` carries the current one.
      */
     checked: boolean;
     /**
@@ -66,11 +80,11 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     /**
      * Whether only one row in its set can be checked at a time.
      *
-     * Announcement and nothing else, the way `checkable` is: this element applies
-     * no choice and polices no group, so what it does is tell a reader which kind
-     * of set they are in. `menuitemcheckbox` says every row here is independent,
-     * which for a run of comparisons, or the values of a filter that compares
-     * against one, is the opposite of true.
+     * The set is the run of `exclusive` rows next to this one, up to the first
+     * element that is not one, such as a divider. Choosing a row in it checks
+     * that row and unchecks the others. Choosing the row that is checked leaves
+     * it checked. `menuitemradio` tells a reader which kind of set they are in,
+     * where `menuitemcheckbox` says every row is independent.
      *
      * Meaningless without `checkable`, since a row that cannot be ticked is not
      * one of a set of anything.
@@ -225,16 +239,31 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     /** Chooses the row, the same as pressing it. */
     select(): void;
     /**
-     * Whether the row has focus, which is what selected means in a menu.
+     * Whether the row has focus, which makes it the row the keyboard is on.
+     *
+     * `Option` calls the same thing `active`. A menu holds no answer the way a
+     * radio group does, only a row the reader has walked to, so focus is the
+     * whole of what "the current one" can mean here. Read from the shadow root
+     * rather than kept as state, because focus moves for reasons this element is
+     * not told about: a press, a Tab, the drilldown putting the reader on the
+     * first row of a page it has just opened.
+     */
+    get active(): boolean;
+    /**
+     * Whether the row has focus, the same as `active`.
      *
-     * A radio group's selection is an answer it holds; a menu has no answer, only
-     * a row the reader has walked to, so focus is the whole of what "the current
-     * one" can mean here. Read from the shadow root rather than kept as state,
-     * because focus moves for reasons this element is not told about: a press, a
-     * Tab, the drilldown putting the reader on the first row of a page it has
-     * just opened.
+     * @deprecated Read `active`. Everywhere else in the library `selected` means
+     * chosen out of a set, and a menu row is never chosen that way.
      */
     get selected(): boolean;
+    /**
+     * Checks or unchecks a choice row.
+     *
+     * An `exclusive` row only turns on, and turning on turns its set off.
+     */
+    private tick;
+    /** The other `exclusive` rows in this row's run of siblings. */
+    private exclusivePeers;
     private choose;
     private readonly handleClick;
     /**

package/dist/menu/item/menu-item.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 { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, requestChange, } from '@fusion.dev/helix-core';
 import { caretRight, check } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -58,6 +58,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('checked', this.checked);
         if (!this.childrenKnown) {
             return;
         }
@@ -78,13 +79,55 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     select() {
         this.choose();
     }
+    get active() {
+        const active = deepActiveElement();
+        return active !== null && active.getRootNode() === this.renderRoot;
+    }
     get selected() {
-        return this.ownerDocument.activeElement === this;
+        return this.active;
+    }
+    tick() {
+        if (!(this.checkable || this.checked) || this.hasSubmenu) {
+            return;
+        }
+        const next = this.exclusive ? true : !this.checked;
+        if (next === this.checked) {
+            return;
+        }
+        const applied = requestChange({
+            apply: (checked) => {
+                this.checked = checked;
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: this,
+            next,
+        });
+        if (applied && this.exclusive) {
+            for (const peer of this.exclusivePeers()) {
+                peer.checked = false;
+            }
+        }
+    }
+    exclusivePeers() {
+        const peers = [];
+        const inSet = (node) => node !== null &&
+            node.isMenuItem === true &&
+            node.exclusive &&
+            node.slot === this.slot;
+        for (const step of ['previousElementSibling', 'nextElementSibling']) {
+            let node = this[step];
+            while (inSet(node)) {
+                peers.push(node);
+                node = node[step];
+            }
+        }
+        return peers;
     }
     choose() {
         if (this.disabled) {
             return;
         }
+        this.tick();
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     render() {
@@ -155,7 +198,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checkable", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checked", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })