@fusion.dev/helix-headless 0.164.0 → 0.166.0

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

@@ -1,5 +1,5 @@
-import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type HelixDismissEvent, HelixElement } from '@fusion.dev/helix-core';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A passage set apart as a note, information, a warning, or an error.
@@ -52,6 +52,7 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * @cssstate has-icon - An icon of your own is slotted into `icon`, in place of the tone's.
  */
 export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
+    static styles: CSSResultGroup;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-callout': { toneLabels: { danger: 'Fehler' } } })`.
@@ -141,6 +142,11 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * heading.
      */
     private dismissName;
+    /**
+     * The event a dismissal sends, naming the note by its heading where it has
+     * one, the words its dismiss button is named by, and otherwise by its text.
+     */
+    protected dismissEvent(): HelixDismissEvent;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/callout/root/callout-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;
 };
 import { animationsSettled, customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
@@ -32,6 +32,11 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
             this.toggleState('has-icon', filled('icon'));
         };
     }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+  `; }
     static { this.words = 'helix-callout'; }
     get present() {
         return this.isConnected && !this.hasAttribute('hidden');
@@ -66,6 +71,14 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
             ? formatWords(this, 'dismissLabel', { label: heading || tone }).trim()
             : this.dismissLabel;
     }
+    dismissEvent() {
+        const event = super.dismissEvent();
+        const heading = slottedWords(this, ['heading']);
+        if (heading) {
+            event.detail.label = heading;
+        }
+        return event;
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();

package/dist/code-block/root/code-block-root.d.ts

@@ -71,6 +71,18 @@ import '../../copy-button/index.js';
  * keeps hydration clean, and draws the diff once it can read the content. Diff
  * mode is experimental. The rest of the family is stable.
  *
+ * **Several blocks are files**, one shown at a time under a row of tabs, as
+ * Sandbox shows its source panes. Put Code Blocks in the default slot of a
+ * Code Block, and each is a file named on its tab by its `label` or, without
+ * one, its `language`. `file` holds the name of the file shown. The tabs are a
+ * tab list: the arrow keys move to a tab and show its file, the two swapping
+ * on a right-to-left page, and Home and End go to the first and the last.
+ * Choosing one sends `helix-before-change` with the file's name, which you can
+ * cancel, and `change` once `file` holds it. The files not shown carry
+ * `hidden`, and the one shown draws no name of its own, its tab naming it. One
+ * block draws no tabs. A server cannot see the blocks inside, so the client
+ * draws the tabs once it upgrades.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -82,7 +94,11 @@ import '../../copy-button/index.js';
  * @slot copied-icon - The copy button's icon after a copy. Defaults to a check mark.
  * @slot copy-icon - The copy button's icon before a copy. Defaults to a clipboard.
  *
+ * @event {Event} change - A file tab showed its file, whose name `file` now holds.
+ * @event {HelixBeforeChangeEvent} helix-before-change - A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
  * @event {HelixBeforeToggleEvent} helix-before-toggle - The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
+ * @event {HelixCopyEvent} helix-copy - The copy button put the code on the clipboard, with the text in `detail.value`.
+ * @event {HelixCopyErrorEvent} helix-copy-error - A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
  * @event {HelixToggleEvent} helix-toggle - Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
  *
  * @csspart actions - The box in the header that holds the `actions` slot, drawn while something is slotted there.
@@ -109,6 +125,8 @@ import '../../copy-button/index.js';
  * @csspart copy-tooltip-top - The tooltip while it is above the copy button. Applied with `copy-tooltip`.
  * @csspart expand - The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
  * @csspart file - In a diff, one file's header and block.
+ * @csspart file-tab - One file tab, `aria-selected` while its file is shown.
+ * @csspart files - The file tabs over the blocks a block holds, where there are several.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
  * @csspart fold - In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
  * @csspart frame - The code, and the copy button beside it where there is no header.
@@ -132,6 +150,7 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-mark-start - Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it.
  *
  * @cssstate expanded - The expand button has shown every line of a capped block.
+ * @cssstate tabbed - The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
     /**
@@ -198,6 +217,17 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the cap hides lines.
      */
     expandLabel: string;
+    /**
+     * The name of the file shown, where the block holds several Code Blocks:
+     * the `label` of one, or its `language` without one.
+     *
+     * Unset, or a name no file has, shows the first.
+     */
+    file?: string;
+    /**
+     * The name of the file tabs, read by screen readers.
+     */
+    filesLabel: string;
     /**
      * The words of a button that hides a run of unchanged lines it showed, in a
      * diff with `context-lines`. `{count}` is how many, and each language
@@ -395,6 +425,39 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * block computed and CSS cannot, and no render follows from them.
      */
     private placeLines;
+    /** The Code Blocks this block holds as its code, once its children can be read. */
+    private get blocks();
+    /**
+     * Whether the block is one of several files under another block's tabs,
+     * which name it. Read from the parent, so a block needs no telling.
+     */
+    private get tabbed();
+    /** The file shown among several: the one `file` names, or the first. */
+    private shownFile;
+    /** Shows the file a tab names, once nobody refused. */
+    private chooseFile;
+    /**
+     * Arrow keys, `Home` and `End` on the file tabs, which move to a tab and
+     * show its file, as a tab list that follows focus does and as Sandbox's file
+     * tabs do. Left and Right swap on a right-to-left page.
+     */
+    private readonly handleFileKey;
+    /** The blocks this element hid, to show them again. */
+    private readonly hid;
+    /** How many files the block last held, so each is told when that changes. */
+    private fileCount;
+    /**
+     * Hides the files not shown, shows any this element hid that is now, and
+     * tells each file when how many there are changes, since a file draws its
+     * own name only while it is alone.
+     */
+    private showFile;
+    /**
+     * The tabs over several files, and the file shown under them. One file
+     * draws no tabs, only itself.
+     */
+    private renderFiles;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/code-block/root/code-block-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, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, requestChange, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -13,6 +13,17 @@ import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
 import { foldContext, pairLines, parsePatch, } from '../patch.js';
+const stopPress = (event) => event.stopPropagation();
+const isBlock = (element) => element?.localName.endsWith('code-block') === true;
+const blocksIn = (host) => [...host.children].filter((child) => child.slot === '' && isBlock(child));
+const nameOf = (block) => {
+    const { label, language } = block;
+    return ((typeof label === 'string' && label) ||
+        block.getAttribute('label') ||
+        (typeof language === 'string' && language) ||
+        block.getAttribute('language') ||
+        '');
+};
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
@@ -25,6 +36,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
+        this.filesLabel = 'Files';
         this.hideUnchangedLabel = '{count, plural, one {Hide # unchanged line} other {Hide # unchanged lines}}';
         this.label = '';
         this.language = '';
@@ -49,6 +61,30 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
                         [...this.renderRoot.querySelectorAll('[part="block"], [part="code"]')].some((box) => box.scrollHeight > box.clientHeight + 1);
             }
         };
+        this.handleFileKey = (event) => {
+            const blocks = this.blocks;
+            const count = blocks.length;
+            const at = blocks.indexOf(this.shownFile(blocks));
+            const step = inlineStep(this, event.key);
+            const to = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? count - 1
+                    : step === 0
+                        ? -1
+                        : (at + step + count) % count;
+            const block = blocks[to];
+            if (!block) {
+                return;
+            }
+            event.preventDefault();
+            this.chooseFile(block);
+            void this.updateComplete.then(() => {
+                this.renderRoot.querySelector('[part="file-tab"][aria-selected="true"]')?.focus();
+            });
+        };
+        this.hid = new Set();
+        this.fileCount = 0;
     }
     static { this.words = 'helix-code-block'; }
     toggleWrap() {
@@ -213,6 +249,67 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         });
     }
+    get blocks() {
+        return this.childrenKnown ? blocksIn(this) : [];
+    }
+    get tabbed() {
+        const parent = this.childrenKnown ? this.parentElement : null;
+        return this.slot === '' && isBlock(parent) && blocksIn(parent).length > 1;
+    }
+    shownFile(blocks) {
+        return blocks.find((block) => nameOf(block) === this.file) ?? blocks[0];
+    }
+    chooseFile(block) {
+        if (block !== this.shownFile(this.blocks)) {
+            requestValue(this, nameOf(block), (name) => {
+                this.file = name;
+            });
+        }
+    }
+    showFile() {
+        const blocks = this.blocks;
+        const files = blocks.length > 1 ? blocks : [];
+        const shown = this.shownFile(files);
+        for (const block of files) {
+            if (block !== shown && !block.hidden) {
+                block.hidden = true;
+                this.hid.add(block);
+            }
+        }
+        for (const block of this.hid) {
+            if (block === shown || !files.includes(block)) {
+                ;
+                block.hidden = false;
+                this.hid.delete(block);
+            }
+        }
+        if (blocks.length !== this.fileCount) {
+            this.fileCount = blocks.length;
+            for (const block of blocks) {
+                block.requestUpdate?.();
+            }
+        }
+    }
+    renderFiles(blocks) {
+        const slot = html `<slot @slotchange=${() => this.requestUpdate()}></slot>`;
+        if (blocks.length < 2) {
+            return slot;
+        }
+        const shown = this.shownFile(blocks);
+        return html `<div part="files" role="tablist" aria-label=${this.filesLabel} @keydown=${this.handleFileKey}>
+        ${blocks.map((block, at) => {
+            const selected = block === shown;
+            return html `<button part="file-tab" id=${`file-${at}`} role="tab" type="button"
+            aria-controls="files-panel" aria-selected=${selected ? 'true' : 'false'}
+            tabindex=${selected ? '0' : '-1'} @click=${() => this.chooseFile(block)}>${nameOf(block)}</button>`;
+        })}
+      </div>
+      <div id="files-panel" role="tabpanel" aria-labelledby=${`file-${blocks.indexOf(shown)}`}>${slot}</div>`;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('tabbed', this.tabbed);
+    }
     updated(changed) {
         super.updated(changed);
         if (typeof ResizeObserver !== 'undefined') {
@@ -220,6 +317,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             this.sizes.observe(this);
         }
         this.measure();
+        this.showFile();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -239,6 +337,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.finishHydration();
     }
     render() {
+        const blocks = this.blocks;
+        if (blocks.length > 0) {
+            return this.renderFiles(blocks);
+        }
         const files = this.files;
         if (files.length > 0) {
             return this.renderDiff(files);
@@ -273,10 +375,11 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             ? html `<span part="gutter" aria-hidden="true">${numbers}</span>`
             : nothing;
         const name = this.label || this.language;
-        return html `${this.renderHeader(name)}
+        const drawn = this.tabbed ? '' : name;
+        return html `${this.renderHeader(name, undefined, drawn)}
       <div part="frame">
         <pre id="block" part="block" translate="no">${gutter}${code}</pre>
-        ${this.headed(name) ? nothing : this.renderCopy()}
+        ${this.headed(drawn) ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -299,10 +402,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     headed(name) {
         return name !== '' || (this.wrappable && !this.diff) || this.slotted('actions');
     }
-    renderHeader(name, value) {
+    renderHeader(name, value, drawn = name) {
         const acting = this.slotted('actions');
-        return this.headed(name)
-            ? html `<div part="header">${name ? html `<span part="label">${name}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
+        return this.headed(drawn)
+            ? html `<div part="header">${drawn ? html `<span part="label">${drawn}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
             : nothing;
     }
     renderWrapToggle() {
@@ -331,6 +434,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         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"
       copied-label=${this.copiedLabel}
+      @helix-press=${stopPress}
       label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
     >${this.renderCopyIcons()}</${this.tag('copy-button')}>`;
@@ -434,6 +538,13 @@ __decorate([
     words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCodeBlock.prototype, "file", void 0);
+__decorate([
+    words,
+    property({ attribute: 'files-label' })
+], HelixHeadlessCodeBlock.prototype, "filesLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'hide-unchanged-label' })

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

@@ -1,7 +1,7 @@
 import { AriaForwardController, type DateCalendar, HelixFormElement, type MonthCalendar, type MonthSystem } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A date, typed or picked from a calendar.
@@ -474,8 +474,8 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /**
      * Each date, where `mode` holds several, sent one entry each.
      *
-     * One date that is text and no date, such as `August 5`, is sent as an empty
-     * entry, as a native date field sends a date it cannot read.
+     * Text that is no date, such as `August 5`, is sent as one empty entry, as
+     * a native date field sends a date it cannot read, in every mode.
      */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */

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

@@ -11,7 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../date-picker/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 const dates = (value) => value
     .replace(/\s+[–-]\s+/g, ',')
     .split(',')
@@ -70,9 +70,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         };
         this.handleTextCommit = (event) => {
             if (this.mode !== 'multiple') {
-                const held = this.mode === 'range' && /\s[–-]\s/.test(this.value)
-                    ? this.value.split(/\s+[–-]\s+/).map((one) => one.trim())
-                    : dates(this.value);
+                const held = this.mode !== 'range'
+                    ? [this.value.trim()].filter(Boolean)
+                    : /\s[–-]\s/.test(this.value)
+                        ? this.value.split(/\s+[–-]\s+/).map((one) => one.trim())
+                        : dates(this.value);
                 const read = held.map((one) => this.read(one));
                 if (held.length > 0 && !held.every(isDateValue) && read.every(Boolean)) {
                     this.requestValue(read.join(','));
@@ -220,7 +222,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
     }
     get answers() {
         if (this.mode !== undefined) {
-            return dates(this.value);
+            const held = dates(this.value);
+            return held.every(isDateValue) ? held : [''];
         }
         const text = this.value.trim();
         return text === '' || isDateValue(text) ? undefined : [''];

package/dist/element-events.generated.js

@@ -36,7 +36,14 @@ registerElementEvents({
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
-    'helix-headless-code-block': ['helix-before-toggle', 'helix-toggle'],
+    'helix-headless-code-block': [
+        'change',
+        'helix-before-change',
+        'helix-before-toggle',
+        'helix-copy',
+        'helix-copy-error',
+        'helix-toggle',
+    ],
     'helix-headless-color-input': [
         'change',
         'helix-before-change',
@@ -186,7 +193,13 @@ registerElementEvents({
     'helix-headless-map-route': ['helix-map-part-change'],
     'helix-headless-map-terrain': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-headless-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-headless-menu': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-filter',
+        'helix-select',
+        'toggle',
+    ],
     'helix-headless-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-headless-meter': ['helix-band'],
     'helix-headless-notification': ['helix-dismiss', 'helix-read'],

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

@@ -82,6 +82,7 @@ import '../../menu/index.js';
  * @csspart menu-header - The bar above a field's page, with the back button and the field's name.
  * @csspart menu-live - The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
  * @csspart menu-loading - Shown while the fields are loading.
+ * @csspart menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the field whose page is showing.
  */

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

@@ -126,7 +126,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
         return html `<${menu}
       part="menu"
       exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-        live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title"
+        live: menu-live, loading: menu-loading, search-field: menu-search-field, surface: menu-surface, title: menu-title"
       label=${this.label}
       @helix-select=${this.handleSelect}
     >

package/dist/format-date/root/format-date-root.d.ts

@@ -200,7 +200,9 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * `narrow` ("3h ago").
      *
      * The reading refreshes as it goes stale, as `elapsed` does, and the whole
-     * date is its title. `elapsed` wins where both are set.
+     * date is its title. `elapsed` wins where both are set. Written with no
+     * value, as `elapsed` is, or with a style `Intl` does not know, it reads
+     * `long`.
      */
     relative?: 'long' | 'narrow' | 'short';
     /**

package/dist/format-date/root/format-date-root.js

@@ -10,6 +10,7 @@ import { property } from 'lit/decorators.js';
 import { drawFields } from '../fields.js';
 import { formatOptions } from '../options.js';
 const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+const STYLES = ['long', 'narrow', 'short'];
 let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement {
     constructor() {
         super(...arguments);
@@ -53,7 +54,9 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
             ? elapsedTime(this.language)(moment, now)
             : relativeTime(this.language, {
                 numeric: this.numeric ?? 'auto',
-                style: this.relative ?? 'long',
+                style: STYLES.includes(this.relative)
+                    ? this.relative
+                    : 'long',
             })(moment, now);
     }
     connectedCallback() {

package/dist/lightbox/item/lightbox-item.js

@@ -47,7 +47,9 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessLightboxItem.prototype, "current", void 0);
 __decorate([
-    property()
+    property({
+        converter: { fromAttribute: (value) => value ?? '' },
+    })
 ], HelixHeadlessLightboxItem.prototype, "label", void 0);
 __decorate([
     property({ attribute: false })

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

@@ -258,6 +258,32 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * which is the first time anything asked it for its items on a server.
      */
     private get items();
+    /**
+     * The set changed: render it again.
+     *
+     * `items` is read on each render and nothing else marks a render as due when
+     * an item arrives or leaves, so an item appended after the first render had
+     * no role description, no place in the set, and no part in the count until
+     * some unrelated property changed.
+     */
+    private readonly handleSlotChange;
+    /**
+     * Watches each item's `label` and `value`, which no slot reports.
+     *
+     * `value` decides which item `active` names, and `label` fills `{label}` in
+     * `status-label` and `slide-label`. A change to either left the old item
+     * shown, or the old words in the counter, until some unrelated property
+     * changed. `Select` watches its options for the same reason.
+     *
+     * The subtree, since an observer on the host sees no attribute on its
+     * children otherwise. Only changes on the items themselves count: a `<progress
+     * value>` inside an item, updated while a video plays, would otherwise render
+     * the viewer again on each update.
+     *
+     * Made on connection, there being no `MutationObserver` on a server.
+     */
+    private itemWatch;
+    connectedCallback(): void;
     /** The native dialog, or nothing where there is no DOM to hold one. */
     private get dialog();
     /** Opens the viewer, which makes the rest of the page inert. */
@@ -322,6 +348,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private zoomOut;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
+    /** The item shown at the last update, whose zoom a different item does not keep. */
+    private zoomedItem;
     /** The item on screen: the one `active` names, or the first where it names none. */
     private get shown();
     /**

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

@@ -92,6 +92,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                 '--toggle': () => this.toggleOpen(),
             },
         });
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+        this.itemWatch = undefined;
         this.handleCancel = (event) => {
             event.preventDefault();
             this.requestOpen(false);
@@ -129,6 +133,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                 this.toEnd(this.items.length - 1);
             }
         };
+        this.zoomedItem = undefined;
         this.handleBackdrop = (event) => {
             if (this.dragged(event) || !this.onEmptyArea(event)) {
                 return;
@@ -177,6 +182,16 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     get items() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessLightboxItem);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.itemWatch = new MutationObserver((records) => {
+            if (records.some((record) => record.target instanceof HelixHeadlessLightboxItem &&
+                record.target.parentElement === this)) {
+                this.requestUpdate();
+            }
+        });
+        this.itemWatch.observe(this, { attributeFilter: ['label', 'value'], subtree: true });
+    }
     get dialog() {
         return this.renderRoot?.querySelector('dialog') ?? null;
     }
@@ -292,16 +307,20 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
         this.toggleState('zoomable', this.maxZoom > 1);
-        if (changed.has('active') || (changed.has('open') && !this.open)) {
+        const shown = this.shown;
+        if (shown !== this.zoomedItem || (changed.has('open') && !this.open)) {
             this.quietZoom = true;
             this.zoomer.reset();
             this.quietZoom = false;
         }
+        this.zoomedItem = shown;
         this.say(changed);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         unlockScroll(this);
+        this.itemWatch?.disconnect();
+        this.itemWatch = undefined;
     }
     updated(changed) {
         super.updated(changed);
@@ -395,7 +414,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     >
       <slot name="header" part="header"></slot>
       <div part="viewport">
-        <slot></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
       <slot name="footer" part="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}

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, 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, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, 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';
@@ -400,12 +400,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.forgetRemoved();
         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 !== '' &&
-                    !(match ? match(option.text, typed) : option.text.toLowerCase().includes(needle));
+            option.hidden = !filterKeeps(option.text, typed, this.filterMatch);
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {