@fusion.dev/helix-headless 0.148.0 → 0.149.0

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

@@ -58,7 +58,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessTrend extends HelixElement {
     /**
-     * The word read out after the direction when the move is an improvement.
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-trend': { upLabel: 'Gestiegen' } })`.
+     */
+    static words: string;
+    /**
+     * The word read out after the direction when the move is an improvement,
+     * `{betterLabel}` in `judgment-label`.
      */
     betterLabel: string;
     /**
@@ -97,9 +103,18 @@ export declare class HelixHeadlessTrend extends HelixElement {
      */
     good?: 'down' | 'up';
     /**
-     * The locale `value` is written in, such as `de` for `1.234,5`.
+     * What the `direction` part says. `{direction}` is the word for the
+     * movement, `up-label`, `down-label` or `unchanged-label`, and
+     * `{judgment}` is `better` or `worse` where `good` judges the move, so a
+     * language whose words agree with the movement writes each phrase whole:
+     * `{judgment, select, better {...} worse {...} other {...}}`.
+     * `{betterLabel}` and `{worseLabel}` are `better-label` and `worse-label`.
+     */
+    judgmentLabel: string;
+    /**
+     * The locale the words and `value` are in, such as `de` for `1.234,5`.
      *
-     * Absent uses the runtime's own. Set it on a page rendered on a server, so
+     * Absent reads the nearest `lang`, then the runtime's own. Set it on a page rendered on a server, so
      * the server and the browser write the figure alike.
      */
     locale: string;
@@ -133,7 +148,8 @@ export declare class HelixHeadlessTrend extends HelixElement {
      */
     value?: number;
     /**
-     * The word read out after the direction when the move is a setback.
+     * The word read out after the direction when the move is a setback,
+     * `{worseLabel}` in `judgment-label`.
      */
     worseLabel: string;
     /**

package/dist/trend/root/trend-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, reportRuntime } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, reportRuntime, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { arrowDown, arrowUp, minus } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -21,11 +21,13 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         super(...arguments);
         this.betterLabel = 'better';
         this.downLabel = 'Down';
+        this.judgmentLabel = '{judgment, select, better {{direction}, {betterLabel}} worse {{direction}, {worseLabel}} other {{direction}}}';
         this.locale = '';
         this.unchangedLabel = 'Unchanged';
         this.upLabel = 'Up';
         this.worseLabel = 'worse';
     }
+    static { this.words = 'helix-trend'; }
     renderIcon(icon) {
         return html `<slot aria-hidden="true" name="icon"
       ><svg
@@ -69,8 +71,12 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
     render() {
         const moved = this.moved;
         const direction = readDirection(moved);
-        const judged = this.judged;
-        const judgment = judged ? `, ${judged === 'better' ? this.betterLabel : this.worseLabel}` : '';
+        const said = formatWords(this, 'judgmentLabel', {
+            betterLabel: this.betterLabel,
+            direction: this[direction.word],
+            judgment: this.judged ?? 'none',
+            worseLabel: this.worseLabel,
+        });
         const icon = this.renderIcon(direction.icon);
         const glyph = moved === 'up'
             ? html `<slot aria-hidden="true" name="up-icon">${icon}</slot>`
@@ -80,20 +86,22 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         const value = this.value;
         const figure = value === undefined || !Number.isFinite(value)
             ? ''
-            : figureOf(value, this.locale, this.formatOptions);
+            : figureOf(value, wordsLocale(this), this.formatOptions);
         return html `${glyph}
-      <span part="direction">${`${this[direction.word]}${judgment}`}</span>
+      <span part="direction">${said}</span>
       <span part="value" ?hidden=${figure === ''}>${figure}</span><slot></slot>
       <slot name="label"></slot>`;
     }
 };
 __decorate([
+    words,
     property({ attribute: 'better-label' })
 ], HelixHeadlessTrend.prototype, "betterLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "direction", void 0);
 __decorate([
+    words,
     property({ attribute: 'down-label' })
 ], HelixHeadlessTrend.prototype, "downLabel", void 0);
 __decorate([
@@ -102,6 +110,10 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    words,
+    property({ attribute: 'judgment-label' })
+], HelixHeadlessTrend.prototype, "judgmentLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTrend.prototype, "locale", void 0);
@@ -109,15 +121,18 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "movement", void 0);
 __decorate([
+    words,
     property({ attribute: 'unchanged-label' })
 ], HelixHeadlessTrend.prototype, "unchangedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'up-label' })
 ], HelixHeadlessTrend.prototype, "upLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTrend.prototype, "value", void 0);
 __decorate([
+    words,
     property({ attribute: 'worse-label' })
 ], HelixHeadlessTrend.prototype, "worseLabel", void 0);
 HelixHeadlessTrend = __decorate([

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

@@ -172,6 +172,11 @@ import '../../menu/index.js';
  * @cssstate waiting - Playback stopped to wait for more data, and `loading` shows.
  */
 export declare class HelixHeadlessVideo extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-video': { playLabel: 'Abspielen' } })`.
+     */
+    static words: string;
     /**
      * Whether the video starts playing on its own. Browsers allow this only while
      * it is muted.
@@ -274,7 +279,8 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     extraControls: string;
     /**
-     * What the control that skips ahead is called, with `{seconds}` filled in.
+     * What the control that skips ahead is called. `{seconds}` is how far, written
+     * in the locale, and each language writes the forms it has.
      */
     forwardLabel: string;
     /**
@@ -346,7 +352,9 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     pauseLabel: string;
     /**
-     * How the volume is read out, with `{percent}` filled in.
+     * How the volume is read out. `{percent}` is the volume from 0 to 100,
+     * written in the locale, and a language that needs plural forms writes them
+     * with `{percent, plural, ...}`.
      */
     percentLabel: string;
     /**
@@ -383,7 +391,8 @@ export declare class HelixHeadlessVideo extends HelixElement {
      */
     remoteLabel: string;
     /**
-     * What the control that skips back is called, with `{seconds}` filled in.
+     * What the control that skips back is called. `{seconds}` is how far, written
+     * in the locale, and each language writes the forms it has.
      */
     rewindLabel: string;
     /**

package/dist/video/root/video-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 { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, fillTemplate, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -41,7 +41,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.downloadLabel = 'Download';
         this.errorLabel = 'This video could not be played';
         this.extraControls = '';
-        this.forwardLabel = 'Forward {seconds} seconds';
+        this.forwardLabel = '{seconds, plural, one {Forward # second} other {Forward # seconds}}';
         this.fullscreenLabel = 'Fullscreen';
         this.idleDelay = 2500;
         this.label = '';
@@ -61,7 +61,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.preload = 'metadata';
         this.previousLabel = 'Previous';
         this.remoteLabel = 'Play on another device';
-        this.rewindLabel = 'Back {seconds} seconds';
+        this.rewindLabel = '{seconds, plural, one {Back # second} other {Back # seconds}}';
         this.seekLabel = 'Seek';
         this.speedLabel = 'Playback speed';
         this.speeds = '0.5 1 1.5 2';
@@ -210,6 +210,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         };
         this.captions = [];
     }
+    static { this.words = 'helix-video'; }
     get conditions() {
         return {
             hydrating: this.hydrating,
@@ -469,7 +470,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="rewind"
         type="button"
-        aria-label=${fillTemplate(this.rewindLabel, { seconds: SKIP_SECONDS })}
+        aria-label=${formatWords(this, 'rewindLabel', { seconds: SKIP_SECONDS })}
         @click=${() => this.skipBy(-SKIP_SECONDS)}
       >
         <slot name="rewind-icon">${drawIcon(arrowCounterClockwise)}</slot>
@@ -479,7 +480,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="forward"
         type="button"
-        aria-label=${fillTemplate(this.forwardLabel, { seconds: SKIP_SECONDS })}
+        aria-label=${formatWords(this, 'forwardLabel', { seconds: SKIP_SECONDS })}
         @click=${() => this.skipBy(SKIP_SECONDS)}
       >
         <slot name="forward-icon">${drawIcon(arrowClockwise)}</slot>
@@ -643,7 +644,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         ${back
                 ? html `<slot name="rewind-icon" slot="start">${drawIcon(arrowCounterClockwise)}</slot>`
                 : html `<slot name="forward-icon" slot="start">${drawIcon(arrowClockwise)}</slot>`}
-        ${fillTemplate(back ? this.rewindLabel : this.forwardLabel, { seconds: SKIP_SECONDS })}
+        ${formatWords(this, back ? 'rewindLabel' : 'forwardLabel', { seconds: SKIP_SECONDS })}
       </${this.tag('menu-item')}>`;
         }
         if (one === 'previous') {
@@ -690,6 +691,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     renderBar() {
         const done = this.knownDuration > 0 ? this.position / this.knownDuration : 0;
+        const progress = `--video-progress: ${done}`;
+        const level = `--video-level: ${this.silent ? 0 : this.loudness}`;
+        const { fullscreenLabel, muteLabel, seekLabel, volumeLabel } = this;
         return html `<div part="controls">
       <button
         part="play"
@@ -716,19 +720,19 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         max=${Number.isFinite(this.knownDuration) && this.knownDuration > 0 ? this.knownDuration : 0}
         step="0.01"
         .value=${String(this.position)}
-        aria-label=${this.seekLabel}
-        aria-valuetext=${fillTemplate(this.timeLabel, {
+        aria-label=${seekLabel}
+        aria-valuetext=${formatWords(this, 'timeLabel', {
             duration: clock(this.knownDuration),
             position: clock(this.position),
         })}
-        style=${`--video-progress: ${done}`}
+        style=${progress}
         @input=${this.takeScrub}
       />
       <span part="sound">
       <button
         part="mute"
         type="button"
-        aria-label=${this.muteLabel}
+        aria-label=${muteLabel}
         aria-pressed=${this.silent ? 'true' : 'false'}
         @click=${() => {
             const video = this.video;
@@ -748,11 +752,11 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         max="1"
         step="0.05"
         .value=${String(this.silent ? 0 : this.loudness)}
-        aria-label=${this.volumeLabel}
-        aria-valuetext=${fillTemplate(this.percentLabel, {
+        aria-label=${volumeLabel}
+        aria-valuetext=${formatWords(this, 'percentLabel', {
             percent: Math.round((this.silent ? 0 : this.loudness) * 100),
         })}
-        style=${`--video-level: ${this.silent ? 0 : this.loudness}`}
+        style=${level}
         @input=${this.takeVolume}
       />
       </span>
@@ -782,7 +786,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <button
         part="fullscreen"
         type="button"
-        aria-label=${this.fullscreenLabel}
+        aria-label=${fullscreenLabel}
         aria-pressed=${this.full ? 'true' : 'false'}
         @click=${() => void this.fullscreen.toggle()}
       >
@@ -896,9 +900,11 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "autoplay", void 0);
 __decorate([
+    words,
     property({ attribute: 'captions-label' })
 ], HelixHeadlessVideo.prototype, "captionsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'captions-off-label' })
 ], HelixHeadlessVideo.prototype, "captionsOffLabel", void 0);
 __decorate([
@@ -917,18 +923,22 @@ __decorate([
     property({ attribute: 'disableremoteplayback', reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "disableRemotePlayback", void 0);
 __decorate([
+    words,
     property({ attribute: 'download-label' })
 ], HelixHeadlessVideo.prototype, "downloadLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'error-label' })
 ], HelixHeadlessVideo.prototype, "errorLabel", void 0);
 __decorate([
     property({ attribute: 'extra-controls' })
 ], HelixHeadlessVideo.prototype, "extraControls", void 0);
 __decorate([
+    words,
     property({ attribute: 'forward-label' })
 ], HelixHeadlessVideo.prototype, "forwardLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'fullscreen-label' })
 ], HelixHeadlessVideo.prototype, "fullscreenLabel", void 0);
 __decorate([
@@ -938,36 +948,45 @@ __decorate([
     property()
 ], HelixHeadlessVideo.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-label' })
 ], HelixHeadlessVideo.prototype, "loadingLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "loop", void 0);
 __decorate([
+    words,
     property({ attribute: 'more-label' })
 ], HelixHeadlessVideo.prototype, "moreLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'mute-label' })
 ], HelixHeadlessVideo.prototype, "muteLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessVideo.prototype, "nextLabel", void 0);
 __decorate([
     property({ attribute: 'overflow-controls' })
 ], HelixHeadlessVideo.prototype, "overflowControls", void 0);
 __decorate([
+    words,
     property({ attribute: 'pause-label' })
 ], HelixHeadlessVideo.prototype, "pauseLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'percent-label' })
 ], HelixHeadlessVideo.prototype, "percentLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'pip-label' })
 ], HelixHeadlessVideo.prototype, "pipLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'player-label' })
 ], HelixHeadlessVideo.prototype, "playerLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'play-label' })
 ], HelixHeadlessVideo.prototype, "playLabel", void 0);
 __decorate([
@@ -980,18 +999,23 @@ __decorate([
     property()
 ], HelixHeadlessVideo.prototype, "preload", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessVideo.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'remote-label' })
 ], HelixHeadlessVideo.prototype, "remoteLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'rewind-label' })
 ], HelixHeadlessVideo.prototype, "rewindLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'seek-label' })
 ], HelixHeadlessVideo.prototype, "seekLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'speed-label' })
 ], HelixHeadlessVideo.prototype, "speedLabel", void 0);
 __decorate([
@@ -1004,12 +1028,15 @@ __decorate([
     property({ attribute: 'start-control' })
 ], HelixHeadlessVideo.prototype, "startControl", void 0);
 __decorate([
+    words,
     property({ attribute: 'subtitles-label' })
 ], HelixHeadlessVideo.prototype, "subtitlesLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'time-label' })
 ], HelixHeadlessVideo.prototype, "timeLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'volume-label' })
 ], HelixHeadlessVideo.prototype, "volumeLabel", void 0);
 __decorate([

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -43,6 +43,11 @@ import '../../menu/index.js';
  * @csspart trigger - The button that opens the menu.
  */
 export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-video-playlist-menu': { label: 'Folgen' } })`.
+     */
+    static words: string;
     /**
      * The name of the menu and its trigger, read by screen readers.
      *

package/dist/video-playlist/menu/video-playlist-menu.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 { closestInstance, customElement, drawIcon, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
+import { closestInstance, customElement, drawIcon, HelixElement, HelixSelectEvent, words, } from '@fusion.dev/helix-core';
 import { list } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -36,6 +36,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
             this.dispatchEvent(new HelixSelectEvent({ value }));
         };
     }
+    static { this.words = 'helix-video-playlist-menu'; }
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => this.watch());
@@ -108,6 +109,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessVideoPlaylistMenu.prototype, "label", void 0);
 __decorate([

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -53,6 +53,11 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * @csspart player - The region that holds the player.
  */
 export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlaylist_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-video-playlist': { label: 'Wiedergabeliste' } })`.
+     */
+    static words: string;
     /**
      * The list's name, read by screen readers.
      */

package/dist/video-playlist/root/video-playlist-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, HelixEndEvent, MixinControllerActive, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixEndEvent, MixinControllerActive, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
@@ -44,6 +44,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             this.step(1);
         };
     }
+    static { this.words = 'helix-video-playlist'; }
     get items() {
         return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
     }
@@ -139,6 +140,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "label", void 0);
 __decorate([

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -94,7 +94,9 @@ export interface VirtualListRange {
  * **Row height.** Rows are placed by `estimate` until they are drawn. Then the
  * list reads the drawn rows' height once and places every row by it, so a
  * wrong estimate still reaches the last item. Set `measured` for rows of
- * different heights.
+ * different heights. Once the list draws rows of different heights, such as
+ * rows that wrap on a narrow screen, it places each row by its own height
+ * whether `measured` is set or not.
  *
  * The list follows its source. A new `items` array, an edit to the script's
  * text, or a script replaced under the same id draws the new rows. A row that
@@ -123,6 +125,11 @@ export interface VirtualListRange {
  * @csspart viewport - The scrolling box. On this tier, it needs only a block size.
  */
 export declare class HelixHeadlessVirtualList extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-virtual-list': { loadingLabel: 'Weitere werden geladen' } })`.
+     */
+    static words: string;
     /**
      * How many items a line holds. One, the default, is a list; more lays the
      * items out as a grid of that many equal columns, windowed a line at a
@@ -176,7 +183,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     /**
      * Places each row by its own measured height. Without it, rows are placed
      * by one height: `estimate` until rows are drawn, then the drawn rows' height,
-     * read once.
+     * read once. Rows that come out different heights are placed by their own
+     * heights either way.
      *
      * **Off by default, because the straight line is better when it holds.** One
      * height makes offset and index convert by division, which can never
@@ -393,7 +401,15 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private stamp;
     /** Fills a drawn row from its item, by `renderItem` or by the template's holes. */
     private fill;
-    /** New elements for item `at`: a `<div>` for `renderItem`, or the template's clone. */
+    /**
+     * New elements for item `at`: a `<div>` for `renderItem`, or the template's clone.
+     *
+     * **Only the template's elements are drawn.** The whitespace around them is
+     * text, and `place` takes rows out by their elements, so every text node
+     * drawn stayed in the list. Measured on the preview in Chromium: 3,846 nodes
+     * after 1,900 rows, and a window move cost 1.9 milliseconds where it had
+     * cost 0.34 at the top.
+     */
     private draw;
     /**
      * Puts the windowed rows into the light DOM, and takes the rest out.

package/dist/virtual-list/root/virtual-list-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, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VirtualizeController, words, } from '@fusion.dev/helix-core';
 import { html, nothing, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { holdControls, releaseControls } from '../controls.js';
@@ -118,6 +118,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-virtual-list'; }
     get range() {
         return this.itemsOn(this.virtualize.visible());
     }
@@ -204,6 +205,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         super.updated?.(changed);
         this.virtualize.measure();
         this.place();
+        this.virtualize.settle();
         this.report();
     }
     read() {
@@ -354,7 +356,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             fragment.append(document.createElement('div'));
         }
         else if (template) {
-            fragment.append(template.content.cloneNode(true));
+            fragment.append(...template.content.cloneNode(true).children);
         }
         this.fill([...fragment.children], at);
         return fragment;
@@ -480,6 +482,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "loading", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-label' })
 ], HelixHeadlessVirtualList.prototype, "loadingLabel", void 0);
 __decorate([