@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -39,7 +39,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * `dismiss-label`, as `Dialog` draws one.
  *
  * The panel's name is `label` when you set it. Otherwise it is the heading in
- * the `header` slot, or the elements an `aria-labelledby` on the host names.
+ * the `header` slot, or the elements an `aria-labelledby` on the host names,
+ * and `fallback-label` where nothing names it.
  *
  * Content stays mounted when the drawer is closed, so it is in the server
  * markup and can animate. A closed `<dialog>` is already out of the tab order
@@ -87,6 +88,11 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @cssstate snapped - While the panel rests at a snap point that shows less than the whole panel.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-drawer': { dismissLabel: 'Schließen' } })`.
+     */
+    static words: string;
     protected readonly commands: CommandController;
     /**
      * Which close requests the browser handles on its own.
@@ -113,6 +119,11 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * interface.
      */
     dismissLabel: string;
+    /**
+     * The panel's name where nothing names it: no `label`, no heading in the
+     * `header` slot, and no `aria-labelledby` on the host.
+     */
+    fallbackLabel: string;
     /**
      * Accessible name for the panel. When it is empty, the heading in the
      * `header` slot names the panel.

package/dist/drawer/root/drawer-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, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { beyondWindow } from '../reveal.js';
@@ -21,6 +21,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         });
         this.dismissible = false;
         this.dismissLabel = 'Close';
+        this.fallbackLabel = 'Drawer';
         this.label = '';
         this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
@@ -100,6 +101,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         };
         this.namedByHeader = false;
     }
+    static { this.words = 'helix-drawer'; }
     get returnValue() {
         return this.panel?.returnValue ?? this.returned;
     }
@@ -236,7 +238,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         return html `<dialog
       part="panel"
       closedby=${closedBy ?? nothing}
-      aria-label=${this.label || 'Drawer'}
+      aria-label=${this.label || this.fallbackLabel}
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
@@ -267,8 +269,13 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDrawer.prototype, "dismissible", void 0);
 __decorate([
+    words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessDrawer.prototype, "dismissLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessDrawer.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDrawer.prototype, "label", void 0);

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

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

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

@@ -62,6 +62,11 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @cssstate forward - The last move went into a page.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-drilldown': { backLabel: 'Zurück' } })`.
+     */
+    static words: string;
     /**
      * The name of the top page's menu, read by screen readers. A page below it is
      * named by its title.

package/dist/drilldown/root/drilldown-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -85,6 +85,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             }
         };
     }
+    static { this.words = 'helix-drilldown'; }
     get items() {
         return this.drilldown.rows;
     }
@@ -198,9 +199,11 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessDrilldown.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessDrilldown.prototype, "backLabel", void 0);
 __decorate([

package/dist/element-events.generated.js

@@ -5,6 +5,7 @@ registerElementEvents({
     'helix-headless-app-header': ['helix-scrolled'],
     'helix-headless-avatar': ['error', 'load'],
     'helix-headless-button': ['helix-press'],
+    'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',
@@ -65,6 +66,7 @@ registerElementEvents({
     'helix-headless-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-headless-data-table': [
         'helix-activate',
+        'helix-before-reorder',
         'helix-expand',
         'helix-filter',
         'helix-filtered',
@@ -130,13 +132,21 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
-    'helix-headless-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-headless-list': [
+        'change',
+        'helix-action',
+        'helix-before-change',
+        'helix-before-reorder',
+        'helix-reorder',
+    ],
     'helix-headless-list-item': ['helix-action'],
     'helix-headless-listbox': [
         'change',
         'helix-before-change',
+        'helix-before-reorder',
         'helix-filter',
         'helix-load-more',
+        'helix-reorder',
         'input',
     ],
     'helix-headless-map': [
@@ -228,7 +238,14 @@ registerElementEvents({
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-tab': ['helix-select'],
-    'helix-headless-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-headless-table': [
+        'helix-before-reorder',
+        'helix-reorder',
+        'helix-select',
+        'helix-selected',
+        'helix-sort',
+        'helix-sorted',
+    ],
     'helix-headless-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-tag': ['helix-dismiss'],
@@ -259,7 +276,13 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-tour-stop': ['helix-tour-ask'],
-    'helix-headless-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
+    'helix-headless-tree': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-reorder',
+        'helix-select',
+    ],
     'helix-headless-tree-item': [
         'helix-before-close',
         'helix-before-open',

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

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

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

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

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

@@ -95,6 +95,11 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-file-input': { triggerLabel: 'Dateien auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * Which files the picker offers and a drop takes, as a native `accept` list.
@@ -108,6 +113,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * `{count}` filled in.
      */
     addedText: string;
+    /**
+     * A file's size under a kilobyte. `{count}` is how many bytes, written in
+     * the locale, and each language writes the forms it has.
+     */
+    bytesLabel: string;
     /**
      * Which camera or microphone a mobile picker should offer, if any.
      */
@@ -118,9 +128,9 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      */
     directory: boolean;
     /**
-     * Language tag the sizes are written in.
-     *
-     * Absent uses the runtime's own.
+     * The locale the words, the sizes, and the numbers and lists in sentences
+     * are in, as a BCP 47 tag such as `pl`. Empty reads the nearest `lang`, then
+     * the browser's language.
      */
     locale: string;
     /**
@@ -219,6 +229,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * count is written as the language writes a number.
      */
     private listed;
+    /**
+     * A name about one file: `{name}` filled in, or the file's name after a
+     * page's label that has no `{name}`.
+     */
+    private aboutFile;
     /** The element slotted into `remove-icon`, one copy per row's remove button. */
     private readonly removeIcon;
     private readonly handleRemoveIcon;

package/dist/file-input/root/file-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, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, drawStatus, formatWords, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, labelWith, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { trash } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -12,20 +12,19 @@ import { html } from 'lit/static-html.js';
 import { screenFiles } from '../screen.js';
 import { barOf, saysStatus } from '../status.js';
 import '../../tag/index.js';
-const named = (label, name) => label.includes('{name}') ? fillTemplate(label, { name }) : `${label} ${name}`;
-const size = (bytes, locale) => {
-    const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+const size = (bytes, locale, inBytes) => {
+    const units = ['', 'KB', 'MB', 'GB', 'TB'];
     let value = bytes;
     let step = 0;
     while (value >= 1024 && step < units.length - 1) {
         value /= 1024;
         step += 1;
     }
-    const written = new Intl.NumberFormat(locale || undefined, {
-        maximumFractionDigits: step === 0 ? 0 : 1,
-    }).format(value);
-    const unit = step === 0 && value === 1 ? 'byte' : units[step];
-    return `${written} ${unit}`;
+    if (step === 0) {
+        return inBytes(value);
+    }
+    const written = new Intl.NumberFormat(locale || undefined, { maximumFractionDigits: 1 }).format(value);
+    return `${written} ${units[step]}`;
 };
 const kind = (file) => {
     const extension = /\.([a-z0-9]{1,6})$/i.exec(file.name)?.[1];
@@ -44,6 +43,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         });
         this.accept = '';
         this.addedText = 'Added: {names}';
+        this.bytesLabel = '{count, plural, one {# byte} other {# bytes}}';
         this.directory = false;
         this.locale = '';
         this.multiple = false;
@@ -108,6 +108,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             });
         };
     }
+    static { this.words = 'helix-file-input'; }
     setFileStatus(file, status) {
         const was = this.statuses.get(file);
         if (status) {
@@ -151,9 +152,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             this.dispatchEvent(new HelixRejectEvent({ files: refused }));
         }
         const words = [
-            applied && !picked && added.length > 0 ? this.listed(this.addedText, added) : '',
+            applied && !picked && added.length > 0 ? this.listed('addedText', added) : '',
             refused.length > 0
-                ? this.listed(this.rejectedText, refused.map((one) => one.file))
+                ? this.listed('rejectedText', refused.map((one) => one.file))
                 : '',
         ].filter((one) => one !== '');
         if (words.length > 0) {
@@ -161,11 +162,16 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         }
     }
     listed(sentence, files) {
-        return fillTemplate(sentence, {
-            count: formatNumbers(this.lang)(files.length),
-            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
+        return formatWords(this, sentence, {
+            count: files.length,
+            names: new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
         });
     }
+    aboutFile(label, name) {
+        return this[label].includes('{name}')
+            ? formatWords(this, label, { name })
+            : labelWith(this[label], 'name', name);
+    }
     removeMark(at) {
         return this.removeIcon.copyFor(at) ?? drawIcon(trash);
     }
@@ -181,7 +187,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     removeAt(at) {
         const gone = this.files[at];
         if (gone && this.commit(this.files.filter((_, index) => index !== at))) {
-            this.status.say(fillTemplate(this.removedText, { name: gone.name }));
+            this.status.say(formatWords(this, 'removedText', { name: gone.name }));
         }
     }
     commit(next) {
@@ -263,7 +269,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     }
     renderMeta(file) {
         return html `<${this.tag('tag')} part="size"
-    exportparts="cell: size-cell, dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, link: size-link, start: size-start">${size(file.size, this.locale)}</${this.tag('tag')}>
+    exportparts="cell: size-cell, dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, link: size-link, start: size-start">${size(file.size, wordsLocale(this), (count) => formatWords(this, 'bytesLabel', { count }))}</${this.tag('tag')}>
       <${this.tag('tag')}
         part="kind"
       exportparts="cell: kind-cell, dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, label: kind-label, link: kind-link, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
@@ -281,7 +287,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
               part="progress"
               max="1"
               value=${bar === 'unmeasured' ? nothing : bar}
-              aria-label=${named(this.progressLabel, file.name)}
+              aria-label=${this.aboutFile('progressLabel', file.name)}
             ></progress>`}${status.text ? html `<span part="status-text">${status.text}</span>` : nothing}</span
     >`;
     }
@@ -346,7 +352,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                   <button
                     part="remove"
                     type="button"
-                    aria-label=${named(this.removeLabel, file.name)}
+                    aria-label=${this.aboutFile('removeLabel', file.name)}
                     data-at=${at}
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}
@@ -362,8 +368,13 @@ __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "accept", void 0);
 __decorate([
+    words,
     property({ attribute: 'added-text' })
 ], HelixHeadlessFileInput.prototype, "addedText", void 0);
+__decorate([
+    words,
+    property({ attribute: 'bytes-label' })
+], HelixHeadlessFileInput.prototype, "bytesLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "capture", void 0);
@@ -383,15 +394,19 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFileInput.prototype, "multiple", void 0);
 __decorate([
+    words,
     property({ attribute: 'progress-label' })
 ], HelixHeadlessFileInput.prototype, "progressLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'rejected-text' })
 ], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
 __decorate([
+    words,
     property({ attribute: 'removed-text' })
 ], HelixHeadlessFileInput.prototype, "removedText", void 0);
 __decorate([
+    words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
 __decorate([
@@ -401,6 +416,7 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessFileInput.prototype, "transformFiles", void 0);
 __decorate([
+    words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessFileInput.prototype, "triggerLabel", void 0);
 __decorate([

package/dist/file-input/status.js

@@ -1,7 +1,8 @@
+import { clamp } from '@fusion.dev/helix-core';
 export const barOf = (status) => {
     const { progress, state } = status;
     if (typeof progress === 'number' && Number.isFinite(progress)) {
-        return Math.min(1, Math.max(0, progress));
+        return clamp(progress, 0, 1);
     }
     return state === 'uploading' ? 'unmeasured' : undefined;
 };

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

@@ -63,6 +63,19 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * @csspart values - The values the field is compared to.
  */
 export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-filter-chip': { dismissLabel: 'Filter entfernen' } })`.
+     */
+    static words: string;
+    /**
+     * The remove button's name, read by screen readers. The chip's own words
+     * follow it, so several chips are told apart.
+     *
+     * "Remove filter" rather than the mixin's "Dismiss", for the reason `Tag`
+     * gives its own: taking a filter out of a set is a different act from
+     * closing a message.
+     */
     dismissLabel: string;
     /**
      * The name of the field the filter is on, as shown on the chip.

package/dist/filter-input/chip/filter-chip.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, MixinDismissible, slottedWords } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, labelWith, MixinDismissible, slottedWords, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,13 +16,13 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
         this.label = '';
         this.operatorLabel = '';
     }
+    static { this.words = 'helix-filter-chip'; }
     get removeName() {
         const read = (slot, fallback) => (this.childrenKnown && slottedWords(this, [slot])) || fallback;
         const words = [read('field', this.label), read('operator', this.operatorLabel), read('', '')]
             .filter(Boolean)
             .join(' ');
-        const label = this.dismissLabel;
-        return label.includes('{label}') ? label.replace('{label}', words) : `${label} ${words}`.trim();
+        return labelWith(this.dismissLabel, 'label', words);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -52,6 +52,10 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
             : nothing}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessFilterChip.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterChip.prototype, "label", void 0);

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

@@ -85,6 +85,11 @@ import '../../menu/index.js';
  * @csspart menu-title - The name of the field whose page is showing.
  */
 export declare class HelixHeadlessFilterMenu extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-filter-menu': { label: 'Filtern' } })`.
+     */
+    static words: string;
     /**
      * The menu's name, read by screen readers.
      */

package/dist/filter-input/menu/filter-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 { customElement, HelixElement, HelixFacetEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixFacetEvent, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -55,6 +55,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
             this.apply(field, [...ticked]);
         };
     }
+    static { this.words = 'helix-filter-menu'; }
     get fields() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessFilterField);
     }
@@ -203,6 +204,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessFilterMenu.prototype, "label", void 0);
 HelixHeadlessFilterMenu = __decorate([