import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import type{LyraSelectionDirection}from'../../../internal/shared-unions.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraCatalog,type LyraCatalogEntry}from'../../../internal/catalog-picker.js';export type{LyraCatalog,LyraCatalogEntry}from'../../../internal/catalog-picker.js'; /** A catalog row: a selectable model, keyed by `id` with a display `label`. */ export interface LyraModelCatalogEntry extends LyraCatalogEntry{ /** Optional literal icon hint (for example, an emoji), rendered decoratively before `label`. */ icon?:string;} /** Direction reported by the free-text input's native selection APIs. */ export type LyraModelSelectSelectionDirection=LyraSelectionDirection;export interface LyraModelSelectEventMap{'lr-invalid':CustomEvent;'lr-change':CustomEvent<{value:string;inCatalog:boolean;}>;input:Event;change:Event;blur:FocusEvent;focus:FocusEvent;} /** * `` — a provider/model picker that renders as a closed * dropdown when a fixed `catalog` is available, or as a filterable free-text * combobox when it isn't (or when `allow-custom` explicitly permits typing * something outside the catalog). Built directly on the shared * trigger-button/aria-activedescendant listbox technique `` uses * and the filter-as-you-type suggestion-popup technique `` * uses — not by composing either element, since the mode switch and the * stale-value handling below are specific to this control. * * A `value` that isn't present in `catalog` (e.g. a model id saved from a * provider whose live catalog has since changed) is never silently dropped: * `effectiveEntries` appends it to the rendered option list as a synthetic, * visually-distinct row (dashed border, italic label, "not in catalog" * badge — see `model-select.styles.ts`) computed fresh from `catalog` + * `value` on every render, without ever mutating the `catalog` property * itself. * * Object-shaped catalog rows can include a literal `icon`, rendered decoratively as the leading * `option-icon` part in either listbox mode. It is presentation only: the row's accessible name * remains its `label`. * * A catalog row may also set `disabled`, marking it non-actionable: `aria-disabled="true"` * replaces its selected/active affordances, activating it (click or keyboard) commits nothing and * changes no state, and arrow-key/Home/End active-descendant navigation steps past it instead of * landing on it. Omitted or `false` renders the row exactly as before this field existed. * * Ships the standard label/hint/error form-control chrome: properties, matching named slots, and * the complete `form-control` frame. Each surface is opt-in; left unset, it renders no chrome. * A focused trigger/input follows a rendering-mode replacement. If that new owner is disabled or * inert, focus returns to the available element that led into the picker, or to the stable * `form-control` owner when there is no return target; a newer external focus move always wins. * Array-valued catalogs are clone-owned, bounded readonly snapshots. Create and reassign a new * catalog array after changing its rows. * * @customElement lr-model-select * @event lr-change - The selected/typed value changed. `detail: { value: string; inCatalog: boolean }`. * @event {Event} change - Owner-realm native event fired alongside `lr-change`, mirroring * ``/``'s value-change pair so native form bindings/framework `v-model` * handlers behave consistently across the picker family. * @event {Event} input - A payload-preserving owner-realm `InputEvent` on each free-text edit, and * a plain native `Event` alongside `change` when either rendering mode commits a value. * @event {FocusEvent} blur - Owner-realm native blur relayed once from the active control in either * rendering mode, retaining `relatedTarget`. * @event {FocusEvent} focus - Owner-realm native focus relayed once from the active control in * either rendering mode, retaining `relatedTarget`. * @event lr-invalid - The picker failed a validity check. Cancelable: calling `preventDefault()` * also cancels the native `invalid` event behind it, suppressing the browser's own validation * bubble so an app can present the failure its own way. * @slot label - Custom visible label content. * @slot hint - Custom hint content. * @slot error - Custom error content. * @cssstate required - Matches while `required` is set. Style with `lr-model-select:state(required)`. * @cssstate optional - Matches while `required` is not set — the complement of `required`. * @cssstate valid - Matches while the control satisfies its constraints, including any * `setCustomValidity()` error. * @cssstate invalid - Matches while it does not — from the very first render, before the user has * touched anything. * @cssstate user-valid - `valid`, but only after the user has interacted: a blur of the * trigger/combobox, `reportValidity()`, or a submission attempt. Not after a silent * `checkValidity()` alone. * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this * rather than `invalid`: a pristine required picker is genuinely invalid, but colouring it red * before the user has done anything is hostile. * @csspart form-control - The complete label, control, hint, error, and listbox frame. * @csspart form-control-label - The `