@fusion.dev/helix-headless 0.147.0 → 0.148.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, afterLinkFollowed, customElement, DelayController, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -21,6 +21,8 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.status = new StatusController(this);
+        this.told = undefined;
         this.allowsCustomValue = false;
         this.autocomplete = 'off';
         this.creatable = false;
@@ -38,6 +40,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.removeLabel = 'Remove {name}';
         this.resultLabel = '{count} result';
         this.resultsLabel = '{count} results';
+        this.selectedLabel = '{name}, selected';
         this.suggest = false;
         this.typed = '';
         this.suggestion = '';
@@ -166,12 +169,17 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 submitImplicitly(this.form);
             }
         };
+        this.counted = '';
         this.handleChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
             if (!this.requestValue(value)) {
                 return;
             }
+            const chosen = this.listbox?.options.find((option) => option.value === value);
+            if (chosen && onApple()) {
+                this.status.say(fillTemplate(this.selectedLabel, { name: chosen.text }));
+            }
             this.emptied = false;
             this.typed = '';
             this.suggestion = '';
@@ -247,7 +255,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     markStatus() {
         const list = this.listbox;
-        this.toggleState('error', this.loadError !== '');
+        this.toggleState('blank', this.value === '');
+        this.toggleState('loading', this.loading);
+        this.toggleState('error', Boolean(this.loadError));
         this.toggleState('no-results', list !== null &&
             !this.loading &&
             list.filter !== '' &&
@@ -382,16 +392,47 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     linkActive() {
         const control = this.partNamed('control');
-        if (!control || !('ariaActiveDescendantElement' in control)) {
-            return;
-        }
         const active = !this.open
             ? undefined
             : this.onCreate
                 ? this.partNamed('create')
                 : (this.listbox?.options ?? []).find((option) => option.active && !option.hidden);
+        this.tell(active);
+        if (!control || !('ariaActiveDescendantElement' in control)) {
+            return;
+        }
+        ;
         control.ariaActiveDescendantElement = active ?? null;
     }
+    tell(active) {
+        if (!this.open) {
+            this.told = undefined;
+            return;
+        }
+        if ((active ?? null) === this.told ||
+            !onApple() ||
+            this.renderRoot.activeElement !== this.partNamed('control')) {
+            return;
+        }
+        if (this.listbox?.isUpdatePending) {
+            void this.listbox.updateComplete.then(() => this.linkActive());
+            return;
+        }
+        if (this.told === undefined) {
+            this.counted = countLabel(this.reachable.length, this.resultLabel, this.resultsLabel, this.lang);
+        }
+        this.told = active ?? null;
+        const option = active;
+        const words = option?.text === undefined
+            ? (active?.textContent?.trim() ?? '')
+            : option.selected
+                ? fillTemplate(this.selectedLabel, { name: option.text })
+                : option.text;
+        this.status.say([this.counted, words].filter(Boolean).join('. '));
+        if (active) {
+            this.counted = '';
+        }
+    }
     removeLastToken() {
         const last = this.values.at(-1);
         if (last !== undefined) {
@@ -468,7 +509,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 this.opening = undefined;
                 void this.listbox?.updateComplete.then(() => this.linkActive());
             }
-            if (control && !this.editing && !this.multiple && control.value !== '') {
+            if (control &&
+                !this.editing &&
+                !this.multiple &&
+                control.value !== '' &&
+                this.renderRoot.activeElement === control) {
                 control.select();
             }
         }
@@ -497,25 +542,16 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       ?loading=${this.loading}
       ?multiple=${this.multiple}
       .value=${this.value}
+      .chosenAgain=${() => this.close()}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @helix-filter=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- The field's words are read off the options, and on the first
-           render there are none: the slot has not been assigned yet, so a
-           combobox with a value comes up empty. Assignment changes no
-           property, so nothing else would schedule the update that fixes
-           it. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
-      <!-- Handed on to the list's own, with the text as this slot's fallback:
-           a slot passed into another is assigned there whether or not anything
-           fills it, so the list's fallback would never show. -->
       <slot name="empty" slot="empty">${this.emptyText}</slot>
       <slot name="loading" slot="loading">${this.loadingText}</slot>
       <slot name="error" slot="error">${this.loadError}</slot>
-      <!-- Handed on only while something fills it: an assigned slot hides the
-           list's own fallback, which is no-results-text or empty-text. -->
       <slot
         name="no-results"
         slot=${this.querySelector?.(':scope > [slot="no-results"]') ? 'no-results' : nothing}
@@ -565,7 +601,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           id=${this.controlId}
           type="text"
           role="combobox"
-          autocomplete=${this.autocomplete || nothing}
+          autocomplete=${(this.fills ? 'off' : this.autocomplete) || nothing}
           spellcheck="false"
           aria-controls="listbox"
           aria-autocomplete=${this.suggest ? 'both' : 'list'}
@@ -588,7 +624,18 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         ${this.renderListbox()}
         ${this.renderCreate()}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderHint()}${this.renderFeedback()}${drawStatus(this.status)}
+      ${drawAutofill({
+            autocomplete: this.fills ? this.autocomplete : '',
+            disabled: this.isDisabled || this.readOnly,
+            multiple: this.multiple,
+            onFill: (value) => this.requestValue(value),
+            options: optionsAmong(this.knownChildren),
+            value: this.value,
+        })}`;
+    }
+    get fills() {
+        return !this.allowsCustomValue && this.autocomplete !== 'off' && this.autocomplete !== '';
     }
 };
 __decorate([
@@ -645,6 +692,9 @@ __decorate([
 __decorate([
     property({ attribute: 'results-label' })
 ], HelixHeadlessCombobox.prototype, "resultsLabel", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessCombobox.prototype, "selectedLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "suggest", void 0);

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

@@ -96,10 +96,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
     label: string;
     /**
      * What the list says when its commands could not be loaded, such as after a
-     * request to a server fails. Empty is no error. Passed to the list, which
-     * shows it under any commands there are and tells screen readers.
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it. Passed to the list, which shows it
+     * under any commands there are and tells screen readers.
      */
-    loadError: string;
+    loadError: string | null;
     /**
      * Whether the commands are still loading, for a palette that asks a server
      * for them as the user types.

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, fillTemplate, format, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, inRowOrder, isRtl, MixinCollection, markRegion, onAndroid, ordered, parse, rangeAdd, reportRuntime, requestChange, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, writtenList, } from '@fusion.dev/helix-core';
+import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, fillTemplate, format, formatNumbers, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, inRowOrder, isRtl, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, rangeAdd, reportRuntime, requestChange, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -165,8 +165,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 return;
             }
             const last = this.drawnPage.length - 1 + (this.moreDrawn ? 1 : 0);
-            const edge = this.width - 1;
-            const control = event.ctrlKey || event.metaKey;
             if (!event.shiftKey && selectsAll(event) && this.selectable) {
                 event.preventDefault();
                 this.requestSelected(new Set([...this.chosen, ...this.everyKey]));
@@ -180,43 +178,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 }
                 return;
             }
-            let { column, row } = place;
-            switch (event.key) {
-                case 'ArrowUp':
-                    row = Math.max(-1, row - 1);
-                    break;
-                case 'ArrowDown':
-                    row = Math.min(last, row + 1);
-                    break;
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    if (this.treeKey(event, place)) {
-                        return;
-                    }
-                    column = Math.max(0, Math.min(edge, column + inlineStep(this, event.key)));
-                    break;
-                case 'Home':
-                    row = control ? -1 : row;
-                    column = 0;
-                    break;
-                case 'End':
-                    row = control ? Math.max(row, last) : row;
-                    column = edge;
-                    break;
-                case 'PageUp':
-                    row = Math.max(-1, row - this.pageStep(place.cell));
-                    break;
-                case 'PageDown':
-                    row = Math.min(last, row + this.pageStep(place.cell));
-                    break;
-                case 'Enter':
-                case ' ':
-                case 'F2':
-                    this.activate(event, place);
-                    return;
-                default:
-                    return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
+                this.activate(event, place);
+                return;
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && this.treeKey(event, place)) {
+                return;
             }
+            const to = gridMove(event.key, place, { last, top: -1, width: this.width }, {
+                control: event.ctrlKey || event.metaKey,
+                page: event.key.startsWith('Page') ? this.pageStep(place.cell) : 1,
+                step: inlineStep(this, event.key),
+            });
+            if (!to) {
+                return;
+            }
+            const { column, row } = to;
             event.preventDefault();
             if (event.shiftKey &&
                 this.selectable &&
@@ -1204,11 +1181,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.focusWanted = true;
     }
     pageStep(cell) {
-        const box = this.partNamed('table');
-        const tall = cell.getBoundingClientRect().height || this.estimate;
-        const scrolls = box !== null && box.scrollHeight > box.clientHeight + 1;
-        const room = scrolls ? box.clientHeight - this.headHeight() : window.innerHeight;
-        return Math.max(1, Math.floor(room / tall) - 1);
+        return pageRows(scrollRoom(this.partNamed('table'), { covered: this.headHeight() }), cell.getBoundingClientRect().height || this.estimate);
     }
     headHeight() {
         return this.cellAt(-1, 0)?.getBoundingClientRect().height ?? 0;

package/dist/description-list/item/description-list-item.d.ts

@@ -33,8 +33,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot actions - Controls that act on the value, such as a copy button, after it inside its `<dd>`.
  * @slot label - The label, when it is more than text. Falls back to `label`.
  *
+ * @csspart actions - The box after the value inside its `<dd>`, holding the `actions` slot.
  * @csspart label - The `<dt>`, holding the label.
  * @csspart value - The `<dd>`, holding the value.
+ *
+ * @cssstate several - The values are several `<dd>` elements of your own, so the item draws no `value` part.
  */
 export declare class HelixHeadlessDescriptionListItem extends HelixElement {
     /**
@@ -58,6 +61,7 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      */
     private get ownValues();
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /** A value arriving or leaving can change whether the item wraps them. */
     private readonly handleSlotChange;

package/dist/description-list/item/description-list-item.js

@@ -23,12 +23,18 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.toggleState('several', this.ownValues);
+    }
     render() {
         const label = html `<dt part="label"><slot name="label">${this.label}</slot></dt>`;
         return this.ownValues
             ? html `${label}<slot @slotchange=${this.handleSlotChange}></slot>`
             : html `${label}
-          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot><slot name="actions"></slot></dd>`;
+          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot><span part="actions"
+              ><slot name="actions"></slot></span
+          ></dd>`;
     }
 };
 __decorate([

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

@@ -9,12 +9,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * rendered element. The semantics are then in the server-rendered markup, with
  * no attribute written by script after the element connects.
  *
- * Set `announced` for a line that divides one thing from another, and it is
- * read as a separator, named by any content set into it.
+ * **The line is a separator**, as `<hr>` is, and as Radix Separator, React
+ * Aria Separator, and Web Awesome's divider are. It is named by any content
+ * set into it, so a screen reader says "Or, separator" where you wrote "Or" on
+ * the line. Set `decorative` on a rule that separates nothing, such as one
+ * under a heading or between the facts of a byline, and it leaves the
+ * accessibility tree.
  *
- * Use `orientation="vertical"` between items on one line, such as inside a
- * toolbar. A vertical divider stretches to fit its flex parent and sets no
- * height of its own.
+ * Use `orientation="vertical"` between items on one line. A vertical divider
+ * stretches to fit its flex parent and sets no height of its own.
+ *
+ * **Inside a toolbar it runs across the toolbar** without being told: vertical
+ * in a horizontal toolbar and horizontal in a vertical one, with
+ * `aria-orientation` to match, as React Aria's separator does inside a
+ * toolbar. Inside means a child of Toolbar or of the page's own
+ * `role="toolbar"`. An `orientation` you write still wins. A server cannot see
+ * the toolbar, so the turn arrives with hydration, inside the shadow root.
  *
  * @since 0.1.0
  * @status stable
@@ -26,27 +36,44 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart content - The content set into the line.
  * @csspart line - The line, or each half of it when content is set into it.
+ *
+ * @cssstate vertical - The line runs vertically: `orientation="vertical"`, or no `orientation` inside a horizontal toolbar.
  */
 export declare class HelixHeadlessDivider extends HelixElement {
     /**
-     * Whether screen readers announce the line as a separator.
-     *
-     * Off by default, and out of the accessibility tree. Most rules on a page
-     * separate nothing: they underline a heading or close a section that space
-     * had already closed, and announcing every one as a separator is noise a
-     * screen-reader user has to walk past.
+     * Whether screen readers announce the line as a separator, which they now do
+     * by default.
      *
-     * An opt-in, not a `decorative` opt-out, because a boolean attribute cannot
-     * be turned off: `decorative="false"` parses as `true`, which would put the
-     * quiet default out of reach from HTML and leave it settable only as a
-     * property. An opt-in is absent by default, which every reflected property
-     * here has to be.
+     * It dates from when the line was decorative by default. It is still read,
+     * and it wins over `decorative`, so a divider written with it stays a
+     * separator.
      */
     announced: boolean;
+    /**
+     * Takes the line out of the accessibility tree, for a rule that separates
+     * nothing: one under a heading, or between the facts of a byline.
+     *
+     * Absent, the line is a separator, as `<hr>` is. Radix Separator's opt-out
+     * has the same name. It turns the role off because a boolean attribute that
+     * is on by default cannot be turned off from HTML.
+     */
+    decorative: boolean;
     /**
      * The direction the line runs: `horizontal` or `vertical`.
+     *
+     * Unset is horizontal, or across the toolbar the divider sits in.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * The direction the line is drawn and announced in: `orientation`, else
+     * across the toolbar around it, else horizontal.
+     *
+     * The toolbar is read only where the tree is known, never while hydrating
+     * what a server sent, whose render has to be the server's.
+     */
+    private get drawn();
+    /** Reads the toolbar again when the divider moves into or out of one. */
+    connectedCallback(): void;
     /**
      * Marks the middle region when nothing has been set into it.
      *
@@ -59,6 +86,8 @@ export declare class HelixHeadlessDivider extends HelixElement {
      * attribute written onto the host is a change to markup the consumer rendered.
      */
     private markEmpty;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/divider/root/divider-root.js

@@ -4,27 +4,48 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, markRegion } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, markRegion, toolbarAround, toolbarAxis, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
     constructor() {
         super(...arguments);
         this.announced = false;
+        this.decorative = false;
+    }
+    get drawn() {
+        const toolbar = this.orientation || this.hydrating ? null : toolbarAround(this);
+        if (toolbar) {
+            return toolbarAxis(toolbar) === 'vertical' ? 'horizontal' : 'vertical';
+        }
+        return this.orientation ?? 'horizontal';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.requestUpdate();
     }
     markEmpty() {
         markRegion(this.renderRoot, 'content', ['']);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('vertical', this.drawn === 'vertical');
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
     }
     render() {
+        const separator = this.announced || !this.decorative;
         return html `<div
       part="line"
-      role=${this.announced ? 'separator' : 'presentation'}
-      aria-labelledby=${this.announced ? 'content' : nothing}
-      aria-orientation=${this.announced ? (this.orientation ?? 'horizontal') : nothing}
+      role=${separator ? 'separator' : 'presentation'}
+      aria-labelledby=${separator ? 'content' : nothing}
+      aria-orientation=${separator ? this.drawn : nothing}
     ></div>
       <span id="content" part="content"><slot @slotchange=${() => this.markEmpty()}></slot></span>
       <div part="line" role="presentation"></div>`;
@@ -33,6 +54,9 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDivider.prototype, "announced", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDivider.prototype, "decorative", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDivider.prototype, "orientation", void 0);

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -27,9 +27,8 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
             this.page = (slot?.assignedElements().length ?? 0) > 0;
         };
         this.readWords = () => {
-            const slot = (name) => this.renderRoot.querySelector(`slot[name="${name}"]`);
-            this.description = slotFilled(slot('description'));
-            this.end = slotFilled(slot('end'));
+            this.description = slotFilled(slotNamed(this.renderRoot, 'description'));
+            this.end = slotFilled(slotNamed(this.renderRoot, 'end'));
         };
     }
     willUpdate(changed) {

package/dist/element-events.generated.js

@@ -5,6 +5,7 @@ registerElementEvents({
     'helix-headless-app-header': ['helix-scrolled'],
     'helix-headless-avatar': ['error', 'load'],
     'helix-headless-button': ['helix-press'],
+    'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',

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

@@ -1,5 +1,5 @@
 import { ArrivalController, HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A message that a region has nothing in it, and the next step to take.
  *
@@ -24,6 +24,13 @@ import { type TemplateResult } from 'lit';
  * rendering from data or on a server gets a heading a reader finds in the
  * outline without writing the element. A heading slotted in replaces it.
  *
+ * **Whatever is slotted into `heading` is read as a heading.** An element that
+ * is no heading, such as a `<span>` or a `<p>`, is set inside the `heading`
+ * part at `heading-level`, so a screen reader still finds it in the outline.
+ * A heading element, or an element holding one, keeps its own level. A server
+ * cannot see the slotted element, so a served `<span>` becomes a heading once
+ * the script runs.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -32,10 +39,10 @@ import { type TemplateResult } from 'lit';
  *
  * @slot - The message: why the region is empty, and what to do about it.
  * @slot actions - The action that would put something in the region.
- * @slot heading - The heading, which names what is missing. Slot a heading element, such as an `<h3>`, so a reader can find it in the page's outline. Replaces the one `heading` draws.
+ * @slot heading - The heading, which names what is missing. A heading element, such as an `<h3>`, keeps its level; any other element is read as a heading at `heading-level`. Replaces the one `heading` draws.
  * @slot icon - An icon above the heading.
  *
- * @csspart heading - The heading `heading` draws, a heading at `heading-level`. Drawn only while `heading` holds words and nothing is slotted into `heading`.
+ * @csspart heading - The heading at `heading-level`: the one `heading` draws while nothing is slotted into `heading`, or the one around a slotted element that is no heading.
  * @csspart live - A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.
  */
 export declare class HelixHeadlessEmpty extends HelixElement {
@@ -61,6 +68,13 @@ export declare class HelixHeadlessEmpty extends HelixElement {
      * has nothing to announce because nothing changed.
      */
     noAnnounce: boolean;
+    /**
+     * Whether the `heading` slot holds elements and none of them is or holds a
+     * heading, read from the children before each render.
+     */
+    private looseHeading;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected readonly arrival: ArrivalController;
     /**
      * The `heading` slot, with the heading `heading` draws as its fallback, so

package/dist/empty/root/empty-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ArrivalController, customElement, HelixElement, headingLevel, slottedWords, } from '@fusion.dev/helix-core';
+import { ArrivalController, customElement, HelixElement, headingIn, headingLevel, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
@@ -12,6 +12,7 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
         super(...arguments);
         this.heading = '';
         this.noAnnounce = false;
+        this.looseHeading = false;
         this.arrival = new ArrivalController(this, {
             arriving: () => !this.serverRendered && document.readyState === 'complete',
             text: () => [slottedWords(this, ['heading']) || this.heading.trim(), slottedWords(this, [''])]
@@ -19,17 +20,40 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
                 .join(' '),
         });
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            const slotted = this.knownChildren.filter((child) => child.slot === 'heading');
+            this.looseHeading = slotted.length > 0 && headingIn(slotted) === null;
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     renderHeading(hidden) {
-        return html `<slot
-      aria-hidden=${hidden ? 'true' : nothing}
+        const level = headingLevel(this.headingLevel);
+        const slot = html `<slot
+      aria-hidden=${hidden && !this.looseHeading ? 'true' : nothing}
       name="heading"
-      @slotchange=${() => this.arrival.say()}
+      @slotchange=${() => {
+            this.arrival.say();
+            this.requestUpdate();
+        }}
       >${this.heading.trim()
-            ? html `<div aria-level=${headingLevel(this.headingLevel)} part="heading" role="heading">
+            ? html `<div aria-level=${level} part="heading" role="heading">
               ${this.heading}
             </div>`
             : nothing}</slot
     >`;
+        return this.looseHeading
+            ? html `<div
+          aria-hidden=${hidden ? 'true' : nothing}
+          aria-level=${level}
+          part="heading"
+          role="heading"
+        >${slot}</div>`
+            : slot;
     }
     render() {
         const say = () => this.arrival.say();