import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraAppearance,LyraSize}from'../../../internal/variants.js';import type{LyraSelectionDirection}from'../../../internal/shared-unions.js';import{type LyraFormValidator}from'../form-validator.js'; /** Which characters a segment accepts. */ export type OtpInputType='numeric'|'alpha'|'alphanumeric'; /** Case transform applied as characters are entered. */ export type OtpInputCase='preserve'|'upper'|'lower'; /** Direction of the native compact-string selection exposed by the host editing facade. */ export type OtpInputSelectionDirection=LyraSelectionDirection; /** Segment fill treatment, including the OTP-specific joined `contained` treatment. */ export type OtpInputAppearance=Extract |'contained';export interface LyraOtpInputEventMap{input:InputEvent;change:Event;focus:FocusEvent;blur:FocusEvent;'lr-clear':CustomEvent;'lr-invalid':CustomEvent;'lr-complete':CustomEvent<{value:string;}>;}declare class LyraOtpInputBase extends LyraElement{static styles:import("lit").CSSResultGroup[];}declare const LyraOtpInput_base:typeof LyraOtpInputBase&(new(...args:any[])=>import("../../../lyra.js").FormAssociatedInterface &import("../../../internal/form-associated.js").FormAssociatedSubclassInterface); /** * `` — a form-associated one-time-code field: several character segments that * together hold one value. * * The segments are presentational. A single real `` sits transparently across them and owns * focus, selection and the value. It remains the native integration point for SMS autofill * (`autocomplete` defaults to `one-time-code`), IME composition and mobile keyboards, and keeps the * control to one tab stop rather than one per character. Fixed-cell keyboard and paste handlers map * native editing intents into the visual cells without exposing one input per character. * * Programmatic `value` writes, default propagation, form resets, and browser state restoration all * pass through the same sanitizer as typing and remain event-silent. `resetValidity()` clears a * consumer-supplied custom error while restoring the current intrinsic constraints. * * Keyboard editing uses fixed cells: physical Left/Right move to the visually adjacent segment * (with the index delta mirrored under RTL), Backspace clears the current cell and moves back, * Delete clears it in place, and neither deletion shifts trailing characters. A bare Enter flushes * a pending `change` and requests one submission from the owning form through the shared * Enter-to-submit gate, so a modifier-held Enter, an Enter that commits an IME candidate, and an * Enter a listener above has already vetoed all leave the form alone, and the form's default button * reaches the submission as `SubmitEvent.submitter`. A full paste into an empty field fills accepted characters from * the first cell in one input operation. The public/submitted string concatenates occupied cells; * middle empty cells are a visual editing state and are not encoded in that string. A nonempty * native selection maps its compact offsets back to occupied cells for replacement or deletion. * The host forwards the native selection getters, setters, and range-editing methods against that * same compact string. Range edits pass through the sanitizer, synchronize form value and * validity, and remain event-silent like a programmatic `value` write. * * Component-scoped theme inputs remain undeclared on the host, so values inherited from an * ancestor theme wrapper override appearance fallbacks. A value set directly on the OTP input * still wins through normal custom-property inheritance. * * Host aria-describedby targets supplement local error/hint guidance on the native control * input. Relationships track missing IDs, target replacement, removal/reinsertion, reconnect, * and document adoption. * * @customElement lr-otp-input * @slot label - Rich label content used while the `label` attribute is empty. * @slot hint - Rich supporting text used while the `hint` attribute is empty. * @slot error - Rich validation text, replacing the `errorText` attribute. * @event input - The real input changed; relayed as one native `InputEvent` with its editing * payload intact. Intermediate IME composition waits for the final non-composing event. * @event change - The value changed and the field settled on blur or Enter; relayed as one native * `Event`. * @event focus - Native focus relayed once from the real input. * @event blur - Native blur relayed once from the real input. * @event lr-clear - The value was cleared. Bubbling, composed, and non-cancelable. * @event lr-invalid - The one-time-code input failed a validity check. Cancelable: * `preventDefault()` forwards to the native `invalid` event, suppressing the browser's own * validation bubble and the focus/scroll `reportValidity()` would otherwise perform. * @event lr-complete - The field transitions from incomplete to every segment filled. * `detail: { value }`. Cancelable; preventing it suppresses `autosubmit` for that completion. The * autosubmission is deferred one task, so a listener may call `preventDefault()` after an `await`. * @cssstate --blank - Matches while no characters have been entered. * @cssstate --filled - Matches while every segment is filled. * @cssstate disabled - Matches while the control is disabled, including through a fieldset. * @cssstate readonly - Matches while `readonly` is set. * @cssstate required - Matches while `required` is set. Style with `lr-otp-input: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: typing, a blur, or a * `reportValidity()` call (which is what a submit attempt runs). * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this * rather than `invalid`: a pristine required field is genuinely invalid, but colouring it red * before the user has entered a digit is hostile. * @csspart base - The outer wrapper; retained alias for `form-control`. * @csspart form-control - The outer wrapper; shared form-control alias for `base`. * @csspart label - The field label; retained alias for `form-control-label`. * @csspart form-control-label - The field label; shared form-control alias for `label`. * @csspart field - Retained Lyra alias for the row of segments. * @csspart segments - The allocation-bounded, horizontally scrollable row of fixed-size segments; * it carries the shared minimum target floor. * @csspart control - The real, visually transparent input. * @csspart segment - One character segment. Carries `active`, `masked`, `placeholder-mask` and * `invalid` in the part name so a consumer can target any of those states through `::part()`. * @csspart separator - Retained Lyra alias for a literal separator emitted by `format`. * @csspart segment-literal - A literal separator emitted by `format`. * @csspart hint - Supporting text. * @csspart error - Validation text. * @cssprop [--lr-otp-input-mask-char='•'] - The glyph shown for a masked character, and for every * empty segment while `with-mask` is set. Must be a quoted string, because it is used as CSS * `content`. * @cssprop [--mask-char='•'] - Mapped alias for `--lr-otp-input-mask-char`. * @cssprop [--segment-border-radius=var(--lr-form-control-radius,var(--lr-radius))] - Corner radius * of a segment. * @cssprop [--segment-gap=var(--lr-space-xs)] - Gap between segments; ignored by `contained`. * @cssprop [--segment-size=2.5em] - Exact inline and block size of each non-shrinking segment at * the default size tier. * @cssprop [--lr-otp-input-segment-size=var(--lr-theme-otp-input-segment-size,2.5em)] - Internal * role token supplying the standalone segment size when `--segment-size` is unset. * Element-scoped: every `lr-*` host re-declares this token from `--lr-theme-otp-input-segment-size` * in the shared token layer, so an ancestor rule that sets `--lr-otp-input-segment-size` directly * is reset at the first intervening `lr-*` component and never reaches this element. Set it * directly on this element, or set `--lr-theme-otp-input-segment-size` on an ancestor to resize * every OTP input in the subtree at once. * @cssprop [--lr-otp-input-segment-border-color=var(--lr-color-border)] - Border color of each * segment. * @cssprop [--lr-otp-input-segment-fill=transparent] - Background fill of each segment. * @cssprop [--lr-otp-input-segment-radius=var(--lr-form-control-radius,var(--lr-radius))] - * Corner radius of each segment. * @cssprop [--lr-otp-input-active-border-color=var(--lr-focus-ring-color)] - Active segment border. * @cssprop [--lr-otp-input-active-ring-color=var(--lr-focus-ring-color)] - Active segment outer ring. * @cssprop [--lr-otp-input-invalid-border-color=var(--lr-color-danger)] - Invalid segment border. * @cssprop [--lr-form-control-required-content=' *'] - The required-field marker rendered after the * label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a * localized word) to replace it. Caller-supplied content, so it is never localized here. * @cssprop [--lr-form-control-required-color=var(--lr-color-danger)] - Color of that marker, * retunable without touching any other danger-coloured surface. * @cssprop [--lr-form-control-required-offset=0] - Inline space between the label text and the * marker. * @status stable * @since 8.0.0 */ export declare class LyraOtpInput extends LyraOtpInput_base{ /** Public WA-compatible intrinsic validator catalog. */ static get validators():LyraFormValidator[]; /** Visible label. When nonempty, it takes precedence over rich `label`-slot content. */ label:string; /** Supporting text below the field. When nonempty, it takes precedence over the `hint` slot. */ hint:string; /** Validation text shown immediately below the field. It sets the internal input's ARIA invalid * state; rich `error`-slot content takes precedence when supplied. */ errorText:string; /** Visual fill treatment for each segment, or a single joined `contained` field. */ appearance:OtpInputAppearance; /** Automatically focus the real input after the first client render. */ autofocus:boolean; /** Submit the owning form after an un-canceled `lr-complete`, one task later so an asynchronous * listener can still veto it. Replacing or restoring the code before that task runs cancels * the stale submission. The form's default button is resolved as the submitter. */ autosubmit:boolean; /** Segment size on the shared form-control ladder. An unset size inherits its containing context; * standalone rendering falls back to `m`. */ size:LyraSize; /** Number of character segments. Ignored when `format` is set. */ length:number; /** * Segment layout with literal separators — `#` marks a segment, any other character becomes a * separator. `format="###-###"` renders two groups of three joined by a dash. Overrides `length` * when its bounded parsed prefix contains at least one `#`; a literal-only parsed prefix falls * back to `length`. Only the first 4,096 UTF-16 code units are parsed, and no more than 32 * segments are retained. */ format:string; /** Which characters are accepted; also drives the mobile keyboard through `inputmode`. */ type:OtpInputType; /** Case transform applied as characters are entered. */ case:OtpInputCase; /** Show entered characters as the mask glyph instead of their real value. Display-only. */ mask:boolean; /** * Show the mask glyph in empty segments, so the field reads as a fixed-length code before any * entry. Independent of `mask`: entered characters stay visible unless `mask` is also set. */ withMask:boolean; /** Display the value without allowing edits. Unlike `disabled`, it still submits and focuses; * intrinsic required/completeness validity is suspended until editing is enabled again. */ readonly:boolean; /** Native autofill hint. Defaults to the SMS one-time-code value. */ autocomplete:string;private focused;private hasLabelSlot;private hasHintSlot;private hasErrorSlot; /** Intrinsic invalid styling is only shown once the user has actually engaged with the field. */ private touched;private control?;private labelSlotEl?;private hintSlotEl?;private errorSlotEl?;private readonly labelId;private readonly hintId;private readonly errorId;private activeSegmentIndex;private segmentValues; /** The last raw string passed to the `value` setter, before length/format-dependent truncation. * `willUpdate()` re-derives the live value from this (not from the already-truncated `value`) * whenever `type`/`case`/`length`/`format` changes, so a `value` assignment that lands in the * same batched update as a widening `length`/`format` (e.g. `el.value = '12345678'; el.length = * 8;`, or the same template-binding order) never permanently loses the characters truncated * against the stale, not-yet-updated segment count. */ private rawValue;private segmentEditPendingChange; /** Invalidates a deferred autosubmission whose completion has since been superseded. */ private autosubmitToken;private parsedFormatSource?;private parsedFormatCells?; /** The real native input used for focus, selection, autofill, and IME. */ get input():HTMLInputElement|null; /** Native control passed to constraint-validation UI as its visual anchor. */ get validationTarget():HTMLInputElement|null; /** Live value normalized through the same character/length contract as native editing. At most * the first 4,096 UTF-16 code units are inspected, stopping earlier once every segment is full. */ get value():string;set value(next:string|null); /** The reset default uses the same sanitizer when it becomes live; changing it also retires a * queued autosubmission, even while a dirty live value prevents immediate propagation. */ get defaultValue():string;set defaultValue(next:string); /** Parses a bounded source prefix, at most 32 segments, and coalesces every literal run into one * cell, so an adversarial format cannot cause unbounded preprocessing or template output. */ private get formattedCells(); /** Segment count actually rendered: a valid `format`'s `#` count, else `length`. */ private get renderedSegmentCount(); /** Mapped read-only name for the number of segments derived from `format` or `length`. */ get effectiveLength():number;private get cells(); /** Scans a bounded source prefix, drops characters the current `type` rejects, applies `case`, * and truncates to the rendered count — the single funnel every live path goes through. */ private sanitize;private packSegmentValues;private get filledSegmentCount();private normalizedSegmentValues;private setActiveSegment; /** * Submits the owning form the way `internal/submit-on-enter.ts` does for a keystroke: through the * form's resolved default button, so `SubmitEvent.submitter` — and with it the button's own * `name`/`value` entry and its `formaction`/`formmethod`/`formnovalidate` overrides — survives an * autosubmission exactly as it survives a real click. `requestSubmit()`, never `submit()`, so * interactive constraint validation still runs. */ private submitOwningForm;private completeIfTransition;private commitSegmentEdit; /** Maps the real input's compact-string selection back to the occupied visual cells. Empty * fixed cells have no public-string offset, so they are deliberately skipped. */ private get selectedSegmentRange(); /** Maps a compact-string caret offset to the first visual cell at that boundary. */ private segmentIndexAtCompactOffset; /** Keeps fixed-cell keyboard editing aligned with a public compact-string selection write. */ private syncActiveSegmentFromSelection; /** Start offset of the native compact-string selection, or `null` before first render. */ get selectionStart():number|null;set selectionStart(value:number|null); /** End offset of the native compact-string selection, or `null` before first render. */ get selectionEnd():number|null;set selectionEnd(value:number|null); /** Direction of the native compact-string selection, or `null` before first render. */ get selectionDirection():OtpInputSelectionDirection|null;set selectionDirection(value:OtpInputSelectionDirection|null);focus(options?:FocusOptions):void;blur():void;click():void; /** Selects the whole compact code. Fixed-cell typing or deletion honors the selected range. */ select():void; /** Sets the selection on the compact code and maps its start back to the visual fixed cells. */ setSelectionRange(start:number|null,end:number|null,direction?:OtpInputSelectionDirection):void;setRangeText(replacement:string):void;setRangeText(replacement:string,start:number,end:number,selectMode?:SelectionMode):void; /** Clears the live code, returns focus to the field, and emits `lr-clear` when a value changed. */ clear():void;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;disconnectedCallback():void;reportValidity():boolean;protected firstUpdated(changed:PropertyValues):void;adoptedCallback():void;protected updated(changed:PropertyValues):void;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;willUpdate(changed:PropertyValues):void;private syncOtpStates; /** * Recomputes the OTP-specific constraints. Barred controls short-circuit first, through the same * `isBarredFromValidation()` predicate the base mixin uses — this override used to check * `readonly` alone, so a `` (or one inside a `
`) * still reported `valueMissing` and published `:state(invalid)`/`:state(user-invalid)`, which no * barred native control does. */ private updateValidity;private onInput;private onKeyDown;private onPaste;private onChange;private flushPendingChange;private onFocus;private onBlur;private onLabelSlotChange;private onHintSlotChange;private onErrorSlotChange;private applyLabelSlotAssignment;private applyHintSlotAssignment;private applyErrorSlotAssignment;private renderSegment;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-otp-input':LyraOtpInput;}}export{};