import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export interface LyraTokenInputEventMap{'lr-invalid':CustomEvent;input:InputEvent;change:Event;focus:FocusEvent;blur:FocusEvent;'lr-input':CustomEvent>;'lr-change':CustomEvent>;'lr-add':CustomEvent>;'lr-remove':CustomEvent<{value:string;index:number;}>;'lr-token-edit':CustomEvent<{value:string;previousValue:string;index:number;}>;} /** `` — an editable, form-associated list of removable tokens. * * Enter commits the typed draft into a token while there is one; with the draft empty it performs * the implicit form submission a native text field would (see `internal/submit-on-enter.ts` — the * internal input is in a shadow root and has no form owner, so the platform can never do it here). * A `delimiter` keystroke stays purely a commit key and never submits. Tab commits a nonempty * draft without preventing the key, so native focus traversal still advances. * Composing keyboard events, including legacy key code 229, remain with the draft or inline * editor without adding, removing, committing or closing tokens. * Host-root external descriptions precede local hint/error guidance on the native draft input * and follow live source replacement, removal, reconnection and document adoption. * Removing label, hint or error-text safely removes the copy without changing native * attribute-removal property readback. Editable token labels keep their text vertically centered. * `select()`, the selection getters/setters, `setSelectionRange()`, and `setRangeText()` expose the * native draft input's editing surface. Range edits synchronize the pending draft without * emitting user events, so a later delimiter/Enter/Tab/blur commit consumes the edited text. * `focus()` and `click()` are synchronous no-ops under own or fieldset-cascaded disablement, * including the same task that begins the disabled transition before Lit updates the draft input. * If a focused token surface disappears through its own remove action or a controlled * `value`/`defaultValue` shrink, focus moves to the nearest surviving equivalent surface, or to * the draft input when no token remains. A newer external focus destination always wins. * @customElement lr-token-input * @slot label - Visible label content. * @slot hint - Supporting text. * @slot error - Validation message. * @slot start - Adornment at the inline-start of the token/input row, before the tokens. * @slot end - Adornment at the inline-end of the token/input row, after the draft input. * @event input - Native `InputEvent` emitted after a user changes the token list. * @event change - Native commit `Event` emitted with `input`. * @event lr-input - Lyra input alias; detail is `{ value }` with the current token list. * @event lr-change - Lyra commit alias; detail is `{ value }` with the current token list. * @event focus - Native `FocusEvent` relayed from the draft input or inline token editor. * @event blur - Native `FocusEvent` relayed from the draft input or inline token editor. * @event lr-add - One or more tokens are about to be added in a single commit. Detail is * `{ value, values }`, where `value` is the final added token for compatibility and `values` is * the complete ordered batch. Cancelable -- call `preventDefault()` to veto the add (e.g. a * server-side validation check) and the tokens stay out of `value`; the typed draft text is left * in the input unchanged so the user can correct it, rather than being silently cleared. * @event lr-remove - A token is about to be removed; detail is `{ value, index }`. Cancelable -- * call `preventDefault()` to veto the removal (e.g. pending an async confirmation or a * protected-token check) and the token stays in `value` unchanged. * @event lr-token-edit - An existing token is about to be edited in place; detail is * `{ value, previousValue, index }`. Not emitted for a reverted, unchanged, emptied, or * duplicate-colliding edit -- those close the editor with no event. Cancelable -- call * `preventDefault()` to veto the edit and the token stays in `value` unchanged; the inline * editor stays open with the user's edited text intact so they can correct it, rather than * closing and discarding it. * @event lr-invalid - The token list 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. * @csspart form-control - Outer control wrapper. * @csspart form-control-label - Label. * @csspart input-wrapper - Token and input row. * @csspart token - Individual token. * @csspart token-label - The token's text, as the roving-focus edit trigger. Rendered only while * `editable` is set. Effective disablement removes every token label's tabindex, exposes * `aria-disabled="true"`, and retires internal focus; re-enabling restores one roving stop. * @csspart token-editor - The inline text field replacing a token's text while it is being edited. Rendered only while `editable` is set and that token is open for editing. * @csspart remove - Token remove button. * @csspart input - Native text input. * @csspart start - Wrapper around the `start` adornment slot; `hidden` while nothing is slotted. * @csspart end - Wrapper around the `end` adornment slot; `hidden` while nothing is slotted. * @csspart hint - Supporting text. * @csspart error - Validation message. * @cssprop [--lr-token-input-input-inline-size=var(--lr-size-8rem)] - `flex-basis` of the native text input within the token row. * @cssprop [--lr-token-input-min-input-inline-size=var(--lr-size-4rem)] - Inline-size floor of the native text input, so it stays usable once tokens wrap. * @cssprop [--lr-token-input-editor-inline-size=var(--lr-size-6rem)] - Inline size of the inline token editor opened by `editable`. * @cssprop --lr-token-input-padding - Input-wrapper padding, scaled by `size`. * @cssprop --lr-token-input-token-padding - Per-token chip padding, scaled by `size`. * @cssprop [--lr-token-input-gap=var(--lr-space-xs)] - Gap between form/row children. * @cssprop [--lr-token-input-token-gap=var(--lr-space-2xs)] - Gap inside token chips. * @cssprop [--lr-token-input-radius=var(--lr-radius)] - Row/token corner radius. `pill` changes its * private default to `--lr-radius-pill`; an inherited or direct public value still wins. * @cssprop [--lr-token-input-token-bg=var(--lr-color-brand-quiet)] - Token chip background. * @cssprop [--lr-token-input-action-hover-bg=var(--lr-color-brand-quiet)] - Edit/remove hover background. * @cssprop [--lr-token-input-edit-hover-bg=var(--lr-token-input-action-hover-bg)] - Editable token * label hover background, independently themeable from the remove action. * @cssprop --lr-token-input-edit-pressed-bg - Editable token label pressed background; defaults to * an active-state mix of `--lr-token-input-edit-hover-bg`. * @cssprop [--lr-token-input-remove-hover-bg=var(--lr-token-input-action-hover-bg)] - Remove action * hover background, independently themeable from the editable label. * @cssprop --lr-token-input-remove-pressed-bg - Remove action pressed background; defaults to an * active-state mix of `--lr-token-input-remove-hover-bg`. * @cssprop [--lr-token-input-focus-border-color=var(--lr-color-brand)] - Focused row border color. * @cssprop [--lr-token-input-invalid-border-color=var(--lr-color-danger)] - Invalid row border color. * @cssprop --lr-token-input-font-size - Input-wrapper/token font size, scaled by `size`. * @cssprop [--lr-token-input-control-min-height=var(--lr-form-control-height)] - Input-wrapper * block-size floor. Reads the shared form-control height ladder, so retuning * `--lr-theme-form-control-height-*` moves this control and every sibling field together. * @cssprop --lr-token-input-control-height - Exact input-wrapper height. Unset by default, which * leaves `--lr-token-input-control-min-height` as a floor only; set it to a length to both floor * and cap the row (e.g. to pixel-match a sibling field in the same toolbar row). An uncapped row * grows as tokens wrap; a capped row clips inline overflow and intentionally scrolls in the * block axis so wrapped tokens and their hit-area-floored actions remain reachable. Because it * is never declared by the component itself, it can be set from an ancestor or an outer-tree * rule as well as inline on the element. * @cssprop [--lr-token-input-fill=var(--lr-color-surface)] - Resting background of the input row. * @cssprop [--lr-token-input-border-color=var(--lr-color-border)] - Resting border color of the * input row. The invalid and focused states keep their own hooks and still win over it. * @cssprop [--lr-form-control-focus-shadow=none] - The shared field focus halo, painted as a * `box-shadow` while this control is focused. One name for every field-shaped control in the * library, so a halo is configured once rather than per component. Additive: the focus outline and * border cue are the accessibility answer to focus and are never replaced by it. * @cssprop [--lr-form-control-required-content=' *'] - The required marker appended to * `form-control-label` while `required` is set. Set it to `''` to suppress the marker, or to any * other quoted string (`' (required)'`, a localized word) to replace it. * @cssprop [--lr-form-control-required-color=var(--lr-color-danger)] - Required-marker color, * themeable independently of error text and invalid borders. * @cssprop [--lr-form-control-required-offset=0] - Inline space between the label text and the * required marker. * @cssstate required - Matches while `required` is set. * @cssstate optional - Matches while `required` is not set (the complement of `required`). * @cssstate valid - Matches while the control satisfies its constraints. * @cssstate invalid - Matches while it does not — including a pristine required control with no * tokens yet, exactly like native `:invalid`. * @cssstate user-valid - `valid`, but only after the user has interacted: blurred the text * input, `reportValidity()`, or a submission attempt. Not after a silent `checkValidity()` * alone. * @cssstate user-invalid - `invalid`, but only after that same interaction — a required control * nobody has touched yet is invalid without being styled as an error. * @status stable * @since 4.0.0 */ export declare class LyraTokenInput extends LyraElement{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;converter:{fromAttribute:(value:string|null)=>readonly string[]|null;toAttribute:(value:readonly string[]|null)=>string|null;};noAccessor:boolean;};};label:string;hint:string;errorText:string;placeholder:string; /** Forwarded to both native text inputs using the native explicit `"true"`/`"false"` * attribute vocabulary. */ spellcheck:boolean; /** Forwarded to both native text inputs. Empty preserves the browser default. */ autocapitalize:string;private autocorrectValue; /** Native editing-assistance state forwarded to both text inputs. Reads are boolean; writes * accept booleans and the native/Shoelace string vocabulary (`off`/`false` disable it). */ get autocorrect():boolean;set autocorrect(next:boolean|string); /** Accessible-name override forwarded to the input wrapper and draft input. Attribute presence * wins, including an explicitly empty `aria-label`, which suppresses visible-label linkage. */ accessibleLabel:string; /** Visual size — the library-wide `2xs`–`xl` ladder shared with `lr-input`. The Web Awesome / * Shoelace spellings `small`/`medium`/`large` are accepted for `s`/`m`/`l`, so a migration is a * tag rename with no attribute rewrite. */ size:LyraSize; /** Rounds the token row's corners to a full pill, mirroring `lr-input`'s own `pill`. It is a * single override of `--lr-token-input-radius`, which the tokens share with the row, so the * chips round with it. */ pill:boolean;allowDuplicates:boolean; /** Allow editing an existing token in place: each token becomes a roving tab stop that opens an * inline editor on click, Enter, or F2. Defaults to `false`, in which case the token row renders * exactly as it does without this feature and stays non-focusable. Own or fieldset-cascaded * disablement removes every edit trigger from focus and marks it `aria-disabled="true"`; one * roving stop is restored when the control becomes enabled again. */ private _editable;get editable():boolean;set editable(next:boolean); /** Character(s) that split a typed draft into several tokens, and (when a single character) the * keystroke that commits the draft. `null` — from the property, or from `delimiter="none"` / * `delimiter=""` — disables both, so a token may contain the delimiter verbatim. Defaults to `,`. */ delimiter:string|null;private draft;private touched; /** Index of the token whose inline editor is open, or `-1` when none is. */ private editingIndex;private editDraft; /** Roving tab stop of the token row. Read through `activeTokenIndex`, which clamps it against the * current token count so a shrinking list can never leave the row with no tab stop. */ private rovingIndex;private focusEditorPending;private focusTokenPending;private tokenFocusRepairPending?; /** One native blur can be followed by a teardown blur when its commit removes the focused editor. */ private editorBlurRelayed;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private hasStartSlot;private hasEndSlot;private inputEl?;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;private internals;private validityController; /** Consumer-supplied validation message reflected through `custom-error`. */ customError:string|null;private labelId;private hintId;private errorId;private _value;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private _fieldsetDisabled;private _name;private _required;private _disabled;get value():readonly string[];set value(next:readonly string[]); /** Reflected JSON-array reset default; changing it never overwrites a dirty live token list. */ get defaultValue():readonly string[];set defaultValue(next:readonly string[]|null); /** The form submission key, reflected synchronously for native form APIs. * This control keys its `FormData` entries directly off `name` (see * `syncValidity()`), so a rename must rebuild that `FormData` in the same * tick -- mirrors ``'s identical `name` setter. */ get name():string;set name(next:string);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean; /** Effective disabled state: this element's own `disabled` OR an ancestor * `
`'s inherited state -- mirrors native ``, whose * own `disabled` IDL property/attribute is never mutated by a fieldset. */ get effectiveDisabled():boolean; /** * Called by the browser when an ancestor `
` toggles. * Tracked separately from the consumer's own `disabled` (see * `effectiveDisabled`) so a consumer's explicit `disabled` survives the * fieldset re-enabling instead of being permanently overwritten. */ formDisabledCallback(disabled:boolean):void;private markInteracted;checkValidity():boolean; /** Reporting is what a submit attempt does, and a failed submit is precisely when native * `:user-invalid` starts matching — so it counts as interaction, exactly as it does in the * `FormAssociated` mixin. (A submission attempt itself never calls this method -- it drives * `ElementInternals` directly -- which is what `installInteractionOnInvalid()` above covers.) */ reportValidity():boolean; /** * Sets or clears a consumer-supplied validation error — the standard channel for a rejection no * client-side constraint can express ("that tag is reserved"). A non-empty `message` raises * `customError` and becomes `validationMessage`, so the control fails `checkValidity()`, blocks * submission, and matches `:state(invalid)`; `''` clears it. * * Clearing restores the control's own computed validity rather than forcing it valid: a * `required` control with no tokens stays `valueMissing`. The custom error also survives every * intrinsic recomputation in between (each token add/remove/edit re-runs `syncValidity()`) and a * `form.reset()` — matching a native control, where only another `setCustomValidity('')` clears * it. * * The message is caller-supplied content, so it is used verbatim and never localized here. */ setCustomValidity(message:string):void; /** Reads both component state and the UA's synchronous fieldset cascade before actions mutate * or enter one of this compound control's still-rendered native focus surfaces. */ private get liveDisabled();focus(options?:FocusOptions):void;blur():void; /** Focuses the draft text input, mirroring what a real click on the token row would land on -- * `HTMLElement.prototype.click()` is otherwise a no-op on a custom element with no native click * semantics of its own (matches ``'s identical override). */ click():void; /** Selects the complete pending draft in the internal native text input. */ select():void; /** Native draft selection start, or `null` before the internal input renders. */ get selectionStart():number|null;set selectionStart(value:number|null); /** Native draft selection end, or `null` before the internal input renders. */ get selectionEnd():number|null;set selectionEnd(value:number|null); /** Native draft selection direction, or `null` before the internal input renders. */ get selectionDirection():HTMLInputElement['selectionDirection'];set selectionDirection(value:HTMLInputElement['selectionDirection']); /** Passthrough to the native draft input's selection range. */ setSelectionRange(selectionStart:number,selectionEnd:number,selectionDirection?:HTMLInputElement['selectionDirection']):void; /** Applies a native event-silent range edit and synchronizes the pending draft. */ setRangeText(replacement:string,start?:number,end?:number,selectMode?:SelectionMode):void;protected willUpdate(changed:PropertyValues):void; /** Shared with every other form control: disabled (own or fieldset-cascaded) bars validation. */ private get barredFromValidation();private syncValidity;private updateValue;private addDraft; /** Clears lifecycle-only editing state before focus teardown can turn a blur into a commit. */ private discardTransientState; /** Retire every focus/edit surface when own or fieldset disablement becomes effective. */ private retireDisabledInteraction; /** Capture focus before a controlled shrink removes its shadow descendant. The shared repair * guard prevents this deferred move from overriding a newer explicit focus destination. */ private captureTokenFocusRepair;private removeToken; /** * The token row's roving tab stop, clamped to the current token count. Derived rather than * stored so a token list that shrinks below the focused index still leaves exactly one tab stop. */ private get activeTokenIndex(); /** Open the inline editor for a token, seeded with that token's full current text. */ private startEdit; /** Close the editor discarding its contents, returning focus to the token it was opened from. */ private cancelEdit; /** * Close the editor, applying its contents when they are a usable change. An emptied editor * cancels rather than removing the token -- removal stays the explicit job of the remove button * -- and an edit colliding with an existing token under `allowDuplicates = false` is discarded, * mirroring how `addDraft()` skips a duplicate candidate instead of rejecting the whole entry. * None of those "no usable change" cases fire `lr-token-edit`, so the editor closes for them * unconditionally. * * A genuine change emits `lr-token-edit` as cancelable and checks `defaultPrevented` *before* * closing the editor or mutating `value` -- the same emit-then-check-then-mutate shape * `removeToken()` uses for `lr-remove`. A vetoed edit leaves the editor open with the user's * edited (uncommitted) text intact, so they can correct it, rather than closing and discarding * it. Only past that veto check does the editor close first, so the teardown blur it triggers * re-enters this method as a no-op rather than committing (and emitting `change`) a second time. */ private commitEdit;private moveRovingFocus;private onTokenKeyDown;private onEditInput;private onEditFocus;private onEditKeyDown;private onEditBlur;private onInput;private onKeyDown;private onBlur;private onFocus;private stopInternalChange;private onLabelSlotChange;private onHintSlotChange;private onErrorSlotChange;private onStartSlotChange;private onEndSlotChange;formResetCallback():void;private restoreLiveValueFromDefault;formStateRestoreCallback(state:string|File|FormData|null,_mode?:'restore'|'autocomplete'):void; /** * Focus moves are deferred to here rather than run from the handlers themselves: the editor and * the token it replaces only exist after the render that this update produced. */ protected updated(changed:PropertyValues):void;private renderRemoveButton;private renderEditableToken;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-token-input':LyraTokenInput;}}