@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/combobox/root/combobox-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, afterLinkFollowed, customElement, DelayController, fillTemplate, HelixCreateEvent, HelixFilterEvent, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportValues, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -21,24 +21,28 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.status = new StatusController(this);
+        this.told = undefined;
         this.allowsCustomValue = false;
         this.autocomplete = 'off';
         this.creatable = false;
-        this.createLabel = 'Add';
+        this.createLabel = 'Add "{value}"';
         this.emptyText = 'No matches';
         this.filterDelay = 0;
         this.listLabel = 'Options';
         this.loadError = '';
         this.loading = false;
         this.loadingText = 'Loading';
+        this.locale = '';
         this.multiple = false;
         this.openOn = 'input';
         this.placeholder = '';
         this.readOnly = false;
         this.removeLabel = 'Remove {name}';
-        this.resultLabel = '{count} result';
-        this.resultsLabel = '{count} results';
+        this.resultsLabel = '{count, plural, one {# result} other {# results}}';
+        this.selectedLabel = '{name}, selected';
         this.suggest = false;
+        this.valueMissingMessage = 'Choose one to continue.';
         this.typed = '';
         this.suggestion = '';
         this.editing = false;
@@ -166,12 +170,17 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 submitImplicitly(this.form);
             }
         };
+        this.counted = '';
         this.handleChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
             if (!this.requestValue(value)) {
                 return;
             }
+            const chosen = this.listbox?.options.find((option) => option.value === value);
+            if (chosen && onApple()) {
+                this.status.say(formatWords(this, 'selectedLabel', { name: chosen.text }));
+            }
             this.emptied = false;
             this.typed = '';
             this.suggestion = '';
@@ -204,6 +213,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             afterLinkFollowed(event, () => this.requestOpen(false));
         };
     }
+    static { this.words = 'helix-combobox'; }
     requestValue(next) {
         if (this.readOnly) {
             return false;
@@ -247,7 +257,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     markStatus() {
         const list = this.listbox;
-        this.toggleState('error', this.loadError !== '');
+        this.toggleState('blank', this.value === '');
+        this.toggleState('loading', this.loading);
+        this.toggleState('error', Boolean(this.loadError));
         this.toggleState('no-results', list !== null &&
             !this.loading &&
             list.filter !== '' &&
@@ -382,16 +394,52 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     linkActive() {
         const control = this.partNamed('control');
-        if (!control || !('ariaActiveDescendantElement' in control)) {
-            return;
-        }
         const active = !this.open
             ? undefined
             : this.onCreate
                 ? this.partNamed('create')
                 : (this.listbox?.options ?? []).find((option) => option.active && !option.hidden);
+        this.tell(active);
+        if (!control || !('ariaActiveDescendantElement' in control)) {
+            return;
+        }
+        ;
         control.ariaActiveDescendantElement = active ?? null;
     }
+    tell(active) {
+        if (!this.open) {
+            this.told = undefined;
+            return;
+        }
+        if ((active ?? null) === this.told ||
+            !onApple() ||
+            this.renderRoot.activeElement !== this.partNamed('control')) {
+            return;
+        }
+        if (this.listbox?.isUpdatePending) {
+            void this.listbox.updateComplete.then(() => this.linkActive());
+            return;
+        }
+        if (this.told === undefined) {
+            this.counted = this.countSaid(this.reachable.length);
+        }
+        this.told = active ?? null;
+        const option = active;
+        const words = option?.text === undefined
+            ? (active?.textContent?.trim() ?? '')
+            : option.selected
+                ? formatWords(this, 'selectedLabel', { name: option.text })
+                : option.text;
+        this.status.say([this.counted, words].filter(Boolean).join('. '));
+        if (active) {
+            this.counted = '';
+        }
+    }
+    countSaid(count) {
+        return this.resultLabel
+            ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
+            : formatWords(this, 'resultsLabel', { count });
+    }
     removeLastToken() {
         const last = this.values.at(-1);
         if (last !== undefined) {
@@ -405,7 +453,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
         }
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'control');
+        this.reportRequired(this.value === '', this.valueMissingMessage, 'control');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -468,7 +516,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 this.opening = undefined;
                 void this.listbox?.updateComplete.then(() => this.linkActive());
             }
-            if (control && !this.editing && !this.multiple && control.value !== '') {
+            if (control &&
+                !this.editing &&
+                !this.multiple &&
+                control.value !== '' &&
+                this.renderRoot.activeElement === control) {
                 control.select();
             }
         }
@@ -492,30 +544,22 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
       load-error=${this.loadError}
       loading-text=${this.loadingText}
       no-results-text=${this.noResultsText ?? nothing}
-      result-label=${this.resultLabel}
+      lang=${handedLocale(this) || nothing}
+      result-label=${this.resultLabel ?? ''}
       results-label=${this.resultsLabel}
       ?loading=${this.loading}
       ?multiple=${this.multiple}
       .value=${this.value}
+      .chosenAgain=${() => this.close()}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @helix-filter=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- The field's words are read off the options, and on the first
-           render there are none: the slot has not been assigned yet, so a
-           combobox with a value comes up empty. Assignment changes no
-           property, so nothing else would schedule the update that fixes
-           it. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
-      <!-- Handed on to the list's own, with the text as this slot's fallback:
-           a slot passed into another is assigned there whether or not anything
-           fills it, so the list's fallback would never show. -->
       <slot name="empty" slot="empty">${this.emptyText}</slot>
       <slot name="loading" slot="loading">${this.loadingText}</slot>
       <slot name="error" slot="error">${this.loadError}</slot>
-      <!-- Handed on only while something fills it: an assigned slot hides the
-           list's own fallback, which is no-results-text or empty-text. -->
       <slot
         name="no-results"
         slot=${this.querySelector?.(':scope > [slot="no-results"]') ? 'no-results' : nothing}
@@ -528,7 +572,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                     part="tag"
       exportparts="cell: tag-cell, dismiss: tag-dismiss, dismiss-mark: tag-dismiss-mark, label: tag-label, link: tag-link, start: tag-start"
                     data-value=${option.value}
-                    dismiss-label=${fillTemplate(this.removeLabel, { name: option.text })}
+                    dismiss-label=${formatWords(this, 'removeLabel', { name: option.text })}
                     ?dismissible=${!this.isDisabled && !this.readOnly}
                     @helix-dismiss=${this.handleDismiss}
                     >${option.text}</${this.tag('tag')}
@@ -545,12 +589,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         if (this.creation === '') {
             return nothing;
         }
+        const words = this.createLabel.includes('{value}')
+            ? formatWords(this, 'createLabel', { value: this.creation })
+            : html `${this.createLabel} "${this.creation}"`;
         return this.onCreate
             ? html `<button part="create create-active" id="create" type="button" @click=${() => this.create()}>
-          ${this.createLabel} "${this.creation}"
+          ${words}
         </button>`
             : html `<button part="create" id="create" type="button" @click=${() => this.create()}>
-          ${this.createLabel} "${this.creation}"
+          ${words}
         </button>`;
     }
     render() {
@@ -565,7 +612,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           id=${this.controlId}
           type="text"
           role="combobox"
-          autocomplete=${this.autocomplete || nothing}
+          autocomplete=${(this.fills ? 'off' : this.autocomplete) || nothing}
           spellcheck="false"
           aria-controls="listbox"
           aria-autocomplete=${this.suggest ? 'both' : 'list'}
@@ -588,7 +635,18 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         ${this.renderListbox()}
         ${this.renderCreate()}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderHint()}${this.renderFeedback()}${drawStatus(this.status)}
+      ${drawAutofill({
+            autocomplete: this.fills ? this.autocomplete : '',
+            disabled: this.isDisabled || this.readOnly,
+            multiple: this.multiple,
+            onFill: (value) => this.requestValue(value),
+            options: optionsAmong(this.knownChildren),
+            value: this.value,
+        })}`;
+    }
+    get fills() {
+        return !this.allowsCustomValue && this.autocomplete !== 'off' && this.autocomplete !== '';
     }
 };
 __decorate([
@@ -601,15 +659,18 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "creatable", void 0);
 __decorate([
+    words,
     property({ attribute: 'create-label' })
 ], HelixHeadlessCombobox.prototype, "createLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessCombobox.prototype, "emptyText", void 0);
 __decorate([
     property({ attribute: 'filter-delay', type: Number })
 ], HelixHeadlessCombobox.prototype, "filterDelay", void 0);
 __decorate([
+    words,
     property({ attribute: 'list-label' })
 ], HelixHeadlessCombobox.prototype, "listLabel", void 0);
 __decorate([
@@ -619,8 +680,12 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCombobox.prototype, "loading", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-text' })
 ], HelixHeadlessCombobox.prototype, "loadingText", void 0);
+__decorate([
+    property()
+], HelixHeadlessCombobox.prototype, "locale", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "multiple", void 0);
@@ -637,17 +702,27 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessCombobox.prototype, "readOnly", void 0);
 __decorate([
+    words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessCombobox.prototype, "removeLabel", void 0);
 __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessCombobox.prototype, "resultLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'results-label' })
 ], HelixHeadlessCombobox.prototype, "resultsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'selected-label' })
+], HelixHeadlessCombobox.prototype, "selectedLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCombobox.prototype, "suggest", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessCombobox.prototype, "valueMissingMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessCombobox.prototype, "typed", void 0);

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

@@ -70,6 +70,11 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @cssstate open - While the palette is open.
  */
 export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-command': { placeholder: 'Befehle suchen' } })`.
+     */
+    static words: string;
     /**
      * The text shown when the filter matches no commands.
      */
@@ -96,10 +101,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
     label: string;
     /**
      * What the list says when its commands could not be loaded, such as after a
-     * request to a server fails. Empty is no error. Passed to the list, which
-     * shows it under any commands there are and tells screen readers.
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it. Passed to the list, which shows it
+     * under any commands there are and tells screen readers.
      */
-    loadError: string;
+    loadError: string | null;
     /**
      * Whether the commands are still loading, for a palette that asks a server
      * for them as the user types.
@@ -121,14 +127,18 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      */
     placeholder: string;
     /**
-     * What a screen reader hears when typing leaves one command. `{count}` is
-     * the count.
+     * What a screen reader hears when typing leaves one command, where
+     * `results-label` should not say it. `{count}` is the count.
+     *
+     * @deprecated Write every form in `results-label`, as `{count, plural, one
+     * {# command} other {# commands}}`. Removed in the next major version.
      */
-    resultLabel: string;
+    resultLabel?: string;
     /**
-     * What a screen reader hears when typing leaves any other number of
-     * commands. `{count}` is the count, and `Intl.PluralRules` picks between the
-     * two.
+     * What a screen reader hears when typing narrows the commands. `{count}` is
+     * how many are left, written in the locale, and each language writes the
+     * forms it has: `{count, plural, one {# polecenie} few {# polecenia} many
+     * {# poleceń} other {# polecenia}}`.
      */
     resultsLabel: string;
     /**

package/dist/command/root/command-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, HelixSelectEvent, MixinControllerOpen, matchesChord, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -21,8 +21,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         this.loading = false;
         this.loadingText = 'Loading';
         this.placeholder = 'Search commands';
-        this.resultLabel = '{count} command';
-        this.resultsLabel = '{count} commands';
+        this.resultsLabel = '{count, plural, one {# command} other {# commands}}';
         this.footed = false;
         this.handleHotkey = (event) => {
             if (!matchesChord(event, this.hotkey, true) && !matchesChord(event, this.hotkey, false)) {
@@ -76,6 +75,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             this.requestOpen(false);
         };
     }
+    static { this.words = 'helix-command'; }
     get listbox() {
         return this.partNamed('listbox');
     }
@@ -146,7 +146,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         load-error=${this.loadError}
         loading-text=${this.loadingText}
         no-results-text=${this.noResultsText ?? nothing}
-        result-label=${this.resultLabel}
+        result-label=${this.resultLabel ?? ''}
         results-label=${this.resultsLabel}
         ?loading=${this.loading}
         filterable
@@ -183,6 +183,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
 };
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessCommand.prototype, "emptyText", void 0);
 __decorate([
@@ -192,6 +193,7 @@ __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessCommand.prototype, "label", void 0);
 __decorate([
@@ -201,18 +203,21 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCommand.prototype, "loading", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-text' })
 ], HelixHeadlessCommand.prototype, "loadingText", void 0);
 __decorate([
     property({ attribute: 'no-results-text' })
 ], HelixHeadlessCommand.prototype, "noResultsText", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessCommand.prototype, "placeholder", void 0);
 __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessCommand.prototype, "resultLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'results-label' })
 ], HelixHeadlessCommand.prototype, "resultsLabel", void 0);
 __decorate([

package/dist/copy-button/root/copy-button-root.d.ts

@@ -68,6 +68,11 @@ import '../../tooltip/index.js';
  * @withheld slot start - Button's, which this does not render.
  */
 export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-copy-button': { copiedLabel: 'Kopiert' } })`.
+     */
+    static words: string;
     /**
      * The button's name and tooltip text after a copy.
      *

package/dist/copy-button/root/copy-button-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCopyButton_1;
-import { CopyController, customElement, HelixCopyErrorEvent } from '@fusion.dev/helix-core';
+import { CopyController, customElement, HelixCopyErrorEvent, words } from '@fusion.dev/helix-core';
 import { check, copy, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -14,7 +14,7 @@ import { html } from 'lit/static-html.js';
 import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
 import { readFrom } from '../from.js';
 import '../../tooltip/index.js';
-let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
+let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     constructor() {
         super(...arguments);
         this.copiedLabel = 'Copied';
@@ -42,6 +42,8 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
             }
         };
     }
+    static { HelixHeadlessCopyButton_1 = this; }
+    static { this.words = 'helix-copy-button'; }
     get says() {
         if (this.failed) {
             return this.errorLabel;
@@ -117,9 +119,11 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     }
 };
 __decorate([
+    words,
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCopyButton.prototype, "copiedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'error-label' })
 ], HelixHeadlessCopyButton.prototype, "errorLabel", void 0);
 __decorate([
@@ -129,6 +133,7 @@ __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "from", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessCopyButton.prototype, "label", void 0);
 __decorate([