@aceshooting/lyra-ui 9.1.1 → 10.0.1

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,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{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{findImplicitSubmitter,isNativeSubmitter,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}from"../../../internal/converters.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_otpInputIncomplete,LYRA_DEFAULT_otpInputLabel}from"../../../internal/default-strings.generated.js";const 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,styles]}}class LyraOtpInput extends FormAssociated(LyraOtpInputBase){constructor(){super(...arguments),this.label="",this.hint="",this.errorText="",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.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,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.segmentEditPendingChange=!1,this.autosubmitToken=0,this.onInput=event=>{if(event.isComposing===!0){event.stopPropagation();return}const raw=event.target.value,next=this.sanitize(raw),previous=this.value,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),previous&&!next&&this.emit("lr-clear"),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,relayNativeEvent(this,event)},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)},this.onLabelSlotChange=event=>{this.hasLabelSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedNodes({flatten:!0}).length>0}}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 input(){return this.control??null}get validationTarget(){return this.control??null}get value(){return super.value}set value(next){this.autosubmitToken+=1;const normalized=this.sanitize(next??"");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();if(!form)return;const submitter=findImplicitSubmitter(form);submitter?isNativeSubmitter(submitter)?form.requestSubmit(submitter):submitter.click():form.requestSubmit()}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.value!==completionValue||this.filledSegmentCount!==this.renderedSegmentCount||this.submitOwningForm()})}commitSegmentEdit(values,inputType,data=null){this.autosubmitToken+=1;const previousValue=this.value,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.segmentEditPendingChange=!0,previousValue&&!nextValue&&this.emit("lr-clear"),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);start===void 0||end===void 0?control.setRangeText(boundedReplacement):control.setRangeText(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(){const hadValue=this.value.length>0;this.value="",this.control&&(this.control.value=""),this.focus(),hadValue&&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")}willUpdate(changed){if(super.willUpdate(changed),changed.has("type")||changed.has("case")||changed.has("length")||changed.has("format")){const next=this.sanitize(this.value);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,"--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(){this.segmentEditPendingChange&&(this.segmentEditPendingChange=!1,dispatchNativeEvent(this,"change"))}renderSegment(index,invalid){const char=this.segmentValues[index]??"",filled=char!=="",active=this.focused&&!this.effectiveDisabled&&!this.readonly&&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,hasHint=!!this.hint||this.hasHintSlot,hasError=!!this.errorText||this.hasErrorSlot,intrinsicInvalid=this.touched&&!this.validity.valid,ariaInvalid=hasError||intrinsicInvalid,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" ");let segmentIndex=-1;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,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{findImplicitSubmitter,isNativeSubmitter,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}from"../../../internal/converters.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_otpInputIncomplete,LYRA_DEFAULT_otpInputLabel}from"../../../internal/default-strings.generated.js";const 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,styles]}}class LyraOtpInput extends FormAssociated(LyraOtpInputBase){constructor(){super(...arguments),this.label="",this.hint="",this.errorText="",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.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,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.segmentEditPendingChange=!1,this.autosubmitToken=0,this.onInput=event=>{if(event.isComposing===!0){event.stopPropagation();return}const raw=event.target.value,next=this.sanitize(raw),previous=this.value,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),previous&&!next&&this.emit("lr-clear"),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,relayNativeEvent(this,event)},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)},this.onLabelSlotChange=event=>{this.hasLabelSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedNodes({flatten:!0}).length>0}}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 input(){return this.control??null}get validationTarget(){return this.control??null}get value(){return super.value}set value(next){this.autosubmitToken+=1;const normalized=this.sanitize(next??"");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();if(!form)return;const submitter=findImplicitSubmitter(form);submitter?isNativeSubmitter(submitter)?form.requestSubmit(submitter):submitter.click():form.requestSubmit()}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.value!==completionValue||this.filledSegmentCount!==this.renderedSegmentCount||this.submitOwningForm()})}commitSegmentEdit(values,inputType,data=null){this.autosubmitToken+=1;const previousValue=this.value,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.segmentEditPendingChange=!0,previousValue&&!nextValue&&this.emit("lr-clear"),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);start===void 0||end===void 0?control.setRangeText(boundedReplacement):control.setRangeText(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(){const hadValue=this.value.length>0;this.value="",this.control&&(this.control.value=""),this.focus(),hadValue&&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")}willUpdate(changed){if(super.willUpdate(changed),changed.has("type")||changed.has("case")||changed.has("length")||changed.has("format")){const next=this.sanitize(this.value);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,"--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(){this.segmentEditPendingChange&&(this.segmentEditPendingChange=!1,dispatchNativeEvent(this,"change"))}renderSegment(index,invalid){const char=this.segmentValues[index]??"",filled=char!=="",active=this.focused&&!this.effectiveDisabled&&!this.readonly&&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,hasHint=!!this.hint||this.hasHintSlot,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" ?hidden=${!!this.label} @slotchange=${this.onLabelSlotChange}></slot>
@@ -20,8 +20,8 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             ?disabled=${this.effectiveDisabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            aria-label=${this.getAttribute("aria-label")||(hasLabel?nothing:this.localize("otpInputLabel"))}
-            aria-labelledby=${hasLabel&&!this.getAttribute("aria-label")?this.labelId:nothing}
+            aria-label=${hostAriaLabel(this)??(hasLabel?nothing:this.localize("otpInputLabel"))}
+            aria-labelledby=${labelledBy}
             aria-describedby=${describedBy||nothing}
             aria-invalid=${ariaInvalid?"true":"false"}
             @input=${this.onInput}

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

@@ -42,10 +42,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   }
   ${formControlRequiredMarker}
 
-  /* One real <input> stretched invisibly across the presentational segments. It remains the native
-     integration point for SMS autofill, IME composition, mobile keyboards and selection, while the
-     fixed-cell key/paste handlers map editing intents into the visual model. One field also keeps
-     the control to one tab stop, which is what the WAI-ARIA text-input pattern expects. */
   [part~='segments'] {
     position: relative;
     display: flex;
@@ -74,8 +70,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     padding: 0;
     border: none;
     background: none;
-    /* Transparent rather than hidden: a hidden input cannot receive focus or show a native
-       autofill affordance, and opacity: 0 keeps it a real, focusable text field. */
     color: transparent;
     caret-color: transparent;
     font: inherit;
@@ -83,8 +77,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     opacity: 0;
     cursor: text;
   }
-  /* :disabled, not [disabled] -- only the native pseudo-class tracks disablement cascaded from an
-     ancestor <fieldset disabled>, which never touches this element's own attribute. */
   :host(:disabled) [part='control'] {
     cursor: not-allowed;
   }
@@ -107,7 +99,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     line-height: var(--lr-line-height-snug);
     transition: border-color var(--lr-transition-fast), box-shadow var(--lr-transition-fast);
   }
-  /* State in the part name -- ::part(segment)[data-active] never matches. */
   [part~='active'] {
     border-color: var(--lr-otp-input-active-border-color, var(--lr-focus-ring-color));
     box-shadow: 0 0 0 var(--lr-focus-ring-width) var(--lr-otp-input-active-ring-color, var(--lr-focus-ring-color));
@@ -125,17 +116,10 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     user-select: none;
   }
 
-  /* Masking is display-only: the real characters stay in value and in the input the screen
-     reader reads, exactly like a password field's dots. Generated content rather than rendered
-     text, so the glyph can never reach an accessible name -- the segment boxes are aria-hidden
-     and ::after content is not exposed to assistive technology in the first place.
-     The placeholder-mask token is the same glyph in a segment that holds nothing yet, so the
-     field reads as a fixed-length code before any entry. */
   [part~='masked']::after,
   [part~='placeholder-mask']::after {
     content: var(--mask-char, var(--lr-otp-input-mask-char, var(--_lr-otp-input-mask-char-default)));
   }
-  /* An unentered glyph is a placeholder, so it sits quieter than an entered character. */
   [part~='placeholder-mask'] {
     color: var(--lr-color-text-quiet);
   }

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

@@ -57,10 +57,18 @@ export interface LibphonenumberModuleLike<CountryCode extends string = string> {
  * Keeping the loader consumer-supplied avoids a static import, so neither the
  * dependency nor its numbering metadata enters Lyra's base bundle.
  *
+ * Accepts either the module namespace directly (named exports, as `libphonenumber-js`'s own type
+ * declarations describe it) or a `{ default: {...} }`-wrapped namespace, since some bundler/CJS
+ * interop configurations resolve it that way -- the same normalization `map-loader.ts` and
+ * `spreadsheet-loader.ts` apply to their own optional peers. Rejects (with a descriptive `TypeError`
+ * naming the missing capability, not an incidental "not a function" deep inside this function) a
+ * resolved value that has neither shape, or is missing a required method, rather than silently
+ * calling into `undefined`.
+ *
  * @example
  * `el.adapter = await loadLibphonenumberAdapter(() => import('libphonenumber-js/min'))`
  */
-export declare function loadLibphonenumberAdapter<CountryCode extends string>(loader: () => Promise<LibphonenumberModuleLike<CountryCode>>): Promise<LyraPhoneNumberAdapter>;
+export declare function loadLibphonenumberAdapter<CountryCode extends string = string>(loader: () => Promise<unknown>): Promise<LyraPhoneNumberAdapter>;
 export interface LyraPhoneInputEventDetail {
     /** Canonical E.164 value, or an empty string until the current input is valid. */
     value: string;

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,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{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_fieldRequired,LYRA_DEFAULT_phoneInputIncomplete,LYRA_DEFAULT_phoneInputLabel,LYRA_DEFAULT_select,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";async function loadLibphonenumberAdapter(loader){const module=await loader();return{countries:Object.freeze(module.getCountries().map(code=>Object.freeze({code:normalizeCountry(code),callingCode:module.getCountryCallingCode(code)}))),parse(input,country){const raw=input.trim();if(!raw)return{status:"empty"};const normalizedCountry=country?normalizeCountry(country):void 0,phone=module.parsePhoneNumberFromString(raw,normalizedCountry);if(!phone)return{status:module.validatePhoneNumberLength?.(raw,normalizedCountry)==="TOO_SHORT"||isDialLike(raw)?"incomplete":"invalid",formatted:raw};const formatted=raw.startsWith("+")?phone.formatInternational():phone.formatNational();if(phone.isValid())return{status:"valid",e164:phone.number,formatted,country:phone.country?normalizeCountry(phone.country):normalizedCountry};const length=module.validatePhoneNumberLength?.(raw,normalizedCountry);return{status:length==="TOO_SHORT"||!length&&!phone.isPossible()?"incomplete":"invalid",formatted,country:phone.country?normalizeCountry(phone.country):normalizedCountry}}}}class LyraPhoneInputBase extends LyraElement{}const E164_RE=/^\+[1-9]\d{1,14}$/,DIAL_LIKE_RE=/^[+\d\s().-]+$/;function normalizeCountry(country){return country.trim().toUpperCase()}function isDialLike(value){return DIAL_LIKE_RE.test(value.trim())}function digitsBefore(value,index){let count=0;for(let i=0;i<index&&i<value.length;i++)/\d/.test(value[i])&&count++;return count}function indexAfterDigits(value,digitCount){if(digitCount<=0)return 0;let count=0;for(let i=0;i<value.length;i++)if(/\d/.test(value[i])&&(count++,count===digitCount))return i+1;return value.length}function fallbackParse(input){const raw=input.trim();if(!raw)return{status:"empty"};const compact=raw.replace(/[\s().-]/g,"");return E164_RE.test(compact)?{status:"valid",e164:compact,formatted:raw}:isDialLike(raw)?{status:"incomplete",formatted:raw}:{status:"invalid",formatted:raw}}function normalizeParseResult(result,input){try{if(result===null||typeof result!="object")return{status:"invalid",formatted:input};const record=result,status=record.status;if(status!=="empty"&&status!=="incomplete"&&status!=="invalid"&&status!=="valid")return{status:"invalid",formatted:input};const formatted=record.formatted;if(formatted!==void 0&&typeof formatted!="string")return{status:"invalid",formatted:input};const rawCountry=record.country;if(rawCountry!==void 0&&typeof rawCountry!="string")return{status:"invalid",formatted:formatted??input};const country=typeof rawCountry=="string"&&/^[A-Za-z]{2}$/.test(rawCountry.trim())?normalizeCountry(rawCountry):void 0,metadata={...formatted===void 0?{}:{formatted},...country===void 0?{}:{country}};if(status==="valid"){const e164=record.e164;return typeof e164!="string"||!E164_RE.test(e164)?{status:"invalid",formatted:formatted??input,...country?{country}:{}}:{status,e164,...metadata}}return{status,...metadata}}catch{return{status:"invalid",formatted:input}}}const MAX_PHONE_COUNTRIES=512;function normalizeCountryCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[],seen=new Set;let length=0;try{length=Math.min(source.length,MAX_PHONE_COUNTRIES)}catch{return Object.freeze(rows)}for(let index=0;index<length;index+=1)try{const item=source[index];if(item===null||typeof item!="object")continue;const candidate=item,rawCode=candidate.code,rawCallingCode=candidate.callingCode,rawLabel=candidate.label;if(typeof rawCode!="string"||typeof rawCallingCode!="string")continue;const code=normalizeCountry(rawCode),callingCode=rawCallingCode.replace(/^\+/,"");if(!/^[A-Z]{2}$/.test(code)||!/^[1-9]\d{0,2}$/.test(callingCode)||seen.has(code)||rawLabel!==void 0&&typeof rawLabel!="string")continue;seen.add(code),rows.push(Object.freeze({code,callingCode,...rawLabel===void 0?{}:{label:rawLabel}}))}catch{}return Object.freeze(rows)}class LyraPhoneInput extends FormAssociated(LyraPhoneInputBase){constructor(){super(...arguments),this.flags=!1,this.adapterCountries=Object.freeze([]),this.defaultCountry="",this.label="",this.hint="",this.errorText="",this.placeholder="",this.size="m",this.pill=!1,this.accessibleLabel=null,this.countryLabel="Select",this.phoneLabel="",this.incompleteText="This phone number is incomplete.",this.invalidText="The value is invalid.",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.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasCountryPrefixSlot=!1,this.inputId=nextId("phone-input"),this.hintId=nextId("phone-hint"),this.errorId=nextId("phone-error"),this.explicitCountry="",this.onInput=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}const input=event.currentTarget,caret=input.selectionStart,digitsBeforeCaret=caret==null?null:digitsBefore(input.value,caret);this.applyParsed(input.value,this.parse(input.value)),this.syncFormattedValue(input,digitsBeforeCaret),relayNativeEvent(this,event),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.onLabelSlotChange=event=>{this.hasLabelSlot=event.currentTarget.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.currentTarget.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.currentTarget.assignedElements({flatten:!0}).length>0},this.onCountryPrefixSlotChange=event=>{this.hasCountryPrefixSlot=event.currentTarget.assignedElements({flatten:!0}).length>0}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,phoneInputIncomplete:LYRA_DEFAULT_phoneInputIncomplete,phoneInputLabel:LYRA_DEFAULT_phoneInputLabel,select:LYRA_DEFAULT_select,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 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){const codes=rows.map(row=>row.code),explicit=normalizeCountry(this.explicitCountry),preferred=normalizeCountry(this.defaultCountry);return codes.includes(explicit)?explicit:codes.includes(preferred)?preferred:codes[0]??""}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}}get effectiveCountryLabel(){return this.localize("select",this.countryLabel==="Select"?void 0:this.countryLabel)}get effectivePhoneLabel(){return this.accessibleLabel!==null?this.accessibleLabel:this.phoneLabel||this.label||this.placeholder||this.localize("phoneInputLabel")}get incompleteMessage(){return this.localize("phoneInputIncomplete",this.incompleteText==="This phone number is incomplete."?void 0:this.incompleteText)}get invalidMessage(){return this.localize("valueInvalid",this.invalidText==="The value is invalid."?void 0:this.invalidText)}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)}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.hasLabelSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="error"),this.hasCountryPrefixSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="country-prefix")),(!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){if(super.updated(changed),changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("status")){const invalid=this.touched&&!this.internals.validity.valid;this.toggleAttribute("data-invalid",invalid),invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")}}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;start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(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),validationError=this.touched?this.validationMessage:"",renderedError=this.errorText||validationError,hasHint=!!(this.hint||this.hasHintSlot),hasError=!!(renderedError||this.hasErrorSlot),describedBy=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" "),rows=this.availableCountries,current=rows.find(row=>row.code===this.country);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,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{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{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_phoneInputIncomplete,LYRA_DEFAULT_phoneInputLabel,LYRA_DEFAULT_select,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";function isLibphonenumberModule(candidate){const api=candidate;return(typeof api=="object"||typeof api=="function")&&api!==null&&typeof api.getCountries=="function"&&typeof api.getCountryCallingCode=="function"&&typeof api.parsePhoneNumberFromString=="function"}async function loadLibphonenumberAdapter(loader){const raw=await loader(),resolved=resolveOptionalPeerCapability(raw,isLibphonenumberModule);if(!resolved)throw new TypeError("Invalid optional peer for <lr-phone-input>: the module passed to loadLibphonenumberAdapter() does not expose the getCountries/getCountryCallingCode/parsePhoneNumberFromString capability libphonenumber-js provides.");const module=resolved;return{countries:Object.freeze(module.getCountries().map(code=>Object.freeze({code:normalizeCountry(code),callingCode:module.getCountryCallingCode(code)}))),parse(input,country){const raw2=input.trim();if(!raw2)return{status:"empty"};const normalizedCountry=country?normalizeCountry(country):void 0,phone=module.parsePhoneNumberFromString(raw2,normalizedCountry);if(!phone)return{status:module.validatePhoneNumberLength?.(raw2,normalizedCountry)==="TOO_SHORT"||isDialLike(raw2)?"incomplete":"invalid",formatted:raw2};const formatted=raw2.startsWith("+")?phone.formatInternational():phone.formatNational();if(phone.isValid())return{status:"valid",e164:phone.number,formatted,country:phone.country?normalizeCountry(phone.country):normalizedCountry};const length=module.validatePhoneNumberLength?.(raw2,normalizedCountry);return{status:length==="TOO_SHORT"||!length&&!phone.isPossible()?"incomplete":"invalid",formatted,country:phone.country?normalizeCountry(phone.country):normalizedCountry}}}}class LyraPhoneInputBase extends LyraElement{}const E164_RE=/^\+[1-9]\d{1,14}$/,DIAL_LIKE_RE=/^[+\d\s().-]+$/;function normalizeCountry(country){return country.trim().toUpperCase()}function isDialLike(value){return DIAL_LIKE_RE.test(value.trim())}function digitsBefore(value,index){let count=0;for(let i=0;i<index&&i<value.length;i++)/\d/.test(value[i])&&count++;return count}function indexAfterDigits(value,digitCount){if(digitCount<=0)return 0;let count=0;for(let i=0;i<value.length;i++)if(/\d/.test(value[i])&&(count++,count===digitCount))return i+1;return value.length}function fallbackParse(input){const raw=input.trim();if(!raw)return{status:"empty"};const compact=raw.replace(/[\s().-]/g,"");return E164_RE.test(compact)?{status:"valid",e164:compact,formatted:raw}:isDialLike(raw)?{status:"incomplete",formatted:raw}:{status:"invalid",formatted:raw}}function normalizeParseResult(result,input){try{if(result===null||typeof result!="object")return{status:"invalid",formatted:input};const record=result,status=record.status;if(status!=="empty"&&status!=="incomplete"&&status!=="invalid"&&status!=="valid")return{status:"invalid",formatted:input};const formatted=record.formatted;if(formatted!==void 0&&typeof formatted!="string")return{status:"invalid",formatted:input};const rawCountry=record.country;if(rawCountry!==void 0&&typeof rawCountry!="string")return{status:"invalid",formatted:formatted??input};const country=typeof rawCountry=="string"&&/^[A-Za-z]{2}$/.test(rawCountry.trim())?normalizeCountry(rawCountry):void 0,metadata={...formatted===void 0?{}:{formatted},...country===void 0?{}:{country}};if(status==="valid"){const e164=record.e164;return typeof e164!="string"||!E164_RE.test(e164)?{status:"invalid",formatted:formatted??input,...country?{country}:{}}:{status,e164,...metadata}}return{status,...metadata}}catch{return{status:"invalid",formatted:input}}}const MAX_PHONE_COUNTRIES=512;function normalizeCountryCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[],seen=new Set;let length=0;try{length=Math.min(source.length,MAX_PHONE_COUNTRIES)}catch{return Object.freeze(rows)}for(let index=0;index<length;index+=1)try{const item=source[index];if(item===null||typeof item!="object")continue;const candidate=item,rawCode=candidate.code,rawCallingCode=candidate.callingCode,rawLabel=candidate.label;if(typeof rawCode!="string"||typeof rawCallingCode!="string")continue;const code=normalizeCountry(rawCode),callingCode=rawCallingCode.replace(/^\+/,"");if(!/^[A-Z]{2}$/.test(code)||!/^[1-9]\d{0,2}$/.test(callingCode)||seen.has(code)||rawLabel!==void 0&&typeof rawLabel!="string")continue;seen.add(code),rows.push(Object.freeze({code,callingCode,...rawLabel===void 0?{}:{label:rawLabel}}))}catch{}return Object.freeze(rows)}class LyraPhoneInput extends FormAssociated(LyraPhoneInputBase){constructor(){super(...arguments),this.flags=!1,this.adapterCountries=Object.freeze([]),this.defaultCountry="",this.label="",this.hint="",this.errorText="",this.placeholder="",this.size="m",this.pill=!1,this.accessibleLabel=null,this.countryLabel="Select",this.phoneLabel="",this.incompleteText="This phone number is incomplete.",this.invalidText="The value is invalid.",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.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasCountryPrefixSlot=!1,this.inputId=nextId("phone-input"),this.hintId=nextId("phone-hint"),this.errorId=nextId("phone-error"),this.explicitCountry="",this.onInput=event=>{if(this.liveDisabled||this.readonly){event.stopPropagation();return}const input=event.currentTarget,caret=input.selectionStart,digitsBeforeCaret=caret==null?null:digitsBefore(input.value,caret);this.applyParsed(input.value,this.parse(input.value)),this.syncFormattedValue(input,digitsBeforeCaret),relayNativeEvent(this,event),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.onLabelSlotChange=event=>{this.hasLabelSlot=event.currentTarget.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.currentTarget.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.currentTarget.assignedElements({flatten:!0}).length>0},this.onCountryPrefixSlotChange=event=>{this.hasCountryPrefixSlot=event.currentTarget.assignedElements({flatten:!0}).length>0}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,phoneInputIncomplete:LYRA_DEFAULT_phoneInputIncomplete,phoneInputLabel:LYRA_DEFAULT_phoneInputLabel,select:LYRA_DEFAULT_select,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 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){const codes=rows.map(row=>row.code),explicit=normalizeCountry(this.explicitCountry),preferred=normalizeCountry(this.defaultCountry);return codes.includes(explicit)?explicit:codes.includes(preferred)?preferred:codes[0]??""}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}}get effectiveCountryLabel(){return this.localize("select",this.countryLabel==="Select"?void 0:this.countryLabel)}get effectivePhoneLabel(){return this.accessibleLabel!==null?this.accessibleLabel:this.phoneLabel||this.label||this.placeholder||this.localize("phoneInputLabel")}get incompleteMessage(){return this.localize("phoneInputIncomplete",this.incompleteText==="This phone number is incomplete."?void 0:this.incompleteText)}get invalidMessage(){return this.localize("valueInvalid",this.invalidText==="The value is invalid."?void 0:this.invalidText)}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)}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.hasLabelSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="error"),this.hasCountryPrefixSlot=Array.from(this.children??[]).some(child=>child.getAttribute("slot")==="country-prefix")),(!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){if(super.updated(changed),changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("status")){const invalid=this.touched&&!this.internals.validity.valid;this.toggleAttribute("data-invalid",invalid),invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")}}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;start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(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),validationError=this.touched?this.validationMessage:"",renderedError=this.errorText||validationError,hasHint=!!(this.hint||this.hasHintSlot),hasError=!!(renderedError||this.hasErrorSlot),describedBy=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" "),rows=this.availableCountries,current=rows.find(row=>row.code===this.country);return html`
       <div part="form-control">
         <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           <slot name="label" @slotchange=${this.onLabelSlotChange}>${this.label}</slot>
@@ -12,7 +12,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               part="country-select"
               aria-label=${this.effectiveCountryLabel}
               .value=${this.country}
-              aria-readonly=${this.readonly?"true":nothing}
+              aria-readonly=${this.readonly?"true":"false"}
               ?disabled=${this.effectiveDisabled||this.readonly||rows.length===0}
               @change=${this.onCountryChange}
             >

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

@@ -8,23 +8,11 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     --_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);
-    /* The floor's six values come from the ONE shared form-control ladder
-       (internal/sizes.styles.ts) rather than a private copy, so retuning
-       --lr-theme-form-control-height-* moves this control and every sibling field together. That
-       ladder matches both spellings of every tier, which is what makes size="small" resolve here
-       without a per-component alias rule. */
     --_lr-phone-input-control-min-height-default: var(--lr-form-control-height);
-    /* --lr-phone-input-control-height is intentionally NOT declared here -- same convention as
-       lr-input/lr-select/lr-combobox/lr-date-input: a consumer-facing exact-height escape hatch
-       consumed only through the var() fallback on [part='input-wrapper'] below; declaring any
-       value for it here would make that fallback arm unreachable. */
   }
   :host([pill]) {
     --_lr-phone-input-radius-default: var(--lr-radius-pill);
   }
-  /* What remains per tier is this component's own glyph geometry. Padding follows the shared
-     form-control ladder above so the country-selector action and sibling fields resolve to one
-     outer height; both spellings of a tier still match for the component-specific glyph values. */
   :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);
@@ -99,16 +87,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     border-color: var(--lr-phone-input-invalid-border-color, var(--lr-color-danger));
   }
 
-  /* :host(:disabled), not :host([disabled]) -- this is a form-associated
-     custom element (FormAssociated mixin -> static formAssociated = true),
-     so the UA computes its disabled state (and therefore :disabled/:enabled
-     matching) the same way it does for a native form control: from its own
-     disabled content attribute *or* an ancestor <fieldset disabled>'s
-     cascade. Keying this off the attribute selector only ever matched the
-     first case -- a field disabled purely via an ancestor fieldset had
-     effectiveDisabled correctly gating the country select/telephone input
-     underneath, but the wrapper around them still rendered at full opacity
-     with a normal cursor. */
   :host(:disabled) [part='input-wrapper'] {
     cursor: not-allowed;
     opacity: var(--lr-opacity-disabled);
@@ -121,10 +99,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     padding-inline-start: var(--lr-space-s);
   }
 
-  /* The country selector keeps the real native <select> (its popup, keyboard type-ahead, and
-     mobile pickers are irreplaceable) but stretches it invisibly over a compact decorative
-     trigger, so the closed control never clips a long localized country name and never repeats
-     the calling code shown right next to it. */
   [part='country'] {
     position: relative;
     display: inline-flex;
@@ -154,8 +128,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     cursor: not-allowed;
   }
 
-  /* The invisible select's popup list is still painted by the browser from these options; without
-     an explicit surface/text pairing it falls back to UA colors (a white panel in dark themes). */
   [part='country-select'] option {
     background: var(--lr-color-surface);
     color: var(--lr-color-text);
@@ -175,11 +147,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     background: var(--lr-phone-input-country-hover-bg, var(--lr-color-brand-quiet));
   }
 
-  /* The press lands on the invisible <select> stretched over the trigger, so the pressed tint is
-     driven from the same sibling combinator as the hover above -- styling [part='country-trigger']
-     itself with :active would never match, since it is not the element being pressed. Mixing the
-     hover tint one shared step further toward the text colour keeps a consumer's
-     --lr-phone-input-country-hover-bg override in charge of both states. */
   [part='country-select']:not(:disabled):active + [part='country-trigger'] {
     background: color-mix(
       in oklab,
@@ -188,8 +155,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     );
   }
 
-  /* The wrapper's focus-within ring marks the whole field; this inner ring additionally marks
-     that keyboard focus sits on the (invisible) country select rather than the telephone input. */
   [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));
@@ -267,8 +232,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   }
 
   @media (forced-colors: active) {
-    /* Background tint is flattened to Canvas in forced-colors mode. Keep the invisible select's
-       hover/press target distinguishable with a geometry cue and system color. */
     [part='country-select']:not(:disabled):hover + [part='country-trigger'] {
       outline-color: Highlight;
       outline-style: dashed;

package/dist/components/forms/radio/radio-button.styles.js

@@ -14,8 +14,6 @@ import{css}from"lit";const buttonChromeStyles=css`
     gap: var(--lr-radio-button-gap, var(--lr-space-xs));
     min-inline-size: var(--lr-size-1-5rem);
     max-inline-size: 100%;
-    /* WCAG 2.5.8: the whole button is the target. Both axes retain a 1.5rem/24px floor, so even
-       an empty 2xs tier remains a conformant target. */
     min-block-size: max(var(--lr-form-control-height), var(--lr-size-1-5rem));
     padding-inline: var(--lr-form-control-padding-inline);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
@@ -28,9 +26,6 @@ import{css}from"lit";const buttonChromeStyles=css`
     transition: background var(--lr-transition-fast),
       border-color var(--lr-transition-fast);
 
-    /* Standalone is the safe default. The owning group projects data-run only after measuring
-       real adjacency; separated, vertical, mixed, and wrapped controls therefore keep all four
-       corners instead of guessing from DOM sibling order. */
     border-radius: var(--lr-radio-radius, var(--_lr-radio-radius));
   }
   [part="label"] {
@@ -44,9 +39,8 @@ import{css}from"lit";const buttonChromeStyles=css`
     max-inline-size: 40%;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  /* A slot is itself an element child, so :empty can never identify an unassigned wrapper. The
-     shared renderer tracks assigned content and reflects real emptiness through hidden. */
   [part~="start"][hidden],
   [part="label"][hidden],
   [part~="end"][hidden] {
@@ -76,14 +70,6 @@ import{css}from"lit";const buttonChromeStyles=css`
     margin-inline-start: calc(-1 * var(--lr-border-width-thin));
   }
 
-  /* :host(:not(:disabled)), not a bare selector -- the interactive element is a plain
-     <span role="radio"> that can never match :disabled itself, so without this guard a
-     disabled segment still visibly tinted on hover/press, contradicting its own
-     not-allowed cursor and reduced opacity. This is a form-associated custom element
-     (static formAssociated = true, inherited from LyraRadio), so the UA computes :disabled
-     the same way it does for a native control -- from the host's own disabled attribute or
-     an ancestor <fieldset disabled>'s cascade -- matching [part~='circle']'s guard in the
-     sibling radio.styles.ts exactly. */
   [part~="button"]:not([part~="disabled"]):hover {
     background: var(--lr-radio-button-hover-bg, var(--lr-color-brand-quiet));
     border-color: var(
@@ -91,10 +77,6 @@ import{css}from"lit";const buttonChromeStyles=css`
       var(--lr-color-brand)
     );
   }
-  /* Pressed: the hover's tint carried further toward --lr-color-mix-partner (which follows the text
-     colour). This rule used to be byte-identical to the :hover above, which is a pressed state only
-     on paper -- a segment that looks exactly the same held down as hovered tells the user nothing
-     about whether their click landed. */
   [part~="button"]:not([part~="disabled"]):active {
     background: var(
       --lr-radio-button-active-bg,
@@ -113,13 +95,10 @@ import{css}from"lit";const buttonChromeStyles=css`
   [part~="button"]:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
-    /* The ring must not be painted under the overlapping neighbour's border. */
     position: relative;
     z-index: var(--lr-layer-content);
   }
 
-  /* State lives in the part name, never as ::part(base)[aria-checked] -- an attribute selector
-     after ::part() never matches. */
   [part~="checked"] {
     background: var(--lr-radio-button-checked-bg, var(--lr-color-brand));
     border-color: var(
@@ -131,10 +110,6 @@ import{css}from"lit";const buttonChromeStyles=css`
   [part~="checked"] [part="label"] {
     color: inherit;
   }
-  /* The checked segment keeps its loud brand fill under the pointer -- the quiet tint the unchecked
-     rules land on would read as a DESELECTION -- but it still has to move, and the press still has
-     to out-read the hover. Both mix the loud fill toward --lr-color-mix-partner, which follows the
-     text colour, so the on-brand label stays legible at either share. */
   [part~="checked"]:not([part~="disabled"]):hover {
     background: var(
       --lr-radio-button-checked-hover-bg,
@@ -172,10 +147,6 @@ import{css}from"lit";const buttonChromeStyles=css`
   }
 `,styles=css`
   :host {
-    /* Rectangular chrome, so unlike <lr-radio>'s circular indicator this re-points the inherited
-       radius knob at the shared control radius -- and swaps it for a pill when the pill property
-       is set. Same one name on both tags, so a consumer overriding it does not have to know which
-       of the two they are looking at. */
     --_lr-radio-radius: var(--lr-form-control-radius);
     display: inline-flex;
     min-inline-size: 0;

package/dist/components/forms/radio/radio-group.styles.js

@@ -1,9 +1,5 @@
 import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const groupStyles=css`
   :host {
-    /* The group's own chrome rides the shared size ladder (internal/sizes.styles.ts): the row gap is
-       a fraction of the tier's control height rather than a fixed space token, so it stays in
-       proportion to the options beside it. At the default "m" tier it resolves to exactly the
-       --lr-space-s the group shipped with before it had a size at all. */
     --_lr-radio-group-row-gap: calc(var(--lr-form-control-height) * 0.2);
     display: block;
   }

package/dist/components/forms/radio/radio.styles.js

@@ -1,42 +1,22 @@
 import{css}from"lit";const styles=css`
   :host {
-    /* The indicator tracks the shared size ladder (internal/sizes.styles.ts): 70% of the tier's
-       control height, so a radio lines up with an lr-input/lr-select/lr-button of the same size
-       rather than carrying a scale of its own. At the default "m" tier this resolves to exactly the
-       1.75rem the control shipped with before it had a size at all, and the --lr-icon-button-size
-       cap is kept so a consumer compacting that theme token still compacts this control with it. */
     --_lr-radio-circle-size: min(
       var(--lr-icon-button-size),
       calc(var(--lr-form-control-height) * 0.7)
     );
-    /* Capped at half the circle so the dot can never outgrow the ring it sits in, whatever a
-       consumer does to either the ladder or the --lr-icon-button-size cap above. Resolves to
-       0.75rem at "m", the size the dot shipped with. */
     --_lr-radio-dot-size: min(
       calc(var(--lr-radio-circle-size, var(--_lr-radio-circle-size)) * 0.5),
       calc(var(--lr-form-control-height) * 0.3)
     );
-    /* The corner radius of the control's own chrome. A circular indicator is fully round at every
-       setting; the knob exists so <lr-radio-button>'s rectangular chrome -- which inherits this
-       class, and with it the pill property -- has one name to override. */
     --_lr-radio-radius: var(--lr-radius-pill);
     display: inline-block;
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* Private default for the public label-indent hook. It uses the same two terms as the layout
-       below: the circle's floor plus the label gap. A consumer can override the public hook on an
-       ancestor or directly on the radio. It does not reach a sibling node in the consumer's tree,
-       because custom properties inherit down, not sideways; a sibling <p> can compute the same
-       formula from --lr-theme-icon-button-size and --lr-theme-space-s. */
     --_lr-radio-label-indent: calc(
       var(--lr-radio-circle-size, var(--_lr-radio-circle-size)) +
         var(--lr-space-s)
     );
   }
-  /* A group projects its effective tier without rewriting the option's authored size property.
-     Explicit inherit wins over sizes.styles.ts's local default and reads the group host's already
-     resolved ladder variables. Removing/reparenting clears the private marker and restores the
-     option's own tier immediately. */
   :host([data-lr-group-size]) {
     --lr-form-control-height: inherit;
     --lr-form-control-font-size: inherit;
@@ -52,9 +32,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
     max-inline-size: 100%;
-    /* Derived from the published indent rather than repeating --lr-space-s, so the advertised
-       value and the rendered label offset cannot drift: the label always starts exactly
-       --lr-radio-label-indent from the base's inline start. Resolves to --lr-space-s by default. */
     gap: calc(
       var(--lr-radio-label-indent, var(--_lr-radio-label-indent)) -
         var(--lr-radio-circle-size, var(--_lr-radio-circle-size))
@@ -66,15 +43,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* :host(:disabled), not :host([disabled]) -- this is a form-associated
-     custom element (static formAssociated = true), so the UA computes its
-     disabled state (and therefore :disabled/:enabled matching) the same way
-     it does for a native form control: from its own disabled content
-     attribute *or* an ancestor <fieldset disabled>'s cascade. Keying this
-     off the attribute selector only ever matched the first case -- a radio
-     disabled purely via an ancestor fieldset had effectiveDisabled correctly
-     gating tabindex/aria-disabled, but the base still rendered at full
-     opacity with a normal cursor. */
   [part~="base"][part~="disabled"] {
     cursor: not-allowed;
     opacity: var(--lr-opacity-disabled);
@@ -85,11 +53,6 @@ import{css}from"lit";const styles=css`
     justify-content: center;
     flex: 0 0 auto;
     box-sizing: border-box;
-    /* A floor, never a hard size -- matching <lr-checkbox>'s [part='box'] exactly. A label-less
-       radio keeps this compact indicator centered in its base's shared target floor, while a hard
-       inline-size/block-size would let an enlarged indicator overflow its content box. Same inline
-       icon-affordance convention as lr-combobox's clear-button / lr-select's toggle:
-       --lr-icon-button-size capped at the tier's own share of the control height. */
     min-inline-size: var(--lr-radio-circle-size, var(--_lr-radio-circle-size));
     min-block-size: var(--lr-radio-circle-size, var(--_lr-radio-circle-size));
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
@@ -101,10 +64,6 @@ import{css}from"lit";const styles=css`
   [part~="base"]:not([part~="disabled"]):hover [part~="circle"] {
     border-color: var(--lr-radio-hover-border-color, var(--lr-color-brand));
   }
-  /* Pressed. A ring rather than a fill, for the same reason <lr-checkbox>'s [part='box'] takes one:
-     the circle's fill IS the state readout (surface unchecked, the dot inside it once checked), so
-     tinting it under the thumb would read as a half-selected radio. Visibly more than the hover's
-     border-colour step, and the same soft-ring vocabulary <lr-slider>'s thumb uses. */
   [part~="base"]:not([part~="disabled"]):active [part~="circle"] {
     border-color: var(
       --lr-radio-active-border-color,
@@ -114,9 +73,6 @@ import{css}from"lit";const styles=css`
       var(--lr-radio-active-ring-color, var(--lr-color-brand-quiet));
   }
   [part~="circle"][part~="checked"] {
-    /* Component-scoped indirection (mirrors lr-checkbox's identical --lr-checkbox-checked-bg/
-       -border pair) so a consumer can retint just this control's checked ring without hijacking
-       the shared --lr-color-brand token used across the rest of the library. */
     border-color: var(--lr-radio-checked-border-color, var(--lr-color-brand));
   }
   [part~="dot"] {

package/dist/components/forms/rubric-form/rubric-form.styles.js

@@ -98,11 +98,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     border-color: var(--lr-rubric-form-skip-border-color, var(--lr-color-border));
     color: var(--lr-rubric-form-skip-color, var(--lr-color-text));
   }
-  /* A colour mix, not filter: brightness(). The filter multiplied every channel, so it moved a
-     mid-brand fill but did nothing at all to a pure white or pure black one, and -- because a
-     filter applies to the whole subtree -- it dragged the button's own label along with its
-     background. Mixing the fill toward --lr-color-mix-partner (which follows the text colour)
-     always moves, always in the direction the surface needs, and leaves the label alone. */
   [part='submit']:not(:disabled):hover {
     background: var(--lr-rubric-form-submit-hover-bg, color-mix(in oklab, var(--lr-rubric-form-submit-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)));
     border-color: var(--lr-rubric-form-submit-hover-border-color, color-mix(in oklab, var(--lr-rubric-form-submit-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)));