@fusion.dev/helix-headless 0.218.0 → 0.220.0

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

@@ -22,7 +22,8 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  *
  * Set `controls` for the viewer's own previous, next and close controls, named
  * by `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can
- * replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without
+ * replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. A set
+ * of one item has nothing to step to, so it draws no previous, next or counter. Without
  * it, compose the chrome yourself in the `header` and `footer` slots, with
  * buttons that send `--previous`, `--next` and `--close`.
  *
@@ -427,6 +428,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * control that has just shown the last picture keeps focus.
      */
     protected renderControls(): TemplateResult;
+    /** Previous and next, for a set of more than one. */
+    protected renderStepControls(): TemplateResult;
     /**
      * Zoom out and zoom in, for a pointer with no wheel and no second finger.
      *

package/dist/lightbox/root/lightbox-root.js

@@ -438,11 +438,19 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       </div>
       <slot name="footer" part="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}
-      ${this.counter ? html `<span part="counter" aria-hidden="true">${this.place()}</span>` : nothing}
+      ${this.counter && this.items.length > 1 ? html `<span part="counter" aria-hidden="true">${this.place()}</span>` : nothing}
       <span part="live" role="status" aria-live="polite">${this.announcement || nothing}</span>
     </dialog>`;
     }
     renderControls() {
+        const stepping = this.items.length > 1;
+        return html `${stepping ? this.renderStepControls() : nothing}${this.maxZoom > 1 ? this.renderZoomControls() : nothing}${drawDismiss({
+            label: this.dismissLabel,
+            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
+            onDismiss: () => this.close(),
+        })}`;
+    }
+    renderStepControls() {
         return html `<button
         part="previous"
         type="button"
@@ -468,13 +476,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             ${unsafeSVG(caretRight.content)}
           </svg>
         </slot>
-      </button>
-      ${this.maxZoom > 1 ? this.renderZoomControls() : nothing}
-      ${drawDismiss({
-            label: this.dismissLabel,
-            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
-            onDismiss: () => this.close(),
-        })}`;
+      </button>`;
     }
     renderZoomControls() {
         return html `<button

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

@@ -335,6 +335,17 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * it back on the first match.
      */
     private parked;
+    /**
+     * Whether the reader moved the highlight since the filter last changed, by
+     * an arrow key, Home or End, a press, or the control that owns this list.
+     * Until they do, the highlight follows the first option a filter leaves.
+     */
+    private steered;
+    /**
+     * Watches the options' containers while a filter is set, so options a
+     * framework reorders or replaces after a keystroke are counted again.
+     */
+    private sources;
     /**
      * The option last chosen, which Shift with Space or with a press extends
      * from.
@@ -596,6 +607,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     highlightValue(value: string): void;
     /** Hides what the filter excludes, and writes the rest onto the options. */
     private place;
+    /**
+     * Counts the options again when an element that holds them gains or loses
+     * a child, while `on`: the list itself, and each element a slot in it
+     * brings in, such as a group of Command's commands.
+     *
+     * **A slot does not say when its elements' own children move**, so a
+     * framework sorting the options inside a group, after the filter that
+     * found them, left the highlight on the option that had been first.
+     */
+    private watchSources;
     /**
      * Whether another Helix component renders this list and binds its value
      * down, as Select, Combobox, Command and Time Picker do. That component seeds

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

@@ -36,6 +36,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
         this.valueMissingMessage = 'Choose one to continue.';
         this.activeValue = '';
         this.parked = false;
+        this.steered = false;
+        this.sources = undefined;
         this.anchor = '';
         this.shifted = false;
         this.typeahead = new Typeahead();
@@ -57,6 +59,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
                 return;
             }
             const { value } = event.detail;
+            this.steered = true;
             this.activeValue = value;
             if (this.multiple && this.shifted) {
                 this.extend(value);
@@ -243,6 +246,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
         const shown = this.shown.filter((option) => !option.disabled);
         this.typeahead.reset();
         this.parked = where === 'none';
+        this.steered = true;
         const values = where === 'selected' ? new Set(this.values) : undefined;
         const chosen = values && shown.find((option) => values.has(option.value));
         this.activeValue =
@@ -365,6 +369,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
     }
     arrive(value) {
         this.parked = false;
+        this.steered = true;
         this.activeValue = value;
         const link = this.entries.some((option) => option.value === value && Boolean(option.href));
         if (!this.multiple && !this.manual && !this.forwarded && !link) {
@@ -404,6 +409,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
         }
         this.typeahead.reset();
         this.parked = false;
+        this.steered = true;
         this.activeValue = value;
         if (this.childrenKnown) {
             this.place();
@@ -426,15 +432,37 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
             rule.hidden = needle !== '';
         }
         const shown = this.shown;
+        const first = shown.find((option) => !option.disabled)?.value ?? '';
         const rescue = !this.parked && (needle !== '' || this.activeValue !== '');
-        if (rescue && !shown.some((option) => option.value === this.activeValue)) {
-            this.activeValue = shown.find((option) => !option.disabled)?.value ?? '';
+        if (needle !== '' && !this.parked && !this.steered) {
+            this.activeValue = first;
+        }
+        else if (rescue && !shown.some((option) => option.value === this.activeValue)) {
+            this.activeValue = first;
         }
         for (const option of this.entries) {
             option.active = option.value === this.activeValue;
         }
         this.hasMatches = shown.length > 0;
         this.counted = true;
+        this.watchSources(needle !== '');
+    }
+    watchSources(on) {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.sources?.disconnect();
+        if (!on) {
+            return;
+        }
+        this.sources ??= new MutationObserver(() => this.requestUpdate());
+        const watching = { childList: true, subtree: true };
+        this.sources.observe(this, watching);
+        for (const slot of this.among((node) => node instanceof HTMLSlotElement, this.children)) {
+            for (const element of slot.assignedElements({ flatten: true })) {
+                this.sources.observe(element, watching);
+            }
+        }
     }
     get owned() {
         const root = this.getRootNode();
@@ -478,12 +506,16 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick, true);
         auditChildren(this, 'option', 'option', 'the list offers no choices');
+        if (this.hasUpdated) {
+            this.watchSources(this.filter.trim() !== '');
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleClick, true);
+        this.sources?.disconnect();
         markMatches(this, [], '');
     }
     willUpdate(changed) {
@@ -502,6 +534,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinVoice(MixinCo
         if (changed.has('items') && this.items) {
             auditChildren(this, 'option', 'option', 'the items draw no choices', true);
         }
+        if (changed.has('filter')) {
+            this.steered = false;
+        }
         if (this.childrenKnown) {
             this.place();
             this.tell(changed);

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import type { LogStatus } from '../buffer.js';
 declare const HelixHeadlessLogGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -15,7 +15,9 @@ declare const HelixHeadlessLogGroup_base: (new (...args: any[]) => import("@fusi
  * the heading, as you write it, such as `12s`.
  *
  * A group starts shut. Write `default-open` on the step a reader should see,
- * such as the one that failed.
+ * such as the one that failed. A shut group's lines are hidden until found:
+ * the browser's find and Find search them, and the group opens on the one
+ * that holds the match, unless `helix-before-open` is canceled.
  *
  * @since 0.200.0
  * @status experimental
@@ -28,14 +30,16 @@ declare const HelixHeadlessLogGroup_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group opens. Cancelable.
  * @event {ToggleEvent} toggle - Fired after the group opens or closes, with `newState` and `oldState`.
  *
- * @csspart content - The lines, hidden while the group is shut.
+ * @csspart content - The lines, hidden until found while the group is shut.
  * @csspart duration - How long the step took.
  * @csspart heading - The heading.
  * @csspart mark - The caret that turns as the group opens, an `<svg>` you size.
  * @csspart status - The mark for the status, an `<svg>` you size.
  * @csspart summary - The button that opens and closes the group.
  *
+ * @cssstate empty - The group holds nothing to show, so opening it shows nothing.
  * @cssstate open - The group shows its lines.
+ * @cssstate steps - The group holds steps of its own, which a stylesheet draws as a tree.
  */
 export declare class HelixHeadlessLogGroup extends HelixHeadlessLogGroup_base {
     protected static markRules: string[];
@@ -63,6 +67,17 @@ export declare class HelixHeadlessLogGroup extends HelixHeadlessLogGroup_base {
      */
     statusLabel: string;
     private readonly handlePress;
+    /**
+     * A search found a match in the shut group, and shows it next: the
+     * browser's find or Find. The group opens, and where the page refuses, its
+     * lines are hidden again once the search has shown them, as Accordion's
+     * section is.
+     */
+    private readonly handleBeforeMatch;
+    /** Records whether the group holds anything, and whether a step is among it. */
+    private readonly handleSlotChange;
+    /** A slot that is never filled fires no `slotchange`, so the first render reads it once. */
+    protected firstUpdated(changed: PropertyValues): void;
     /**
      * The words in the button are separated by spaces in the markup, since a
      * name is read off inline boxes with nothing between them: without them a

package/dist/log/group/log-group.js

@@ -22,9 +22,35 @@ let HelixHeadlessLogGroup = class HelixHeadlessLogGroup extends MixinControllerO
         this.handlePress = () => {
             this.toggleOpen();
         };
+        this.handleBeforeMatch = (event) => {
+            if (this.open || this.requestOpen(true)) {
+                return;
+            }
+            const content = event.currentTarget;
+            const observer = new MutationObserver(() => {
+                observer.disconnect();
+                if (!this.open && !content.hasAttribute('hidden')) {
+                    content.setAttribute('hidden', 'until-found');
+                }
+            });
+            observer.observe(content, { attributeFilter: ['hidden'] });
+        };
+        this.handleSlotChange = () => {
+            const slot = this.renderRoot.querySelector('[part="content"] > slot');
+            if (!slot) {
+                return;
+            }
+            const held = slot.assignedElements();
+            this.toggleState('empty', held.length === 0);
+            this.toggleState('steps', held.some((element) => 'isLogGroup' in element));
+        };
     }
     static { this.markRules = [SPOKEN_RULE]; }
     static { this.words = 'helix-log'; }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.handleSlotChange();
+    }
     render() {
         const status = this.status;
         return html `<button
@@ -48,10 +74,11 @@ let HelixHeadlessLogGroup = class HelixHeadlessLogGroup extends MixinControllerO
             : html `<div
               part="content"
               id="content"
-              role="group"
-              aria-labelledby="summary"
-              ?hidden=${!this.open}
-            ><slot></slot></div>`}`;
+              role=${this.open ? 'group' : nothing}
+              aria-labelledby=${this.open ? 'summary' : nothing}
+              hidden=${this.open ? nothing : 'until-found'}
+              @beforematch=${this.handleBeforeMatch}
+            ><slot @slotchange=${this.handleSlotChange}></slot></div>`}`;
     }
 };
 __decorate([

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

@@ -104,7 +104,7 @@ declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.de
  * @csspart after - The space the rows below the drawn ones would take. Only for lines drawn from data.
  * @csspart before - The space the rows above the drawn ones would take. Only for lines drawn from data.
  * @csspart dropped - The line above the log that says how many earlier lines `limit` let go.
- * @csspart empty - Shown when the log has no lines.
+ * @csspart empty - Shown when the log has no lines and no steps.
  * @csspart group-content - Not drawn: a group drawn from data stands for its heading, and its lines are rows beside it.
  * @csspart group-duration - How long a step drawn from `groups` took.
  * @csspart group-heading - The heading of a step drawn from `groups`.
@@ -166,7 +166,7 @@ declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.de
  * @cssproperty --log-digits - Written on the `log`: how many digits the largest line number has, while `line-numbers` is set, so a stylesheet can size the column of numbers.
  *
  * @cssstate done - The run is over: `done` is set, or `source` ended.
- * @cssstate empty - The log has no lines.
+ * @cssstate empty - The log has no lines and no steps.
  * @cssstate filtered - `query` or `level` is set, so only the lines they keep are shown.
  * @cssstate pinned - The log follows its newest line.
  */
@@ -203,7 +203,11 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     doneLabel: string;
     /** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
     droppedLabel: string;
-    /** The text shown and announced when the log has no lines. */
+    /**
+     * The text shown and announced when the log has no lines and no steps. A
+     * step with nothing in it yet, such as one still `pending`, is its heading
+     * alone, so a log holding one says nothing.
+     */
     emptyText: string;
     /**
      * What a screen reader hears when lines at `error` arrive. `{count}` is how
@@ -377,6 +381,12 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     private readonly virtualize;
     /** Whether the lines are data rather than children. */
     private get fed();
+    /**
+     * Whether lines or steps were written as children. A step counts with no
+     * line in it, since its heading is drawn: a step still waiting, or one
+     * holding a note in place of output.
+     */
+    private get holdsChildren();
     /** The parser `format` names. */
     private get formatParser();
     /** The steps from `groups`, then the steps a parser opened. */

package/dist/log/root/log-root.js

@@ -252,6 +252,9 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
             this.groups.length > 0 ||
             this.sourceValue !== null);
     }
+    get holdsChildren() {
+        return this.childLines.length > 0 || this.childGroups.length > 0;
+    }
     get formatParser() {
         return this.formatValue === undefined ? undefined : LOG_FORMATS[this.formatValue];
     }
@@ -762,7 +765,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         this.toggleState('pinned', this.pinned);
         this.toggleState('done', this.done);
         this.toggleState('filtered', this.query.trim() !== '' || this.level !== undefined);
-        this.toggleState('empty', this.childrenKnown && !this.fed && this.childLines.length === 0);
+        this.toggleState('empty', this.childrenKnown && !this.fed && !this.holdsChildren);
     }
     updated(changed) {
         super.updated(changed);
@@ -870,7 +873,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         const fed = this.fed;
         const dropped = this.buffer.dropped;
         const content = this.query.trim() !== '' ||
-            (fed ? this.view.rows.length > 0 : this.childLines.length > 0 || !this.childrenKnown);
+            (fed ? this.view.rows.length > 0 : this.holdsChildren || !this.childrenKnown);
         return html `<slot name="toolbar" part="toolbar"></slot>
       <p part="dropped" ?hidden=${dropped === 0}>${dropped === 0 ? nothing : formatWords(this, 'droppedLabel', { count: dropped })}</p>
       <div

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

@@ -2,6 +2,7 @@ import { HelixElement, KeyboardNavigationController, type ViewportControlsPlacem
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type StaticValue } from 'lit/static-html.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 /**
  * What `ViewportControlsPlacement` is called for a map.
  *
@@ -171,6 +172,16 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @csspart tilt-live - `tilt`'s live region, which speaks while it is pending.
  * @csspart tilt-spinner - The ring `tilt` turns while it is pending.
  * @csspart tilt-text - The box `tilt`'s glyph sits in.
+ * @csspart tooltip-arrow - The arrow of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-surface - The bubble of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-surface-bottom - The bubble while it is below its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-left - The bubble while it is left of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-right - The bubble while it is right of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-top - The bubble while it is above its button. Set together with `tooltip-surface`.
  * @csspart viewport - The box the map is drawn in.
  * @csspart zoom-in - The button that zooms in.
  * @csspart zoom-in-button - `zoom-in`'s inner button.

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

@@ -5,6 +5,7 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
@@ -412,9 +413,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }
         const entries = this.layerEntries;
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         return staticHtml `<${button}
         part="layers-toggle"
+        id="layers-toggle"
         exportparts="button: layers-toggle-button, live: layers-toggle-live, spinner: layers-toggle-spinner, text: layers-toggle-text"
         aria-controls="layers-menu"
         .expanded=${this.layersOpen}
@@ -436,7 +439,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             ${unsafeSVG(stack.content)}
           </svg>
         </slot>
-      </${button}>
+      </${button}><${tip} for="layers-toggle" content=${this.layersLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
       <div
         part="layers-menu"
         id="layers-menu"
@@ -494,12 +497,14 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     renderCompass(pan, rotate) {
         const { faceNorthLabel } = this;
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         const ground = material ?? nothing;
         return staticHtml `<div part="compass">
       ${rotate
             ? staticHtml `<${button}
               part="rotate-left"
+              id="rotate-left"
               exportparts="button: rotate-left-button, live: rotate-left-live, spinner: rotate-left-spinner, text: rotate-left-text"
               label=${this.rotateLeftLabel}
               material=${ground}
@@ -507,11 +512,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="rotate-left-icon">↺</slot>
-            </${button}>`
+            </${button}><${tip} for="rotate-left" content=${this.rotateLeftLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${pan
             ? staticHtml `<${button}
               part="pan-up"
+              id="pan-up"
               exportparts="button: pan-up-button, live: pan-up-live, spinner: pan-up-spinner, text: pan-up-text"
               label=${this.panLabel('up')}
               material=${ground}
@@ -519,11 +525,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-up-icon">${this.panGlyph('up')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-up" content=${this.panLabel('up')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${rotate
             ? staticHtml `<${button}
               part="rotate-right"
+              id="rotate-right"
               exportparts="button: rotate-right-button, live: rotate-right-live, spinner: rotate-right-spinner, text: rotate-right-text"
               label=${this.rotateRightLabel}
               material=${ground}
@@ -531,11 +538,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="rotate-right-icon">↻</slot>
-            </${button}>`
+            </${button}><${tip} for="rotate-right" content=${this.rotateRightLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${pan
             ? staticHtml `<${button}
               part="pan-start"
+              id="pan-start"
               exportparts="button: pan-start-button, live: pan-start-live, spinner: pan-start-spinner, text: pan-start-text"
               label=${this.panLabel('start')}
               material=${ground}
@@ -543,10 +551,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-start-icon">${this.panGlyph('start')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-start" content=${this.panLabel('start')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       <${button}
         part="face-north"
+        id="face-north"
         exportparts="button: face-north-button, live: face-north-live, spinner: face-north-spinner, text: face-north-text"
         label=${faceNorthLabel}
         material=${ground}
@@ -561,10 +570,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             <path data-end="south" d="M8 14.5 5.5 8h5Z" />
           </svg>
         </slot>
-      </${button}>
+      </${button}><${tip} for="face-north" content=${faceNorthLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
       ${pan
             ? staticHtml `<${button}
               part="pan-end"
+              id="pan-end"
               exportparts="button: pan-end-button, live: pan-end-live, spinner: pan-end-spinner, text: pan-end-text"
               label=${this.panLabel('end')}
               material=${ground}
@@ -572,11 +582,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-end-icon">${this.panGlyph('end')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-end" content=${this.panLabel('end')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${pan
             ? staticHtml `<${button}
               part="pan-down"
+              id="pan-down"
               exportparts="button: pan-down-button, live: pan-down-live, spinner: pan-down-spinner, text: pan-down-text"
               label=${this.panLabel('down')}
               material=${ground}
@@ -584,7 +595,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-down-icon">${this.panGlyph('down')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-down" content=${this.panLabel('down')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
     </div>`;
     }
@@ -599,12 +610,14 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             return nothing;
         }
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         const ground = material ?? nothing;
         return staticHtml `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
       ${fullscreen
             ? staticHtml `<${button}
               part="fullscreen"
+              id="fullscreen"
               exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
               aria-pressed=${this.filled ? 'true' : 'false'}
               label=${this.fullscreenLabel}
@@ -614,12 +627,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="fullscreen-icon">⤢</slot>
-            </${button}>`
+            </${button}><${tip} for="fullscreen" content=${this.fullscreenLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${menu}
       ${tilt
             ? staticHtml `<${button}
               part="tilt"
+              id="tilt"
               exportparts="button: tilt-button, live: tilt-live, spinner: tilt-spinner, text: tilt-text"
               aria-pressed=${this.pitch > 0 ? 'true' : 'false'}
               label=${this.tiltLabel}
@@ -629,11 +643,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="tilt-icon">3D</slot>
-            </${button}>`
+            </${button}><${tip} for="tilt" content=${this.tiltLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${zoom
             ? staticHtml `<${button}
                 part="zoom-in"
+                id="zoom-in"
                 exportparts="button: zoom-in-button, live: zoom-in-live, spinner: zoom-in-spinner, text: zoom-in-text"
                 label=${this.zoomInLabel}
                 material=${ground}
@@ -642,9 +657,10 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 @helix-press=${stopPress}
               >
                 <slot name="zoom-in-icon">+</slot>
-              </${button}>
+              </${button}><${tip} for="zoom-in" content=${this.zoomInLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
               <${button}
                 part="zoom-out"
+                id="zoom-out"
                 exportparts="button: zoom-out-button, live: zoom-out-live, spinner: zoom-out-spinner, text: zoom-out-text"
                 label=${this.zoomOutLabel}
                 material=${ground}
@@ -653,7 +669,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 @helix-press=${stopPress}
               >
                 <slot name="zoom-out-icon">−</slot>
-              </${button}>`
+              </${button}><${tip} for="zoom-out" content=${this.zoomOutLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
     </div>`;

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

@@ -544,6 +544,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * the filters' column. `Notifications` answers the same question for its media
      * column the same way, and for the same reason.
      *
+     * **Per section on a page with sections**, for the same reason one level
+     * down: a section has its own heading, where the reader starts reading
+     * again, so its rows line up with each other and not with another
+     * section's. A section of icons over a section of plain choices indented
+     * the plain ones by a column nothing in them filled. The rows outside any
+     * section are decided together, as before, and the trailing column stays
+     * the page's, since ticks on one edge never set labels on two.
+     *
      * Read off the light DOM rather than off the rows, so it does not depend on
      * which children have upgraded by the time this runs.
      */

package/dist/menu/root/menu-root.js

@@ -741,7 +741,28 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     markColumns() {
         const rows = this.flies ? this.topRows : this.drilldown.rows;
-        this.toggleState('start', rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
+        const sections = new Map();
+        for (const child of this.children) {
+            if (child.isMenuSection) {
+                sections.set(child, false);
+            }
+        }
+        let loose = false;
+        for (const row of rows) {
+            const marked = row.querySelector(':scope > [slot="start"]') !== null;
+            const parent = row.parentElement;
+            if (parent && sections.has(parent)) {
+                sections.set(parent, sections.get(parent) === true || marked);
+            }
+            else {
+                loose ||= marked;
+            }
+        }
+        this.toggleState('start', loose);
+        for (const [section, marked] of sections) {
+            ;
+            section.startColumn = marked;
+        }
         this.toggleState('mark', rows.some((row) => row.choice || this.drilldown.hasPage(row)));
     }
     mark(item, onPage) {