@fusion.dev/helix-headless 0.162.1 → 0.164.0

package/dist/code-block/patch.js

@@ -63,8 +63,79 @@ export const parsePatch = (patch) => {
             }
         }
     }
+    for (const one of files) {
+        for (const { lines } of one.hunks) {
+            markWords(lines);
+        }
+    }
     return files;
 };
+const TOKEN = /[\p{L}\p{N}_]+|\s+|[^\p{L}\p{N}_\s]/gu;
+const MOST_TOKENS = 200;
+const joined = (pieces) => {
+    const out = [];
+    for (const piece of pieces) {
+        const last = out.at(-1);
+        if (last && last.changed === piece.changed) {
+            last.text += piece.text;
+        }
+        else {
+            out.push({ ...piece });
+        }
+    }
+    return out;
+};
+export const changedWords = (before, after) => {
+    const a = before.match(TOKEN) ?? [];
+    const b = after.match(TOKEN) ?? [];
+    if (a.length === 0 || b.length === 0 || a.length > MOST_TOKENS || b.length > MOST_TOKENS) {
+        return undefined;
+    }
+    const width = b.length + 1;
+    const table = new Uint16Array((a.length + 1) * width);
+    for (let i = a.length - 1; i >= 0; i -= 1) {
+        for (let j = b.length - 1; j >= 0; j -= 1) {
+            table[i * width + j] =
+                a[i] === b[j]
+                    ? table[(i + 1) * width + j + 1] + 1
+                    : Math.max(table[(i + 1) * width + j], table[i * width + j + 1]);
+        }
+    }
+    const left = [];
+    const right = [];
+    let shared = false;
+    let i = 0;
+    let j = 0;
+    while (i < a.length || j < b.length) {
+        if (i < a.length && j < b.length && a[i] === b[j]) {
+            shared ||= a[i].trim() !== '';
+            left.push({ changed: false, text: a[i] });
+            right.push({ changed: false, text: b[j] });
+            i += 1;
+            j += 1;
+        }
+        else if (j >= b.length ||
+            (i < a.length &&
+                table[(i + 1) * width + j] >= table[i * width + j + 1])) {
+            left.push({ changed: true, text: a[i] });
+            i += 1;
+        }
+        else {
+            right.push({ changed: true, text: b[j] });
+            j += 1;
+        }
+    }
+    if (!shared) {
+        return undefined;
+    }
+    const bridged = (pieces) => joined(pieces.map((piece, at) => !piece.changed &&
+        piece.text.trim() === '' &&
+        pieces[at - 1]?.changed &&
+        pieces[at + 1]?.changed
+        ? { ...piece, changed: true }
+        : piece));
+    return [bridged(left), bridged(right)];
+};
 export const pairLines = (lines) => {
     const rows = [];
     let at = 0;
@@ -91,3 +162,50 @@ export const pairLines = (lines) => {
     }
     return rows;
 };
+const markWords = (lines) => {
+    for (const { left, right } of pairLines(lines)) {
+        if (left?.kind !== 'removed' || right?.kind !== 'added') {
+            continue;
+        }
+        const pieces = changedWords(left.text, right.text);
+        if (pieces) {
+            ;
+            [left.pieces, right.pieces] = pieces;
+        }
+    }
+};
+export const foldContext = (lines, keep) => {
+    const runs = [];
+    const add = (start, end, folded) => {
+        if (end <= start) {
+            return;
+        }
+        const last = runs.at(-1);
+        if (last && !last.folded && !folded) {
+            last.lines.push(...lines.slice(start, end));
+        }
+        else {
+            runs.push({ folded, lines: lines.slice(start, end), start });
+        }
+    };
+    let at = 0;
+    while (at < lines.length) {
+        const context = lines[at]?.kind === 'context';
+        let end = at;
+        while (end < lines.length && (lines[end]?.kind === 'context') === context) {
+            end += 1;
+        }
+        const head = context && at > 0 ? keep : 0;
+        const tail = context && end < lines.length ? keep : 0;
+        if (context && end - at - head - tail >= 2) {
+            add(at, at + head, false);
+            add(at + head, end - tail, true);
+            add(end - tail, end, false);
+        }
+        else {
+            add(at, end, false);
+        }
+        at = end;
+    }
+    return runs;
+};

package/dist/code-block/root/code-block-root.d.ts

@@ -45,9 +45,14 @@ import '../../copy-button/index.js';
  * removed. The block never computes a diff itself. Line numbers come from the
  * hunk headers and are hidden from the accessibility tree. Changed lines are
  * `<ins>` and `<del>` with the `+` and `-` kept as text, so the change does not
- * depend on color. Each file in the patch is its own block under its own name,
+ * depend on color. Where a removed line is paired with the added line that
+ * replaced it, the words each does not share with the other are the `changed`
+ * part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name,
  * and its copy button copies the new version of the file. `variant="split"`
  * shows the old version beside the new, each removal opposite its replacement.
+ * `context-lines` folds each long run of unchanged lines, keeping that many
+ * beside each change, behind a button that shows them and hides them again,
+ * as a code host draws a diff written with more context than a reader needs.
  *
  * **A block that scrolls is a tab stop.** While its lines run past its width or
  * its cap, the scroller is a region named for the block, such as "Code,
@@ -83,6 +88,7 @@ import '../../copy-button/index.js';
  * @csspart actions - The box in the header that holds the `actions` slot, drawn while something is slotted there.
  * @csspart added - In a diff, a line only the new version has, an `<ins>`.
  * @csspart block - The scrolling `<pre>`.
+ * @csspart changed - In a diff, the words of a changed line that the line opposite it does not have, inside its `text`.
  * @csspart code - The `<code>` inside it.
  * @csspart context - In a diff, a line both versions share.
  * @csspart copy - The copy button. It sits in the header when there is one, and beside the code otherwise.
@@ -104,6 +110,7 @@ import '../../copy-button/index.js';
  * @csspart expand - The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
  * @csspart file - In a diff, one file's header and block.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
+ * @csspart fold - In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
  * @csspart frame - The code, and the copy button beside it where there is no header.
  * @csspart gutter - The line numbers beside the code, shown when `line-numbers` is set.
  * @csspart header - The bar that holds the name and the copy button, shown when there is a name.
@@ -148,6 +155,12 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the block shows every line.
      */
     collapseLabel: string;
+    /**
+     * In a diff, how many unchanged lines to keep beside each change. Each
+     * longer run of unchanged lines is folded behind a button that shows it.
+     * Unset shows every line the diff holds.
+     */
+    contextLines?: number;
     /**
      * The copy button's name and tooltip text after a copy.
      */
@@ -185,6 +198,12 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the cap hides lines.
      */
     expandLabel: string;
+    /**
+     * The words of a button that hides a run of unchanged lines it showed, in a
+     * diff with `context-lines`. `{count}` is how many, and each language
+     * writes the forms it has.
+     */
+    hideUnchangedLabel: string;
     /**
      * Turns the code into highlighted markup, which the block draws in place of
      * the plain text.
@@ -263,6 +282,11 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false`.
      */
     noCopy: boolean;
+    /**
+     * The words of a button that shows a folded run of unchanged lines, in a
+     * diff with `context-lines`. `{count}` is how many.
+     */
+    showUnchangedLabel: string;
     /**
      * How a diff's two versions are arranged. It has no effect without `diff`.
      *
@@ -295,6 +319,18 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
     private parsed;
     /** The files in the content, when it is a diff and it can be read yet. */
     private get files();
+    /** The folds a reader opened, by file, hunk and the line each starts at. */
+    private readonly unfolded;
+    /** A hunk's lines in runs, folded where `context-lines` asks. */
+    private runsOf;
+    /**
+     * The button over a folded run, and the run once it is open.
+     *
+     * A disclosure, so focus stays on the button as the lines appear under it.
+     * The new side of a split diff draws the same words hidden from the
+     * accessibility tree, there to keep the rows level and to answer a press.
+     */
+    private renderFold;
     /**
      * The code as text, read from what the default slot is given rather than
      * stored.

package/dist/code-block/root/code-block-root.js

@@ -12,7 +12,7 @@ import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
-import { pairLines, parsePatch } from '../patch.js';
+import { foldContext, pairLines, parsePatch, } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
@@ -25,15 +25,18 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
+        this.hideUnchangedLabel = '{count, plural, one {Hide # unchanged line} other {Hide # unchanged lines}}';
         this.label = '';
         this.language = '';
         this.lineNumbers = false;
         this.markLines = '';
         this.noCopy = false;
+        this.showUnchangedLabel = '{count, plural, one {Show # unchanged line} other {Show # unchanged lines}}';
         this.wrap = false;
         this.wrapLabel = 'Wrap lines';
         this.wrappable = false;
         this.parsed = { files: [], text: '' };
+        this.unfolded = new Set();
         this.capped = false;
         this.expanded = false;
         this.measure = () => {
@@ -69,9 +72,32 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const text = this.text;
         if (text !== this.parsed.text) {
             this.parsed = { files: parsePatch(text), text };
+            this.unfolded.clear();
         }
         return this.parsed.files;
     }
+    runsOf(hunk) {
+        const keep = this.contextLines;
+        return keep === undefined || keep < 0
+            ? [{ folded: false, lines: hunk.lines, start: 0 }]
+            : foldContext(hunk.lines, Math.floor(keep));
+    }
+    renderFold(run, key, line, hidden = false) {
+        const open = this.unfolded.has(key);
+        const words = formatWords(this, open ? 'hideUnchangedLabel' : 'showUnchangedLabel', {
+            count: run.lines.length,
+        });
+        const toggle = () => {
+            if (!this.unfolded.delete(key)) {
+                this.unfolded.add(key);
+            }
+            this.requestUpdate();
+        };
+        const control = hidden
+            ? html `<span part="fold" aria-hidden="true" @click=${toggle}>${words}</span>`
+            : html `<button part="fold" type="button" aria-expanded=${open ? 'true' : 'false'} @click=${toggle}>${words}</button>`;
+        return html `${control}\n${open ? run.lines.map(line) : nothing}`;
+    }
     get text() {
         if (this.hydrating) {
             return '';
@@ -319,7 +345,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const numbers = side
             ? this.renderNumber(side === 'old' ? line.old : line.new, width)
             : html `${this.renderNumber(line.old, width)}${this.renderNumber(line.new, width)}`;
-        const text = html `<span part="text">${line.text}\n</span>`;
+        const words = line.pieces
+            ? line.pieces.map((piece) => piece.changed ? html `<span part="changed">${piece.text}</span>` : piece.text)
+            : line.text;
+        const text = html `<span part="text">${words}\n</span>`;
         if (line.kind === 'added') {
             return html `<ins part="added">${numbers}<span part="marker">+</span>${text}</ins>`;
         }
@@ -331,16 +360,22 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderHunk(hunk, hidden = false) {
         return html `<span part="hunk" aria-hidden=${hidden ? 'true' : nothing}>${hunk.header}\n</span>`;
     }
-    renderSplit(file, width) {
-        const hunks = file.hunks.map((hunk) => ({ hunk, rows: pairLines(hunk.lines) }));
+    renderSplit(file, width, at) {
+        const hunks = file.hunks.map((hunk) => ({ hunk, runs: this.runsOf(hunk) }));
         const filler = html `<span part="filler" aria-hidden="true">\n</span>`;
+        const side = (old) => hunks.map(({ hunk, runs }, h) => html `${this.renderHunk(hunk, !old)}${runs.map((run) => run.folded
+            ? this.renderFold(run, `${at}:${h}:${run.start}`, (line) => this.renderLine(line, width, old ? 'old' : 'new'), !old)
+            : pairLines(run.lines).map(({ left, right }) => {
+                const line = old ? left : right;
+                return line ? this.renderLine(line, width, old ? 'old' : 'new') : filler;
+            }))}`);
         return html `<div part="split">
-      <pre part="old" translate="no"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk)}${rows.map(({ left }) => left ? this.renderLine(left, width, 'old') : filler)}`)}</code></pre>
-      <pre part="new" translate="no"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk, true)}${rows.map(({ right }) => right ? this.renderLine(right, width, 'new') : filler)}`)}</code></pre>
+      <pre part="old" translate="no"><code part="code">${side(true)}</code></pre>
+      <pre part="new" translate="no"><code part="code">${side(false)}</code></pre>
     </div>`;
     }
     renderDiff(files) {
-        return html `${files.map((file) => {
+        return html `${files.map((file, at) => {
             const name = file.name || this.label;
             const widest = Math.max(0, ...file.hunks.flatMap((hunk) => hunk.lines.map((line) => Math.max(line.old ?? 0, line.new ?? 0))));
             const width = String(widest).length;
@@ -352,8 +387,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         ${this.renderHeader(name, now)}
         <div part="frame">
           ${this.variant === 'split'
-                ? this.renderSplit(file, width)
-                : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
+                ? this.renderSplit(file, width, at)
+                : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk, h) => html `${this.renderHunk(hunk)}${this.runsOf(hunk).map((run) => run.folded
+                    ? this.renderFold(run, `${at}:${h}:${run.start}`, (line) => this.renderLine(line, width))
+                    : run.lines.map((line) => this.renderLine(line, width)))}`)}</code></pre>`}
           ${this.headed(name) ? nothing : this.renderCopy(now)}
         </div>
       </div>`;
@@ -372,6 +409,9 @@ __decorate([
     words,
     property({ attribute: 'collapse-label' })
 ], HelixHeadlessCodeBlock.prototype, "collapseLabel", void 0);
+__decorate([
+    property({ attribute: 'context-lines', type: Number })
+], HelixHeadlessCodeBlock.prototype, "contextLines", void 0);
 __decorate([
     words,
     property({ attribute: 'copied-label' })
@@ -394,6 +434,10 @@ __decorate([
     words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'hide-unchanged-label' })
+], HelixHeadlessCodeBlock.prototype, "hideUnchangedLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
@@ -412,6 +456,10 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);
+__decorate([
+    words,
+    property({ attribute: 'show-unchanged-label' })
+], HelixHeadlessCodeBlock.prototype, "showUnchangedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCodeBlock.prototype, "variant", void 0);

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

@@ -22,8 +22,10 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * gray after you drag to the bottom of the square and back.
  *
  * The square is one tab stop. In it, the up and down arrows move brightness
- * and the left and right arrows move saturation, and PageUp and PageDown move
- * brightness by ten. The picker sends `input` as the color moves and `change`
+ * and the left and right arrows move saturation, by ten with Shift. PageUp and
+ * PageDown move brightness by ten, and Home and End move saturation by ten,
+ * turned on a right-to-left page as the arrows are, as React Aria's ColorArea
+ * does. The picker sends `input` as the color moves and `change`
  * when a drag, a key, a typed value or a preset settles it, as
  * `<input type="color">` does.
  *
@@ -546,7 +548,9 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * its own one axis: on the saturation input, ArrowUp moved the handle
      * sideways. Here the vertical keys move brightness and the horizontal keys
      * move saturation, turned on a right-to-left page as the pointer is, which is
-     * what React Aria's ColorArea does.
+     * what React Aria's ColorArea does. Shift makes an arrow a step of ten, and
+     * Home and End are saturation's steps of ten, as PageUp and PageDown are
+     * brightness's.
      */
     private readonly handleAreaKeydown;
     /**

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

@@ -211,11 +211,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             const color = this.color;
             const along = isRtl(this) ? -1 : 1;
             const held = (at) => clamp(at, 0, 100);
+            const step = event.shiftKey ? 10 : 1;
             const moves = {
-                ArrowDown: { brightness: held(color.brightness - 1) },
-                ArrowLeft: { saturation: held(color.saturation - along) },
-                ArrowRight: { saturation: held(color.saturation + along) },
-                ArrowUp: { brightness: held(color.brightness + 1) },
+                ArrowDown: { brightness: held(color.brightness - step) },
+                ArrowLeft: { saturation: held(color.saturation - along * step) },
+                ArrowRight: { saturation: held(color.saturation + along * step) },
+                ArrowUp: { brightness: held(color.brightness + step) },
+                End: { saturation: held(color.saturation + along * 10) },
+                Home: { saturation: held(color.saturation - along * 10) },
                 PageDown: { brightness: held(color.brightness - 10) },
                 PageUp: { brightness: held(color.brightness + 10) },
             };

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

@@ -26,6 +26,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * | Key | What it does |
  * |---|---|
  * | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |
+ * | Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. |
  * | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |
  * | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |
  * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |

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

@@ -154,7 +154,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 return;
             }
             if (!this.open) {
-                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (event.key === 'ArrowDown' && event.altKey) {
+                    event.preventDefault();
+                    this.requestOpen(true);
+                }
+                else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                     event.preventDefault();
                     const fallback = event.key === 'ArrowDown' ? 'first' : 'last';
                     this.opening = this.values.length > 0 ? 'selected' : fallback;
@@ -162,6 +166,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 }
                 return;
             }
+            if (event.key === 'ArrowUp' && event.altKey) {
+                event.preventDefault();
+                this.close();
+                return;
+            }
             if (this.moveAroundCreate(event)) {
                 void this.updateComplete.then(() => this.linkActive());
                 return;

package/dist/data-table/root/data-table-root.d.ts

@@ -215,6 +215,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * @cssstate empty - While there are no rows to show and none are loading.
  * @cssstate error - While `error-text` is set.
+ * @cssstate loading - While `loading` is set, as the rows are on their way.
  */
 export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
     /**

package/dist/data-table/root/data-table-root.js

@@ -984,6 +984,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.markEmpty();
         this.toggleState('error', this.errorText !== '');
         this.toggleState('empty', !this.loading && !this.hasRows);
+        this.toggleState('loading', this.loading);
         this.assign();
         this.announceSort();
         this.quietControls();

package/dist/element-events.generated.js

@@ -335,7 +335,13 @@ registerElementEvents({
         'volumechange',
         'waiting',
     ],
-    'helix-headless-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
+    'helix-headless-video-playlist': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-end',
+        'helix-reorder',
+    ],
     'helix-headless-video-playlist-item': ['helix-select'],
     'helix-headless-video-playlist-menu': ['helix-select'],
     'helix-headless-virtual-list': [

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

@@ -46,7 +46,8 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * 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, and `helix-toggle` from it once `hidden` holds the
- * choice.
+ * choice. Escape closes the menu and returns focus to its button, and the menu
+ * closes when focus moves on from it or a press lands outside the map.
  *
  * 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,
@@ -315,6 +316,12 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     private hiding?;
     /** Closes the layers menu on a press anywhere outside the frame. */
     private readonly handleOutside;
+    /**
+     * Closes the layers menu when focus moves on from its button and the menu,
+     * as a Tab past the last tile does. Focus leaving the page, with nothing
+     * focused in its place, leaves the menu as it is.
+     */
+    private readonly handleMenuFocusOut;
     /**
      * Keys pressed in the layers menu. Escape closes it and returns to its
      * button, and no key reaches the region, where the arrows would pan the map.

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

@@ -82,6 +82,16 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 this.layersOpen = false;
             }
         };
+        this.handleMenuFocusOut = (event) => {
+            const to = event.relatedTarget;
+            if (!(this.layersOpen && to)) {
+                return;
+            }
+            const owners = this.renderRoot.querySelectorAll('[part="layers-toggle"], [part="layers-menu"]');
+            if (![...owners].some((owner) => owner.contains(to))) {
+                this.layersOpen = false;
+            }
+        };
         this.handleMenuKeydown = (event) => {
             event.stopPropagation();
             if (event.key === 'Escape' && this.layersOpen) {
@@ -402,6 +412,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'menu' }));
             }
         }}
+        @focusout=${this.handleMenuFocusOut}
         @keydown=${this.handleMenuKeydown}
       >
         <slot name="layers-icon">
@@ -416,6 +427,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         role="group"
         aria-label=${this.layersLabel}
         ?hidden=${!this.layersOpen}
+        @focusout=${this.handleMenuFocusOut}
         @keydown=${this.handleMenuKeydown}
       >
         ${this.imagery.length > 0 ? this.renderMapTypes() : nothing}

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

@@ -10,16 +10,22 @@ import '../../kbd/index.js';
  * - `checked` makes the row a choice.
  * - With neither, the row is a command.
  *
- * The role follows the kind. A row with `checked` is `menuitemcheckbox` with
- * `aria-checked`, and `exclusive` makes it `menuitemradio`, for a set where
- * only one can be on. A row that opens a page keeps `menuitem` and sets
- * `aria-haspopup`.
+ * The role follows the kind. A row with `checkable` or `checked` is
+ * `menuitemcheckbox` with `aria-checked`, and an `exclusive` row is
+ * `menuitemradio`, for a set where 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.
  *
+ * Space on a choice row changes it and leaves the menu open, so a reader can
+ * set several in a row, as the APG's menu does. Enter and a press change it and
+ * close the menu. `close-on-select="false"` on the row keeps the menu open after
+ * any choice of it, and `close-on-select` on the row closes it after a Space as
+ * well.
+ *
  * 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.
@@ -82,7 +88,8 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * as a checkbox tells a reader its siblings are commands, which is the one
      * thing they are not.
      *
-     * `checked` implies it, so a row that is on never has to say both.
+     * `checked` and `exclusive` imply it, so a row that is on, or one of a set,
+     * never has to say both.
      *
      * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
      * you can cancel.
@@ -95,6 +102,14 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * state you start the row in, and `:state(checked)` carries the current one.
      */
     checked: boolean;
+    /**
+     * Whether choosing the row closes the menu.
+     *
+     * Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+     * open after a Space on a choice row. Write `close-on-select="false"` for a
+     * row that changes something the reader is watching, such as a zoom step.
+     */
+    closeOnSelect?: boolean;
     /**
      * Whether the row is disabled, so it cannot be chosen.
      */
@@ -116,8 +131,7 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * 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.
+     * It makes the row a choice, so it needs no `checkable` beside it.
      */
     exclusive: boolean;
     /**
@@ -192,6 +206,17 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * protected. Not a consumer's to read or set.
      */
     readonly isMenuItem = true;
+    /**
+     * @internal Whether the last choice of this row asked the menu to stay open:
+     * a Space on a choice row, or `close-on-select="false"`. Read by the menu
+     * while it hears the row's `helix-select`.
+     */
+    keepsOpen: boolean;
+    /**
+     * @internal Whether the row is a choice: it can be ticked, or is one of a
+     * set. Read by the menu to reserve the trailing column.
+     */
+    get choice(): boolean;
     /**
      * Whether anything was slotted into `submenu`.
      *
@@ -342,8 +367,14 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     private tick;
     /** The other `exclusive` rows in this row's run of siblings. */
     private exclusivePeers;
+    /**
+     * Chooses the row. `space` is whether a Space chose it, which keeps the menu
+     * open on a choice row unless the row says otherwise.
+     */
     private choose;
     private readonly handleClick;
+    /** Whether the click on its way is the one a Space on a linked row sent. */
+    private spacePressed;
     /**
      * Enter and Space choose the row, which a `<div>` would not do on its own.
      *