@aceshooting/lyra-ui 3.7.0 → 3.9.0

package/dist/components/voice-picker/voice-picker.class.js

@@ -0,0 +1,808 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon, playIcon, pauseIcon } from '../../internal/icons.js';
+import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
+import { safeMediaSrc } from '../../internal/safe-url.js';
+import { styles } from './voice-picker.styles.js';
+/**
+ * String-aware boolean attribute converter for `spellcheck`. Lit's built-in `type: Boolean`
+ * converter is presence-based -- the attribute's mere presence (regardless of its string value)
+ * maps to `true`, so a plain-markup consumer writing the literal `spellcheck="false"` would
+ * actually get `true` (this property's default), the opposite of what that string reads as -- the
+ * same bug class `<lyra-model-select>`'s/`<lyra-textarea>`'s/`<lyra-date-input>`'s identical
+ * converters document and fix.
+ */
+const spellcheckConverter = {
+    fromAttribute(value) {
+        return value !== 'false';
+    },
+    toAttribute(value) {
+        return value ? null : 'false';
+    },
+};
+/**
+ * `<lyra-voice-picker>` — a TTS voice selector over a host-supplied `catalog`, mirroring
+ * `lyra-model-select`'s closed-dropdown/free-text-combobox dual mode, stale-value handling, and
+ * form-association verbatim (see that class's own doc for the full mode-switching contract this one
+ * shares), extended with a TTS-agnostic preview affordance: a standalone, always-tab-reachable
+ * `[part="preview-button"]` beside the trigger previews the active option while open, else the
+ * committed value; per-row `[part="option-preview"]` icons are pointer-only duplicates
+ * (`tabindex="-1"`, `aria-hidden="true"`) since a listbox option must not contain a focusable
+ * descendant.
+ *
+ * Preview is event-first: `lyra-preview-request` always fires first and is cancelable. Left
+ * un-prevented, a `previewUrl` plays through one internal native `<audio>` (the URL passes
+ * `safeMediaSrc()` first); `preventDefault()` or no URL leaves playback entirely to the host's own
+ * TTS. Requesting the same voice while it is already playing internally stops it instead of
+ * re-requesting; requesting a different voice switches. `lyra-preview-change` reports internal
+ * playback start/stop (`voiceId: null` on stop/end/error).
+ *
+ * @customElement lyra-voice-picker
+ * @slot hint - Custom hint content.
+ * @slot error - Custom error content.
+ * @event lyra-change - `detail: { value: string; inCatalog: boolean }`.
+ * @event {Event} change - Fired alongside `lyra-change`, mirroring `lyra-model-select`'s native-style pair.
+ * @event {Event} input - Fired alongside `change`/`lyra-change`.
+ * @event blur - Re-dispatched from the free-text mode's internal `<input>`'s own `blur` (bubbling,
+ *   composed, unlike the native event).
+ * @event focus - Re-dispatched from the free-text mode's internal `<input>`'s own `focus`.
+ * @event lyra-preview-request - `detail: { voiceId: string; previewUrl?: string }`. Cancelable.
+ * @event lyra-preview-change - `detail: { voiceId: string | null }` — internal playback started
+ *   (`voiceId`) or stopped (`null`).
+ * @csspart form-control-label - The `<label>` element.
+ * @csspart trigger - The trigger button (closed-dropdown mode).
+ * @csspart combobox - The text-input container (free-text mode).
+ * @csspart combobox-input - The free-text `<input>`.
+ * @csspart provider-badge - The optional leading `provider` label.
+ * @csspart listbox - The options popover.
+ * @csspart option - An option row.
+ * @csspart option-label - An option row's label/meta wrapper.
+ * @csspart option-meta - An option row's quiet `language · description` second line.
+ * @csspart option-badge - The "not in catalog" badge on a synthetic stale-value row.
+ * @csspart option-preview - A pointer-only per-row preview icon (`tabindex="-1"`, `aria-hidden`).
+ * @csspart preview-button - The standalone, keyboard-reachable preview toggle beside the trigger.
+ * @csspart expand-icon - The dropdown indicator.
+ * @csspart empty - The empty-listbox message.
+ * @csspart hint - The hint message.
+ * @csspart error - The error message.
+ */
+export class LyraVoicePicker extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+        required: { type: Boolean, reflect: true, noAccessor: true },
+        value: { noAccessor: true },
+        name: { reflect: true, noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        /** Informational only (e.g. `'elevenlabs'`); rendered as a small leading badge. */
+        this.provider = '';
+        /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
+        this.allowCustom = false;
+        /** Whether to render preview affordances at all. */
+        this.preview = true;
+        this.label = '';
+        this.hint = '';
+        this.errorText = '';
+        this.placeholder = '';
+        this.spellcheck = true;
+        this.autocapitalize = '';
+        this.autoCorrect = '';
+        this.autocomplete = 'off';
+        this.inputMode = '';
+        this.enterKeyHint = '';
+        this.open = false;
+        this.activeIndex = -1;
+        this.query = '';
+        this.touched = false;
+        this.hasHintSlot = false;
+        this.hasErrorSlot = false;
+        /** The voiceId currently playing via the internal `<audio>` (`null` when nothing is). */
+        this.previewingId = null;
+        this.listId = nextId('voice-picker-list');
+        this.controlId = nextId('voice-picker-control');
+        this._value = '';
+        this._fieldsetDisabled = false;
+        this._name = '';
+        this._disabled = false;
+        this._required = false;
+        this._defaultValue = '';
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        this.onAudioEnded = () => {
+            this.stopInternalPreview();
+        };
+        /**
+         * A rejected `play()` or a media `error` event means only that *this specific* audio resource
+         * failed to load/play. It must not flip the public "playing" toggle out from under a caller who
+         * may have already toggled it off or requested a different voice by the time this settles --
+         * network timing is inherently unpredictable and racing it against user interaction would make
+         * the toggle state nondeterministic. Release the dead resource quietly instead of routing through
+         * `stopInternalPreview()`; the affordance stays pressed until the user's own next toggle or
+         * request clears it. `audioEl` already pointing elsewhere (or being unset) means a newer preview
+         * or an explicit stop has since superseded this resource, so this is a no-op.
+         */
+        this.onAudioLoadFailure = () => {
+            if (!this.audioEl)
+                return;
+            this.audioEl.removeEventListener('ended', this.onAudioEnded);
+            this.audioEl.removeEventListener('error', this.onAudioLoadFailure);
+            this.audioEl = undefined;
+        };
+        this.onPreviewButtonClick = () => {
+            const candidate = this.previewCandidateId;
+            if (!candidate)
+                return;
+            if (this.previewingId === candidate)
+                this.stopInternalPreview();
+            else
+                this.requestPreview(candidate);
+        };
+        this.onOptionPreviewClick = (e, entry) => {
+            e.stopPropagation(); // don't also select the row -- see onListboxClick
+            if (this.previewingId === entry.id)
+                this.stopInternalPreview();
+            else
+                this.requestPreview(entry.id);
+        };
+        // -- Closed-dropdown mode (trigger button) --------------------------------
+        this.onTriggerClick = () => {
+            if (this.effectiveDisabled)
+                return;
+            this.open ? this.hide() : this.show();
+        };
+        this.onTriggerBlur = () => {
+            this.touched = true;
+            this.hide();
+        };
+        this.onTriggerKeyDown = (e) => {
+            const rows = this.effectiveEntries;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(rows.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (this.open) {
+                        e.preventDefault();
+                        if (this.activeIndex >= 0 && rows[this.activeIndex])
+                            this.selectEntry(rows[this.activeIndex]);
+                        else
+                            this.hide();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = rows.length - 1;
+                    }
+                    break;
+            }
+        };
+        // -- Free-text mode (text input) -------------------------------------------
+        this.onComboMouseDown = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            e.preventDefault();
+            this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
+        };
+        this.onInputFocus = () => {
+            if (!this.open)
+                this.query = this.labelFor(this.value);
+            this.show();
+            this.emit('focus');
+        };
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.activeIndex = -1;
+            this.show();
+        };
+        this.onInputBlur = () => {
+            this.touched = true;
+            this.hide();
+            this.emit('blur');
+        };
+        this.onInputKeyDown = (e) => {
+            const rows = this.filteredEntries;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(rows.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.commitFreeText();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.query = this.labelFor(this.value);
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = rows.length - 1;
+                    }
+                    break;
+            }
+        };
+        // -- Shared listbox ---------------------------------------------------
+        this.onListboxMouseDown = (e) => {
+            if (e.target.closest('[part="option"]'))
+                e.preventDefault();
+        };
+        this.onListboxClick = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            const optionEl = e.target.closest('[part="option"]');
+            const value = optionEl?.dataset.value;
+            if (value === undefined)
+                return;
+            const entry = (this.closedMode ? this.effectiveEntries : this.filteredEntries).find((e2) => e2.id === value);
+            if (entry)
+                this.selectEntry(entry);
+        };
+        this.onHintSlotChange = (e) => {
+            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onErrorSlotChange = (e) => {
+            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        this.internals.setFormValue('');
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]') ?? null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+    }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
+            this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup?.();
+        this.cleanup = undefined;
+        document.removeEventListener('pointerdown', this.onDocPointer);
+        this.stopInternalPreview();
+        this.open = false;
+    }
+    attributeChangedCallback(name, old, val) {
+        super.attributeChangedCallback(name, old, val);
+        if (name === 'value')
+            this._defaultValue = this._value;
+    }
+    /** The current voice id (empty string when nothing is selected). */
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? '';
+        this.internals.setFormValue(this._value);
+        this.updateValidity();
+        this.requestUpdate('value', old);
+    }
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name)
+            this.setAttribute('name', this._name);
+        else
+            this.removeAttribute('name');
+        this.requestUpdate('name', old);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        if (this._disabled)
+            this.hide();
+        this.requestUpdate('disabled', old);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(next) {
+        const old = this._required;
+        this._required = Boolean(next);
+        this.toggleAttribute('required', this._required);
+        this.updateValidity();
+        this.requestUpdate('required', old);
+    }
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
+    updateValidity() {
+        if (this.required && !this._value) {
+            this.validityController.setValidity({ valueMissing: true }, this.localize('voicePickerRequired'));
+        }
+        else {
+            this.validityController.setValidity({});
+        }
+    }
+    formResetCallback() {
+        this.value = this._defaultValue;
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+    }
+    formDisabledCallback(disabled) {
+        this._fieldsetDisabled = disabled;
+        if (disabled)
+            this.hide();
+        this.requestUpdate();
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** `catalog`, normalized to `{ id, label, ... }[]` regardless of the plain-string-array shorthand. */
+    get normalizedCatalog() {
+        const raw = this.catalog;
+        if (!raw || raw.length === 0)
+            return [];
+        return raw.map((item) => (typeof item === 'string' ? { id: item, label: item } : item));
+    }
+    /** Closed-dropdown-with-listbox mode vs. free-text filterable mode — see class doc. */
+    get closedMode() {
+        return this.normalizedCatalog.length > 0 && !this.allowCustom;
+    }
+    /**
+     * `normalizedCatalog` plus, when `value` isn't one of its ids, a synthetic trailing row for it —
+     * recomputed from scratch on every access so it always reflects the *current* `catalog`/`value`,
+     * never a snapshot from whenever `value` happened to be assigned.
+     */
+    get effectiveEntries() {
+        const catalog = this.normalizedCatalog;
+        const entries = catalog.map((e) => ({ ...e, synthetic: false }));
+        if (catalog.length > 0 && this._value && !catalog.some((e) => e.id === this._value)) {
+            entries.push({ id: this._value, label: this._value, synthetic: true });
+        }
+        return entries;
+    }
+    /** `effectiveEntries` filtered by the typed `query` (free-text mode only; id, label, language, or
+     *  description substring, case-insensitive). */
+    get filteredEntries() {
+        const q = this.query.trim().toLowerCase();
+        if (!q)
+            return this.effectiveEntries;
+        return this.effectiveEntries.filter((e) => e.id.toLowerCase().includes(q) ||
+            e.label.toLowerCase().includes(q) ||
+            (e.language ?? '').toLowerCase().includes(q) ||
+            (e.description ?? '').toLowerCase().includes(q));
+    }
+    labelFor(id) {
+        if (!id)
+            return '';
+        return this.effectiveEntries.find((e) => e.id === id)?.label ?? id;
+    }
+    show() {
+        if (this.open || this.effectiveDisabled)
+            return;
+        this.open = true;
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    updated(changed) {
+        const reposition = changed.has('open') || (this.open && (changed.has('catalog') || changed.has('allowCustom')));
+        if (reposition) {
+            this.cleanup?.();
+            this.cleanup = undefined;
+            if (this.open) {
+                document.addEventListener('pointerdown', this.onDocPointer);
+                const anchor = this.renderRoot.querySelector(this.closedMode ? '[part="trigger"]' : '[part="combobox"]');
+                const listbox = this.renderRoot.querySelector('[part="listbox"]');
+                if (anchor && listbox)
+                    this.cleanup = place(anchor, listbox);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.onDocPointer);
+            }
+        }
+        if (changed.has('required') || changed.has('touched') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
+    }
+    commitValue(next) {
+        const inCatalog = this.normalizedCatalog.some((e) => e.id === next);
+        this.value = next;
+        this.hide();
+        this.emit('lyra-change', { value: next, inCatalog });
+        this.emitValueEvents();
+    }
+    /** Dispatches the platform-style value-event pair alongside `lyra-change`, mirroring
+     *  `lyra-model-select` so native form bindings and framework `v-model` handlers behave
+     *  consistently across the picker family. */
+    emitValueEvents() {
+        const EventConstructor = this.ownerDocument.defaultView?.Event ?? Event;
+        const init = { bubbles: true, composed: true };
+        this.dispatchEvent(new EventConstructor('input', init));
+        this.dispatchEvent(new EventConstructor('change', init));
+    }
+    selectEntry(entry) {
+        this.commitValue(entry.id);
+    }
+    /** Enter in free-text mode: commit the highlighted suggestion, else the raw typed text. */
+    commitFreeText() {
+        const rows = this.filteredEntries;
+        if (this.activeIndex >= 0 && rows[this.activeIndex]) {
+            this.commitValue(rows[this.activeIndex].id);
+            return;
+        }
+        this.commitValue(this.query.trim());
+    }
+    // -- Preview -------------------------------------------------------------
+    /** The candidate the standalone preview button acts on: the active option while open, else the
+     *  committed value. */
+    get previewCandidateId() {
+        if (this.open && this.activeIndex >= 0) {
+            const rows = this.closedMode ? this.effectiveEntries : this.filteredEntries;
+            return rows[this.activeIndex]?.id ?? this._value;
+        }
+        return this._value;
+    }
+    requestPreview(voiceId) {
+        if (!voiceId)
+            return;
+        const entry = this.effectiveEntries.find((e) => e.id === voiceId);
+        const previewUrl = entry?.previewUrl;
+        const event = this.emit('lyra-preview-request', { voiceId, previewUrl }, { cancelable: true });
+        if (!event.defaultPrevented && previewUrl)
+            this.playInternal(voiceId, previewUrl);
+    }
+    playInternal(voiceId, url) {
+        const safe = safeMediaSrc(url);
+        if (!safe)
+            return;
+        this.stopInternalPreview();
+        const audio = new Audio();
+        audio.src = safe;
+        audio.addEventListener('ended', this.onAudioEnded);
+        audio.addEventListener('error', this.onAudioLoadFailure);
+        this.audioEl = audio;
+        this.previewingId = voiceId;
+        void audio.play().catch(() => this.onAudioLoadFailure());
+        this.emit('lyra-preview-change', { voiceId });
+    }
+    stopInternalPreview() {
+        if (this.audioEl) {
+            this.audioEl.removeEventListener('ended', this.onAudioEnded);
+            this.audioEl.removeEventListener('error', this.onAudioLoadFailure);
+            this.audioEl.pause();
+            this.audioEl = undefined;
+        }
+        if (this.previewingId !== null) {
+            this.previewingId = null;
+            this.emit('lyra-preview-change', { voiceId: null });
+        }
+    }
+    get previewButtonLabel() {
+        const candidate = this.previewCandidateId;
+        const playing = this.previewingId !== null && this.previewingId === candidate;
+        const name = this.labelFor(candidate) || candidate;
+        return playing ? this.localize('voicePickerStopPreview') : this.localize('voicePickerPreview', undefined, { name });
+    }
+    renderRows(rows, activeId) {
+        return rows.map((entry, i) => {
+            const id = `${this.listId}-opt-${i}`;
+            const selected = entry.id === this._value;
+            const meta = [entry.language, entry.description].filter(Boolean).join(' · ');
+            return html `<div
+        part="option"
+        id=${id}
+        role="option"
+        data-value=${entry.id}
+        ?data-synthetic=${entry.synthetic}
+        aria-selected=${selected ? 'true' : 'false'}
+        ?data-active=${id === activeId}
+      >
+        <span part="option-label">
+          <span>${entry.label}</span>
+          ${meta ? html `<span part="option-meta">${meta}</span>` : nothing}
+        </span>
+        ${entry.synthetic ? html `<span part="option-badge">${this.localize('notInCatalog')}</span>` : nothing}
+        ${this.preview && entry.previewUrl
+                ? html `<span
+              part="option-preview"
+              tabindex="-1"
+              aria-hidden="true"
+              @click=${(e) => this.onOptionPreviewClick(e, entry)}
+              >${this.previewingId === entry.id ? pauseIcon() : playIcon()}</span
+            >`
+                : nothing}
+      </div>`;
+        });
+    }
+    renderListbox(rows, activeId, emptyText) {
+        return html `
+      <div
+        part="listbox"
+        id=${this.listId}
+        role="listbox"
+        @mousedown=${this.onListboxMouseDown}
+        @click=${this.onListboxClick}
+      >
+        ${rows.length === 0
+            ? html `<div part="empty" role="option" aria-selected="false" aria-disabled="true">${emptyText}</div>`
+            : this.renderRows(rows, activeId)}
+      </div>
+    `;
+    }
+    renderLabel() {
+        return html `<label part="form-control-label" for=${this.controlId} ?hidden=${!this.label}>${this.label}</label>`;
+    }
+    renderHintError(hasError, hasHint) {
+        return html `
+      <div id="voice-picker-error" part="error" ?hidden=${!hasError}>
+        ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
+      </div>
+      <div id="voice-picker-hint" part="hint" ?hidden=${!hasHint}>
+        ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
+      </div>
+    `;
+    }
+    renderPreviewButton() {
+        if (!this.preview)
+            return html ``;
+        const candidate = this.previewCandidateId;
+        const playing = this.previewingId !== null && this.previewingId === candidate;
+        return html `
+      <button
+        part="preview-button"
+        type="button"
+        aria-pressed=${playing ? 'true' : 'false'}
+        aria-label=${this.previewButtonLabel}
+        ?disabled=${this.effectiveDisabled || !candidate}
+        @click=${this.onPreviewButtonClick}
+      >
+        ${playing ? pauseIcon() : playIcon()}
+      </button>
+    `;
+    }
+    renderClosed() {
+        const rows = this.effectiveEntries;
+        const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        const hasValue = this._value.length > 0;
+        const hasLabel = this.label.length > 0;
+        const hasHint = this.hasHintSlot || this.hint.length > 0;
+        const hasError = this.hasErrorSlot || this.errorText.length > 0;
+        const describedBy = [hasError ? 'voice-picker-error' : '', hasHint ? 'voice-picker-hint' : '']
+            .filter(Boolean)
+            .join(' ');
+        return html `
+      ${this.renderLabel()}
+      <div class="control-row">
+        <button
+          id=${this.controlId}
+          part="trigger"
+          type="button"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls=${this.listId}
+          aria-activedescendant=${activeId}
+          aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || this.localize('voice'))}
+          aria-describedby=${describedBy || nothing}
+          aria-required=${this.required ? 'true' : 'false'}
+          aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+          ?disabled=${this.effectiveDisabled}
+          @click=${this.onTriggerClick}
+          @keydown=${this.onTriggerKeyDown}
+          @blur=${this.onTriggerBlur}
+        >
+          ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
+          <span class="trigger-label" ?data-placeholder=${!hasValue}
+            >${hasValue ? this.labelFor(this._value) : this.placeholder}</span
+          >
+          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+        </button>
+        ${this.renderPreviewButton()}
+      </div>
+      ${this.renderListbox(rows, activeId, this.localize('voicePickerNoVoices'))}
+      ${this.renderHintError(hasError, hasHint)}
+    `;
+    }
+    renderFreeText() {
+        const rows = this.filteredEntries;
+        const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        const hasLabel = this.label.length > 0;
+        const hasHint = this.hasHintSlot || this.hint.length > 0;
+        const hasError = this.hasErrorSlot || this.errorText.length > 0;
+        const describedBy = [hasError ? 'voice-picker-error' : '', hasHint ? 'voice-picker-hint' : '']
+            .filter(Boolean)
+            .join(' ');
+        return html `
+      ${this.renderLabel()}
+      <div class="control-row">
+        <div part="combobox" @mousedown=${this.onComboMouseDown}>
+          ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
+          <input
+            id=${this.controlId}
+            part="combobox-input"
+            role="combobox"
+            aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || this.localize('voice'))}
+            aria-expanded=${this.open ? 'true' : 'false'}
+            aria-controls=${this.listId}
+            aria-activedescendant=${activeId}
+            aria-autocomplete="list"
+            aria-describedby=${describedBy || nothing}
+            aria-required=${this.required ? 'true' : 'false'}
+            aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+            autocomplete=${this.autocomplete || nothing}
+            spellcheck=${this.spellcheck}
+            autocapitalize=${this.autocapitalize || nothing}
+            autocorrect=${this.autoCorrect || nothing}
+            inputmode=${this.inputMode || nothing}
+            enterkeyhint=${this.enterKeyHint || nothing}
+            .value=${this.open ? this.query : this.labelFor(this._value)}
+            placeholder=${this.placeholder}
+            ?disabled=${this.effectiveDisabled}
+            @input=${this.onInput}
+            @keydown=${this.onInputKeyDown}
+            @focus=${this.onInputFocus}
+            @blur=${this.onInputBlur}
+          />
+          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+        </div>
+        ${this.renderPreviewButton()}
+      </div>
+      ${this.renderListbox(rows, activeId, this.localize('noMatches'))}
+      ${this.renderHintError(hasError, hasHint)}
+    `;
+    }
+    render() {
+        return this.closedMode ? this.renderClosed() : this.renderFreeText();
+    }
+}
+__decorate([
+    property()
+], LyraVoicePicker.prototype, "provider", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraVoicePicker.prototype, "catalog", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'allow-custom' })
+], LyraVoicePicker.prototype, "allowCustom", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraVoicePicker.prototype, "preview", void 0);
+__decorate([
+    property()
+], LyraVoicePicker.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraVoicePicker.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], LyraVoicePicker.prototype, "errorText", void 0);
+__decorate([
+    property()
+], LyraVoicePicker.prototype, "placeholder", void 0);
+__decorate([
+    property({ converter: spellcheckConverter })
+], LyraVoicePicker.prototype, "spellcheck", void 0);
+__decorate([
+    property()
+], LyraVoicePicker.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ attribute: 'autocorrect' })
+], LyraVoicePicker.prototype, "autoCorrect", void 0);
+__decorate([
+    property()
+], LyraVoicePicker.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'inputmode' })
+], LyraVoicePicker.prototype, "inputMode", void 0);
+__decorate([
+    property({ attribute: 'enterkeyhint' })
+], LyraVoicePicker.prototype, "enterKeyHint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraVoicePicker.prototype, "open", void 0);
+__decorate([
+    state()
+], LyraVoicePicker.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], LyraVoicePicker.prototype, "query", void 0);
+__decorate([
+    state()
+], LyraVoicePicker.prototype, "touched", void 0);
+__decorate([
+    state()
+], LyraVoicePicker.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], LyraVoicePicker.prototype, "hasErrorSlot", void 0);
+__decorate([
+    state()
+], LyraVoicePicker.prototype, "previewingId", void 0);
+//# sourceMappingURL=voice-picker.class.js.map