@fusion.dev/helix-headless 0.103.3 → 0.104.0

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

@@ -12,8 +12,9 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * what filters it, not in what the list is.
  *
  * **`value` is comma separated when `multiple` is set**, the way
- * `Checkbox.Group`'s is. It stays a string because that is what a form submits
- * and what `MixinControllerValue` holds.
+ * `Checkbox.Group`'s is, and a string because that is what `MixinControllerValue`
+ * holds. The form is sent one entry per answer, as a native `<select multiple>`
+ * sends it, so a server never has to know to split on a comma.
  *
  * **Chosen and active are two different things.** Chosen is the answer; active
  * is where the keyboard is. Only the second moves with the arrows, and
@@ -42,6 +43,7 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart hint - Help under the list.
  * @csspart items - The list itself.
  * @csspart label - The question, over the list.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the options are still on their way.
  * @csspart search - The region holding the field that narrows the list.
  * @csspart search-field - The field itself.
@@ -59,22 +61,10 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * keystrokes as the listbox. A consumer who wants autofill can still ask.
      */
     autocomplete: string;
-    /**
-     * What the list is narrowed to, if anything.
-     *
-     * Filtering hides rather than removes, so nothing about the value changes and
-     * the list is still the consumer's own elements in their own order. Reading
-     * gives what is being filtered on; writing declares it theirs, and
-     * `default-filter` seeds one the list owns.
-     */
-    get filter(): string;
-    set filter(next: string);
     /**
      * What to start narrowed to, where nothing declared it.
      */
     defaultFilter: string;
-    /** What the list is narrowed to, whoever set it. */
-    private filterState;
     /**
      * What is shown when a filter has hidden every option.
      *
@@ -84,6 +74,18 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * never given anything.
      */
     emptyText: string;
+    /** What the list is narrowed to, whoever set it. */
+    private filterState;
+    /**
+     * What the list is narrowed to, if anything.
+     *
+     * Filtering hides rather than removes, so nothing about the value changes and
+     * the list is still the consumer's own elements in their own order. Reading
+     * gives what is being filtered on; writing declares it theirs, and
+     * `default-filter` seeds one the list owns.
+     */
+    get filter(): string;
+    set filter(next: string);
     /**
      * Whether the list renders a field for narrowing itself.
      *

package/dist/listbox/root/listbox-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, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, requestChange, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -63,8 +63,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         });
         this.autocomplete = 'off';
         this.defaultFilter = '';
-        this.filterState = undefined;
         this.emptyText = 'No matches';
+        this.filterState = undefined;
         this.filterable = false;
         this.filterLabel = 'Filter';
         this.multiple = false;
@@ -286,7 +286,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     sync() {
-        this.internals.setFormValue(this.value === '' ? null : this.value);
+        if (this.multiple) {
+            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+        }
+        else {
+            this.internals.setFormValue(this.value === '' ? null : this.value);
+        }
         this.reportRequired(this.value === '', 'Choose one to continue.', 'items');
     }
     connectedCallback() {
@@ -303,8 +308,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'listbox' });
-        this.internals.ariaMultiSelectable = this.multiple ? 'true' : null;
+        hostAria(this.internals, { role: '' });
         if (this.childrenKnown) {
             this.place();
         }
@@ -324,7 +328,6 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         super.updated(changed);
         this.followActive();
         this.sync();
-        this.linkHost();
         this.linkActive();
     }
     requestFilter(next) {
@@ -354,6 +357,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     </slot>`;
     }
     render() {
+        const shown = this.counted && !this.loading
+            ? this.filter === ''
+                ? this.options.length > 0
+                : this.hasMatches
+            : true;
         return html `${this.renderGroupLabel()}
       ${this.filterable
             ? html `<div part="search">
@@ -378,32 +386,33 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
       <div
         part="items"
         id="items"
+        role="listbox"
         aria-busy=${this.loading ? 'true' : nothing}
+        aria-describedby=${this.describedBy ?? nothing}
+        aria-labelledby=${this.labeled ? this.labelId : nothing}
+        aria-multiselectable=${this.multiple ? 'true' : nothing}
+        aria-required=${this.required ? 'true' : nothing}
         ${''}
         tabindex=${this.isDisabled ? -1 : 0}
       >
         <slot @slotchange=${() => this.place()}></slot>
-        ${this.renderStatus(this.counted && !this.loading
-            ? this.filter === ''
-                ? this.options.length > 0
-                : this.hasMatches
-            : true)}
+        ${this.renderStatus(shown)}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderLive(shown)}${this.renderHint()}${this.renderFeedback()}`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessListbox.prototype, "autocomplete", void 0);
-__decorate([
-    property()
-], HelixHeadlessListbox.prototype, "filter", null);
 __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessListbox.prototype, "defaultFilter", void 0);
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessListbox.prototype, "emptyText", void 0);
+__decorate([
+    property()
+], HelixHeadlessListbox.prototype, "filter", null);
 __decorate([
     property({ attribute: 'filterable', reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "filterable", void 0);

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

@@ -1,4 +1,4 @@
-import { HelixElement, type ViewportControlsPlacement } from '@fusion.dev/helix-core';
+import { HelixElement, type ViewportControlsPlacement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * What `ViewportControlsPlacement` is called for a map.
@@ -37,7 +37,7 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * A frame that moved the map would have to know whose map it was.
  *
  * @since 0.100.0
- * @status stable
+ * @status experimental
  * @category media
  * @aliases Map frame, Map container, Geo
  * @documentation https://fusion.dev/helix/components/map
@@ -83,6 +83,9 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * at every encounter.
      */
     label: string;
+    /** The events this family names, the surface naming none of its own. */
+    protected panEvent(detail: ViewportPanDetail): Event;
+    protected zoomEvent(detail: ViewportZoomDetail): Event;
     /**
      * What the group of controls is called.
      *
@@ -90,7 +93,7 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * the group hears what it drives rather than "view controls", which names the
      * mechanism.
      */
-    protected get controlsLabel(): string;
+    protected get restingControlsLabel(): string;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The frame, with each region in a box of its own.

package/dist/map/root/map-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 { customElement, HelixElement, hostAria, MixinViewport, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPanEvent, HelixMapZoomEvent, hostAria, MixinViewport, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
@@ -12,7 +12,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         super(...arguments);
         this.label = '';
     }
-    get controlsLabel() {
+    panEvent(detail) {
+        return new HelixMapPanEvent(detail);
+    }
+    zoomEvent(detail) {
+        return new HelixMapZoomEvent(detail);
+    }
+    get restingControlsLabel() {
         return 'Map controls';
     }
     willUpdate(changed) {

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

@@ -40,6 +40,7 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @csspart back-mark - The glyph on the back control of a submenu.
  * @csspart empty - Shown when there are no items to show.
  * @csspart header - The bar above a submenu, holding the way back and its name.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the items are still on their way.
  * @csspart surface - The floating panel the menu is drawn on.
  * @csspart title - The name of the submenu that is showing.

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

@@ -204,7 +204,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
               </div>`}
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
-      </div>`;
+      </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([

package/dist/notifications/group/notification-group.js

@@ -9,6 +9,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const TRIGGER_ID = 'trigger';
 const ITEMS_ID = 'items';
+const LABEL_ID = 'label';
 let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -34,7 +35,7 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, this.label === '' ? { role: 'group' } : { label: this.label, role: 'group' });
+        hostAria(this.internals, { role: 'listitem' });
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -76,14 +77,14 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
                 type="button"
                 @click=${this.handleToggle}
               >
-                <span part="label"><slot name="label">${this.label}</slot></span>
+                <span part="label" id=${LABEL_ID}><slot name="label">${this.label}</slot></span>
                 ${count}
               </button>`
-            : html `<span part="label"><slot name="label">${this.label}</slot></span>
+            : html `<span part="label" id=${LABEL_ID}><slot name="label">${this.label}</slot></span>
                 ${count}`}
         <span part="actions"><slot name="actions"></slot></span>
       </div>
-      <div id=${ITEMS_ID} part="items">
+      <div id=${ITEMS_ID} part="items" role="list" aria-labelledby=${LABEL_ID}>
         <slot></slot>
       </div>`;
     }

package/dist/notifications/notification/notification.d.ts

@@ -77,6 +77,16 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * empty string would give.
      */
     at: string;
+    /**
+     * State to open with, where nothing declared one.
+     */
+    defaultRead: boolean;
+    /**
+     * Locale for the timestamp.
+     *
+     * Empty is the runtime's own.
+     */
+    locale: string;
     /**
      * Whether the reader has seen it.
      *
@@ -94,16 +104,6 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      */
     get read(): boolean;
     set read(next: boolean);
-    /**
-     * State to open with, where nothing declared one.
-     */
-    defaultRead: boolean;
-    /**
-     * Locale for the timestamp.
-     *
-     * Empty is the runtime's own.
-     */
-    locale: string;
     /**
      * @internal Read by the list to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than

package/dist/notifications/notification/notification.js

@@ -120,15 +120,15 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "at", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessNotification.prototype, "read", null);
 __decorate([
     property({ attribute: 'default-read', type: Boolean })
 ], HelixHeadlessNotification.prototype, "defaultRead", void 0);
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNotification.prototype, "read", null);
 HelixHeadlessNotification = __decorate([
     customElement('helix-headless-notification')
 ], HelixHeadlessNotification);

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

@@ -41,6 +41,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart footer - The region below the list.
  * @csspart header - The region above the list.
  * @csspart list - The list itself.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is still on its way.
  * @csspart mark-all - The control that marks everything read.
  *

package/dist/notifications/root/notifications-root.js

@@ -139,6 +139,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         <slot name="items" @slotchange=${this.handleSlotChange}></slot>
         ${this.renderStatus(hasItems)}
       </div>
+      ${this.renderLive(hasItems)}
       <div part="footer"><slot name="footer"></slot></div>`;
     }
 };

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

@@ -69,6 +69,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * consumer to ask for it.
      */
     autocomplete: string;
+    /**
+     * What a reader is told when the field holds something that is not a number.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * named for the validity flag it reports, so a form in another language
+     * speaks it: `feedback` replaces the message under the field and does not
+     * reach the bubble. Absent is the control's own sentence, in English.
+     */
+    badInputMessage?: string;
     /**
      * Accessible name for the control that steps down.
      */
@@ -103,6 +112,14 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * Not a label: it goes when typing starts.
      */
     placeholder: string;
+    /**
+     * What a reader is told when the number is above `max`, with `{max}` filled in.
+     */
+    rangeOverflowMessage?: string;
+    /**
+     * What a reader is told when the number is below `min`, with `{min}` filled in.
+     */
+    rangeUnderflowMessage?: string;
     /**
      * Whether the field refuses input while still submitting its value.
      */

package/dist/number-input/root/number-input-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, valueAsNumber as asNumber, customElement, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -193,17 +193,24 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             return;
         }
         const parsed = this.numeric;
-        if (this.required && this.value.trim() === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Please fill in this field.', control);
+        if (this.readOnly) {
+            this.internals.setValidity({});
+        }
+        else if (this.required && this.value.trim() === '') {
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', control);
         }
         else if (this.value.trim() !== '' && parsed === null) {
-            this.internals.setValidity({ badInput: true }, 'Please enter a number.', control);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage || 'Please enter a number.', control);
         }
         else if (parsed !== null && this.min !== undefined && parsed < this.min) {
-            this.internals.setValidity({ rangeUnderflow: true }, `Value must be ${this.min} or more.`, control);
+            this.internals.setValidity({ rangeUnderflow: true }, fillTemplate(this.rangeUnderflowMessage || 'Value must be {min} or more.', {
+                min: this.min,
+            }), control);
         }
         else if (parsed !== null && this.max !== undefined && parsed > this.max) {
-            this.internals.setValidity({ rangeOverflow: true }, `Value must be ${this.max} or less.`, control);
+            this.internals.setValidity({ rangeOverflow: true }, fillTemplate(this.rangeOverflowMessage || 'Value must be {max} or less.', {
+                max: this.max,
+            }), control);
         }
         else {
             this.internals.setValidity({}, '', control);
@@ -300,6 +307,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
 __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'bad-input-message' })
+], HelixHeadlessNumberInput.prototype, "badInputMessage", void 0);
 __decorate([
     property({ attribute: 'decrement-label' })
 ], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
@@ -318,6 +328,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessNumberInput.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessNumberInput.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "readOnly", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -94,6 +94,16 @@ interface Row {
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
  */
 export declare class HelixHeadlessObjectInspector extends HelixElement {
+    /**
+     * What the copy control is called on a row with a key, with the key as
+     * `{name}`.
+     *
+     * **Every word the inspector speaks is a property**, so a page in another
+     * language hears its own rather than English around its own keys.
+     */
+    copyLabel: string;
+    /** What the copy control is called where there is no key, on the value itself. */
+    copyValueLabel: string;
     /**
      * How many levels start open.
      *

package/dist/object-inspector/root/object-inspector-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 HelixHeadlessObjectInspector_1;
-import { CopyController, customElement, elementById, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { CopyController, customElement, elementById, fillTemplate, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,6 +18,8 @@ const child = (path, key) => `${path}/${key.replaceAll('~', '~0').replaceAll('/'
 let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends HelixElement {
     constructor() {
         super(...arguments);
+        this.copyLabel = 'Copy {name}';
+        this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
         this.for = '';
         this.label = '';
@@ -291,7 +293,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
-      label=${row?.key === undefined ? 'Copy value' : `Copy ${row.key}`}
+      label=${row?.key === undefined ? this.copyValueLabel : fillTemplate(this.copyLabel, { name: row.key })}
       .value=${this.copyable(row)}
     ></${this.tag('copy-button')}>`;
     }
@@ -321,6 +323,12 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: 'copy-label' })
+], HelixHeadlessObjectInspector.prototype, "copyLabel", void 0);
+__decorate([
+    property({ attribute: 'copy-value-label' })
+], HelixHeadlessObjectInspector.prototype, "copyValueLabel", void 0);
 __decorate([
     property({ attribute: 'default-depth', type: Number })
 ], HelixHeadlessObjectInspector.prototype, "defaultDepth", void 0);

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

@@ -79,6 +79,11 @@ export declare class HelixHeadlessOutline extends HelixElement {
     get current(): string;
     /**
      * What `current` reports, which only `mark` writes.
+     *
+     * **A field, not state.** Nothing renders it: the links carry `aria-current`
+     * and the mark is placed by measuring them, so a render on its change drew
+     * the same template again. It also made the first measurement, which can only
+     * happen after the first render, schedule a second one from `firstUpdated`.
      */
     private reading;
     private observer;
@@ -146,6 +151,8 @@ export declare class HelixHeadlessOutline extends HelixElement {
     private landing;
     /** The guard behind `scrollend`, in case it never comes. */
     private landed;
+    /** What `scrollend` calls when the scroll a click started lands, while it is awaited. */
+    private arrive;
     /**
      * The two things an `IntersectionObserver` cannot see, and one listener for
      * both.
@@ -221,6 +228,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     private readonly handleSlotChange;
     disconnectedCallback(): void;
+    /**
+     * Stops waiting for a scroll to land, both halves of the wait.
+     *
+     * The `scrollend` listener is on the document, so it is taken off as well as
+     * the timer: left on, every click that did not wait for the last landing
+     * added one more.
+     */
+    private unland;
     connectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;

package/dist/outline/root/outline-root.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     constructor() {
         super(...arguments);
@@ -43,13 +43,13 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             }
             this.landing = section;
             this.markTo(section);
-            clearTimeout(this.landed);
+            this.unland();
             const arrive = () => {
-                clearTimeout(this.landed);
+                this.unland();
                 this.landing = undefined;
-                document.removeEventListener('scrollend', arrive, true);
                 this.mark();
             };
+            this.arrive = arrive;
             document.addEventListener('scrollend', arrive, { capture: true, once: true });
             this.landed = setTimeout(arrive, 1200);
             if (this.behavior === 'auto') {
@@ -115,6 +115,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const next = active?.target.id ?? '';
         if (next !== this.reading) {
             this.reading = next;
+            this.indicator.place();
             this.dispatchEvent(new HelixActivateEvent({ value: next }));
         }
     }
@@ -168,8 +169,15 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         }
         this.observer?.disconnect();
         this.observer = undefined;
+        this.unland();
+    }
+    unland() {
         clearTimeout(this.landed);
         this.landed = undefined;
+        if (this.arrive) {
+            document.removeEventListener('scrollend', this.arrive, true);
+            this.arrive = undefined;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -213,9 +221,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessOutline.prototype, "offset", void 0);
-__decorate([
-    state()
-], HelixHeadlessOutline.prototype, "reading", void 0);
 HelixHeadlessOutline = __decorate([
     customElement('helix-headless-outline')
 ], HelixHeadlessOutline);

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

@@ -97,24 +97,6 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * written onto a host at upgrade that a server's output never had.
      */
     ends: boolean;
-    /**
-     * The page on show, one-based.
-     *
-     * An accessor pair, the same shape as the calendar's `month`. Reading gives
-     * the page on show; writing sets it, and `default-page` seeds one the element
-     * keeps until somebody does.
-     *
-     * **Clamped on the way out, because "the page on show" is what it says it
-     * gives.** Returning whatever was written means `default-page="99"` on a
-     * ten-page result renders page 10, marks page 10 with `aria-current`, and
-     * reports 99, so a consumer syncing their query from this reads a page that
-     * does not exist while the control in front of them says otherwise. Not a
-     * far-fetched value: it is a bookmarked link after the result shrank.
-     *
-     * Rounded here too, so `2.7` reads as the 2 it renders.
-     */
-    get page(): number;
-    set page(next: number);
     /**
      * Accessible name for the control that jumps to the first page.
      */
@@ -157,6 +139,24 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * Accessible name for the control that moves forward.
      */
     nextLabel: string;
+    /**
+     * The page on show, one-based.
+     *
+     * An accessor pair, the same shape as the calendar's `month`. Reading gives
+     * the page on show; writing sets it, and `default-page` seeds one the element
+     * keeps until somebody does.
+     *
+     * **Clamped on the way out, because "the page on show" is what it says it
+     * gives.** Returning whatever was written means `default-page="99"` on a
+     * ten-page result renders page 10, marks page 10 with `aria-current`, and
+     * reports 99, so a consumer syncing their query from this reads a page that
+     * does not exist while the control in front of them says otherwise. Not a
+     * far-fetched value: it is a bookmarked link after the result shrank.
+     *
+     * Rounded here too, so `2.7` reads as the 2 it renders.
+     */
+    get page(): number;
+    set page(next: number);
     /**
      * Accessible name for one page, with `{page}` and `{pages}` filled in.
      */