@fusion.dev/helix-headless 0.157.0 → 0.159.0

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, centerInView, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -326,7 +326,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.entries.filter((option) => !option.hidden);
     }
     get values() {
-        return this.value === '' ? [] : this.value.split(',');
+        return chosenValues(this.value, new Set(this.entries.map((option) => option.value)), this.multiple);
     }
     choose(value) {
         const chosen = this.values;
@@ -392,10 +392,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     place() {
         this.forgetRemoved();
-        const needle = this.filter.trim().toLowerCase();
+        const typed = this.filter.trim();
+        const needle = typed.toLowerCase();
+        const match = this.filterMatch;
         const chosen = new Set(this.values);
         for (const option of this.entries) {
-            option.hidden = needle !== '' && !option.text.toLowerCase().includes(needle);
+            option.hidden =
+                needle !== '' &&
+                    !(match ? match(option.text, typed) : option.text.toLowerCase().includes(needle));
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
@@ -425,10 +429,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             return;
         }
         const present = new Set(this.entries.map((option) => option.value));
-        const gone = this.values.filter((value) => this.seen.has(value) && !present.has(value));
+        const held = chosenValues(this.value, new Set([...present, ...this.seen]), this.multiple);
+        const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
-            this.value = this.values.filter((value) => !gone.includes(value)).join(',');
+            this.value = held.filter((value) => !gone.includes(value)).join(',');
         }
     }
     followActive(changed) {
@@ -444,7 +449,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     sync() {
         if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+            reportValues(this.internals, this.name, this.values);
         }
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
@@ -498,7 +503,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     get currentValue() {
-        return this.activeValue || (this.value.split(',')[0] ?? '');
+        return this.activeValue || (this.values[0] ?? '');
     }
     linkActive() {
         const list = this.renderRoot.querySelector(this.filterable ? '[part="search-field"]' : '[part="items"]');
@@ -666,6 +671,9 @@ __decorate([
     words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "filterMatch", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessListbox.prototype, "items", void 0);

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

@@ -358,6 +358,10 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     /**
      * A route or area renamed, or its description changed, which the list says
      * and a slot change does not report.
+     *
+     * Not the map's own `gestures` news, which it sends from `updated` and which
+     * changes nothing it draws: an update asked for there ran every map's
+     * update twice, and Lit's development build warned about it.
      */
     private readonly handlePartChange;
     /**

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

@@ -90,7 +90,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             }
         };
         this.handlePartChange = (event) => {
-            if (event.detail.kind !== 'place') {
+            if (event.detail.kind !== 'place' && event.detail.kind !== 'gestures') {
                 this.requestUpdate();
             }
         };

package/dist/menu/item/menu-item.js

@@ -104,7 +104,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     updated(changed) {
         super.updated(changed);
         if (this.partNamed('item')) {
-            auditName(this, () => this.partNamed('item'), 'Give the row words in its default slot, or a label on the icon it holds.');
+            auditName(this, () => this.partNamed('item') ?? undefined, 'Give the row words in its default slot, or a label on the icon it holds.');
         }
     }
     renderDescription() {

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

@@ -42,8 +42,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * rows, Home and End go to the first and the last, a typed letter moves to
  * the next row whose name starts with it, Enter and Space choose, Right Arrow
  * opens a row's submenu and Left Arrow goes back, the two swapping on a
- * right-to-left page, and Escape closes the menu and returns focus to the
- * trigger. Tab closes it and moves on.
+ * right-to-left page. Left Arrow on the top page does nothing. Escape closes
+ * the menu and returns focus to the trigger. Tab closes it and moves on.
  *
  * While it is open, the surface carries the trigger's width as
  * `--floating-anchor-inline-size` and the room left below it as
@@ -93,6 +93,10 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @cssstate drilled - A submenu's page is showing, so content that is not a row can hide with the top page.
  * @cssstate mark - A row on the current page has a checkbox or a link, so every row keeps the trailing column.
  * @cssstate open - While the menu is open.
+ * @cssstate placed-bottom - While the open panel sits below its trigger.
+ * @cssstate placed-left - While the open panel sits to the left of its trigger.
+ * @cssstate placed-right - While the open panel sits to the right of its trigger.
+ * @cssstate placed-top - While the open panel sits above its trigger.
  * @cssstate start - A row on the current page has content in its leading column, so every row keeps that column.
  */
 export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {

package/dist/menu/root/menu-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, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -76,6 +76,13 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             boundary: () => this,
             offset: () => this.offset,
             onDismiss: () => this.hide(),
+            onPlace: (placement) => {
+                const side = sideOf(placement);
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+            },
             open: () => this.open,
             placement: () => this.placement,
             surface: () => this.partNamed('surface'),
@@ -145,7 +152,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.enter(items[at]);
             }
             else if (along === -1) {
-                if (this.flies && this.keyPage === null) {
+                if (this.flies ? this.keyPage === null : this.drilldown.atRoot) {
                     return;
                 }
                 this.leave();

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

@@ -25,9 +25,9 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * The locale's group separators are read in every field, so `1,234` is a
  * number in `en-US`.
  *
- * The field and its two buttons sit in a `role="group"`, and the field carries
- * `role-label`, "number field" in English, as its `aria-roledescription`, as
- * React Aria's NumberField does. On iOS and iPadOS the field is a plain text
+ * The field and its two buttons sit in a `role="group"` named by the label,
+ * and the field carries `role-label`, "number field" in English, as its
+ * `aria-roledescription`, as React Aria's NumberField does. On iOS and iPadOS the field is a plain text
  * field, with no `role="spinbutton"`, which VoiceOver reads as a slider you
  * cannot type in, and no role description, so VoiceOver says the field is
  * required. React Aria's NumberField does the same.
@@ -492,8 +492,11 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     protected renderIncrementIcon(): TemplateResult;
     protected render(): TemplateResult;
     /**
-     * The value as a number, or `NaN` while the control is empty.
+     * The value as a number, or `NaN` while the control is empty or does not
+     * hold a number.
      *
+     * Read in the locale and the format, as the form reads it, so `1,5` typed
+     * in a locale with a decimal comma is 1.5 here while the form holds 1.5.
      * `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
      * is zero, so an empty control would report a number it does not hold and a
      * form would submit it.

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, appleTouch, valueAsNumber as asNumber, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -410,7 +410,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         const atMin = parsed !== null && this.min !== undefined && parsed <= this.min;
         const atMax = parsed !== null && this.max !== undefined && parsed >= this.max;
         return html `${this.renderLabel()}
-      <div part="field" role="group">
+      <div part="field" role="group" aria-labelledby=${this.labeled ? this.labelId : nothing}>
         <button
           part="decrement"
           type="button"
@@ -484,7 +484,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
       ${this.renderHint()}${this.renderFeedback()}`;
     }
     get valueAsNumber() {
-        return asNumber(this.value);
+        return this.numeric ?? Number.NaN;
     }
     set valueAsNumber(count) {
         this.value = fromNumber(count);

package/dist/progress/root/progress-root.js

@@ -51,7 +51,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = this.indeterminate
             ? null
-            : String(Math.min(Math.max(this.value || min, min), max));
+            : String(Math.min(Math.max(Number.isNaN(this.value) ? min : this.value, min), max));
         const shown = this.valueText || slottedWords(this, ['']);
         this.internals.ariaValueText = this.indeterminate ? shown || null : shown || this.text;
         this.toggleState('complete', this.complete);

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

@@ -19,7 +19,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * whole set.
  *
  * `Select` owns the value, passes it down to the listbox, and takes changes
- * back, so the value lives in one place.
+ * back, so the value lives in one place. With `multiple`, the value is the
+ * chosen values joined with commas, and the form receives one entry for each.
+ * An option's value may hold a comma, and it is read as one value.
  *
  * Set `valueContent` to draw the trigger's content from the chosen options,
  * and several chosen options are written as a list in the reader's language.
@@ -291,6 +293,11 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     private get display();
     /** The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`. */
     private get chosenOptions();
+    /**
+     * The chosen values, read against the options' values, so an option whose
+     * value holds a comma is one value. See `chosenValues`.
+     */
+    private get chosen();
     /** `items` as the list reads them, built once per array. */
     private data;
     /**

package/dist/select/root/select-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, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -173,7 +173,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const chosen = new Set(this.chosen);
         const words = this.entries.filter((option) => chosen.has(option.value)).map((one) => one.text);
         if (words.length > 0) {
             return new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(words);
@@ -184,9 +184,12 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         if (this.items) {
             return [];
         }
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const chosen = new Set(this.chosen);
         return optionsAmong(this.knownChildren).filter((option) => chosen.has(option.value));
     }
+    get chosen() {
+        return chosenValues(this.value, new Set(this.entries.map((option) => option.value)), this.multiple);
+    }
     get entries() {
         if (!this.items) {
             return optionsAmong(this.knownChildren);
@@ -257,7 +260,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             }
         }
         const present = new Set(options.map((option) => option.value));
-        const held = this.value === '' ? [] : this.value.split(',');
+        const held = chosenValues(this.value, new Set([...present, ...this.seen]), this.multiple);
         const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
@@ -266,7 +269,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     sync() {
         if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+            reportValues(this.internals, this.name, this.chosen);
         }
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);

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

@@ -41,7 +41,8 @@ export declare class HelixHeadlessSkeleton extends HelixElement {
      * What is loading, read out as the placeholder's name, such as "Loading
      * profile".
      *
-     * Absent hides the placeholder from screen readers.
+     * Absent hides the placeholder from screen readers. Around content, the name
+     * is read while `loading` is set, and the loaded content is read as it is.
      */
     label: string;
     /**

package/dist/skeleton/root/skeleton-root.js

@@ -22,7 +22,7 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
         const wraps = this.wraps;
         this.toggleState('wrapping', wraps);
         this.internals.ariaBusy = this.loading ? 'true' : null;
-        if (this.label) {
+        if (this.label && (this.loading || !wraps)) {
             hostAria(this.internals, { label: this.label, role: 'progressbar' });
             this.internals.ariaHidden = null;
         }

package/dist/steps/root/steps-root.js

@@ -34,14 +34,16 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             wrap: false,
         });
         this.handleSelection = (event) => {
-            if (event.defaultPrevented || !this.steps.includes(event.target)) {
+            if (!this.steps.includes(event.target)) {
                 return;
             }
-            const index = this.steps.indexOf(event.target);
-            if (!this.reachable(index) || !this.valid(index)) {
-                return;
-            }
-            this.requestActive(event.detail.value);
+            queueMicrotask(() => {
+                const index = this.steps.indexOf(event.target);
+                if (event.defaultPrevented || !this.reachable(index) || !this.valid(index)) {
+                    return;
+                }
+                this.requestActive(event.detail.value);
+            });
         };
         this.handleSlotChange = () => {
             this.sync();

package/dist/steps/step/step.d.ts

@@ -27,6 +27,10 @@ import '../../button/index.js';
  * region. The current stage's button carries `aria-current="step"`, and only
  * the button, so the state is said once, on the control.
  *
+ * A stage's `content`, while it holds anything, is a group named by the
+ * stage's name, so a screen reader moving into it hears which stage it
+ * belongs to.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage
@@ -105,6 +109,11 @@ export declare class HelixHeadlessStep extends HelixElement {
      * The value the step sends in `helix-select`.
      */
     value: string;
+    /** Whether anything is slotted into `content`, which makes it a named group. */
+    private holding;
+    /** Reads whether the `content` slot holds anything. */
+    private readonly readContent;
+    protected firstUpdated(changed: PropertyValues): void;
     /** Says a stage was finished, from the first time one is. */
     private readonly status;
     /**

package/dist/steps/step/step.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, drawStatus, formatWords, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, words, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
@@ -23,9 +23,18 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.locked = false;
         this.optional = false;
         this.value = '';
+        this.holding = false;
+        this.readContent = () => {
+            const slot = this.renderRoot.querySelector('slot[name="content"]');
+            this.holding = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+        };
         this.status = new StatusController(this);
     }
     static { this.words = 'helix-step'; }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readContent();
+    }
     focus(options) {
         this.partNamed('label')?.focus(options);
     }
@@ -60,6 +69,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     }
     renderLabel() {
         return html `<${this.tag('button')}
+      id="label"
       part="label"
       exportparts="button: label-button, live: label-live, spinner: label-spinner, text: label-text"
       emphasis="ghost"
@@ -79,7 +89,11 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         ${this.renderLabel()}
         <span part="description"><slot name="description"></slot></span>
       </span>
-      <div part="content"><slot name="content"></slot></div>${drawStatus(this.status)}`;
+      <div
+        part="content"
+        role=${this.holding ? 'group' : nothing}
+        aria-labelledby=${this.holding ? 'label' : nothing}
+      ><slot name="content" @slotchange=${this.readContent}></slot></div>${drawStatus(this.status)}`;
     }
 };
 __decorate([
@@ -111,6 +125,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessStep.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessStep.prototype, "holding", void 0);
 HelixHeadlessStep = __decorate([
     customElement('helix-headless-step')
 ], HelixHeadlessStep);

package/dist/tabs/panel/tab-panel.d.ts

@@ -15,15 +15,24 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the tab list lands on the panel's first link or control where there is one,
  * and on the panel itself where there is none.
  *
+ * **Set `lazy` for a panel that is expensive to draw.** Its content waits in a
+ * `<template>` inside it, and goes into the panel the first time the panel is
+ * shown, so it costs nothing until a reader opens that tab. Once in, it stays.
+ * The panel sends `helix-load` at the same moment, for content your code
+ * renders itself.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TabPanel
  * @documentation https://fusion.dev/helix/components/tabs
  *
- * @slot - The panel's content.
+ * @slot - The panel's content. Under `lazy`, a `<template>` holding it.
+ *
+ * @event {HelixLoadEvent} helix-load - Fired the first time a `lazy` panel is shown, once its template's content is in.
  *
  * @csspart panel - The panel container, which takes the focus while it holds nothing focusable.
  *
+ * @cssstate loaded - Once a `lazy` panel has been shown and its content is in.
  * @cssstate selected - While its tab is the one selected.
  */
 export declare class HelixHeadlessTabPanel extends HelixElement {
@@ -40,6 +49,18 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * the pattern names one anyway.
      */
     label: string;
+    /**
+     * Whether the panel's content waits in a `<template>` until the panel is
+     * first shown.
+     */
+    lazy: boolean;
+    /** Whether a `lazy` panel has put its content in. */
+    private loaded;
+    /**
+     * Puts a `lazy` panel's content in the first time the panel is shown: the
+     * content of each `<template>` it holds, in place of the template.
+     */
+    private load;
     /**
      * Whether this panel is the visible one.
      */

package/dist/tabs/panel/tab-panel.js

@@ -4,13 +4,15 @@ 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, focusableElements, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, focusableElements, HelixElement, HelixLoadEvent, hostAria, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.lazy = false;
+        this.loaded = false;
         this.selected = false;
         this.value = '';
         this.holdsStop = false;
@@ -21,6 +23,19 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
             this.holdsStop = this.selected && focusableElements(this).length > 0;
         };
     }
+    load() {
+        if (!this.lazy || !this.selected || this.loaded) {
+            return;
+        }
+        this.loaded = true;
+        for (const template of [...this.children]) {
+            if (template instanceof HTMLTemplateElement) {
+                template.replaceWith(document.importNode(template.content, true));
+            }
+        }
+        this.toggleState('loaded', true);
+        this.dispatchEvent(new HelixLoadEvent());
+    }
     connectedCallback() {
         super.connectedCallback();
         this.watcher?.observe(this, {
@@ -36,6 +51,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('selected') || changed.has('lazy')) {
+            this.load();
+        }
         if (changed.has('selected')) {
             this.readStops();
         }
@@ -58,6 +76,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTabPanel.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTabPanel.prototype, "lazy", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTabPanel.prototype, "selected", void 0);

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

@@ -46,9 +46,9 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * | Enter, Space | Selects the tab with focus, or follows its link. |
  * | Tab | Leaves the list for the selected panel. |
  *
- * Removing the selected tab selects the first enabled tab that is left, and
- * `active` says so, with `helix-activate`. Where the removed tab had focus,
- * focus moves to the tab now selected.
+ * Removing the selected tab selects the enabled tab beside it, the next one
+ * or else the one before, and `active` says so, with `helix-activate`. Where
+ * the removed tab had focus, focus moves to the tab now selected.
  *
  * **More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a
  * button at each end it can scroll toward, as Web Awesome's tab group does,
@@ -74,6 +74,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @slot - The tabs, as direct children of this element.
  * @slot indicator - A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
+ * @slot scroll-end-icon - Replaces the glyph on the button that scrolls the strip toward its end.
+ * @slot scroll-start-icon - Replaces the glyph on the button that scrolls the strip toward its start.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the active tab changes, so the element already holds the new value.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active tab changes, and cancelable. Canceling it is the only way to block a change.
@@ -85,7 +87,9 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *   and animate yourself.
  * @csspart panels - The panel container.
  * @csspart scroll-end - The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-end-mark - The glyph on that button, where none is slotted.
  * @csspart scroll-start - The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-start-mark - The glyph on that button, where none is slotted.
  * @csspart tabs - The tab list.
  */
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
@@ -169,6 +173,12 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private scrollStrip;
     /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
     private held;
+    /**
+     * The enabled tab nearest to where a removed one stood: the next ones
+     * nearest first, then the ones before it nearest first. The same order a
+     * dismissed tab hands focus in.
+     */
+    private beside;
     /** Pushes the current value down to whichever tab and panel own it. */
     private sync;
     /** The tab that last had focus, so its removal can hand focus on. */
@@ -205,10 +215,16 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private readonly handleSlotChange;
     protected updated(changed: PropertyValues): void;
     /**
-     * One of the two scroll buttons, pointing the way it scrolls. A caret along
-     * the line is mirrored on a right-to-left page, and one down a column is not.
+     * One of the two scroll buttons, with the glyph pointing the way it scrolls.
      */
     private renderScroll;
+    /**
+     * The glyph on a scroll button, behind a seam: slot fallback, so a consumer
+     * replaces it by slotting, and a method, so a tier above replaces it by
+     * overriding. A caret along the line is mirrored on a right-to-left page, and
+     * one down a column is not.
+     */
+    protected renderScrollIcon(toward: 1 | -1): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {