@aceshooting/lyra-ui 26.0.0 → 28.0.0

package/dist/components/forms/locale-picker/locale-picker.class.d.ts

@@ -1,4 +1,4 @@
-import type{LyraLocaleLoader}from'../../../internal/locale-loader.js';import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraLocaleDirection}from'../../../internal/localization.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';
+import type{LyraLocaleLoader}from'../../../internal/locale-loader.js';import{type TemplateResult,type PropertyValues}from'lit';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import type{LyraLocaleDirection}from'../../../internal/localization.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';
 /** One offered locale row. `label` overrides the derived `localeNativeName(tag)` endonym when
 *  given -- e.g. offering a locale before its strings are registered ("Français (bientôt)").
 *  `country` overrides the row's derived flag country when given -- e.g. showing Lebanon's flag
@@ -172,7 +172,7 @@ export interface LyraLocaleChangeDetail{value:string;previousValue:string;direct
 * @status stable
 * @since 6.0.0
 */
-export declare class LyraLocalePicker extends LyraElement<LyraLocalePickerEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};};private _localeLoader?;
+export declare class LyraLocalePicker extends LyraFormControlElement<LyraLocalePickerEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};};private _localeLoader?;
 /** Optional catalog loader. Selection waits for it before changing the value or page locale.
 * Import loadLyraLocale from the optional locale-loader.js entry to load built-in catalogs.
 * Unset preserves synchronous selection. Failures keep the previous value and offer retry;
@@ -238,7 +238,7 @@ get open():boolean;set open(next:boolean);
 *  tag rename with no attribute rewrite. */
 size:LyraSize;private activeIndex;private searchQuery;private touched;private readonly slotPresence;private registryTick;private triggerElement?;private searchElement?;private searchAnnouncements?;private searchFocusGeneration;private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
-customError:string|null;private listId;private controlId;private cleanup?;private placedTopLayer?;private listboxHidden;private closeSettleToken;private overlayHandle?;private readonly pointer;private stopRegistrySubscription?;private _value;private _open;private _fieldsetDisabled;private _name;private _disabled;private _required;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private readonly typeBuffer;private activeScrollGeneration;private localizedValidityLocale;private localizedIntrinsicMessage;constructor();private get liveDisabled();
+customError:string|null;private listId;private controlId;private cleanup?;private placedTopLayer?;private listboxHidden;private closeSettleToken;private overlayHandle?;private readonly popupController;private stopRegistrySubscription?;private _value;private _open;private _fieldsetDisabled;private _name;private _disabled;private _required;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private readonly typeBuffer;private activeScrollGeneration;private localizedValidityLocale;private localizedIntrinsicMessage;constructor();private get liveDisabled();
 /** Focus the internal trigger unless the form control is effectively disabled. */
 focus(options?:FocusOptions):void;
 /** Blur the internal trigger or the optional focused search input. */
@@ -250,7 +250,7 @@ click():void;
 /** Native filter input when searchable, otherwise null. After editing its value directly,
 * dispatch a native input event to update filtering; this never changes the committed locale.
 * The field remains disabled while the popup is closed. */
-get input():HTMLInputElement|null;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;private localDescriptionIds;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;protected willUpdate(changed:PropertyValues):void;
+get input():HTMLInputElement|null;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);private localDescriptionIds;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;protected willUpdate(changed:PropertyValues):void;
 /** The current locale tag (empty string when nothing is committed). */
 get value():string;set value(next:string);
 /** Reflected current reset default; changing it never overwrites a dirty live `value`. */
@@ -272,4 +272,4 @@ get effectiveDisabled():boolean;private updateValidity;private refreshLocalizedI
 *
 * The message is caller-supplied content, so it is used verbatim and never localized here.
 */
-setCustomValidity(message:string):void;private get normalizedEntries();private entriesCache?;private visibleCache?;private normalizeSearch;private get visibleEntries();private clearSearch;private queueSearchFocus;private get previewTag();private entryFor;private labelFor;private show;private hide;private dismissFromEscape;private onDocPointer;private bindDocumentPointer;private unbindDocumentPointer;private activatePopupOverlay;private deactivatePopupOverlay;private syncPopup;private settleClosedLayout;protected updated(changed:PropertyValues):void;private commitDispatching;private valueWriteVersion;private loadGeneration;private loadAnnouncements?;private loadingTag?;private loadFailureTag?;private cancelLocaleLoad;private announceLoad;private commit;private retryLocaleLoad;private onTriggerClick;private onTriggerBlur;private onTriggerFocus;private isSearchFocusTransfer;private onSearchInput;private onSearchChange;private onSearchKeyDown;private typeAhead;private setActiveIndex;private queueActiveScroll;private onKeyDown;private onListboxMouseDown;private onListboxClick;private renderRows;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-locale-picker':LyraLocalePicker;}}
+setCustomValidity(message:string):void;private get normalizedEntries();private entriesCache?;private visibleCache?;private normalizeSearch;private get visibleEntries();private clearSearch;private queueSearchFocus;private get previewTag();private entryFor;private labelFor;private show;private hide;private dismissFromEscape;private onDocPointer;private activatePopupOverlay;private deactivatePopupOverlay;private syncPopup;private settleClosedLayout;protected updated(changed:PropertyValues):void;private commitDispatching;private valueWriteVersion;private loadGeneration;private loadAnnouncements?;private loadingTag?;private loadFailureTag?;private cancelLocaleLoad;private announceLoad;private commit;private retryLocaleLoad;private onTriggerClick;private onTriggerBlur;private onTriggerFocus;private isSearchFocusTransfer;private onSearchInput;private onSearchChange;private onSearchKeyDown;private typeAhead;private setActiveIndex;private queueActiveScroll;private onKeyDown;private onListboxMouseDown;private onListboxClick;private renderRows;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-locale-picker':LyraLocalePicker;}}

package/dist/components/forms/locale-picker/locale-picker.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlace as place,awaitPopupAnimations,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{TypeAheadBuffer}from"../../../internal/type-ahead-buffer.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{getDisplayNames,resolveIntlLocale}from"../../../internal/intl-cache.js";import{activeElementIn}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocale,getLyraLocaleDirection,getRegisteredLyraLocales,subscribeLyraLocaleRegistry,setLyraLocale}from"../../../internal/localization-runtime.js";import{localeNativeName}from"../../media/flag/language-map.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./locale-picker.styles.js";import{autocorrectConverter,declaredDefaultConverter,spellcheckConverter}from"../../../internal/converters.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{DocumentPointerListener}from"../../../internal/document-pointer.js";import{revealRow}from"../../../internal/reveal-row.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_loading,LYRA_DEFAULT_localePickerEmpty,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired,LYRA_DEFAULT_localePickerSearchLabel,LYRA_DEFAULT_retry,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();const MAX_LOCALE_ENTRIES=512,localeSpellcheckConverter={...spellcheckConverter,fromAttribute:(value,type)=>value===null?void 0:spellcheckConverter.fromAttribute?.(value,type)};function snapshotLocaleCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[];for(let index=0;index<Math.min(source.length,MAX_LOCALE_ENTRIES);index+=1)try{const raw=source[index];if(typeof raw=="string"){raw.length>0&&rows.push(raw);continue}if(raw===null||typeof raw!="object")continue;const candidate=raw,tag=candidate.tag,label=candidate.label,country=candidate.country;if(typeof tag!="string"||tag.length===0||label!==void 0&&typeof label!="string"||country!==void 0&&typeof country!="string")continue;rows.push(Object.freeze({tag,...label===void 0?{}:{label},...country===void 0?{}:{country}}))}catch{}return Object.freeze(rows)}class LyraLocalePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,loading:LYRA_DEFAULT_loading,localePickerEmpty:LYRA_DEFAULT_localePickerEmpty,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired,localePickerSearchLabel:LYRA_DEFAULT_localePickerSearchLabel,retry:LYRA_DEFAULT_retry,statusError:LYRA_DEFAULT_statusError}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get localeLoader(){return this._localeLoader}set localeLoader(next){const previous=this._localeLoader;previous!==next&&(this.cancelLocaleLoad(),this._localeLoader=next,this.requestUpdate("localeLoader",previous))}get locales(){return this._locales}set locales(next){this.cancelLocaleLoad();const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=!!next,this.requestUpdate()}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this._open||(this.activeIndex=-1,this.clearSearch()),this.requestUpdate("open",old)}constructor(){super(),this.withoutFlags=!1,this.topLayer=!1,this.triggerDisplay="flag-label",this.optionDisplay="label-tag",this.searchable=!1,this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.spellcheck=!1,this.autocapitalize="",this.autocorrectValue=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.searchQuery="",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.registryTick=0,this.searchFocusGeneration=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this.listboxHidden=!0,this.closeSettleToken=0,this.pointer=new DocumentPointerListener(this,event=>this.onDocPointer(event)),this._value="",this._open=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this._defaultValue="",this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this.typeBuffer=new TypeAheadBuffer(this),this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncCustomStates())},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.commitDispatching=!1,this.valueWriteVersion=0,this.loadGeneration=0,this.retryLocaleLoad=()=>{const restoreFocus=activeElementIn(this.shadowRoot)?.getAttribute("part")==="load-retry";this.loadFailureTag!==void 0&&this.commit(this.loadFailureTag),restoreFocus&&this.loadFailureTag===void 0&&this.isConnected&&activeElementIn(this.shadowRoot)?.getAttribute("part")==="load-retry"&&this.focus()},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchInput=event=>{event.stopPropagation(),!(!this.searchable||!this.open||this.liveDisabled)&&(this.searchQuery=event.currentTarget.value,this.setActiveIndex(this.visibleEntries.length?0:-1))},this.onSearchChange=event=>{event.stopPropagation()},this.onSearchKeyDown=event=>{if(this.liveDisabled||!this.open||event.isComposing||event.keyCode===229)return;const rows=this.visibleEntries;if(event.key==="ArrowDown"||event.key==="ArrowUp")event.preventDefault(),this.setActiveIndex(event.key==="ArrowDown"?Math.min(rows.length-1,this.activeIndex+1):Math.max(0,this.activeIndex-1));else if(event.key==="Enter"){event.preventDefault();const row=rows[this.activeIndex];row&&this.commit(row.tag)}else event.key==="Escape"&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(event.preventDefault(),this.dismissFromEscape())},this.onKeyDown=e=>{if(this.liveDisabled||e.isComposing||e.keyCode===229)return;const rows=this.visibleEntries,move=()=>resolveListMove(e,{count:rows.length,current:this.activeIndex,orientation:"vertical",wrap:!1,clamp:!0,backwardFromMissing:"first"});switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();break;case"Enter":case" ":if(this.open){e.preventDefault();const activeRow=rows[this.activeIndex];this.activeIndex>=0&&activeRow?this.commit(activeRow.tag):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.dismissFromEscape());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1));break;default:this.typeBuffer.accepts(e)&&(this.searchable?(e.preventDefault(),this.show(),this.searchQuery+=e.key,this.setActiveIndex(this.visibleEntries.length?0:-1),this.queueSearchFocus()):this.typeAhead(e.key));break}},this.onListboxMouseDown=e=>{e.composedPath()[0]!==this.searchElement&&e.preventDefault()},this.onListboxClick=e=>{if(this.liveDisabled)return;const tag=e.target.closest('[part="option"]')?.dataset.value;tag!==void 0&&this.commit(tag)},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.searchElement&&activeElementIn(this.shadowRoot)===this.searchElement?this.searchElement.blur():this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}get input(){return this.searchable?this.searchElement??null:null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.triggerElement??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncLocaleAttributeForLocalization(),this.updateValidity(),this.stopRegistrySubscription=subscribeLyraLocaleRegistry(()=>{this.registryTick+=1}),this.hasUpdated&&this.open&&queueMicrotask(()=>this.syncPopup())}disconnectedCallback(){this.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.closeSettleToken++,this.listboxHidden=!0,this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.typeBuffer.clear(),this.activeScrollGeneration+=1,this.open=!1}adoptedCallback(){this.closeSettleToken++,this.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlayHandle?.suspend(),this.typeBuffer.clear(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),changed.has("searchable")&&!this.searchable&&(this.clearSearch(),this.searchElement&&activeElementIn(this.shadowRoot)===this.searchElement&&this.focus()),changed.has("open")&&this.open&&this.setActiveIndex(this.visibleEntries.findIndex(row=>row.tag===this._value)),this.open&&(this.searchable||changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.visibleEntries.length-1),this.queueActiveScroll()),this.open&&(this.listboxHidden=!1)}get value(){return this._value}set value(next){this.cancelLocaleLoad(),this.valueWriteVersion++;const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=next??"",this.internals.setFormValue(this._value),this.updateValidity(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next??"",this.reflectingDefaultValue=!0;try{this._defaultValue?this.setAttribute("value",this._defaultValue):this.removeAttribute("value")}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._name),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){next&&this.cancelLocaleLoad();const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}updateValidity(){this.localizedValidityLocale=this.effectiveMessageLocale;const valueMissing=this.hasMissingRequiredValue(),message=valueMissing?this.localize("localePickerRequired"):"";this.localizedIntrinsicMessage=message,valueMissing?this.validityController.setValidity({valueMissing:!0},message):this.validityController.setValidity({}),this.syncCustomStates()}refreshLocalizedIntrinsicValidity(changed){const locale=this.effectiveMessageLocale,message=this.hasMissingRequiredValue()?this.localize("localePickerRequired"):"";(changed.has("strings")||locale!==this.localizedValidityLocale||message!==this.localizedIntrinsicMessage)&&this.updateValidity()}hasMissingRequiredValue(){return!this.isBarred()&&this.required&&!this._value}syncLocaleAttributeForLocalization(){this.locale?this.getAttribute("locale")!==this.locale&&this.setAttribute("locale",this.locale):this.hasAttribute("locale")&&this.removeAttribute("locale")}isBarred(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.isBarred()})}formResetCallback(){this.touched=!1,this.clearSearch(),this.restoreLiveValueFromDefault()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formDisabledCallback(disabled){this.validityController?.reflectingDisabled||(disabled&&this.cancelLocaleLoad(),this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.touched=!0,this.syncCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.requestUpdate()}get normalizedEntries(){const raw=this.locales,cached=this.entriesCache;if(cached&&cached.raw===raw&&cached.tick===this.registryTick)return cached.rows;const rows=raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label!==void 0&&entry.label.trim().length>0?entry.label:localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}));return this.entriesCache={raw,tick:this.registryTick,rows},rows}normalizeSearch(text,locale=this.effectiveLocale){return text.toLocaleLowerCase(resolveIntlLocale(locale)).normalize("NFKD").replace(/\p{M}/gu,"").trim()}get visibleEntries(){const rows=this.normalizedEntries,query2=this.searchable?this.normalizeSearch(this.searchQuery):"";if(!query2)return rows;const cached=this.visibleCache;if(cached&&cached.rows===rows&&cached.query===this.searchQuery&&cached.locale===this.effectiveLocale)return cached.result;let names;try{names=getDisplayNames(this.effectiveLocale,{type:"language"})}catch{}let englishNames;try{englishNames=getDisplayNames("en",{type:"language"})}catch{}const invariantQuery=this.normalizeSearch(this.searchQuery,"en"),result=rows.filter(row=>{let localizedName="";try{localizedName=names?.of(row.tag)??""}catch{}let englishName="";try{englishName=englishNames?.of(row.tag)??""}catch{}return[row.label,localeNativeName(row.tag),localizedName].some(text=>this.normalizeSearch(text).includes(query2))||[row.tag,englishName].some(text=>this.normalizeSearch(text,"en").includes(invariantQuery))});return this.visibleCache={rows,query:this.searchQuery,locale:this.effectiveLocale,result},result}clearSearch(){this.searchQuery="",this.searchFocusGeneration++,this.searchAnnouncements?.release(),this.searchAnnouncements=void 0}queueSearchFocus(){if(!this.searchable||!this.open||this.liveDisabled)return;const generation=++this.searchFocusGeneration,ownerDocument=this.ownerDocument,outerFocus=activeElementIn(ownerDocument),innerFocus=activeElementIn(this.shadowRoot);this.updateComplete.then(()=>{generation!==this.searchFocusGeneration||!this.isConnected||!this.open||!this.searchable||this.liveDisabled||this.ownerDocument!==ownerDocument||activeElementIn(ownerDocument)!==outerFocus||activeElementIn(this.shadowRoot)!==innerFocus||this.searchElement?.focus()})}get previewTag(){return this._value||this.effectiveLocale}entryFor(tag){return this.normalizedEntries.find(e=>e.tag===tag)}labelFor(tag){return this.entryFor(tag)?.label??localeNativeName(tag)}show(){this.open||this.liveDisabled||(this.open=!0,this.queueSearchFocus())}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){if(this.open){if(this.searchable&&this.searchQuery.length){this.clearSearch(),this.setActiveIndex(this.visibleEntries.length?0:-1);return}this.deactivatePopupOverlay(!0),this.hide()}}bindDocumentPointer(){this.isConnected&&this.pointer.bind()}unbindDocumentPointer(){this.pointer.unbind()}activatePopupOverlay(){if(this.overlayHandle?.isActive()){this.overlayHandle.resume();return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>this.dismissFromEscape(),onBackdrop:()=>this.hide(),restoreFocusTo:()=>this.renderRoot.querySelector('[part="trigger"]')})}deactivatePopupOverlay(restoreFocus){const overlay=this.overlayHandle;this.overlayHandle=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.bindDocumentPointer();const anchor=this.renderRoot.querySelector(this.loadFailureTag!==void 0?'[part="form-control"]':'[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.placedTopLayer=syncTopLayerRelease(listbox,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,listbox,topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed"))))}async settleClosedLayout(){const token=++this.closeSettleToken;await awaitPopupAnimations(this,()=>this.renderRoot.querySelector('[part="listbox"]'),()=>this.closeSettleToken===token)&&(this.listboxHidden=!0)}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")||changed.has("searchQuery")||changed.has("searchable")||changed.has("loadFailureTag")||changed.has("topLayer")))&&this.syncPopup(),changed.has("open")&&(this.open?this.closeSettleToken++:this.settleClosedLayout()),this.open&&this.searchable&&changed.has("searchQuery")&&this.searchQuery.trim()&&this.visibleEntries.length===0&&(this.searchAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.searchAnnouncements.announce(this.localize("localePickerEmpty"))),changed.has("searchable")&&this.searchable&&activeElementIn(this.shadowRoot)===this.triggerElement&&this.queueSearchFocus(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}cancelLocaleLoad(){this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.loadGeneration++,this.loadingTag=void 0,this.loadFailureTag=void 0}announceLoad(key){this.loadAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.loadAnnouncements.announce(key==="loading"?this.localize("loading"):this.localize("statusError"))}commit(tag){if(!(this.commitDispatching||this.liveDisabled||!this.entryFor(tag))){if(tag===this._value&&tag===getLyraLocale()){this.hide();return}this.commitDispatching=!0;try{const previousValue=this._value,version=this.valueWriteVersion,loader=this.localeLoader,generation=this.loadGeneration,detail=Object.freeze({value:tag,previousValue,direction:getLyraLocaleDirection(tag)});if(this.emit("lr-change-request",detail,{cancelable:!0}).defaultPrevented||this.liveDisabled||this.valueWriteVersion!==version||this.loadGeneration!==generation||this.localeLoader!==loader||!this.entryFor(tag))return;const commitValue=()=>{const searchFocus=this.searchElement&&activeElementIn(this.shadowRoot)===this.searchElement?this.searchElement:void 0;this.value=tag,this.hide(),setLyraLocale(tag);const committed=Object.freeze({...detail,direction:getLyraLocaleDirection(tag)});emitValueEvents(this,"input",committed,detail2=>this.emit("lr-input",detail2)),emitValueEvents(this,"change",committed,detail2=>this.emit("lr-change",detail2)),searchFocus&&this.isConnected&&this.searchable&&activeElementIn(this.shadowRoot)===searchFocus&&this.focus()};if(loader===void 0){commitValue();return}this.cancelLocaleLoad();const operation=this.loadGeneration,ownerDocument=this.ownerDocument;this.loadingTag=tag,this.announceLoad("loading");const ownsSelection=()=>this.isConnected&&this.ownerDocument===ownerDocument&&this.loadGeneration===operation&&this.valueWriteVersion===version&&this.localeLoader===loader&&!this.liveDisabled&&this.entryFor(tag)!==void 0;Promise.resolve().then(()=>{if(ownsSelection())return loader(tag)}).then(()=>{ownsSelection()&&commitValue()},()=>{ownsSelection()&&(this.loadingTag=void 0,this.loadFailureTag=tag,this.announceLoad("statusError"))})}finally{this.commitDispatching=!1}}}isSearchFocusTransfer(event){const related=event.relatedTarget;return(this.searchable||event.currentTarget===this.searchElement||related===this.searchElement)&&related!==null&&"nodeType"in related&&this.renderRoot.contains(related)}typeAhead(char){this.typeBuffer.add(char,this.effectiveLocale);const rows=this.normalizedEntries;if(!rows.length)return;const currentTag=this.open?rows[this.activeIndex]?.tag:this.previewTag,currentIndex=rows.findIndex(r=>r.tag===currentTag),match=this.typeBuffer.match(rows,currentIndex,row=>row.label,this.effectiveLocale);match!==null&&(this.open?this.setActiveIndex(match):this.commit(rows[match].tag))}setActiveIndex(index){const last=this.visibleEntries.length-1,next=last<0||index<0?-1:Math.min(last,index);this.activeIndex=next,this.queueActiveScroll()}queueActiveScroll(){const generation=++this.activeScrollGeneration,index=this.activeIndex;index<0||!this.open||this.updateComplete.then(()=>{if(generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index)return;const row=this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`),popup=this.renderRoot.querySelector('[part="listbox"]');row&&popup&&revealRow(popup,row,this.searchElement?.offsetHeight)})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
+import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{deferredPlace as place,awaitPopupAnimations,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{TypeAheadBuffer}from"../../../internal/type-ahead-buffer.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{getDisplayNames,resolveIntlLocale}from"../../../internal/intl-cache.js";import{activeElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocale,getLyraLocaleDirection,getRegisteredLyraLocales,subscribeLyraLocaleRegistry,setLyraLocale}from"../../../internal/localization-runtime.js";import{localeNativeName}from"../../media/flag/language-map.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./locale-picker.styles.js";import{autocorrectConverter,declaredDefaultConverter,spellcheckConverter}from"../../../internal/converters.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{PopupController,emitPopupEvent}from"../../../internal/popup-controller.js";import{revealRow}from"../../../internal/reveal-row.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_localePickerEmpty,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired,LYRA_DEFAULT_localePickerSearchLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_loading,LYRA_DEFAULT_retry,LYRA_DEFAULT_statusError}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();const MAX_LOCALE_ENTRIES=512,localeSpellcheckConverter={...spellcheckConverter,fromAttribute:(value,type)=>value===null?void 0:spellcheckConverter.fromAttribute?.(value,type)};function snapshotLocaleCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[];for(let index=0;index<Math.min(source.length,MAX_LOCALE_ENTRIES);index+=1)try{const raw=source[index];if(typeof raw=="string"){raw.length>0&&rows.push(raw);continue}if(raw===null||typeof raw!="object")continue;const candidate=raw,tag=candidate.tag,label=candidate.label,country=candidate.country;if(typeof tag!="string"||tag.length===0||label!==void 0&&typeof label!="string"||country!==void 0&&typeof country!="string")continue;rows.push(Object.freeze({tag,...label===void 0?{}:{label},...country===void 0?{}:{country}}))}catch{}return Object.freeze(rows)}class LyraLocalePicker extends LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,loading:LYRA_DEFAULT_loading,localePickerEmpty:LYRA_DEFAULT_localePickerEmpty,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired,localePickerSearchLabel:LYRA_DEFAULT_localePickerSearchLabel,retry:LYRA_DEFAULT_retry,statusError:LYRA_DEFAULT_statusError}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get localeLoader(){return this._localeLoader}set localeLoader(next){const previous=this._localeLoader;previous!==next&&(this.cancelLocaleLoad(),this._localeLoader=next,this.requestUpdate("localeLoader",previous))}get locales(){return this._locales}set locales(next){this.cancelLocaleLoad();const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=!!next,this.requestUpdate()}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this._open||(this.activeIndex=-1,this.clearSearch()),this.requestUpdate("open",old)}constructor(){super(),this.withoutFlags=!1,this.topLayer=!1,this.triggerDisplay="flag-label",this.optionDisplay="label-tag",this.searchable=!1,this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.spellcheck=!1,this.autocapitalize="",this.autocorrectValue=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.searchQuery="",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.registryTick=0,this.searchFocusGeneration=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this.listboxHidden=!0,this.closeSettleToken=0,this.popupController=new PopupController({host:this,popup:()=>this.renderRoot.querySelector('[part="listbox"]'),emit:(name,cancelable)=>emitPopupEvent(this,name,cancelable),onPointer:event=>this.onDocPointer(event)}),this._value="",this._open=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this._defaultValue="",this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this.typeBuffer=new TypeAheadBuffer(this),this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncCustomStates())},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.commitDispatching=!1,this.valueWriteVersion=0,this.loadGeneration=0,this.retryLocaleLoad=()=>{const restoreFocus=shadowFocusTarget(this)?.getAttribute("part")==="load-retry";this.loadFailureTag!==void 0&&this.commit(this.loadFailureTag),restoreFocus&&this.loadFailureTag===void 0&&this.isConnected&&shadowFocusTarget(this)?.getAttribute("part")==="load-retry"&&this.focus()},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchInput=event=>{event.stopPropagation(),!(!this.searchable||!this.open||this.liveDisabled)&&(this.searchQuery=event.currentTarget.value,this.setActiveIndex(this.visibleEntries.length?0:-1))},this.onSearchChange=event=>{event.stopPropagation()},this.onSearchKeyDown=event=>{if(this.liveDisabled||!this.open||event.isComposing||event.keyCode===229)return;const rows=this.visibleEntries;if(event.key==="ArrowDown"||event.key==="ArrowUp")event.preventDefault(),this.setActiveIndex(event.key==="ArrowDown"?Math.min(rows.length-1,this.activeIndex+1):Math.max(0,this.activeIndex-1));else if(event.key==="Enter"){event.preventDefault();const row=rows[this.activeIndex];row&&this.commit(row.tag)}else event.key==="Escape"&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(event.preventDefault(),this.dismissFromEscape())},this.onKeyDown=e=>{if(this.liveDisabled||e.isComposing||e.keyCode===229)return;const rows=this.visibleEntries,move=()=>resolveListMove(e,{count:rows.length,current:this.activeIndex,orientation:"vertical",wrap:!1,clamp:!0,backwardFromMissing:"first"});switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();break;case"Enter":case" ":if(this.open){e.preventDefault();const activeRow=rows[this.activeIndex];this.activeIndex>=0&&activeRow?this.commit(activeRow.tag):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.dismissFromEscape());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1));break;default:this.typeBuffer.accepts(e)&&(this.searchable?(e.preventDefault(),this.show(),this.searchQuery+=e.key,this.setActiveIndex(this.visibleEntries.length?0:-1),this.queueSearchFocus()):this.typeAhead(e.key));break}},this.onListboxMouseDown=e=>{e.composedPath()[0]!==this.searchElement&&e.preventDefault()},this.onListboxClick=e=>{if(this.liveDisabled)return;const tag=e.target.closest('[part="option"]')?.dataset.value;tag!==void 0&&this.commit(tag)},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.searchElement&&shadowFocusTarget(this)===this.searchElement?this.searchElement.blur():this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}get input(){return this.searchable?this.searchElement??null:null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.triggerElement??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncLocaleAttributeForLocalization(),this.updateValidity(),this.stopRegistrySubscription=subscribeLyraLocaleRegistry(()=>{this.registryTick+=1}),this.hasUpdated&&this.open&&queueMicrotask(()=>this.syncPopup())}disconnectedCallback(){this.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.closeSettleToken++,this.listboxHidden=!0,this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.typeBuffer.clear(),this.activeScrollGeneration+=1,this.open=!1}adoptedCallback(){this.closeSettleToken++,this.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.popupController.unbindPointer(),this.overlayHandle?.suspend(),this.typeBuffer.clear(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),changed.has("searchable")&&!this.searchable&&(this.clearSearch(),this.searchElement&&shadowFocusTarget(this)===this.searchElement&&this.focus()),changed.has("open")&&this.open&&this.setActiveIndex(this.visibleEntries.findIndex(row=>row.tag===this._value)),this.open&&(this.searchable||changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.visibleEntries.length-1),this.queueActiveScroll()),this.open&&(this.listboxHidden=!1)}get value(){return this._value}set value(next){this.cancelLocaleLoad(),this.valueWriteVersion++;const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=next??"",this.internals.setFormValue(this._value),this.updateValidity(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next??"",this.reflectingDefaultValue=!0;try{this._defaultValue?this.setAttribute("value",this._defaultValue):this.removeAttribute("value")}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._name),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){next&&this.cancelLocaleLoad();const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}updateValidity(){this.localizedValidityLocale=this.effectiveMessageLocale;const valueMissing=this.hasMissingRequiredValue(),message=valueMissing?this.localize("localePickerRequired"):"";this.localizedIntrinsicMessage=message,valueMissing?this.validityController.setValidity({valueMissing:!0},message):this.validityController.setValidity({}),this.syncCustomStates()}refreshLocalizedIntrinsicValidity(changed){const locale=this.effectiveMessageLocale,message=this.hasMissingRequiredValue()?this.localize("localePickerRequired"):"";(changed.has("strings")||locale!==this.localizedValidityLocale||message!==this.localizedIntrinsicMessage)&&this.updateValidity()}hasMissingRequiredValue(){return!this.isBarred()&&this.required&&!this._value}syncLocaleAttributeForLocalization(){this.locale?this.getAttribute("locale")!==this.locale&&this.setAttribute("locale",this.locale):this.hasAttribute("locale")&&this.removeAttribute("locale")}isBarred(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.isBarred()})}formResetCallback(){this.touched=!1,this.clearSearch(),this.restoreLiveValueFromDefault()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formDisabledCallback(disabled){this.validityController?.reflectingDisabled||(disabled&&this.cancelLocaleLoad(),this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.touched=!0,this.syncCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.requestUpdate()}get normalizedEntries(){const raw=this.locales,cached=this.entriesCache;if(cached&&cached.raw===raw&&cached.tick===this.registryTick)return cached.rows;const rows=raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label!==void 0&&entry.label.trim().length>0?entry.label:localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}));return this.entriesCache={raw,tick:this.registryTick,rows},rows}normalizeSearch(text,locale=this.effectiveLocale){return text.toLocaleLowerCase(resolveIntlLocale(locale)).normalize("NFKD").replace(/\p{M}/gu,"").trim()}get visibleEntries(){const rows=this.normalizedEntries,query2=this.searchable?this.normalizeSearch(this.searchQuery):"";if(!query2)return rows;const cached=this.visibleCache;if(cached&&cached.rows===rows&&cached.query===this.searchQuery&&cached.locale===this.effectiveLocale)return cached.result;let names;try{names=getDisplayNames(this.effectiveLocale,{type:"language"})}catch{}let englishNames;try{englishNames=getDisplayNames("en",{type:"language"})}catch{}const invariantQuery=this.normalizeSearch(this.searchQuery,"en"),result=rows.filter(row=>{let localizedName="";try{localizedName=names?.of(row.tag)??""}catch{}let englishName="";try{englishName=englishNames?.of(row.tag)??""}catch{}return[row.label,localeNativeName(row.tag),localizedName].some(text=>this.normalizeSearch(text).includes(query2))||[row.tag,englishName].some(text=>this.normalizeSearch(text,"en").includes(invariantQuery))});return this.visibleCache={rows,query:this.searchQuery,locale:this.effectiveLocale,result},result}clearSearch(){this.searchQuery="",this.searchFocusGeneration++,this.searchAnnouncements?.release(),this.searchAnnouncements=void 0}queueSearchFocus(){if(!this.searchable||!this.open||this.liveDisabled)return;const generation=++this.searchFocusGeneration,ownerDocument=this.ownerDocument,outerFocus=activeElementIn(ownerDocument),innerFocus=shadowFocusTarget(this);this.updateComplete.then(()=>{generation!==this.searchFocusGeneration||!this.isConnected||!this.open||!this.searchable||this.liveDisabled||this.ownerDocument!==ownerDocument||activeElementIn(ownerDocument)!==outerFocus||shadowFocusTarget(this)!==innerFocus||this.searchElement?.focus()})}get previewTag(){return this._value||this.effectiveLocale}entryFor(tag){return this.normalizedEntries.find(e=>e.tag===tag)}labelFor(tag){return this.entryFor(tag)?.label??localeNativeName(tag)}show(){this.open||this.liveDisabled||(this.open=!0,this.queueSearchFocus())}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){if(this.open){if(this.searchable&&this.searchQuery.length){this.clearSearch(),this.setActiveIndex(this.visibleEntries.length?0:-1);return}this.deactivatePopupOverlay(!0),this.hide()}}activatePopupOverlay(){if(this.overlayHandle?.isActive()){this.overlayHandle.resume();return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>this.dismissFromEscape(),onBackdrop:()=>this.hide(),restoreFocusTo:()=>this.renderRoot.querySelector('[part="trigger"]')})}deactivatePopupOverlay(restoreFocus){const overlay=this.overlayHandle;this.overlayHandle=void 0,overlay?.deactivate({restoreFocus}),this.popupController.unbindPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.popupController.bindPointer();const anchor=this.renderRoot.querySelector(this.loadFailureTag!==void 0?'[part="form-control"]':'[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.placedTopLayer=syncTopLayerRelease(listbox,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,listbox,topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed"))))}async settleClosedLayout(){const token=++this.closeSettleToken;await awaitPopupAnimations(this,()=>this.renderRoot.querySelector('[part="listbox"]'),()=>this.closeSettleToken===token)&&(this.listboxHidden=!0)}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")||changed.has("searchQuery")||changed.has("searchable")||changed.has("loadFailureTag")||changed.has("topLayer")))&&this.syncPopup(),changed.has("open")&&(this.open?this.closeSettleToken++:this.settleClosedLayout()),this.open&&this.searchable&&changed.has("searchQuery")&&this.searchQuery.trim()&&this.visibleEntries.length===0&&(this.searchAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.searchAnnouncements.announce(this.localize("localePickerEmpty"))),changed.has("searchable")&&this.searchable&&shadowFocusTarget(this)===this.triggerElement&&this.queueSearchFocus(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}cancelLocaleLoad(){this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.loadGeneration++,this.loadingTag=void 0,this.loadFailureTag=void 0}announceLoad(key){this.loadAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.loadAnnouncements.announce(key==="loading"?this.localize("loading"):this.localize("statusError"))}commit(tag){if(!(this.commitDispatching||this.liveDisabled||!this.entryFor(tag))){if(tag===this._value&&tag===getLyraLocale()){this.hide();return}this.commitDispatching=!0;try{const previousValue=this._value,version=this.valueWriteVersion,loader=this.localeLoader,generation=this.loadGeneration,detail=Object.freeze({value:tag,previousValue,direction:getLyraLocaleDirection(tag)});if(this.emit("lr-change-request",detail,{cancelable:!0}).defaultPrevented||this.liveDisabled||this.valueWriteVersion!==version||this.loadGeneration!==generation||this.localeLoader!==loader||!this.entryFor(tag))return;const commitValue=()=>{const searchFocus=this.searchElement&&shadowFocusTarget(this)===this.searchElement?this.searchElement:void 0;this.value=tag,this.hide(),setLyraLocale(tag);const committed=Object.freeze({...detail,direction:getLyraLocaleDirection(tag)});emitValueEvents(this,"input",committed,detail2=>this.emit("lr-input",detail2)),emitValueEvents(this,"change",committed,detail2=>this.emit("lr-change",detail2)),searchFocus&&this.isConnected&&this.searchable&&shadowFocusTarget(this)===searchFocus&&this.focus()};if(loader===void 0){commitValue();return}this.cancelLocaleLoad();const operation=this.loadGeneration,ownerDocument=this.ownerDocument;this.loadingTag=tag,this.announceLoad("loading");const ownsSelection=()=>this.isConnected&&this.ownerDocument===ownerDocument&&this.loadGeneration===operation&&this.valueWriteVersion===version&&this.localeLoader===loader&&!this.liveDisabled&&this.entryFor(tag)!==void 0;Promise.resolve().then(()=>{if(ownsSelection())return loader(tag)}).then(()=>{ownsSelection()&&commitValue()},()=>{ownsSelection()&&(this.loadingTag=void 0,this.loadFailureTag=tag,this.announceLoad("statusError"))})}finally{this.commitDispatching=!1}}}isSearchFocusTransfer(event){const related=event.relatedTarget;return(this.searchable||event.currentTarget===this.searchElement||related===this.searchElement)&&related!==null&&"nodeType"in related&&this.renderRoot.contains(related)}typeAhead(char){this.typeBuffer.add(char,this.effectiveLocale);const rows=this.normalizedEntries;if(!rows.length)return;const currentTag=this.open?rows[this.activeIndex]?.tag:this.previewTag,currentIndex=rows.findIndex(r=>r.tag===currentTag),match=this.typeBuffer.match(rows,currentIndex,row=>row.label,this.effectiveLocale);match!==null&&(this.open?this.setActiveIndex(match):this.commit(rows[match].tag))}setActiveIndex(index){const last=this.visibleEntries.length-1,next=last<0||index<0?-1:Math.min(last,index);this.activeIndex=next,this.queueActiveScroll()}queueActiveScroll(){const generation=++this.activeScrollGeneration,index=this.activeIndex;index<0||!this.open||this.updateComplete.then(()=>{if(generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index)return;const row=this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`),popup=this.renderRoot.querySelector('[part="listbox"]');row&&popup&&revealRow(popup,row,this.searchElement?.offsetHeight)})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
         part="option"
         id=${id}
         role="option"

package/dist/components/forms/otp-input/otp-input.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/native-text-control.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{finiteInteger}from"../../../internal/numbers.js";import{setCustomState}from"../../../internal/custom-states.js";import{contextualSizes}from"../../../internal/contextual-vocabulary.styles.js";import{submitFormImplicitly,submitOnEnter}from"../../../internal/submit-on-enter.js";import{styles}from"./otp-input.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{currentValidityValidator}from"../form-validator.js";import{declaredDefaultConverter,literalSetConverter}from"../../../internal/converters.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_otpInputIncomplete,LYRA_DEFAULT_otpInputLabel}from"../../../internal/default-strings.generated.js";const APPEARANCE=literalSetConverter(["outlined","filled","filled-outlined","contained"],"outlined"),ACCEPTED={numeric:/[0-9]/,alpha:/[a-zA-Z]/,alphanumeric:/[a-zA-Z0-9]/},DEFAULT_LENGTH=6,MAX_LENGTH=32,MAX_FORMAT_SOURCE_LENGTH=4096,MAX_VALUE_SOURCE_LENGTH=4096;class LyraOtpInputBase extends LyraElement{static{this.styles=[LyraElement.styles,contextualSizes,scrollOverflowFadeStyles,styles]}}class LyraOtpInput extends FormAssociated(LyraOtpInputBase){static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,otpInputIncomplete:LYRA_DEFAULT_otpInputIncomplete,otpInputLabel:LYRA_DEFAULT_otpInputLabel}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","length","pattern")]}get appearance(){return this._appearance}set appearance(next){const normalized=APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;this._appearance=normalized,normalized!==old&&this.requestUpdate("appearance",old)}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasErrorSlot(){return this.slotPresence.has("error")}constructor(){super(),this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this._appearance="outlined",this.autofocus=!1,this.autosubmit=!1,this.size="m",this.length=DEFAULT_LENGTH,this.format="",this.type="numeric",this.case="preserve",this.mask=!1,this.withMask=!1,this.readonly=!1,this.autocomplete="one-time-code",this.focused=!1,this.slotPresence=new SlotPresenceController(this),this.touched=!1,this.labelId=nextId("otp-input-label"),this.hintId=nextId("otp-input-hint"),this.errorId=nextId("otp-input-error"),this.activeSegmentIndex=0,this.segmentValues=[],this.rawValue="",this.segmentEditPendingChange=!1,this.autosubmitToken=0,this.hostDescription=new HostDescriptionController(this,()=>this.control??null),this.onInput=event=>{if(event.isComposing===!0){event.stopPropagation();return}const raw=event.target.value,next=this.sanitize(raw),previousFilled=this.filledSegmentCount,layoutChanged=Array.from({length:this.renderedSegmentCount},(_,index)=>next[index]??"").some((value,index)=>value!==this.segmentValues[index]);if(this.control&&this.control.value!==next&&(this.control.value=next),next===this.value&&!layoutChanged){event.stopImmediatePropagation();return}this.touched=!0,this.value=next,relayNativeEvent(this,event),this.emit("lr-input",{value:next}),this.completeIfTransition(previousFilled)},this.onKeyDown=event=>{if(this.effectiveDisabled)return;if(event.key==="ArrowLeft"||event.key==="ArrowRight"){event.preventDefault();const physical=event.key==="ArrowRight"?1:-1,delta=this.effectiveDirection==="rtl"?-physical:physical;this.setActiveSegment(this.activeSegmentIndex+delta);return}if(event.key==="Enter"){this.readonly||submitOnEnter(this,event,{beforeSubmit:()=>this.flushPendingChange()});return}if(this.readonly||event.isComposing)return;const selection=this.selectedSegmentRange;if(event.key==="Backspace"||event.key==="Delete"){event.preventDefault();const values2=this.normalizedSegmentValues();if(selection){for(const index of selection.indices)values2[index]="";this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),this.setActiveSegment(selection.first);return}const changed=!!values2[this.activeSegmentIndex];values2[this.activeSegmentIndex]="",changed&&this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),event.key==="Backspace"&&this.setActiveSegment(this.activeSegmentIndex-1);return}if(event.ctrlKey||event.metaKey||event.altKey||event.key.length!==1)return;event.preventDefault();const accepted=this.sanitize(event.key).slice(0,1);if(!accepted)return;const values=this.normalizedSegmentValues(),targetIndex=selection?.first??this.activeSegmentIndex;if(selection)for(const index of selection.indices)values[index]="";values[targetIndex]=accepted,this.commitSegmentEdit(values,"insertText",accepted),this.setActiveSegment(targetIndex+1)},this.onPaste=event=>{if(this.effectiveDisabled||this.readonly)return;const pasted=this.sanitize(event.clipboardData?.getData("text")??"");if(event.preventDefault(),!pasted)return;const values=Array.from({length:this.renderedSegmentCount},(_,index)=>pasted[index]??"");this.commitSegmentEdit(values,"insertFromPaste",pasted),this.setActiveSegment(Math.min(pasted.length,this.renderedSegmentCount-1))},this.onChange=event=>{this.segmentEditPendingChange=!1;const value=this.value;relayNativeEvent(this,event),this.emit("lr-change",{value})},this.onFocus=event=>{this.focused=!0,relayNativeEvent(this,event)},this.onBlur=event=>{this.focused=!1,this.effectiveDisabled||(this.touched=!0),this.flushPendingChange(),relayNativeEvent(this,event)},observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part~="segments"]'))}get input(){return this.control??null}get validationTarget(){return this.control??null}get value(){return super.value}set value(next){this.autosubmitToken+=1,this.rawValue=next??"";const normalized=this.sanitize(this.rawValue);this.packSegmentValues(normalized),super.value=normalized}get defaultValue(){return super.defaultValue}set defaultValue(next){this.autosubmitToken+=1,super.defaultValue=next}get formattedCells(){if(this.parsedFormatSource===this.format)return this.parsedFormatCells??null;if(this.parsedFormatSource=this.format,!this.format)return this.parsedFormatCells=null,null;const cells=[];let segments=0,literal="";const flushLiteral=()=>{literal&&(cells.push({kind:"separator",text:literal}),literal="")};for(const char of this.format.slice(0,MAX_FORMAT_SOURCE_LENGTH)){if(char!=="#"){literal+=char;continue}if(segments>=MAX_LENGTH)break;flushLiteral(),cells.push({kind:"segment"}),segments+=1}return flushLiteral(),this.parsedFormatCells=segments>0?cells:null,this.parsedFormatCells}get renderedSegmentCount(){const formatted=this.formattedCells;return formatted?formatted.filter(cell=>cell.kind==="segment").length:Math.min(MAX_LENGTH,Math.max(1,finiteInteger(this.length,DEFAULT_LENGTH)))}get effectiveLength(){return this.renderedSegmentCount}get cells(){return this.formattedCells??Array.from({length:this.renderedSegmentCount},()=>({kind:"segment"}))}sanitize(raw){const accepted=ACCEPTED[this.type]??ACCEPTED.numeric,limit=this.renderedSegmentCount;let out="";for(const char of(raw??"").slice(0,MAX_VALUE_SOURCE_LENGTH))if(accepted.test(char)&&(out+=char),out.length>=limit)break;return this.case==="upper"?out=out.toUpperCase():this.case==="lower"&&(out=out.toLowerCase()),out.slice(0,limit)}packSegmentValues(value){const count=this.renderedSegmentCount;this.segmentValues=Array.from({length:count},(_,index)=>value[index]??""),this.activeSegmentIndex=Math.min(value.length,count-1)}get filledSegmentCount(){return Array.isArray(this.segmentValues)?this.segmentValues.reduce((count,value)=>count+(value?1:0),0):this.value.length}normalizedSegmentValues(values=this.segmentValues){return Array.from({length:this.renderedSegmentCount},(_,index)=>values[index]??"")}setActiveSegment(index){const next=Math.min(this.renderedSegmentCount-1,Math.max(0,index));this.activeSegmentIndex=next;const caret=this.normalizedSegmentValues().slice(0,next).filter(Boolean).length;this.control?.setSelectionRange(caret,caret),this.updateComplete.then(()=>{this.renderRoot.querySelectorAll('[part~="segment"]')[next]?.scrollIntoView({block:"nearest",inline:"nearest"})})}submitOwningForm(){const form=this.getForm();form&&submitFormImplicitly(form)}completeIfTransition(previousFilled){if(previousFilled>=this.renderedSegmentCount||this.filledSegmentCount!==this.renderedSegmentCount)return;const completionValue=this.value,token=this.autosubmitToken,completeEvent=this.emit("lr-complete",{value:completionValue},{cancelable:!0});this.autosubmit&&setTimeout(()=>{token!==this.autosubmitToken||completeEvent.defaultPrevented||!this.isConnected||!this.autosubmit||this.effectiveDisabled||this.readonly||this.value!==completionValue||this.filledSegmentCount!==this.renderedSegmentCount||this.submitOwningForm()})}commitSegmentEdit(values,inputType,data=null){this.autosubmitToken+=1;const previousFilled=this.filledSegmentCount;this.segmentValues=this.normalizedSegmentValues(values);const nextValue=this.segmentValues.join("");super.value=nextValue,this.control&&(this.control.value=nextValue),this.touched=!0,dispatchNativeInputEvent(this,{data,inputType}),this.emit("lr-input",{value:nextValue}),this.segmentEditPendingChange=!0,this.completeIfTransition(previousFilled),this.requestUpdate()}get selectedSegmentRange(){const start=this.control?.selectionStart,end=this.control?.selectionEnd;if(start==null||end===void 0||end===null||start===end)return null;const indices=this.normalizedSegmentValues().map((value,index)=>value?index:-1).filter(index=>index>=0).slice(start,end),first=indices[0];return first===void 0?null:{indices,first}}segmentIndexAtCompactOffset(offset){const values=this.normalizedSegmentValues();let occupied=0;for(let index=0;index<values.length;index+=1){if(occupied>=offset)return index;values[index]&&(occupied+=1)}return Math.max(0,values.length-1)}syncActiveSegmentFromSelection(){const control=this.control;if(!control||control.selectionStart===null)return;const selected=this.selectedSegmentRange;this.activeSegmentIndex=selected?.first??this.segmentIndexAtCompactOffset(control.selectionStart)}get selectionStart(){return this.control?.selectionStart??null}set selectionStart(value){this.control&&(this.control.selectionStart=value,this.syncActiveSegmentFromSelection())}get selectionEnd(){return this.control?.selectionEnd??null}set selectionEnd(value){this.control&&(this.control.selectionEnd=value,this.syncActiveSegmentFromSelection())}get selectionDirection(){return this.control?.selectionDirection??null}set selectionDirection(value){this.control&&(this.control.selectionDirection=value)}focus(options){this.effectiveDisabled||this.control?.focus(options)}blur(){this.control?.blur()}click(){this.effectiveDisabled||this.control?.click()}select(){this.control?.select()}setSelectionRange(start,end,direction){this.control&&(this.control.setSelectionRange(start,end,direction),this.syncActiveSegmentFromSelection())}setRangeText(replacement,start,end,selectMode){const control=this.control;if(!control)return;const selectionPrefixLength=(value,offset)=>{if(offset===null)return null;const boundedOffset=Math.min(MAX_VALUE_SOURCE_LENGTH,Math.max(0,offset));return this.sanitize(value.slice(0,boundedOffset)).length},currentRaw=control.value,currentSelectionStart=selectionPrefixLength(currentRaw,control.selectionStart),currentSelectionEnd=selectionPrefixLength(currentRaw,control.selectionEnd),currentSelectionDirection=control.selectionDirection,boundedCurrent=this.sanitize(currentRaw);currentRaw!==boundedCurrent&&(control.value=boundedCurrent,currentSelectionStart!==null&&currentSelectionEnd!==null&&control.setSelectionRange(currentSelectionStart,currentSelectionEnd,currentSelectionDirection??void 0));const boundedReplacement=this.sanitize(replacement);setNativeRangeText(control,boundedReplacement,start,end,selectMode);const raw=control.value,selectionStart=selectionPrefixLength(raw,control.selectionStart),selectionEnd=selectionPrefixLength(raw,control.selectionEnd),selectionDirection=control.selectionDirection,normalized=this.sanitize(raw);this.value=normalized,control.value=normalized,selectionStart!==null&&selectionEnd!==null&&control.setSelectionRange(selectionStart,selectionEnd,selectionDirection??void 0),this.syncActiveSegmentFromSelection()}clear(){!this.value||this.effectiveDisabled||this.readonly||(this.value="",this.control&&(this.control.value=""),dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),this.emit("lr-input",{value:""}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:""}),this.emit("lr-clear"))}formResetCallback(){this.autosubmitToken+=1,super.formResetCallback(),this.touched=!1,this.segmentEditPendingChange=!1}formStateRestoreCallback(state2,reason){this.autosubmitToken+=1,super.formStateRestoreCallback(state2,reason)}disconnectedCallback(){super.disconnectedCallback(),this.autosubmitToken+=1}reportValidity(){return this.touched=!0,super.reportValidity()}firstUpdated(changed){super.firstUpdated(changed),this.autofocus&&this.scheduleAfterUpdate(()=>this.focus(),"otp-autofocus")}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}updated(changed){super.updated(changed),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}willUpdate(changed){if(super.willUpdate(changed),changed.has("type")||changed.has("case")||changed.has("length")||changed.has("format")){const next=this.sanitize(this.rawValue);next!==this.value?this.value=next:this.packSegmentValues(next)}(changed.has("value")||changed.has("required")||changed.has("readonly")||changed.has("length")||changed.has("format"))&&this.updateValidity(),this.syncOtpStates()}syncOtpStates(){setCustomState(this.internals,"blank",this.value.length===0),setCustomState(this.internals,"--blank",this.value.length===0),setCustomState(this.internals,"--filled",this.filledSegmentCount===this.renderedSegmentCount),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"readonly",this.readonly)}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const total=this.renderedSegmentCount,filled=this.filledSegmentCount,complete=filled===total;if(this.required&&filled===0){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}if(filled>0&&!complete){this[SET_ANCHORED_VALIDITY]({tooShort:!0},this.localize("otpInputIncomplete",void 0,{total}));return}this[SET_ANCHORED_VALIDITY]({})}flushPendingChange(){if(!this.segmentEditPendingChange)return;this.segmentEditPendingChange=!1;const value=this.value;dispatchNativeEvent(this,"change"),this.emit("lr-change",{value})}renderSegment(index,invalid){const char=this.segmentValues[index]??"",filled=char!=="",active=this.focused&&!this.effectiveDisabled&&index===this.activeSegmentIndex,masked=filled&&this.mask,placeholderMask=!filled&&this.withMask,parts=["segment"];return active&&parts.push("active"),masked&&parts.push("masked"),placeholderMask&&parts.push("placeholder-mask"),invalid&&parts.push("invalid"),html`<div part=${parts.join(" ")} aria-hidden="true">${masked?nothing:placeholderMask?nothing:char}</div>`}render(){const hasLabel=!!this.label||this.hasLabelSlot||this.withLabel,hasHint=!!this.hint||this.hasHintSlot||this.withHint,hasError=!!this.errorText||this.hasErrorSlot,intrinsicInvalid=this.touched&&!this.validity.valid,ariaInvalid=hasError||intrinsicInvalid,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),labelledBy=hasLabel&&!this.getAttribute("aria-label")?this.labelId:nothing;let segmentIndex=-1;return html`
+import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/native-text-control.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{finiteInteger}from"../../../internal/numbers.js";import{setCustomState}from"../../../internal/custom-states.js";import{contextualSizes}from"../../../internal/contextual-vocabulary.styles.js";import{submitFormImplicitly,submitOnEnter}from"../../../internal/submit-on-enter.js";import{styles}from"./otp-input.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{currentValidityValidator}from"../form-validator.js";import{declaredDefaultConverter,literalSetConverter}from"../../../internal/converters.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{LYRA_DEFAULT_otpInputIncomplete,LYRA_DEFAULT_otpInputLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";const APPEARANCE=literalSetConverter(["outlined","filled","filled-outlined","contained"],"outlined"),ACCEPTED={numeric:/[0-9]/,alpha:/[a-zA-Z]/,alphanumeric:/[a-zA-Z0-9]/},DEFAULT_LENGTH=6,MAX_LENGTH=32,MAX_FORMAT_SOURCE_LENGTH=4096,MAX_VALUE_SOURCE_LENGTH=4096;class LyraOtpInputBase extends LyraElement{static{this.styles=[LyraElement.styles,contextualSizes,scrollOverflowFadeStyles,styles]}}class LyraOtpInput extends FormAssociated(LyraOtpInputBase){static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,otpInputIncomplete:LYRA_DEFAULT_otpInputIncomplete,otpInputLabel:LYRA_DEFAULT_otpInputLabel}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","length","pattern")]}get appearance(){return this._appearance}set appearance(next){const normalized=APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;this._appearance=normalized,normalized!==old&&this.requestUpdate("appearance",old)}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasErrorSlot(){return this.slotPresence.has("error")}constructor(){super(),this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this._appearance="outlined",this.autofocus=!1,this.autosubmit=!1,this.size="m",this.length=DEFAULT_LENGTH,this.format="",this.type="numeric",this.case="preserve",this.mask=!1,this.withMask=!1,this.readonly=!1,this.autocomplete="one-time-code",this.focused=!1,this.slotPresence=new SlotPresenceController(this),this.touched=!1,this.labelId=nextId("otp-input-label"),this.hintId=nextId("otp-input-hint"),this.errorId=nextId("otp-input-error"),this.activeSegmentIndex=0,this.segmentValues=[],this.rawValue="",this.segmentEditPendingChange=!1,this.autosubmitToken=0,this.hostDescription=new HostDescriptionController(this,()=>this.control??null),this.onInput=event=>{if(event.isComposing===!0){event.stopPropagation();return}const raw=event.target.value,next=this.sanitize(raw),previousFilled=this.filledSegmentCount,layoutChanged=Array.from({length:this.renderedSegmentCount},(_,index)=>next[index]??"").some((value,index)=>value!==this.segmentValues[index]);if(this.control&&this.control.value!==next&&(this.control.value=next),next===this.value&&!layoutChanged){event.stopImmediatePropagation();return}this.touched=!0,this.value=next,relayNativeEvent(this,event),this.emit("lr-input",{value:next}),this.completeIfTransition(previousFilled)},this.onKeyDown=event=>{if(this.effectiveDisabled)return;if(event.key==="ArrowLeft"||event.key==="ArrowRight"){event.preventDefault();const physical=event.key==="ArrowRight"?1:-1,delta=this.effectiveDirection==="rtl"?-physical:physical;this.setActiveSegment(this.activeSegmentIndex+delta);return}if(event.key==="Enter"){this.readonly||submitOnEnter(this,event,{beforeSubmit:()=>this.flushPendingChange()});return}if(this.readonly||event.isComposing)return;const selection=this.selectedSegmentRange;if(event.key==="Backspace"||event.key==="Delete"){event.preventDefault();const values2=this.normalizedSegmentValues();if(selection){for(const index of selection.indices)values2[index]="";this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),this.setActiveSegment(selection.first);return}const changed=!!values2[this.activeSegmentIndex];values2[this.activeSegmentIndex]="",changed&&this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),event.key==="Backspace"&&this.setActiveSegment(this.activeSegmentIndex-1);return}if(event.ctrlKey||event.metaKey||event.altKey||event.key.length!==1)return;event.preventDefault();const accepted=this.sanitize(event.key).slice(0,1);if(!accepted)return;const values=this.normalizedSegmentValues(),targetIndex=selection?.first??this.activeSegmentIndex;if(selection)for(const index of selection.indices)values[index]="";values[targetIndex]=accepted,this.commitSegmentEdit(values,"insertText",accepted),this.setActiveSegment(targetIndex+1)},this.onPaste=event=>{if(this.effectiveDisabled||this.readonly)return;const pasted=this.sanitize(event.clipboardData?.getData("text")??"");if(event.preventDefault(),!pasted)return;const values=Array.from({length:this.renderedSegmentCount},(_,index)=>pasted[index]??"");this.commitSegmentEdit(values,"insertFromPaste",pasted),this.setActiveSegment(Math.min(pasted.length,this.renderedSegmentCount-1))},this.onChange=event=>{this.segmentEditPendingChange=!1;const value=this.value;relayNativeEvent(this,event),this.emit("lr-change",{value})},this.onFocus=event=>{this.focused=!0,relayNativeEvent(this,event)},this.onBlur=event=>{this.focused=!1,this.effectiveDisabled||(this.touched=!0),this.flushPendingChange(),relayNativeEvent(this,event)},observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part~="segments"]'))}get input(){return this.control??null}get validationTarget(){return this.control??null}get value(){return super.value}set value(next){this.autosubmitToken+=1,this.rawValue=next??"";const normalized=this.sanitize(this.rawValue);this.packSegmentValues(normalized),super.value=normalized}get defaultValue(){return super.defaultValue}set defaultValue(next){this.autosubmitToken+=1,super.defaultValue=next}get formattedCells(){if(this.parsedFormatSource===this.format)return this.parsedFormatCells??null;if(this.parsedFormatSource=this.format,!this.format)return this.parsedFormatCells=null,null;const cells=[];let segments=0,literal="";const flushLiteral=()=>{literal&&(cells.push({kind:"separator",text:literal}),literal="")};for(const char of this.format.slice(0,MAX_FORMAT_SOURCE_LENGTH)){if(char!=="#"){literal+=char;continue}if(segments>=MAX_LENGTH)break;flushLiteral(),cells.push({kind:"segment"}),segments+=1}return flushLiteral(),this.parsedFormatCells=segments>0?cells:null,this.parsedFormatCells}get renderedSegmentCount(){const formatted=this.formattedCells;return formatted?formatted.filter(cell=>cell.kind==="segment").length:Math.min(MAX_LENGTH,Math.max(1,finiteInteger(this.length,DEFAULT_LENGTH)))}get effectiveLength(){return this.renderedSegmentCount}get cells(){return this.formattedCells??Array.from({length:this.renderedSegmentCount},()=>({kind:"segment"}))}sanitize(raw){const accepted=ACCEPTED[this.type]??ACCEPTED.numeric,limit=this.renderedSegmentCount;let out="";for(const char of(raw??"").slice(0,MAX_VALUE_SOURCE_LENGTH))if(accepted.test(char)&&(out+=char),out.length>=limit)break;return this.case==="upper"?out=out.toUpperCase():this.case==="lower"&&(out=out.toLowerCase()),out.slice(0,limit)}packSegmentValues(value){const count=this.renderedSegmentCount;this.segmentValues=Array.from({length:count},(_,index)=>value[index]??""),this.activeSegmentIndex=Math.min(value.length,count-1)}get filledSegmentCount(){return Array.isArray(this.segmentValues)?this.segmentValues.reduce((count,value)=>count+(value?1:0),0):this.value.length}normalizedSegmentValues(values=this.segmentValues){return Array.from({length:this.renderedSegmentCount},(_,index)=>values[index]??"")}setActiveSegment(index){const next=Math.min(this.renderedSegmentCount-1,Math.max(0,index));this.activeSegmentIndex=next;const caret=this.normalizedSegmentValues().slice(0,next).filter(Boolean).length;this.control?.setSelectionRange(caret,caret),this.updateComplete.then(()=>{this.renderRoot.querySelectorAll('[part~="segment"]')[next]?.scrollIntoView({block:"nearest",inline:"nearest"})})}submitOwningForm(){const form=this.getForm();form&&submitFormImplicitly(form)}completeIfTransition(previousFilled){if(previousFilled>=this.renderedSegmentCount||this.filledSegmentCount!==this.renderedSegmentCount)return;const completionValue=this.value,token=this.autosubmitToken,completeEvent=this.emit("lr-complete",{value:completionValue},{cancelable:!0});this.autosubmit&&setTimeout(()=>{token!==this.autosubmitToken||completeEvent.defaultPrevented||!this.isConnected||!this.autosubmit||this.effectiveDisabled||this.readonly||this.value!==completionValue||this.filledSegmentCount!==this.renderedSegmentCount||this.submitOwningForm()})}commitSegmentEdit(values,inputType,data=null){this.autosubmitToken+=1;const previousFilled=this.filledSegmentCount;this.segmentValues=this.normalizedSegmentValues(values);const nextValue=this.segmentValues.join("");super.value=nextValue,this.control&&(this.control.value=nextValue),this.touched=!0,dispatchNativeInputEvent(this,{data,inputType}),this.emit("lr-input",{value:nextValue}),this.segmentEditPendingChange=!0,this.completeIfTransition(previousFilled),this.requestUpdate()}get selectedSegmentRange(){const start=this.control?.selectionStart,end=this.control?.selectionEnd;if(start==null||end===void 0||end===null||start===end)return null;const indices=this.normalizedSegmentValues().map((value,index)=>value?index:-1).filter(index=>index>=0).slice(start,end),first=indices[0];return first===void 0?null:{indices,first}}segmentIndexAtCompactOffset(offset){const values=this.normalizedSegmentValues();let occupied=0;for(let index=0;index<values.length;index+=1){if(occupied>=offset)return index;values[index]&&(occupied+=1)}return Math.max(0,values.length-1)}syncActiveSegmentFromSelection(){const control=this.control;if(!control||control.selectionStart===null)return;const selected=this.selectedSegmentRange;this.activeSegmentIndex=selected?.first??this.segmentIndexAtCompactOffset(control.selectionStart)}get selectionStart(){return this.control?.selectionStart??null}set selectionStart(value){this.control&&(this.control.selectionStart=value,this.syncActiveSegmentFromSelection())}get selectionEnd(){return this.control?.selectionEnd??null}set selectionEnd(value){this.control&&(this.control.selectionEnd=value,this.syncActiveSegmentFromSelection())}get selectionDirection(){return this.control?.selectionDirection??null}set selectionDirection(value){this.control&&(this.control.selectionDirection=value)}focus(options){this.effectiveDisabled||this.control?.focus(options)}blur(){this.control?.blur()}click(){this.effectiveDisabled||this.control?.click()}select(){this.control?.select()}setSelectionRange(start,end,direction){this.control&&(this.control.setSelectionRange(start,end,direction),this.syncActiveSegmentFromSelection())}setRangeText(replacement,start,end,selectMode){const control=this.control;if(!control)return;const selectionPrefixLength=(value,offset)=>{if(offset===null)return null;const boundedOffset=Math.min(MAX_VALUE_SOURCE_LENGTH,Math.max(0,offset));return this.sanitize(value.slice(0,boundedOffset)).length},currentRaw=control.value,currentSelectionStart=selectionPrefixLength(currentRaw,control.selectionStart),currentSelectionEnd=selectionPrefixLength(currentRaw,control.selectionEnd),currentSelectionDirection=control.selectionDirection,boundedCurrent=this.sanitize(currentRaw);currentRaw!==boundedCurrent&&(control.value=boundedCurrent,currentSelectionStart!==null&&currentSelectionEnd!==null&&control.setSelectionRange(currentSelectionStart,currentSelectionEnd,currentSelectionDirection??void 0));const boundedReplacement=this.sanitize(replacement);setNativeRangeText(control,boundedReplacement,start,end,selectMode);const raw=control.value,selectionStart=selectionPrefixLength(raw,control.selectionStart),selectionEnd=selectionPrefixLength(raw,control.selectionEnd),selectionDirection=control.selectionDirection,normalized=this.sanitize(raw);this.value=normalized,control.value=normalized,selectionStart!==null&&selectionEnd!==null&&control.setSelectionRange(selectionStart,selectionEnd,selectionDirection??void 0),this.syncActiveSegmentFromSelection()}clear(){!this.value||this.effectiveDisabled||this.readonly||(this.value="",this.control&&(this.control.value=""),dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),this.emit("lr-input",{value:""}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:""}),this.emit("lr-clear"))}formResetCallback(){this.autosubmitToken+=1,super.formResetCallback(),this.touched=!1,this.segmentEditPendingChange=!1}formStateRestoreCallback(state2,reason){this.autosubmitToken+=1,super.formStateRestoreCallback(state2,reason)}disconnectedCallback(){super.disconnectedCallback(),this.autosubmitToken+=1}reportValidity(){return this.touched=!0,super.reportValidity()}firstUpdated(changed){super.firstUpdated(changed),this.autofocus&&this.scheduleAfterUpdate(()=>this.focus(),"otp-autofocus")}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}updated(changed){super.updated(changed),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}willUpdate(changed){if(super.willUpdate(changed),changed.has("type")||changed.has("case")||changed.has("length")||changed.has("format")){const next=this.sanitize(this.rawValue);next!==this.value?this.value=next:this.packSegmentValues(next)}(changed.has("value")||changed.has("required")||changed.has("readonly")||changed.has("length")||changed.has("format"))&&this.updateValidity(),this.syncOtpStates()}syncOtpStates(){setCustomState(this.internals,"blank",this.value.length===0),setCustomState(this.internals,"--blank",this.value.length===0),setCustomState(this.internals,"--filled",this.filledSegmentCount===this.renderedSegmentCount),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"readonly",this.readonly)}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const total=this.renderedSegmentCount,filled=this.filledSegmentCount,complete=filled===total;if(this.required&&filled===0){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}if(filled>0&&!complete){this[SET_ANCHORED_VALIDITY]({tooShort:!0},this.localize("otpInputIncomplete",void 0,{total}));return}this[SET_ANCHORED_VALIDITY]({})}flushPendingChange(){if(!this.segmentEditPendingChange)return;this.segmentEditPendingChange=!1;const value=this.value;dispatchNativeEvent(this,"change"),this.emit("lr-change",{value})}renderSegment(index,invalid){const char=this.segmentValues[index]??"",filled=char!=="",active=this.focused&&!this.effectiveDisabled&&index===this.activeSegmentIndex,masked=filled&&this.mask,placeholderMask=!filled&&this.withMask,parts=["segment"];return active&&parts.push("active"),masked&&parts.push("masked"),placeholderMask&&parts.push("placeholder-mask"),invalid&&parts.push("invalid"),html`<div part=${parts.join(" ")} aria-hidden="true">${masked?nothing:placeholderMask?nothing:char}</div>`}render(){const hasLabel=!!this.label||this.hasLabelSlot||this.withLabel,hasHint=!!this.hint||this.hasHintSlot||this.withHint,hasError=!!this.errorText||this.hasErrorSlot,intrinsicInvalid=this.touched&&!this.validity.valid,ariaInvalid=hasError||intrinsicInvalid,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),labelledBy=hasLabel&&!this.getAttribute("aria-label")?this.labelId:nothing;let segmentIndex=-1;return html`
       <div part="base form-control">
         <label part="label form-control-label" id=${this.labelId} for="control" ?hidden=${!hasLabel}>
           ${this.label}<slot name="label"></slot>
@@ -8,6 +8,7 @@ import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/n
           <input
             part="control"
             id="control"
+            name=${this.name||nothing}
             type="text"
             .value=${this.value}
             maxlength=${this.renderedSegmentCount}

package/dist/components/forms/phone-input/phone-input.class.d.ts

@@ -166,7 +166,9 @@ incompleteText:string;private incompleteTextAuthored;
 /** Validation message for a completed but invalid number. Explicit copy wins over locale strings; omission localizes.
 * @default 'The value is invalid.'
 */
-invalidText:string;private invalidTextAuthored;autocomplete:string;inputmode:'tel'|'numeric'|'text';enterkeyhint:string;
+invalidText:string;private invalidTextAuthored;autocomplete:string;inputMode:string;enterKeyHint:string;
+/** Lowercase mapped IDLs that delegate to the camel-case native spellings. */
+get inputmode():string;set inputmode(next:string);get enterkeyhint():string;set enterkeyhint(next:string);
 /** Native readonly mode: keeps the telephone value focusable/copyable/submittable while
 * preventing telephone and country edits and barring constraint validation. */
 readonly:boolean;
@@ -179,14 +181,10 @@ autofocus:boolean;
 spellcheck:boolean;
 /** Forwarded to the internal `<input>`'s own `autocapitalize`. Empty string omits the attribute,
 *  leaving the browser's own default behavior. */
-autocapitalize:string;
-/** Forwarded to the internal `<input>`'s own `autocorrect` (Safari/WebKit-specific). Empty
-*  string omits the attribute. Named `autoCorrect` (capital `C`), not `autocorrect`, purely to
-*  dodge a TS `lib.dom.d.ts` collision: newer DOM typings declare a `boolean`-typed
-*  `HTMLElement.autocorrect` IDL member, which would conflict with this `string`-typed reactive
-*  property; the explicit `attribute: 'autocorrect'` mapping preserves the standard lowercase
-*  `autocorrect` wire name in both Lit and the rendered attribute. */
-autoCorrect:string;private inputElement?;private editableValue;private status;private touched;constructor();private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasErrorSlot();private hasCountryPrefixSlot;private hasEndSlot;private inputId;private hintId;private errorId;private explicitCountry;private compositionPending;private compositionCommitted;private countryCodes?;private countryNames?;
+autocapitalize:string;private autocorrectValue;
+/** Native editing-assistance state forwarded as canonical `autocorrect="on"|"off"`. Reads are
+* boolean; writes accept the boolean IDL and the `'on'`/`'off'` vocabulary. */
+get autocorrect():boolean;set autocorrect(next:boolean|string);private inputElement?;private editableValue;private status;private touched;constructor();private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasErrorSlot();private hasCountryPrefixSlot;private hasEndSlot;private inputId;private hintId;private errorId;private explicitCountry;private compositionPending;private compositionCommitted;private countryCodes?;private countryNames?;
 /** Currently selected ISO 3166-1 alpha-2 country code. */
 get country():string;set country(next:string);
 /** The underlying telephone input for platform-specific integrations. */

package/dist/components/forms/phone-input/phone-input.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/native-text-control.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{observeReactivePropertyWrites}from"../../../internal/reactive-property-writes.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{SET_ANCHORED_VALIDITY,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./phone-input.styles.js";import{digitsBefore,fallbackParse,indexAfterDigits,normalizeCountry,normalizeCountryCatalog,normalizeParseResult}from"./phone-number-adapter.js";import{loadLibphonenumberAdapter}from"./phone-number-adapter.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{declaredDefaultConverter,trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_countryPickerLabel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_phoneInputIncomplete,LYRA_DEFAULT_phoneInputLabel,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";class LyraPhoneInputBase extends LyraElement{}class LyraPhoneInput extends FormAssociated(LyraPhoneInputBase){static{this.defaultStrings={...super.defaultStrings,countryPickerLabel:LYRA_DEFAULT_countryPickerLabel,fieldRequired:LYRA_DEFAULT_fieldRequired,phoneInputIncomplete:LYRA_DEFAULT_phoneInputIncomplete,phoneInputLabel:LYRA_DEFAULT_phoneInputLabel,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={country:{noAccessor:!0}}}get adapter(){return this._adapter}set adapter(next){const previous=this._adapter;this._adapter=next,this.adapterCountries=normalizeCountryCatalog(next?.countries),this.requestUpdate("adapter",previous)}get countries(){return this._countries}set countries(next){const previous=this._countries;this._countries=next===void 0?void 0:normalizeCountryCatalog(next),this.requestUpdate("countries",previous)}constructor(){super(),this.flags=!1,this.adapterCountries=Object.freeze([]),this.defaultCountry="",this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.placeholder="",this.size="m",this.pill=!1,this.appearance="outlined",this.accessibleLabel=null,this.countryLabel="Country",this.countryLabelAuthored=!1,this.phoneLabel="",this.incompleteText="This phone number is incomplete.",this.incompleteTextAuthored=!1,this.invalidText="The value is invalid.",this.invalidTextAuthored=!1,this.autocomplete="tel",this.inputmode="tel",this.enterkeyhint="",this.readonly=!1,this.autofocus=!1,this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.editableValue="",this.status="empty",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.hasCountryPrefixSlot=!1,this.hasEndSlot=!1,this.inputId=nextId("phone-input"),this.hintId=nextId("phone-hint"),this.errorId=nextId("phone-error"),this.explicitCountry="",this.compositionPending=!1,this.compositionCommitted=!1,this.hostDescription=new HostDescriptionController(this,()=>this.inputElement??null),this.onInput=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}const input=event.currentTarget;if(event.isComposing){this.compositionPending=!0,relayNativeEvent(this,event);return}const alreadyCommitted=this.compositionCommitted&&input.value===this.editableValue;this.compositionCommitted=!1,this.compositionPending=!1,alreadyCommitted||this.commitTypedText(input),relayNativeEvent(this,event),alreadyCommitted||this.emit("lr-input",this.eventDetail)},this.onCompositionEnd=event=>{!this.compositionPending||this.liveDisabled||this.readonly||(this.compositionPending=!1,this.commitTypedText(event.currentTarget),this.compositionCommitted=!0,this.emit("lr-input",this.eventDetail))},this.onChange=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}this.touched=!0,relayNativeEvent(this,event),this.emit("lr-change",this.eventDetail)},this.onCountryChange=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}this.country=normalizeCountry(event.currentTarget.value),this.applyParsed(this.editableValue,this.parse(this.editableValue)),dispatchNativeInputEvent(this),this.emit("lr-input",this.eventDetail),relayNativeEvent(this,event),this.emit("lr-change",this.eventDetail)},this.onKeyDown=event=>{this.liveDisabled||submitOnEnter(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onCountryPrefixSlotChange=()=>{this.hasCountryPrefixSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="country-prefix"||child.getAttribute("slot")==="start")},this.onEndSlotChange=()=>{this.hasEndSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="end")},this.addEventListener("invalid",()=>{this.touched=!0})}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasErrorSlot(){return this.slotPresence.has("error")}get country(){return this.resolveCountry(this.availableCountries)}set country(next){const old=this.country;this.explicitCountry=normalizeCountry(next??""),this.requestUpdate("country",old)}get input(){return this.inputElement}get inputValue(){return this.editableValue}get phoneStatus(){return this.status}get selectionStart(){return this.inputElement?.selectionStart??null}set selectionStart(value){this.inputElement&&(this.inputElement.selectionStart=value??0)}get selectionEnd(){return this.inputElement?.selectionEnd??null}set selectionEnd(value){this.inputElement&&(this.inputElement.selectionEnd=value??0)}get selectionDirection(){return this.inputElement?.selectionDirection}set selectionDirection(value){this.inputElement&&(this.inputElement.selectionDirection=value??"none")}[VALIDITY_ANCHOR](){return this.inputElement??null}get value(){return super.value}set value(next){const raw=next??"",parsed=this.parse(raw);this.applyParsed(raw,parsed)}get availableCountries(){return this.countries??this.adapterCountries}resolveCountry(rows){this.countryCodes?.rows!==rows&&(this.countryCodes={rows,codes:new Set(rows.map(row=>row.code))});const{codes}=this.countryCodes,explicit=normalizeCountry(this.explicitCountry),preferred=normalizeCountry(this.defaultCountry??"");return codes.has(explicit)?explicit:codes.has(preferred)?preferred:rows[0]?.code??""}parse(input){if(!this.adapter)return fallbackParse(input);try{const parse=this.adapter.parse;return typeof parse!="function"?{status:"invalid",formatted:input}:normalizeParseResult(parse.call(this.adapter,input,this.country||void 0),input)}catch{return{status:"invalid",formatted:input}}}reconcileCountryCatalog(){this.explicitCountry=this.resolveCountry(this.availableCountries)}applyParsed(raw,parsed){this.editableValue=parsed.formatted??raw,this.status=parsed.status,parsed.country&&(this.country=normalizeCountry(parsed.country)),super.value=parsed.status==="valid"?parsed.e164:"",this.setAttribute("data-phone-status",parsed.status)}syncFormattedValue(input,digitsBeforeCaret){if(input.value!==this.editableValue&&(input.value=this.editableValue,digitsBeforeCaret!=null)){const position=indexAfterDigits(this.editableValue,digitsBeforeCaret);input.setSelectionRange(position,position)}}get eventDetail(){return{value:super.value,inputValue:this.editableValue,country:this.country,valid:this.internals.validity.valid,status:this.status}}static get observedAttributes(){const attributes=super.observedAttributes;return observeReactivePropertyWrites(this.prototype,["countryLabel","incompleteText","invalidText"],(instance,name,value)=>{const authored=value!=null;let ownershipChanged=!1;switch(name){case"countryLabel":if(instance.countryLabelAuthored===void 0)return;ownershipChanged=authored!==instance.countryLabelAuthored,instance.countryLabelAuthored=authored;break;case"incompleteText":if(instance.incompleteTextAuthored===void 0)return;ownershipChanged=authored!==instance.incompleteTextAuthored,instance.incompleteTextAuthored=authored;break;case"invalidText":if(instance.invalidTextAuthored===void 0)return;ownershipChanged=authored!==instance.invalidTextAuthored,instance.invalidTextAuthored=authored;break}ownershipChanged&&instance.requestUpdate(),name!=="countryLabel"&&instance.hasUpdated&&instance.updateValidity()}),attributes}attributeChangedCallback(name,oldValue,newValue){if(super.attributeChangedCallback(name,oldValue,newValue),newValue===null){if(name==="country-label")this.countryLabelAuthored=!1;else if(name==="incomplete-text")this.incompleteTextAuthored=!1;else if(name==="invalid-text")this.invalidTextAuthored=!1;else return;this.requestUpdate(),this.hasUpdated&&this.updateValidity()}}get effectiveCountryLabel(){return this.countryLabelAuthored?this.countryLabel:this.localize("countryPickerLabel")}effectivePhoneLabel(hasLabel){return this.accessibleLabel!==null?this.accessibleLabel:this.phoneLabel?this.phoneLabel:hasLabel?nothing:this.placeholder||this.localize("phoneInputLabel")}get incompleteMessage(){return(this.incompleteTextAuthored?this.incompleteText:"")||this.localize("phoneInputIncomplete")}get invalidMessage(){return(this.invalidTextAuthored?this.invalidText:"")||this.localize("valueInvalid")}countryName(row){if(row.label)return row.label;try{return getDisplayNames(this.effectiveLocale,{type:"region"}).of(row.code)??row.code}catch{return row.code}}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const flags={};let message="";this.required&&this.status==="empty"?(flags.valueMissing=!0,message=this.localize("fieldRequired")):this.status==="incomplete"?(flags.badInput=!0,message=this.incompleteMessage):this.status==="invalid"&&(flags.typeMismatch=!0,message=this.invalidMessage),this[SET_ANCHORED_VALIDITY](flags,message)}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}willUpdate(changed){super.willUpdate(changed),this.flags&&!LyraPhoneInput.flagRegistration&&(LyraPhoneInput.flagRegistration=import("../../media/flag/flag.js").catch(error=>{console.warn("<lr-phone-input> failed to register <lr-flag> for its flags option:",error)})),this.hasUpdated||this.seedFirstRenderState(()=>{this.hasCountryPrefixSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="country-prefix"||child.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="end")}),(!this.hasUpdated||changed.has("countries")||changed.has("adapter")||changed.has("country")||changed.has("defaultCountry"))&&this.reconcileCountryCatalog(),(changed.has("adapter")||changed.has("countries")||changed.has("country")||changed.has("defaultCountry"))&&this.editableValue&&this.applyParsed(this.editableValue,this.parse(this.editableValue))}updated(changed){super.updated(changed),changed.has("strings")&&this.updateValidity(),(changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("status"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}commitTypedText(input){const caret=input.selectionStart,digitsBeforeCaret=caret==null?null:digitsBefore(input.value,caret);this.applyParsed(input.value,this.parse(input.value)),this.syncFormattedValue(input,digitsBeforeCaret)}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.inputElement?.click()}focus(options){this.liveDisabled||this.inputElement?.focus(options)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(start,end,direction){this.inputElement?.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){const input=this.inputElement;if(!input)return;setNativeRangeText(input,replacement,start,end,selectMode);const caret=input.selectionStart,digitsBeforeCaret=caret==null?null:digitsBefore(input.value,caret);this.applyParsed(input.value,this.parse(input.value)),this.syncFormattedValue(input,digitsBeforeCaret)}formResetCallback(){this.explicitCountry="",this.reconcileCountryCatalog(),super.formResetCallback(),this.touched=!1}render(){const hasLabel=!!(this.label||this.hasLabelSlot||this.withLabel),hasHint=!!(this.hint||this.hasHintSlot||this.withHint),hasError=!!(this.errorText||this.hasErrorSlot),describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),rows=this.availableCountries,country=this.country,current=rows.find(row=>row.code===country),locale=this.effectiveLocale;(this.countryNames?.rows!==rows||this.countryNames.locale!==locale)&&(this.countryNames={rows,locale,names:rows.map(row=>this.countryName(row))});const{names}=this.countryNames;return html`
+import{__decorate}from"tslib";import{nativeAutocorrectAttribute,setNativeRangeText}from"../../../internal/native-text-control.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{observeReactivePropertyWrites}from"../../../internal/reactive-property-writes.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{SET_ANCHORED_VALIDITY,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./phone-input.styles.js";import{digitsBefore,fallbackParse,indexAfterDigits,normalizeCountry,normalizeCountryCatalog,normalizeParseResult}from"./phone-number-adapter.js";import{loadLibphonenumberAdapter}from"./phone-number-adapter.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{declaredDefaultConverter,autocorrectConverter,normalizeAutocorrect,trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_countryPickerLabel,LYRA_DEFAULT_phoneInputIncomplete,LYRA_DEFAULT_phoneInputLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings/shared.generated.js";class LyraPhoneInputBase extends LyraElement{}class LyraPhoneInput extends FormAssociated(LyraPhoneInputBase){static{this.defaultStrings={...super.defaultStrings,countryPickerLabel:LYRA_DEFAULT_countryPickerLabel,fieldRequired:LYRA_DEFAULT_fieldRequired,phoneInputIncomplete:LYRA_DEFAULT_phoneInputIncomplete,phoneInputLabel:LYRA_DEFAULT_phoneInputLabel,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={country:{noAccessor:!0}}}get adapter(){return this._adapter}set adapter(next){const previous=this._adapter;this._adapter=next,this.adapterCountries=normalizeCountryCatalog(next?.countries),this.requestUpdate("adapter",previous)}get countries(){return this._countries}set countries(next){const previous=this._countries;this._countries=next===void 0?void 0:normalizeCountryCatalog(next),this.requestUpdate("countries",previous)}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??"tel"}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}constructor(){super(),this.flags=!1,this.adapterCountries=Object.freeze([]),this.defaultCountry="",this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.placeholder="",this.size="m",this.pill=!1,this.appearance="outlined",this.accessibleLabel=null,this.countryLabel="Country",this.countryLabelAuthored=!1,this.phoneLabel="",this.incompleteText="This phone number is incomplete.",this.incompleteTextAuthored=!1,this.invalidText="The value is invalid.",this.invalidTextAuthored=!1,this.autocomplete="tel",this.inputMode="tel",this.enterKeyHint="",this.readonly=!1,this.autofocus=!1,this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.editableValue="",this.status="empty",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.hasCountryPrefixSlot=!1,this.hasEndSlot=!1,this.inputId=nextId("phone-input"),this.hintId=nextId("phone-hint"),this.errorId=nextId("phone-error"),this.explicitCountry="",this.compositionPending=!1,this.compositionCommitted=!1,this.hostDescription=new HostDescriptionController(this,()=>this.inputElement??null),this.onInput=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}const input=event.currentTarget;if(event.isComposing){this.compositionPending=!0,relayNativeEvent(this,event);return}const alreadyCommitted=this.compositionCommitted&&input.value===this.editableValue;this.compositionCommitted=!1,this.compositionPending=!1,alreadyCommitted||this.commitTypedText(input),relayNativeEvent(this,event),alreadyCommitted||this.emit("lr-input",this.eventDetail)},this.onCompositionEnd=event=>{!this.compositionPending||this.liveDisabled||this.readonly||(this.compositionPending=!1,this.commitTypedText(event.currentTarget),this.compositionCommitted=!0,this.emit("lr-input",this.eventDetail))},this.onChange=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}this.touched=!0,relayNativeEvent(this,event),this.emit("lr-change",this.eventDetail)},this.onCountryChange=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}this.country=normalizeCountry(event.currentTarget.value),this.applyParsed(this.editableValue,this.parse(this.editableValue)),dispatchNativeInputEvent(this),this.emit("lr-input",this.eventDetail),relayNativeEvent(this,event),this.emit("lr-change",this.eventDetail)},this.onKeyDown=event=>{this.liveDisabled||submitOnEnter(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onCountryPrefixSlotChange=()=>{this.hasCountryPrefixSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="country-prefix"||child.getAttribute("slot")==="start")},this.onEndSlotChange=()=>{this.hasEndSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="end")},this.addEventListener("invalid",()=>{this.touched=!0})}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasErrorSlot(){return this.slotPresence.has("error")}get country(){return this.resolveCountry(this.availableCountries)}set country(next){const old=this.country;this.explicitCountry=normalizeCountry(next??""),this.requestUpdate("country",old)}get input(){return this.inputElement}get inputValue(){return this.editableValue}get phoneStatus(){return this.status}get selectionStart(){return this.inputElement?.selectionStart??null}set selectionStart(value){this.inputElement&&(this.inputElement.selectionStart=value??0)}get selectionEnd(){return this.inputElement?.selectionEnd??null}set selectionEnd(value){this.inputElement&&(this.inputElement.selectionEnd=value??0)}get selectionDirection(){return this.inputElement?.selectionDirection}set selectionDirection(value){this.inputElement&&(this.inputElement.selectionDirection=value??"none")}[VALIDITY_ANCHOR](){return this.inputElement??null}get value(){return super.value}set value(next){const raw=next??"",parsed=this.parse(raw);this.applyParsed(raw,parsed)}get availableCountries(){return this.countries??this.adapterCountries}resolveCountry(rows){this.countryCodes?.rows!==rows&&(this.countryCodes={rows,codes:new Set(rows.map(row=>row.code))});const{codes}=this.countryCodes,explicit=normalizeCountry(this.explicitCountry),preferred=normalizeCountry(this.defaultCountry??"");return codes.has(explicit)?explicit:codes.has(preferred)?preferred:rows[0]?.code??""}parse(input){if(!this.adapter)return fallbackParse(input);try{const parse=this.adapter.parse;return typeof parse!="function"?{status:"invalid",formatted:input}:normalizeParseResult(parse.call(this.adapter,input,this.country||void 0),input)}catch{return{status:"invalid",formatted:input}}}reconcileCountryCatalog(){this.explicitCountry=this.resolveCountry(this.availableCountries)}applyParsed(raw,parsed){this.editableValue=parsed.formatted??raw,this.status=parsed.status,parsed.country&&(this.country=normalizeCountry(parsed.country)),super.value=parsed.status==="valid"?parsed.e164:"",this.setAttribute("data-phone-status",parsed.status)}syncFormattedValue(input,digitsBeforeCaret){if(input.value!==this.editableValue&&(input.value=this.editableValue,digitsBeforeCaret!=null)){const position=indexAfterDigits(this.editableValue,digitsBeforeCaret);input.setSelectionRange(position,position)}}get eventDetail(){return{value:super.value,inputValue:this.editableValue,country:this.country,valid:this.internals.validity.valid,status:this.status}}static get observedAttributes(){const attributes=super.observedAttributes;return observeReactivePropertyWrites(this.prototype,["countryLabel","incompleteText","invalidText"],(instance,name,value)=>{const authored=value!=null;let ownershipChanged=!1;switch(name){case"countryLabel":if(instance.countryLabelAuthored===void 0)return;ownershipChanged=authored!==instance.countryLabelAuthored,instance.countryLabelAuthored=authored;break;case"incompleteText":if(instance.incompleteTextAuthored===void 0)return;ownershipChanged=authored!==instance.incompleteTextAuthored,instance.incompleteTextAuthored=authored;break;case"invalidText":if(instance.invalidTextAuthored===void 0)return;ownershipChanged=authored!==instance.invalidTextAuthored,instance.invalidTextAuthored=authored;break}ownershipChanged&&instance.requestUpdate(),name!=="countryLabel"&&instance.hasUpdated&&instance.updateValidity()}),attributes}attributeChangedCallback(name,oldValue,newValue){if(super.attributeChangedCallback(name,oldValue,newValue),newValue===null){if(name==="country-label")this.countryLabelAuthored=!1;else if(name==="incomplete-text")this.incompleteTextAuthored=!1;else if(name==="invalid-text")this.invalidTextAuthored=!1;else return;this.requestUpdate(),this.hasUpdated&&this.updateValidity()}}get effectiveCountryLabel(){return this.countryLabelAuthored?this.countryLabel:this.localize("countryPickerLabel")}effectivePhoneLabel(hasLabel){return this.accessibleLabel!==null?this.accessibleLabel:this.phoneLabel?this.phoneLabel:hasLabel?nothing:this.placeholder||this.localize("phoneInputLabel")}get incompleteMessage(){return(this.incompleteTextAuthored?this.incompleteText:"")||this.localize("phoneInputIncomplete")}get invalidMessage(){return(this.invalidTextAuthored?this.invalidText:"")||this.localize("valueInvalid")}countryName(row){if(row.label)return row.label;try{return getDisplayNames(this.effectiveLocale,{type:"region"}).of(row.code)??row.code}catch{return row.code}}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const flags={};let message="";this.required&&this.status==="empty"?(flags.valueMissing=!0,message=this.localize("fieldRequired")):this.status==="incomplete"?(flags.badInput=!0,message=this.incompleteMessage):this.status==="invalid"&&(flags.typeMismatch=!0,message=this.invalidMessage),this[SET_ANCHORED_VALIDITY](flags,message)}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}willUpdate(changed){super.willUpdate(changed),this.flags&&!LyraPhoneInput.flagRegistration&&(LyraPhoneInput.flagRegistration=import("../../media/flag/flag.js").catch(error=>{console.warn("<lr-phone-input> failed to register <lr-flag> for its flags option:",error)})),this.hasUpdated||this.seedFirstRenderState(()=>{this.hasCountryPrefixSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="country-prefix"||child.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="end")}),(!this.hasUpdated||changed.has("countries")||changed.has("adapter")||changed.has("country")||changed.has("defaultCountry"))&&this.reconcileCountryCatalog(),(changed.has("adapter")||changed.has("countries")||changed.has("country")||changed.has("defaultCountry"))&&this.editableValue&&this.applyParsed(this.editableValue,this.parse(this.editableValue))}updated(changed){super.updated(changed),changed.has("strings")&&this.updateValidity(),(changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("status"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}commitTypedText(input){const caret=input.selectionStart,digitsBeforeCaret=caret==null?null:digitsBefore(input.value,caret);this.applyParsed(input.value,this.parse(input.value)),this.syncFormattedValue(input,digitsBeforeCaret)}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.inputElement?.click()}focus(options){this.liveDisabled||this.inputElement?.focus(options)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(start,end,direction){this.inputElement?.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){const input=this.inputElement;if(!input)return;setNativeRangeText(input,replacement,start,end,selectMode);const caret=input.selectionStart,digitsBeforeCaret=caret==null?null:digitsBefore(input.value,caret);this.applyParsed(input.value,this.parse(input.value)),this.syncFormattedValue(input,digitsBeforeCaret)}formResetCallback(){this.explicitCountry="",this.reconcileCountryCatalog(),super.formResetCallback(),this.touched=!1}render(){const hasLabel=!!(this.label||this.hasLabelSlot||this.withLabel),hasHint=!!(this.hint||this.hasHintSlot||this.withHint),hasError=!!(this.errorText||this.hasErrorSlot),describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),rows=this.availableCountries,country=this.country,current=rows.find(row=>row.code===country),locale=this.effectiveLocale;(this.countryNames?.rows!==rows||this.countryNames.locale!==locale)&&(this.countryNames={rows,locale,names:rows.map(row=>this.countryName(row))});const{names}=this.countryNames;return html`
       <div part="form-control">
         <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label"></slot>
@@ -37,11 +37,12 @@ import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/n
             .value=${this.editableValue}
             placeholder=${this.placeholder}
             autocomplete=${this.autocomplete}
-            inputmode=${this.inputmode}
-            enterkeyhint=${this.enterkeyhint||nothing}
+            name=${this.name||nothing}
+            inputmode=${this.inputMode||nothing}
+            enterkeyhint=${this.enterKeyHint||nothing}
             spellcheck=${this.spellcheck}
             autocapitalize=${this.autocapitalize||nothing}
-            autocorrect=${this.autoCorrect||nothing}
+            autocorrect=${nativeAutocorrectAttribute(this,this.autocorrect)}
             aria-label=${this.effectivePhoneLabel(hasLabel)}
             aria-describedby=${describedBy||nothing}
             aria-invalid=${this.touched&&!this.internals.validity.valid?"true":"false"}
@@ -67,4 +68,4 @@ import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/n
           ${this.errorText}<slot name="error"></slot>
         </div>
       </div>
-    `}}__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"flags",void 0),__decorate([property({attribute:!1})],LyraPhoneInput.prototype,"adapter",null),__decorate([property({attribute:!1})],LyraPhoneInput.prototype,"countries",null),__decorate([property({attribute:"default-country"})],LyraPhoneInput.prototype,"defaultCountry",void 0),__decorate([property()],LyraPhoneInput.prototype,"label",void 0),__decorate([property()],LyraPhoneInput.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraPhoneInput.prototype,"errorText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraPhoneInput.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraPhoneInput.prototype,"withHint",void 0),__decorate([property()],LyraPhoneInput.prototype,"placeholder",void 0),__decorate([property({reflect:!0,converter:declaredDefaultConverter("m")})],LyraPhoneInput.prototype,"size",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"pill",void 0),__decorate([property({reflect:!0})],LyraPhoneInput.prototype,"appearance",void 0),__decorate([property({attribute:"aria-label"})],LyraPhoneInput.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"country-label",useDefault:!0})],LyraPhoneInput.prototype,"countryLabel",void 0),__decorate([property({attribute:"phone-label"})],LyraPhoneInput.prototype,"phoneLabel",void 0),__decorate([property({attribute:"incomplete-text",useDefault:!0})],LyraPhoneInput.prototype,"incompleteText",void 0),__decorate([property({attribute:"invalid-text",useDefault:!0})],LyraPhoneInput.prototype,"invalidText",void 0),__decorate([property({useDefault:!0})],LyraPhoneInput.prototype,"autocomplete",void 0),__decorate([property({useDefault:!0})],LyraPhoneInput.prototype,"inputmode",void 0),__decorate([property()],LyraPhoneInput.prototype,"enterkeyhint",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"readonly",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"autofocus",void 0),__decorate([property({converter:spellcheckConverter})],LyraPhoneInput.prototype,"spellcheck",void 0),__decorate([property()],LyraPhoneInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraPhoneInput.prototype,"autoCorrect",void 0),__decorate([query('input[part="input"]')],LyraPhoneInput.prototype,"inputElement",void 0),__decorate([state()],LyraPhoneInput.prototype,"editableValue",void 0),__decorate([state()],LyraPhoneInput.prototype,"status",void 0),__decorate([state()],LyraPhoneInput.prototype,"touched",void 0),__decorate([state()],LyraPhoneInput.prototype,"hasCountryPrefixSlot",void 0),__decorate([state()],LyraPhoneInput.prototype,"hasEndSlot",void 0);export{LyraPhoneInput,loadLibphonenumberAdapter};
+    `}}__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"flags",void 0),__decorate([property({attribute:!1})],LyraPhoneInput.prototype,"adapter",null),__decorate([property({attribute:!1})],LyraPhoneInput.prototype,"countries",null),__decorate([property({attribute:"default-country"})],LyraPhoneInput.prototype,"defaultCountry",void 0),__decorate([property()],LyraPhoneInput.prototype,"label",void 0),__decorate([property()],LyraPhoneInput.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraPhoneInput.prototype,"errorText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraPhoneInput.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraPhoneInput.prototype,"withHint",void 0),__decorate([property()],LyraPhoneInput.prototype,"placeholder",void 0),__decorate([property({reflect:!0,converter:declaredDefaultConverter("m")})],LyraPhoneInput.prototype,"size",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"pill",void 0),__decorate([property({reflect:!0})],LyraPhoneInput.prototype,"appearance",void 0),__decorate([property({attribute:"aria-label"})],LyraPhoneInput.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"country-label",useDefault:!0})],LyraPhoneInput.prototype,"countryLabel",void 0),__decorate([property({attribute:"phone-label"})],LyraPhoneInput.prototype,"phoneLabel",void 0),__decorate([property({attribute:"incomplete-text",useDefault:!0})],LyraPhoneInput.prototype,"incompleteText",void 0),__decorate([property({attribute:"invalid-text",useDefault:!0})],LyraPhoneInput.prototype,"invalidText",void 0),__decorate([property({useDefault:!0})],LyraPhoneInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode",useDefault:!0})],LyraPhoneInput.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraPhoneInput.prototype,"enterKeyHint",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"readonly",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraPhoneInput.prototype,"autofocus",void 0),__decorate([property({converter:spellcheckConverter})],LyraPhoneInput.prototype,"spellcheck",void 0),__decorate([property()],LyraPhoneInput.prototype,"autocapitalize",void 0),__decorate([property({converter:autocorrectConverter})],LyraPhoneInput.prototype,"autocorrect",null),__decorate([query('input[part="input"]')],LyraPhoneInput.prototype,"inputElement",void 0),__decorate([state()],LyraPhoneInput.prototype,"editableValue",void 0),__decorate([state()],LyraPhoneInput.prototype,"status",void 0),__decorate([state()],LyraPhoneInput.prototype,"touched",void 0),__decorate([state()],LyraPhoneInput.prototype,"hasCountryPrefixSlot",void 0),__decorate([state()],LyraPhoneInput.prototype,"hasEndSlot",void 0);export{LyraPhoneInput,loadLibphonenumberAdapter};

package/dist/components/forms/phone-input/phone-input.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlTextWrap,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; min-inline-size: 0; --_lr-phone-input-padding-block-default: var(--lr-form-control-padding-block); --_lr-phone-input-font-size-default: var(--lr-font-size-md-sm); --_lr-phone-input-flag-size-default: var(--lr-font-size-lg); --_lr-phone-input-glyph-size-default: var(--lr-font-size-md-sm); --_lr-phone-input-gap-default: var(--lr-space-xs); --_lr-phone-input-radius-default: var(--lr-radius); --_lr-phone-input-control-min-height-default: var(--lr-form-control-height); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); --_lr-phone-input-fill-default: var(--lr-color-surface); --_lr-phone-input-border-color-default: var(--lr-color-border); } :host([appearance='filled-outlined']) { --_lr-phone-input-fill-default: var(--lr-color-surface-raised); } :host([appearance='filled']) { --_lr-phone-input-fill-default: var(--lr-color-surface-raised); --_lr-phone-input-border-color-default: transparent; } :host([appearance='plain']) { --_lr-phone-input-fill-default: transparent; --_lr-phone-input-border-color-default: transparent; } :host([appearance='accent']) { --_lr-phone-input-fill-default: var(--lr-color-brand-quiet); --_lr-phone-input-border-color-default: var(--lr-color-brand); } :host([pill]) { --_lr-phone-input-radius-default: var(--lr-radius-pill); } :host([size='2xs']) { --_lr-phone-input-font-size-default: var(--lr-font-size-2xs); --_lr-phone-input-flag-size-default: var(--lr-font-size-sm); --_lr-phone-input-glyph-size-default: var(--lr-font-size-2xs); } :host([size='xs']) { --_lr-phone-input-font-size-default: var(--lr-font-size-xs); --_lr-phone-input-flag-size-default: var(--lr-font-size-md-sm); --_lr-phone-input-glyph-size-default: var(--lr-font-size-xs); } :host([size='s']), :host([size='small']) { --_lr-phone-input-font-size-default: var(--lr-font-size-sm); --_lr-phone-input-flag-size-default: var(--lr-font-size-m); --_lr-phone-input-glyph-size-default: var(--lr-font-size-sm); } :host([size='l']), :host([size='large']) { --_lr-phone-input-font-size-default: var(--lr-font-size-lg); --_lr-phone-input-flag-size-default: var(--lr-font-size-xl); --_lr-phone-input-glyph-size-default: var(--lr-font-size-lg); } :host([size='xl']) { --_lr-phone-input-font-size-default: var(--lr-font-size-xl); --_lr-phone-input-flag-size-default: var(--lr-font-size-2xl); --_lr-phone-input-glyph-size-default: var(--lr-font-size-xl); } [part='form-control'] { min-inline-size: 0; } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden], [part='country-prefix'][hidden], [part='end'][hidden], [part='hint'][hidden], [part='error'][hidden] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; align-items: center; box-sizing: border-box; min-inline-size: 0; inline-size: 100%; min-block-size: var(--lr-phone-input-control-height, var(--lr-phone-input-control-min-height, var(--_lr-phone-input-control-min-height-default))); block-size: var(--lr-phone-input-control-height, auto); font-size: var(--lr-phone-input-font-size, var(--_lr-phone-input-font-size-default)); border: var(--lr-border-width-thin) solid var(--lr-phone-input-border-color, var(--_lr-phone-input-border-color-default)); border-radius: var(--lr-phone-input-radius, var(--_lr-phone-input-radius-default)); background: var(--lr-phone-input-fill, var(--_lr-phone-input-fill-default)); color: var(--lr-color-text); } [part='input-wrapper']:focus-within { border-color: var(--lr-phone-input-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host([data-invalid]) [part='input-wrapper'] { border-color: var( --lr-phone-input-invalid-border-color, var(--lr-phone-input-border-color, var(--_lr-phone-input-border-color-default)) ); } :host(:disabled) [part='input-wrapper'] { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part='country-prefix'] { display: inline-flex; flex: 0 0 auto; align-items: center; padding-inline-start: var(--lr-space-s); } [part='country'] { position: relative; display: inline-flex; align-items: stretch; flex: 0 0 auto; align-self: stretch; min-block-size: var(--lr-icon-button-size); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); } [part='country-select'] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: none; appearance: none; opacity: 0; color: inherit; font: inherit; cursor: pointer; } [part='country-select']:disabled { cursor: not-allowed; } [part='country-select'] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part='country-trigger'] { display: inline-flex; align-items: center; gap: var(--lr-phone-input-gap, var(--_lr-phone-input-gap-default)); padding-inline: var(--lr-space-s); border-start-start-radius: var(--lr-phone-input-radius, var(--_lr-phone-input-radius-default)); border-end-start-radius: var(--lr-phone-input-radius, var(--_lr-phone-input-radius-default)); transition: background-color var(--lr-transition-fast); } [part='country-select']:not(:disabled):hover + [part='country-trigger'] { background: var(--lr-phone-input-country-hover-bg, var(--lr-color-brand-quiet)); } [part='country-select']:not(:disabled):active + [part='country-trigger'] { background: color-mix( in oklab, var(--lr-phone-input-country-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='country-select']:focus-visible + [part='country-trigger'] { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part='flag'] { font-size: var(--lr-phone-input-flag-size, var(--_lr-phone-input-flag-size-default)); } [part='country-code'] { font-size: var(--lr-phone-input-font-size, var(--_lr-phone-input-font-size-default)); font-weight: var(--lr-font-weight-semibold); } [part='country-code'][data-placeholder] { color: var(--lr-color-text-quiet); font-weight: var(--lr-font-weight-normal); } [part='expand-icon'] { display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); font-size: var(--lr-phone-input-glyph-size, var(--_lr-phone-input-glyph-size-default)); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='input']:focus { outline: none; } [part='calling-code'] { flex: 0 0 auto; padding-inline-start: var(--lr-space-s); color: var(--lr-color-text-quiet); direction: ltr; font-size: var(--lr-phone-input-font-size, var(--_lr-phone-input-font-size-default)); unicode-bidi: isolate; } [part='input'] { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; padding-block: var(--lr-phone-input-padding-block, var(--_lr-phone-input-padding-block-default)); padding-inline: var(--lr-space-s); border: none; background: transparent; color: inherit; font: inherit; text-align: start; } [part='input']::placeholder { color: var(--lr-color-text-quiet); } [part='end'] { display: inline-flex; flex: 0 0 auto; align-items: center; padding-inline-end: var(--lr-space-s); } [part='hint'], [part='error'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); } [part='hint'] { color: var(--lr-color-text-quiet); } [part='error'] { color: var(--lr-color-danger); } @media (forced-colors: active) { [part='country-select']:not(:disabled):hover + [part='country-trigger'] { outline-color: Highlight; outline-style: dashed; outline-width: var(--lr-border-width-thin); outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part='country-select']:not(:disabled):active + [part='country-trigger'] { outline-color: Highlight; outline-style: solid; outline-width: var(--lr-border-width-thick); outline-offset: calc(-1 * var(--lr-border-width-thick)); } } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { ${formControlTextWrap} } `;export{styles};
+import{css}from"lit";import{formControlTextWrap,formControlAppearance,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; min-inline-size: 0; --_lr-phone-input-padding-block-default: var(--lr-form-control-padding-block); --_lr-phone-input-font-size-default: var(--lr-font-size-md-sm); --_lr-phone-input-flag-size-default: var(--lr-font-size-lg); --_lr-phone-input-glyph-size-default: var(--lr-font-size-md-sm); --_lr-phone-input-gap-default: var(--lr-space-xs); --_lr-phone-input-radius-default: var(--lr-radius); --_lr-phone-input-control-min-height-default: var(--lr-form-control-height); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); --_lr-phone-input-fill-default: var(--_lr-form-control-fill); --_lr-phone-input-border-color-default: var(--_lr-form-control-border-color); } ${formControlAppearance} :host([pill]) { --_lr-phone-input-radius-default: var(--lr-radius-pill); } :host([size='2xs']) { --_lr-phone-input-font-size-default: var(--lr-font-size-2xs); --_lr-phone-input-flag-size-default: var(--lr-font-size-sm); --_lr-phone-input-glyph-size-default: var(--lr-font-size-2xs); } :host([size='xs']) { --_lr-phone-input-font-size-default: var(--lr-font-size-xs); --_lr-phone-input-flag-size-default: var(--lr-font-size-md-sm); --_lr-phone-input-glyph-size-default: var(--lr-font-size-xs); } :host([size='s']), :host([size='small']) { --_lr-phone-input-font-size-default: var(--lr-font-size-sm); --_lr-phone-input-flag-size-default: var(--lr-font-size-m); --_lr-phone-input-glyph-size-default: var(--lr-font-size-sm); } :host([size='l']), :host([size='large']) { --_lr-phone-input-font-size-default: var(--lr-font-size-lg); --_lr-phone-input-flag-size-default: var(--lr-font-size-xl); --_lr-phone-input-glyph-size-default: var(--lr-font-size-lg); } :host([size='xl']) { --_lr-phone-input-font-size-default: var(--lr-font-size-xl); --_lr-phone-input-flag-size-default: var(--lr-font-size-2xl); --_lr-phone-input-glyph-size-default: var(--lr-font-size-xl); } [part='form-control'] { min-inline-size: 0; } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden], [part='country-prefix'][hidden], [part='end'][hidden], [part='hint'][hidden], [part='error'][hidden] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; align-items: center; box-sizing: border-box; min-inline-size: 0; inline-size: 100%; min-block-size: var(--lr-phone-input-control-height, var(--lr-phone-input-control-min-height, var(--_lr-phone-input-control-min-height-default))); block-size: var(--lr-phone-input-control-height, auto); font-size: var(--lr-phone-input-font-size, var(--_lr-phone-input-font-size-default)); border: var(--lr-border-width-thin) solid var(--lr-phone-input-border-color, var(--_lr-phone-input-border-color-default)); border-radius: var(--lr-phone-input-radius, var(--_lr-phone-input-radius-default)); background: var(--lr-phone-input-fill, var(--_lr-phone-input-fill-default)); color: var(--lr-color-text); } [part='input-wrapper']:focus-within { border-color: var(--lr-phone-input-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host([data-invalid]) [part='input-wrapper'] { border-color: var( --lr-phone-input-invalid-border-color, var(--lr-phone-input-border-color, var(--_lr-phone-input-border-color-default)) ); } :host(:disabled) [part='input-wrapper'] { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part='country-prefix'] { display: inline-flex; flex: 0 0 auto; align-items: center; padding-inline-start: var(--lr-space-s); } [part='country'] { position: relative; display: inline-flex; align-items: stretch; flex: 0 0 auto; align-self: stretch; min-block-size: var(--lr-icon-button-size); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); } [part='country-select'] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: none; appearance: none; opacity: 0; color: inherit; font: inherit; cursor: pointer; } [part='country-select']:disabled { cursor: not-allowed; } [part='country-select'] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part='country-trigger'] { display: inline-flex; align-items: center; gap: var(--lr-phone-input-gap, var(--_lr-phone-input-gap-default)); padding-inline: var(--lr-space-s); border-start-start-radius: var(--lr-phone-input-radius, var(--_lr-phone-input-radius-default)); border-end-start-radius: var(--lr-phone-input-radius, var(--_lr-phone-input-radius-default)); transition: background-color var(--lr-transition-fast); } [part='country-select']:not(:disabled):hover + [part='country-trigger'] { background: var(--lr-phone-input-country-hover-bg, var(--lr-color-brand-quiet)); } [part='country-select']:not(:disabled):active + [part='country-trigger'] { background: color-mix( in oklab, var(--lr-phone-input-country-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='country-select']:focus-visible + [part='country-trigger'] { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part='flag'] { font-size: var(--lr-phone-input-flag-size, var(--_lr-phone-input-flag-size-default)); } [part='country-code'] { font-size: var(--lr-phone-input-font-size, var(--_lr-phone-input-font-size-default)); font-weight: var(--lr-font-weight-semibold); } [part='country-code'][data-placeholder] { color: var(--lr-color-text-quiet); font-weight: var(--lr-font-weight-normal); } [part='expand-icon'] { display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); font-size: var(--lr-phone-input-glyph-size, var(--_lr-phone-input-glyph-size-default)); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='input']:focus { outline: none; } [part='calling-code'] { flex: 0 0 auto; padding-inline-start: var(--lr-space-s); color: var(--lr-color-text-quiet); direction: ltr; font-size: var(--lr-phone-input-font-size, var(--_lr-phone-input-font-size-default)); unicode-bidi: isolate; } [part='input'] { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; padding-block: var(--lr-phone-input-padding-block, var(--_lr-phone-input-padding-block-default)); padding-inline: var(--lr-space-s); border: none; background: transparent; color: inherit; font: inherit; text-align: start; } [part='input']::placeholder { color: var(--lr-color-text-quiet); } [part='end'] { display: inline-flex; flex: 0 0 auto; align-items: center; padding-inline-end: var(--lr-space-s); } [part='hint'], [part='error'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); } [part='hint'] { color: var(--lr-color-text-quiet); } [part='error'] { color: var(--lr-color-danger); } @media (forced-colors: active) { [part='country-select']:not(:disabled):hover + [part='country-trigger'] { outline-color: Highlight; outline-style: dashed; outline-width: var(--lr-border-width-thin); outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part='country-select']:not(:disabled):active + [part='country-trigger'] { outline-color: Highlight; outline-style: solid; outline-width: var(--lr-border-width-thick); outline-offset: calc(-1 * var(--lr-border-width-thick)); } } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { ${formControlTextWrap} } `;export{styles};

package/dist/components/forms/radio/radio-group.class.d.ts

@@ -1,4 +1,4 @@
-import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';import type{LyraRadio}from'./radio.class.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraRadioGroupEventMap{input:Event;change:Event;'lr-input':CustomEvent<{value:string;option:LyraRadio;radio:LyraRadio;}>;'lr-change':CustomEvent<{value:string;option:LyraRadio;radio:LyraRadio;}>;'lr-activate':CustomEvent<{value:string;option:LyraRadio;radio:LyraRadio;}>;'lr-invalid':CustomEvent<null>;}export type RadioGroupOrientation=LyraOrientation;
+import{type PropertyValues,type TemplateResult}from'lit';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import type{LyraSize}from'../../../internal/variants.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';import type{LyraRadio}from'./radio.class.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraRadioGroupEventMap{input:Event;change:Event;'lr-input':CustomEvent<{value:string;option:LyraRadio;radio:LyraRadio;}>;'lr-change':CustomEvent<{value:string;option:LyraRadio;radio:LyraRadio;}>;'lr-activate':CustomEvent<{value:string;option:LyraRadio;radio:LyraRadio;}>;'lr-invalid':CustomEvent<null>;}export type RadioGroupOrientation=LyraOrientation;
 /**
 * `<lr-radio-group>` — a labeled, keyboard-navigable group of radios.
 * A required but pristine group exposes `aria-invalid="false"`; intrinsic invalidity is projected
@@ -62,7 +62,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraRadioGroup extends LyraElement<LyraRadioGroupEventMap>{protected static collectionSupport:import("../../../internal/lyra-element.js").LyraCollectionSupport;protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-input':readonly string[];'lr-change':readonly string[];'lr-activate':readonly string[];}>;
+export declare class LyraRadioGroup extends LyraFormControlElement<LyraRadioGroupEventMap>{protected static collectionSupport:import("../../../internal/lyra-element.js").LyraCollectionSupport;protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-input':readonly string[];'lr-change':readonly string[];'lr-activate':readonly string[];}>;
 /** Public WA-compatible intrinsic validator catalog. */
 static get validators():LyraFormValidator<LyraRadioGroup>[];static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{name:{reflect:boolean;noAccessor:boolean;converter:import("lit").ComplexAttributeConverter<string,unknown>;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;noAccessor:boolean;};customError:{attribute:string;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};orientation:{reflect:boolean;converter:import("../../../internal/converters.js").LiteralSetConverter<LyraOrientation>;};form:{noAccessor:boolean;};};
 /**
@@ -81,7 +81,7 @@ helpText:string;private shoelaceDefaultValue;
 withLabel:boolean;withHint:boolean;errorText:string;
 /** Accessible-name override forwarded to the internal radiogroup. Attribute presence wins,
 * including an explicitly empty `aria-label`, which also suppresses visible-label linkage. */
-accessibleLabel:string;private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasHelpTextSlot();private get hasErrorSlot();private readonly labelId;private readonly hintId;private readonly errorId;private managedRadios;private syncingRadios;private membershipObserver?;private membershipObserverDocument?;private membershipObserverGeneration;private runResizeObserver?;private runProjectionFrame?;private internals;private validityController;private _name;private _value;private _defaultValue;private _valueDirty;private reflectingDefaultValue;private reflectingCustomError;private _required;private _disabled;private _fieldsetDisabled;private hasInteracted;private pendingSelection?;private hadShoelaceDefaultValue;
+accessibleLabel:string;private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasHelpTextSlot();private get hasErrorSlot();private readonly labelId;private readonly hintId;private readonly errorId;private managedRadios;private syncingRadios;private membershipObserver?;private membershipObserverDocument?;private membershipObserverGeneration;private readonly runs;private internals;private validityController;private _name;private _value;private _defaultValue;private _valueDirty;private reflectingDefaultValue;private reflectingCustomError;private _required;private _disabled;private _fieldsetDisabled;private hasInteracted;private pendingSelection?;private hadShoelaceDefaultValue;
 /** Submitted form-data key. Lyra defaults to empty, unlike `<sl-radio-group>`'s `"option"`;
 *  the migration codemod inserts `name="option"`, while a manual tag rename must set it
 *  explicitly to preserve Shoelace's default.
@@ -90,7 +90,7 @@ get name():string;set name(next:string|null);get value():string;set value(next:s
 /** Reflected current reset default; changing it never overwrites a dirty live selection. */
 get defaultValue():string;set defaultValue(next:string);
 /** Consumer-supplied validation message reflected through `custom-error`. */
-get customError():string|null;set customError(next:string|null);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);get effectiveDisabled():boolean;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;constructor();private onInvalid;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;private armRunResizeObserver;private scheduleRunProjection;private isButtonRadio;private projectButtonRuns;private armMembershipObserver;disconnectedCallback():void;adoptedCallback():void;private resetMembershipObserver;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private radioGroupOwner;private radios;private isRadioAvailable;private selectValue;private syncRadios;private releaseRadios;private onFocusOut;private onKeyDown;private onRadioSlotChange;
+get customError():string|null;set customError(next:string|null);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);get effectiveDisabled():boolean;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);constructor();private onInvalid;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;private isButtonRadio;private projectButtonRuns;private armMembershipObserver;disconnectedCallback():void;adoptedCallback():void;private resetMembershipObserver;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private radioGroupOwner;private radios;private isRadioAvailable;private selectValue;private syncRadios;private releaseRadios;private onFocusOut;private onKeyDown;private onRadioSlotChange;
 /** Moves focus to the selected enabled option, or the first enabled option when empty. */
 focus(options?:FocusOptions):void;
 /** Removes focus from whichever owned option currently contains the deep active element. */