@fusion.dev/helix-headless 0.218.0 → 0.219.0

package/dist/dialog/root/dialog-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, FocusScopeController, HelixElement, headingsIn, hostAria, lockScroll, MixinControllerOpen, OpenPhaseController, reflectElements, unlockScroll, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, FocusScopeController, focusableElements, HelixElement, headingsIn, hostAria, lockScroll, MixinControllerOpen, OpenPhaseController, reflectElements, unlockScroll, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { wordsIn } from '../description.js';
@@ -161,6 +161,11 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             .filter((one) => one instanceof Promise));
         if (this.open && !dialog.open && this.isConnected) {
             dialog.showModal();
+            const chose = this.matches(':focus-within') &&
+                !(this.renderRoot instanceof ShadowRoot && this.renderRoot.activeElement === dialog);
+            if (!chose) {
+                focusableElements(this)[0]?.focus();
+            }
         }
     }
     refuse() {

package/dist/drilldown/item/drilldown-item.js

@@ -58,7 +58,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     updated(changed) {
         super.updated(changed);
         if (this.partNamed('item')) {
-            auditName(this, () => this.partNamed('item'), 'row');
+            auditName(this, () => this.partNamed('item') ?? undefined, 'row');
         }
     }
     firstUpdated(changed) {

package/dist/element-events.generated.js

@@ -38,6 +38,7 @@ registerElementEvents({
         'helix-before-listen',
         'helix-listen',
         'helix-send',
+        'helix-stop',
         'helix-typing',
         'input',
     ],

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

@@ -638,9 +638,10 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * Says so when a picker is written in the field and never registered.
      *
      * The picker has an entry of its own, so a page that imports only the field
-     * gets an inert element there: a trigger that opens nothing. Asked once the
-     * page has loaded and painted, so an entry a later module imports is not
-     * taken for a missing one.
+     * gets an inert element there: a trigger that opens nothing. Core's
+     * `auditChildren` asks once the page has loaded and painted, and again once
+     * it has registered nothing for `QUIET` milliseconds, so an entry a later
+     * module or a later chunk imports is not taken for a missing one.
      */
     private auditPicker;
     protected updated(changed: PropertyValues): void;

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

@@ -586,26 +586,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinVoice
         this.auditPicker();
     }
     auditPicker() {
-        const { tier } = this.constructor;
-        const tag = `${tier}filter-menu`;
-        const check = () => {
-            if (this.isConnected && this.querySelector(tag) && !customElements.get(tag)) {
-                reportRuntime({
-                    kind: 'unregistered-part',
-                    message: `<${tag}> in <${this.localName}> is not registered, so its trigger opens nothing. ${howToRegister({ entry: 'filter-input/menu', host: this.localName, tag, tier })}`,
-                    tag: this.localName,
-                });
-            }
-        };
-        const frame = () => {
-            requestAnimationFrame(check);
-        };
-        if (document.readyState === 'complete') {
-            frame();
-        }
-        else {
-            window.addEventListener('load', frame, { once: true });
-        }
+        auditChildren(this, 'filter-menu', 'filter-input/menu', 'its trigger opens nothing');
     }
     updated(changed) {
         super.updated(changed);

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

@@ -2,6 +2,7 @@ import { type GraphSignalDetail, HelixElement, ToolbarController, type ViewportP
 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';
 import { type GraphLink, type GraphNode } from './graph-model.js';
 declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -149,6 +150,16 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart settling - What is said while a layout runs unseen, where the reader asked for less motion or the page paused its motion, over the hidden drawing.
  * @csspart stage - The drawing and its controls.
  * @csspart stop-layout - The button that stops a layout that has run past five seconds, where the notes stand.
+ * @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 renderer draws in.
  * @csspart zoom-in - The zoom in button.
  * @csspart zoom-in-button - `zoom-in`'s inner button.

package/dist/graph/root/graph-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 { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { adjacencyOf, cursorAfter, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
@@ -559,9 +560,11 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             return nothing;
         }
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         return staticHtml `<${button}
       part="notes-toggle"
+      id="notes-toggle"
       exportparts="button: notes-toggle-button, live: notes-toggle-live, spinner: notes-toggle-spinner, text: notes-toggle-text"
       aria-controls="panel"
       .expanded=${this.panelOpen}
@@ -574,7 +577,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
       <svg aria-hidden="true" fill="currentColor" viewBox=${list.viewBox}>
         ${unsafeSVG(list.content)}
       </svg>
-    </${button}>`;
+    </${button}><${tip} for="notes-toggle" content=${this.notesLabel} 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}>`;
     }
     renderFilterIcon() {
         return html `<slot name="filter-icon">

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

@@ -99,6 +99,12 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
      */
     autocomplete: string;
+    /**
+     * Whether the browser corrects words as the reader types, as the platform's
+     * `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
+     * prose, such as an address or a code, which corrections would change.
+     */
+    autocorrect: boolean;
     /**
      * Whether the field shows a button that empties it.
      *

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

@@ -13,6 +13,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinVoice(MixinContro
         this.announcesInput = true;
         this.autocapitalize = '';
         this.autocomplete = '';
+        this.autocorrect = true;
         this.clearable = false;
         this.clearLabel = 'Clear';
         this.enterKeyHint = '';
@@ -198,6 +199,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinVoice(MixinContro
         inputmode=${this.inputMode || nothing}
         enterkeyhint=${this.enterKeyHint || nothing}
         autocapitalize=${this.autocapitalize || nothing}
+        autocorrect=${this.autocorrect ? nothing : 'off'}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
         ?disabled=${this.isDisabled}
@@ -243,6 +245,11 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({
+        converter: { fromAttribute: (value) => value?.toLowerCase() !== 'off' },
+    })
+], HelixHeadlessInput.prototype, "autocorrect", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessInput.prototype, "clearable", void 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;
 /**
@@ -35,7 +35,9 @@ declare const HelixHeadlessLogGroup_base: (new (...args: any[]) => import("@fusi
  * @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 +65,10 @@ export declare class HelixHeadlessLogGroup extends HelixHeadlessLogGroup_base {
      */
     statusLabel: string;
     private readonly handlePress;
+    /** 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,22 @@ let HelixHeadlessLogGroup = class HelixHeadlessLogGroup extends MixinControllerO
         this.handlePress = () => {
             this.toggleOpen();
         };
+        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
@@ -51,7 +64,7 @@ let HelixHeadlessLogGroup = class HelixHeadlessLogGroup extends MixinControllerO
               role="group"
               aria-labelledby="summary"
               ?hidden=${!this.open}
-            ><slot></slot></div>`}`;
+            ><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.