@aceshooting/lyra-ui 26.0.0 → 27.0.0

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_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)}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. */

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{tag}from"../../../internal/prefix.js";import{sizes}from"../../../internal/sizes.styles.js";import{groupStyles}from"./radio-group.styles.js";import{dispatchNativeEvent}from"../../../internal/native-event-relay.js";import{isStaticValidityCheckInProgress}from"../../../internal/invalid-event-alias.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{declaredDefaultConverter,literalSetConverter,omittedEmptyStringConverter}from"../../../internal/converters.js";import{isAccessibilitySubtreeExcluded,isAriaTrue}from"../../../internal/accessibility-visibility.js";import{composedParentElement}from"../../../internal/active-element.js";import{measureAdjacentRuns}from"../../../internal/adjacent-runs.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_radioRequired}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();const RADIO_TAGS=()=>[tag("radio"),tag("radio-button")],RADIO_GROUP_ORIENTATION=literalSetConverter(["horizontal","vertical"],"vertical");class LyraRadioGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,radioRequired:LYRA_DEFAULT_radioRequired}}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-input","lr-change","lr-activate"])}static{this.identityEventDetailProperties=Object.freeze({"lr-input":Object.freeze(["option","radio"]),"lr-change":Object.freeze(["option","radio"]),"lr-activate":Object.freeze(["option","radio"])})}static get validators(){return[currentValidityValidator("required","disabled","value")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,groupStyles]}static{this.properties={name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},orientation:{reflect:!0,converter:RADIO_GROUP_ORIENTATION},form:{noAccessor:!0}}}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasHelpTextSlot(){return this.slotPresence.has("help-text")}get hasErrorSlot(){return this.slotPresence.has("error")}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._name),this.syncFormState(),this.requestUpdate("name",old)}get value(){return this._value}set value(next){this._valueDirty=!0,this.selectValue(next??"")}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.selectValue(this._defaultValue),this._valueDirty=!1),this.requestUpdate("defaultValue",old)}get customError(){return this.validityController?.customValidityMessage||null}set customError(next){this.reflectingCustomError||this.commitCustomValidity(next)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncRadios(),this.updateValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.syncRadios(),this.updateValidity(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}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}constructor(){super(),this.size="m",this.orientation="vertical",this.label="",this.hint="",this.helpText="",this.shoelaceDefaultValue="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.slotPresence=new SlotPresenceController(this),this.labelId=nextId("radio-group-label"),this.hintId=nextId("radio-group-hint"),this.errorId=nextId("radio-group-error"),this.managedRadios=new Set,this.syncingRadios=!1,this.membershipObserverGeneration=0,this._name="",this._value="",this._defaultValue="",this._valueDirty=!1,this.reflectingDefaultValue=!1,this.reflectingCustomError=!1,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this.hasInteracted=!1,this.hadShoelaceDefaultValue=!1,this.onInvalid=event=>{const target=event.target;if(target!==this&&!(target?.nodeType===1&&this.ownsRadio(target)))return;isStaticValidityCheckInProgress(this)||(this.hasInteracted=!0),this.reflectValidityStates(),this.requestUpdate(),this.emit("lr-invalid",null,{cancelable:!0}).defaultPrevented&&event.preventDefault()},this.onFocusOut=event=>{this.hasInteracted||this.effectiveDisabled||this.matches(":disabled")||event.target.matches(":disabled")||(this.hasInteracted=!0,this.reflectValidityStates(),this.requestUpdate())},this.onKeyDown=event=>{if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(event.key)||this.effectiveDisabled)return;const radios=this.radios().filter(radio=>this.isRadioAvailable(radio)),current=event.target;if(!this.isRadioAvailable(current))return;const index=radios.indexOf(current);if(index<0||radios.length===0)return;event.preventDefault();const rtl=this.effectiveDirection==="rtl",forward=event.key==="ArrowDown"||event.key===(rtl?"ArrowLeft":"ArrowRight"),backward=event.key==="ArrowUp"||event.key===(rtl?"ArrowRight":"ArrowLeft"),nextIndex=event.key==="Home"?0:event.key==="End"?radios.length-1:forward?(index+1)%radios.length:backward?(index-1+radios.length)%radios.length:index,next=radios[nextIndex];next.focus(),next.activateFromGroup()},this.onRadioSlotChange=()=>{this.syncRadios();const ownerDocument=this.ownerDocument,generation=this.membershipObserverGeneration,ownerWindow=ownerDocument?.defaultView;ownerWindow&&ownerWindow.queueMicrotask(()=>{this.membershipObserverGeneration===generation&&this.isConnected&&this.ownerDocument===ownerDocument&&this.syncRadios()})},this.validityController=new FormControlController(this),this.internals=this.validityController.formInternals,this.addEventListener("invalid",this.onInvalid,!0),this.syncFormState(),this.updateValidity()}syncExternalDescription(){if(!this.isConnected)return;const target=this.renderRoot?.querySelector('[role="radiogroup"]')??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncRadios(),this.armMembershipObserver(),this.scheduleRunProjection()}armRunResizeObserver(){this.runResizeObserver?.disconnect();const ResizeObserverCtor=this.ownerDocument?.defaultView?.ResizeObserver;if(!(!ResizeObserverCtor||!this.isConnected)){this.runResizeObserver=new ResizeObserverCtor(()=>this.scheduleRunProjection()),this.runResizeObserver.observe(this);for(const radio of this.radios())this.runResizeObserver.observe(radio)}}scheduleRunProjection(){const ownerWindow=this.ownerDocument?.defaultView;!ownerWindow||!this.isConnected||this.runProjectionFrame!==void 0||(this.runProjectionFrame=ownerWindow.requestAnimationFrame(()=>{this.runProjectionFrame=void 0,this.isConnected&&this.projectButtonRuns()}))}isButtonRadio(radio){return radio.localName===tag("radio-button")||radio.appearance==="button"}projectButtonRuns(){const radios=this.radios(),positions=this.orientation==="horizontal"?measureAdjacentRuns(radios,{direction:this.effectiveDirection,joinable:radio=>this.isButtonRadio(radio)}):radios.map(()=>"standalone");radios.forEach((radio,index)=>radio.setButtonRunPosition(positions[index]))}armMembershipObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.membershipObserver&&this.membershipObserverDocument===ownerDocument)return;this.resetMembershipObserver();const ownerWindow=ownerDocument?.defaultView,MutationObserverCtor=ownerWindow?.MutationObserver;if(!ownerWindow||!MutationObserverCtor)return;const generation=this.membershipObserverGeneration,observer=new MutationObserverCtor(()=>{this.membershipObserver!==observer||this.membershipObserverDocument!==ownerDocument||this.membershipObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||ownerWindow.queueMicrotask(()=>{this.membershipObserver!==observer||this.membershipObserverDocument!==ownerDocument||this.membershipObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.syncRadios()})});this.membershipObserver=observer,this.membershipObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["slot","checked","disabled","value","size","appearance","hidden","inert","aria-hidden","aria-disabled","class","style"]})}disconnectedCallback(){this.releaseExternalDescription(),this.resetMembershipObserver(),this.runResizeObserver?.disconnect(),this.runResizeObserver=void 0;const ownerWindow=this.ownerDocument?.defaultView;ownerWindow&&this.runProjectionFrame!==void 0&&ownerWindow.cancelAnimationFrame(this.runProjectionFrame),this.runProjectionFrame=void 0,this.releaseRadios(this.managedRadios),this.managedRadios.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.resetMembershipObserver()}resetMembershipObserver(){this.membershipObserverGeneration+=1,this.membershipObserver?.disconnect(),this.membershipObserver=void 0,this.membershipObserverDocument=void 0}willUpdate(changed){super.willUpdate(changed),changed.has("shoelaceDefaultValue")&&(this.hasAttribute("default-value")||this.hadShoelaceDefaultValue)&&(this.defaultValue=this.shoelaceDefaultValue,this.hadShoelaceDefaultValue=this.hasAttribute("default-value"))}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("size")||changed.has("orientation"))&&this.syncRadios()}radioGroupOwner(element){const group=element.closest(tag("radio-group"));if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="help-text"||slot==="error"?null:group}ownsRadio(element){return RADIO_TAGS().includes(element.localName)&&this.radioGroupOwner(element)===this}radios(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:[...querySelectorAll.call(this,RADIO_TAGS().join(","))].filter(radio=>this.ownsRadio(radio)&&typeof radio.setGroupOwner=="function")}isRadioAvailable(radio){if(radio.effectiveDisabled||radio.matches(":disabled"))return!1;for(let current=radio;current;current=composedParentElement(current)){if(isAccessibilitySubtreeExcluded(current)||isAriaTrue(current.getAttribute("aria-disabled")))return!1;if(current===this)break}return!0}selectValue(next){const desired=next??"",radios=this.radios();if(radios.length===0){const old=this._value;this._value=desired,this.pendingSelection=desired,this.syncFormState(),this.updateValidity(),this.requestUpdate("value",old);return}const match=radios.find(radio=>radio.value===desired);this.syncingRadios=!0;try{for(const radio of radios)radio.checked!==(radio===match)&&(radio.checked=radio===match)}finally{this.syncingRadios=!1}this.pendingSelection=void 0,this.syncRadios(match)}syncRadios(preferred){if(!this.syncingRadios){this.syncingRadios=!0;try{const radios=this.radios(),current=new Set(radios);this.releaseRadios([...this.managedRadios].filter(radio=>!current.has(radio)));for(const radio of radios)radio.setGroupOwner(this);const membershipChanged=current.size!==this.managedRadios.size||radios.some(radio=>!this.managedRadios.has(radio));this.managedRadios=current,membershipChanged&&this.armRunResizeObserver();for(const radio of radios)radio.setGroupDisabled(this.effectiveDisabled);const enabled=radios.filter(radio=>this.isRadioAvailable(radio));let checked=radios.filter(radio=>radio.checked),checkedRadio;if(this.pendingSelection!==void 0&&radios.length>0){checkedRadio=radios.find(radio=>radio.value===this.pendingSelection);for(const radio of radios)radio.checked!==(radio===checkedRadio)&&(radio.checked=radio===checkedRadio);checked=checkedRadio?[checkedRadio]:[],this.pendingSelection=void 0}else checkedRadio=preferred?.checked&&current.has(preferred)?preferred:checked[checked.length-1];for(const radio of checked)radio!==checkedRadio&&(radio.checked=!1);const tabbableRadio=checkedRadio&&this.isRadioAvailable(checkedRadio)?checkedRadio:enabled[0];for(const radio of radios)radio.setGroupSize(this.size),radio.setGroupRequired(this.required&&!this.effectiveDisabled),radio.setGroupTabbable(radio===tabbableRadio);const oldValue=this._value;this._value=checkedRadio?.value??"",this.syncFormState(),this.updateValidity(),oldValue!==this._value&&this.requestUpdate("value",oldValue),this.scheduleRunProjection()}finally{this.syncingRadios=!1}}}releaseRadios(radios){for(const radio of radios)radio.releaseGroupOwner(this),radio.setButtonRunPosition("standalone")}reconcileRadio(radio){return this.ownsRadio(radio)?(this.syncRadios(radio.checked?radio:void 0),!0):!1}releaseRadio(radio){this.managedRadios.has(radio)&&(this.releaseRadios([radio]),this.managedRadios.delete(radio),this.syncRadios())}radioCheckedChanged(radio){this.syncingRadios||!this.ownsRadio(radio)||(this._valueDirty=!0,this.syncRadios(radio.checked?radio:void 0))}selectRadio(radio){if(this.effectiveDisabled||!this.ownsRadio(radio)||!this.isRadioAvailable(radio))return!1;const detail=Object.freeze({value:radio.value,option:radio,radio});if(!radio.checked){this._valueDirty=!0,this.hasInteracted=!0,this.syncingRadios=!0;try{for(const candidate of this.radios())candidate.checked!==(candidate===radio)&&(candidate.checked=candidate===radio)}finally{this.syncingRadios=!1}this.syncRadios(),dispatchNativeEvent(this,"input"),this.emit("lr-input",detail),dispatchNativeEvent(this,"change"),this.emit("lr-change",detail)}return this.emit("lr-activate",detail),!0}focus(options){if(this.effectiveDisabled||this.matches(":disabled"))return;const enabled=this.radios().filter(radio=>this.isRadioAvailable(radio));(enabled.find(radio=>radio.checked)??enabled[0])?.focus(options)}blur(){this.radios().find(radio=>radio.matches(":focus-within"))?.blur()}click(){if(this.effectiveDisabled||this.matches(":disabled"))return;const enabled=this.radios().filter(radio=>this.isRadioAvailable(radio));(enabled.find(radio=>radio.checked)??enabled[0])?.click()}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part~="base"]')??null}syncFormState(){this.internals&&this.internals.setFormValue(this.name&&this.value?this.value:null,this.value)}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){if(!this.validityController)return;const missing=!this.barredFromValidation&&this.required&&!this.value;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("radioRequired"):""),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation})}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.hasInteracted=!0,this.updateValidity(),this.requestUpdate(),this.internals.reportValidity()}commitCustomValidity(message){const old=this.customError,normalized=message??"";this.validityController.setCustomValidity(normalized),this.reflectValidityStates(),this.reflectingCustomError=!0;try{normalized?this.setAttribute("custom-error",normalized):this.removeAttribute("custom-error")}finally{this.reflectingCustomError=!1}this.requestUpdate("customError",old)}setCustomValidity(message=""){this.commitCustomValidity(message)}resetValidity(){this.commitCustomValidity(""),this.updateValidity()}formResetCallback(){this._valueDirty=!1,this.pendingSelection=void 0,this.syncingRadios=!0;try{for(const radio of this.radios())radio.resetFromGroup()}finally{this.syncingRadios=!1}this.defaultValue&&(this.pendingSelection=this.defaultValue),this.hasInteracted=!1,this.syncRadios()}formStateRestoreCallback(state,reason){this._valueDirty=!0,this.hasInteracted=!1,this.pendingSelection=typeof state=="string"?state:"",this.selectValue(this.pendingSelection)}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(this.syncRadios(),this.updateValidity(),this.requestUpdate())}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasAccessibleLabel=this.hasAttribute("aria-label")||!!this.accessibleLabel,hasHint=this.hasHintSlot||this.hasHelpTextSlot||!!(this.hint||this.helpText)||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,ariaOrientation=RADIO_GROUP_ORIENTATION.normalize(this.orientation);return html`
+import{__decorate}from"tslib";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{nextId}from"../../../internal/a11y.js";import{tag}from"../../../internal/prefix.js";import{sizes}from"../../../internal/sizes.styles.js";import{groupStyles}from"./radio-group.styles.js";import{dispatchNativeEvent}from"../../../internal/native-event-relay.js";import{isStaticValidityCheckInProgress}from"../../../internal/invalid-event-alias.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{declaredDefaultConverter,literalSetConverter,omittedEmptyStringConverter}from"../../../internal/converters.js";import{isAccessibilitySubtreeExcluded,isAriaTrue}from"../../../internal/accessibility-visibility.js";import{composedParentElement}from"../../../internal/active-element.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{AdjacentRunScheduler,measureAdjacentRuns}from"../../../internal/adjacent-runs.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_radioRequired}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();const RADIO_TAGS=()=>[tag("radio"),tag("radio-button")],RADIO_GROUP_ORIENTATION=literalSetConverter(["horizontal","vertical"],"vertical");class LyraRadioGroup extends LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,radioRequired:LYRA_DEFAULT_radioRequired}}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-input","lr-change","lr-activate"])}static{this.identityEventDetailProperties=Object.freeze({"lr-input":Object.freeze(["option","radio"]),"lr-change":Object.freeze(["option","radio"]),"lr-activate":Object.freeze(["option","radio"])})}static get validators(){return[currentValidityValidator("required","disabled","value")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,groupStyles]}static{this.properties={name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},orientation:{reflect:!0,converter:RADIO_GROUP_ORIENTATION},form:{noAccessor:!0}}}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasHelpTextSlot(){return this.slotPresence.has("help-text")}get hasErrorSlot(){return this.slotPresence.has("error")}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._name),this.syncFormState(),this.requestUpdate("name",old)}get value(){return this._value}set value(next){this._valueDirty=!0,this.selectValue(next??"")}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.selectValue(this._defaultValue),this._valueDirty=!1),this.requestUpdate("defaultValue",old)}get customError(){return this.validityController?.customValidityMessage||null}set customError(next){this.reflectingCustomError||this.commitCustomValidity(next)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncRadios(),this.updateValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.syncRadios(),this.updateValidity(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}constructor(){super(),this.size="m",this.orientation="vertical",this.label="",this.hint="",this.helpText="",this.shoelaceDefaultValue="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.slotPresence=new SlotPresenceController(this),this.labelId=nextId("radio-group-label"),this.hintId=nextId("radio-group-hint"),this.errorId=nextId("radio-group-error"),this.managedRadios=new Set,this.syncingRadios=!1,this.membershipObserverGeneration=0,this.runs=new AdjacentRunScheduler(this,()=>this.projectButtonRuns()),this._name="",this._value="",this._defaultValue="",this._valueDirty=!1,this.reflectingDefaultValue=!1,this.reflectingCustomError=!1,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this.hasInteracted=!1,this.hadShoelaceDefaultValue=!1,this.onInvalid=event=>{const target=event.target;if(target!==this&&!(target?.nodeType===1&&this.ownsRadio(target)))return;isStaticValidityCheckInProgress(this)||(this.hasInteracted=!0),this.reflectValidityStates(),this.requestUpdate(),this.emit("lr-invalid",null,{cancelable:!0}).defaultPrevented&&event.preventDefault()},this.onFocusOut=event=>{this.hasInteracted||this.effectiveDisabled||this.matches(":disabled")||event.target.matches(":disabled")||(this.hasInteracted=!0,this.reflectValidityStates(),this.requestUpdate())},this.onKeyDown=event=>{if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(event.key)||this.effectiveDisabled)return;const radios=this.radios().filter(radio=>this.isRadioAvailable(radio)),current=event.target;if(!this.isRadioAvailable(current))return;const index=radios.indexOf(current);if(index<0||radios.length===0)return;const nextIndex=resolveListMove(event,{count:radios.length,current:index,orientation:"both",direction:this.effectiveDirection});if(nextIndex===null)return;event.preventDefault();const next=radios[nextIndex];next.focus(),next.activateFromGroup()},this.onRadioSlotChange=()=>{this.syncRadios();const ownerDocument=this.ownerDocument,generation=this.membershipObserverGeneration,ownerWindow=ownerDocument?.defaultView;ownerWindow&&ownerWindow.queueMicrotask(()=>{this.membershipObserverGeneration===generation&&this.isConnected&&this.ownerDocument===ownerDocument&&this.syncRadios()})},this.validityController=new FormControlController(this),this.internals=this.validityController.formInternals,this.addEventListener("invalid",this.onInvalid,!0),this.syncFormState(),this.updateValidity()}syncExternalDescription(){if(!this.isConnected)return;const target=this.renderRoot?.querySelector('[role="radiogroup"]')??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncRadios(),this.armMembershipObserver(),this.runs.schedule()}isButtonRadio(radio){return radio.localName===tag("radio-button")||radio.appearance==="button"}projectButtonRuns(){const radios=this.radios(),positions=this.orientation==="horizontal"?measureAdjacentRuns(radios,{direction:this.effectiveDirection,joinable:radio=>this.isButtonRadio(radio)}):radios.map(()=>"standalone");radios.forEach((radio,index)=>radio.setButtonRunPosition(positions[index]))}armMembershipObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.membershipObserver&&this.membershipObserverDocument===ownerDocument)return;this.resetMembershipObserver();const ownerWindow=ownerDocument?.defaultView,MutationObserverCtor=ownerWindow?.MutationObserver;if(!ownerWindow||!MutationObserverCtor)return;const generation=this.membershipObserverGeneration,observer=new MutationObserverCtor(()=>{this.membershipObserver!==observer||this.membershipObserverDocument!==ownerDocument||this.membershipObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||ownerWindow.queueMicrotask(()=>{this.membershipObserver!==observer||this.membershipObserverDocument!==ownerDocument||this.membershipObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.syncRadios()})});this.membershipObserver=observer,this.membershipObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["slot","checked","disabled","value","size","appearance","hidden","inert","aria-hidden","aria-disabled","class","style"]})}disconnectedCallback(){this.releaseExternalDescription(),this.resetMembershipObserver(),this.runs.dispose(),this.releaseRadios(this.managedRadios),this.managedRadios.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.resetMembershipObserver()}resetMembershipObserver(){this.membershipObserverGeneration+=1,this.membershipObserver?.disconnect(),this.membershipObserver=void 0,this.membershipObserverDocument=void 0}willUpdate(changed){super.willUpdate(changed),changed.has("shoelaceDefaultValue")&&(this.hasAttribute("default-value")||this.hadShoelaceDefaultValue)&&(this.defaultValue=this.shoelaceDefaultValue,this.hadShoelaceDefaultValue=this.hasAttribute("default-value"))}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("size")||changed.has("orientation"))&&this.syncRadios()}radioGroupOwner(element){const group=element.closest(tag("radio-group"));if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="help-text"||slot==="error"?null:group}ownsRadio(element){return RADIO_TAGS().includes(element.localName)&&this.radioGroupOwner(element)===this}radios(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:[...querySelectorAll.call(this,RADIO_TAGS().join(","))].filter(radio=>this.ownsRadio(radio)&&typeof radio.setGroupOwner=="function")}isRadioAvailable(radio,blocked=new Map){if(radio.effectiveDisabled||radio.matches(":disabled"))return!1;for(let current=radio;current;current=composedParentElement(current)){let excluded=blocked.get(current);if(excluded===void 0&&(excluded=isAccessibilitySubtreeExcluded(current)||isAriaTrue(current.getAttribute("aria-disabled")),blocked.set(current,excluded)),excluded)return!1;if(current===this)break}return!0}selectValue(next){const desired=next??"",radios=this.radios();if(radios.length===0){const old=this._value;this._value=desired,this.pendingSelection=desired,this.syncFormState(),this.updateValidity(),this.requestUpdate("value",old);return}const match=radios.find(radio=>radio.value===desired);this.syncingRadios=!0;try{for(const radio of radios)radio.checked!==(radio===match)&&(radio.checked=radio===match)}finally{this.syncingRadios=!1}this.pendingSelection=void 0,this.syncRadios(match)}syncRadios(preferred){if(!this.syncingRadios){this.syncingRadios=!0;try{const radios=this.radios(),current=new Set(radios);this.releaseRadios([...this.managedRadios].filter(radio=>!current.has(radio)));for(const radio of radios)radio.setGroupOwner(this);const membershipChanged=current.size!==this.managedRadios.size||radios.some(radio=>!this.managedRadios.has(radio));this.managedRadios=current,membershipChanged&&this.runs.observe(radios);for(const radio of radios)radio.setGroupDisabled(this.effectiveDisabled);const availability=new Map,enabled=radios.filter(radio=>this.isRadioAvailable(radio,availability));let checked=radios.filter(radio=>radio.checked),checkedRadio;if(this.pendingSelection!==void 0&&radios.length>0){checkedRadio=radios.find(radio=>radio.value===this.pendingSelection);for(const radio of radios)radio.checked!==(radio===checkedRadio)&&(radio.checked=radio===checkedRadio);checked=checkedRadio?[checkedRadio]:[],this.pendingSelection=void 0}else checkedRadio=preferred?.checked&&current.has(preferred)?preferred:checked[checked.length-1];for(const radio of checked)radio!==checkedRadio&&(radio.checked=!1);const tabbableRadio=checkedRadio&&this.isRadioAvailable(checkedRadio,availability)?checkedRadio:enabled[0];for(const radio of radios)radio.setGroupSize(this.size),radio.setGroupRequired(this.required&&!this.effectiveDisabled),radio.setGroupTabbable(radio===tabbableRadio);const oldValue=this._value;this._value=checkedRadio?.value??"",this.syncFormState(),this.updateValidity(),oldValue!==this._value&&this.requestUpdate("value",oldValue),this.runs.schedule()}finally{this.syncingRadios=!1}}}releaseRadios(radios){for(const radio of radios)radio.releaseGroupOwner(this),radio.setButtonRunPosition("standalone")}reconcileRadio(radio){return this.ownsRadio(radio)?(this.syncRadios(radio.checked?radio:void 0),!0):!1}releaseRadio(radio){this.managedRadios.has(radio)&&(this.releaseRadios([radio]),this.managedRadios.delete(radio),this.syncRadios())}radioCheckedChanged(radio){this.syncingRadios||!this.ownsRadio(radio)||(this._valueDirty=!0,this.syncRadios(radio.checked?radio:void 0))}selectRadio(radio){if(this.effectiveDisabled||!this.ownsRadio(radio)||!this.isRadioAvailable(radio))return!1;const detail=Object.freeze({value:radio.value,option:radio,radio});if(!radio.checked){this._valueDirty=!0,this.hasInteracted=!0,this.syncingRadios=!0;try{for(const candidate of this.radios())candidate.checked!==(candidate===radio)&&(candidate.checked=candidate===radio)}finally{this.syncingRadios=!1}this.syncRadios(),dispatchNativeEvent(this,"input"),this.emit("lr-input",detail),dispatchNativeEvent(this,"change"),this.emit("lr-change",detail)}return this.emit("lr-activate",detail),!0}focus(options){if(this.effectiveDisabled||this.matches(":disabled"))return;const enabled=this.radios().filter(radio=>this.isRadioAvailable(radio));(enabled.find(radio=>radio.checked)??enabled[0])?.focus(options)}blur(){this.radios().find(radio=>radio.matches(":focus-within"))?.blur()}click(){if(this.effectiveDisabled||this.matches(":disabled"))return;const enabled=this.radios().filter(radio=>this.isRadioAvailable(radio));(enabled.find(radio=>radio.checked)??enabled[0])?.click()}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part~="base"]')??null}syncFormState(){this.internals&&this.internals.setFormValue(this.name&&this.value?this.value:null,this.value)}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){if(!this.validityController)return;const missing=!this.barredFromValidation&&this.required&&!this.value;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("radioRequired"):""),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation})}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.hasInteracted=!0,this.updateValidity(),this.requestUpdate(),this.internals.reportValidity()}commitCustomValidity(message){const old=this.customError,normalized=message??"";this.validityController.setCustomValidity(normalized),this.reflectValidityStates(),this.reflectingCustomError=!0;try{normalized?this.setAttribute("custom-error",normalized):this.removeAttribute("custom-error")}finally{this.reflectingCustomError=!1}this.requestUpdate("customError",old)}setCustomValidity(message=""){this.commitCustomValidity(message)}resetValidity(){this.commitCustomValidity(""),this.updateValidity()}formResetCallback(){this._valueDirty=!1,this.pendingSelection=void 0,this.syncingRadios=!0;try{for(const radio of this.radios())radio.resetFromGroup()}finally{this.syncingRadios=!1}this.defaultValue&&(this.pendingSelection=this.defaultValue),this.hasInteracted=!1,this.syncRadios()}formStateRestoreCallback(state,reason){this._valueDirty=!0,this.hasInteracted=!1,this.pendingSelection=typeof state=="string"?state:"",this.selectValue(this.pendingSelection)}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(this.syncRadios(),this.updateValidity(),this.requestUpdate())}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasAccessibleLabel=this.hasAttribute("aria-label")||!!this.accessibleLabel,hasHint=this.hasHintSlot||this.hasHelpTextSlot||!!(this.hint||this.helpText)||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,ariaOrientation=RADIO_GROUP_ORIENTATION.normalize(this.orientation);return html`
       <div part="base" role="radiogroup"
         aria-label=${hasAccessibleLabel?this.accessibleLabel:nothing}
         aria-labelledby=${!hasAccessibleLabel&&hasLabel?this.labelId:nothing}

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

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraRadioEventMap{'lr-invalid':CustomEvent<null>;input:Event;change:Event;'lr-input':CustomEvent<{checked:boolean;value:string;}>;'lr-change':CustomEvent<{checked:boolean;value:string;}>;'lr-activate':CustomEvent<{value:string;}>;focus:FocusEvent;blur:FocusEvent;}export type RadioAppearance='default'|'button';type RadioButtonRunPosition='standalone'|'start'|'middle'|'end';
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraRadioEventMap{'lr-invalid':CustomEvent<null>;input:Event;change:Event;'lr-input':CustomEvent<{checked:boolean;value:string;}>;'lr-change':CustomEvent<{checked:boolean;value:string;}>;'lr-activate':CustomEvent<{value:string;}>;focus:FocusEvent;blur:FocusEvent;}export type RadioAppearance='default'|'button';type RadioButtonRunPosition='standalone'|'start'|'middle'|'end';declare class LyraRadioBase extends LyraElement<LyraRadioEventMap>{}declare const LyraRadio_base:typeof LyraRadioBase&(new(...args:any[])=>import("../../../lyra.js").FormAssociatedInterface<string> &import("../../../internal/form-associated.js").FormAssociatedSubclassInterface<string> &import("../../../lyra.js").CheckedFormAssociatedInterface&import("../../../internal/form-associated.js").CheckedFormAssociatedSubclassInterface);
 /**
 * `<lr-radio>` — a form-associated single-choice control. Radios can be used
 * alone or inside `<lr-radio-group>`.
@@ -112,9 +112,9 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraRadio extends LyraElement<LyraRadioEventMap>{
+export declare class LyraRadio extends LyraRadio_base{
 /** Public WA-compatible intrinsic validator catalog, inherited by radio-button. */
-static get validators():LyraFormValidator<LyraRadio>[];static styles:import("lit").CSSResultGroup[];static formAssociated:boolean;static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};checked:{attribute:boolean;noAccessor:boolean;};defaultChecked:{attribute:string;type:BooleanConstructor;reflect:boolean;useDefault:boolean;noAccessor:boolean;};appearance:{reflect:boolean;converter:import("lit").ComplexAttributeConverter<RadioAppearance,unknown>;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;converter:import("lit").ComplexAttributeConverter<string,unknown>;};pill:{type:BooleanConstructor;reflect:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};size:{reflect:boolean;converter:import("lit").ComplexAttributeConverter<LyraSize,unknown>;};value:{reflect:boolean;noAccessor:boolean;};};
+static get validators():LyraFormValidator<LyraRadio>[];static styles:import("lit").CSSResultGroup[];static properties:{appearance:{reflect:boolean;converter:import("lit").ComplexAttributeConverter<RadioAppearance,unknown>;};pill:{type:BooleanConstructor;reflect:boolean;};size:{reflect:boolean;converter:import("lit").ComplexAttributeConverter<LyraSize,unknown>;};};
 /**
 * Control size, on the library's shared ladder. Accepts both spellings of every tier —
 * `2xs`/`xs`/`s`/`m`/`l`/`xl` and Web Awesome's `small`/`medium`/`large` — so migrating either way
@@ -134,23 +134,15 @@ appearance:RadioAppearance;
 * `<lr-radio-button>`, which inherits this class and renders rectangular chrome; it is declared
 * here so both tags carry one property with one meaning.
 */
-pill:boolean;private hasLabel;private hasStart;private hasEnd;private readonly labelTextObserver;private hasInteracted;private swappingControl;private internals;private validityController;
-/** Consumer-supplied validation message reflected through `custom-error`. */
-customError:string|null;private _checked;private _disabled;private _required;private _name;private _value;private _fieldsetDisabled;private _groupDisabled;private _groupRequired;private _groupSize;private _tabbable;private _buttonRunPosition;private groupOwner;private _defaultChecked;private _checkedDirty;private settingDefaultChecked;private reflectingDefaultChecked;get checked():boolean;set checked(value:boolean);
-/** Reflected current reset default; changing it never overwrites dirty live `checked` state. */
-get defaultChecked():boolean;set defaultChecked(value:boolean);get disabled():boolean;set disabled(value:boolean);get required():boolean;set required(value:boolean);get name():string;set name(value:string|null);get value():string;set value(value:string);get effectiveDisabled():boolean;get effectiveRequired():boolean;
+pill:boolean;private hasLabel;private hasStart;private hasEnd;private readonly labelTextObserver;private swappingControl;private committingCustomError;private resettingCustomError;private _radioName;private _radioValue;private _groupDisabled;private _groupRequired;private _groupSize;private _tabbable;private _buttonRunPosition;private groupOwner;get name():string;set name(value:string|null);get value():string;set value(value:string);private radioCustomMessage;get customError():string|null;set customError(next:string|null);
+/** A write that changes nothing is not a state change (and never notifies the group). */
+protected acceptsCheckedWrite(previous:boolean,next:boolean):boolean;protected checkedWritten(previous:boolean):void;protected isDisabledByOwner():boolean;protected reportsRequired():boolean;protected requiredMessage():string;
+/** A grouped radio contributes nothing itself: the group is the form-associated owner. */
+protected commitFormValue(value:string):void;protected updateValidity():void;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;get effectiveRequired():boolean;
 /** Name used by the owning aggregate group without rewriting this option's authored `name`. */
 get effectiveName():string;
 /** Size projected by the owning group without rewriting this option's authored `size`. */
-get effectiveSize():LyraSize;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 externalDescriptionLease?;private syncExternalDescription;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private releaseExternalDescription;connectedCallback():void;adoptedCallback():void;disconnectedCallback():void;formResetCallback():void;private restoreCheckedFromDefault;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;formDisabledCallback(disabled:boolean):void;private get barredFromValidation();private updateValidity;private reflectValidityStates;private markInteracted;
-/** Whether the radio currently satisfies its constraints — the silent query, so it deliberately
-*  does not count as interaction for the `user-*` custom states.
-*  `withStaticValidityCheck()` tells the `installInteractionOnInvalid()` listener above that
-*  whatever `invalid` event fires synchronously inside this call is this call, not a
-*  submission attempt. */
-checkValidity():boolean;
-/** `checkValidity()`, plus the browser's own validation UI on failure. */
-reportValidity():boolean;
+get effectiveSize():LyraSize;private syncFormState;private externalDescriptionLease?;private syncExternalDescription;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private releaseExternalDescription;connectedCallback():void;adoptedCallback():void;disconnectedCallback():void;
 /**
 * Sets or clears a consumer-supplied validation error — the standard channel for a server-side
 * rejection ("that plan is no longer available") that no client-side constraint can express. A
@@ -168,8 +160,8 @@ reportValidity():boolean;
 *
 * The message is caller-supplied content, so it is used verbatim and never localized here.
 */
-setCustomValidity(message:string):void;
+setCustomValidity(message:string):void;private applyCustomValidity;private reflectCustomError;
 /** Clears consumer-supplied validity on the standalone radio or its owning group. */
-resetValidity():void;click():void;focus(options?:FocusOptions):void;blur():void;private syncFormState;private currentGroup;private group;private select;private uncheckSameNameRadios;
+resetValidity():void;click():void;focus(options?:FocusOptions):void;blur():void;private currentGroup;private group;private select;private uncheckSameNameRadios;
 /** Actual contiguous button-run position. Standalone and non-adjacent controls stay rounded. */
 protected get buttonRunPosition():RadioButtonRunPosition;private isNestedInteractiveEvent;protected onClick:()=>void;protected onKeyDown:(event:KeyboardEvent)=>void;protected onFocus:(event:FocusEvent)=>void;protected onBlur:(event:FocusEvent)=>void;private isDefaultLabelNode;private labelForwardingSlots;private recomputeHasLabel;private assignedAdornmentNodes;private recomputeButtonAdornments;private handleLabelSlotChange;private onLabelSlotChange;private onSlotChange;private onAdornmentSlotChange;private get invalid();render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-radio':LyraRadio;}}export{};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController}from"../../../internal/form-control-controller.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{tag}from"../../../internal/prefix.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./radio.styles.js";import{appearanceStyles}from"./radio-button.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{declaredDefaultConverter,omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_radioRequired}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();class LyraRadio extends LyraElement{static{this.defaultStrings={...super.defaultStrings,radioRequired:LYRA_DEFAULT_radioRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}static{this.styles=[LyraElement.styles,sizes,styles,appearanceStyles]}static{this.formAssociated=!0}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},checked:{attribute:!1,noAccessor:!0},defaultChecked:{attribute:"checked",type:Boolean,reflect:!0,useDefault:!0,noAccessor:!0},appearance:{reflect:!0,converter:declaredDefaultConverter("default")},disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},pill:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0,converter:declaredDefaultConverter("m")},value:{reflect:!0,noAccessor:!0}}}get checked(){return this._checked}set checked(value){const old=this._checked,next=!!value;this.settingDefaultChecked||(this._checkedDirty=!0),old!==next&&(this._checked=next,this.syncFormState(),this.requestUpdate("checked",old),this.isConnected&&this.group()?.radioCheckedChanged?.(this))}get defaultChecked(){return this._defaultChecked}set defaultChecked(value){if(this.reflectingDefaultChecked)return;const old=this._defaultChecked;this._defaultChecked=!!value,this.reflectingDefaultChecked=!0;try{this.toggleAttribute("checked",this._defaultChecked)}finally{this.reflectingDefaultChecked=!1}this._checkedDirty||this.restoreCheckedFromDefault(),this.requestUpdate("defaultChecked",old)}get disabled(){return this._disabled}set disabled(value){const old=this._disabled;this._disabled=!!value,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(value){const old=this._required;this._required=!!value,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get name(){return this._name}set name(value){const old=this._name,next=value??"";if(old===next){!next&&this.hasAttribute("name")&&this.removeAttribute("name");return}this._name=next,next?this.getAttribute("name")!==next&&this.setAttribute("name",next):this.hasAttribute("name")&&this.removeAttribute("name"),this.requestUpdate("name",old)}get value(){return this._value}set value(value){const old=this._value,next=value??"on";old!==next&&(this._value=next,value==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==next&&this.setAttribute("value",next),this.syncFormState(),this.requestUpdate("value",old))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled||!!this.currentGroup()&&this._groupDisabled}get effectiveRequired(){return this.required||(this.currentGroup()?this._groupRequired:!1)}get effectiveName(){return this.currentGroup()?.name||this.name}get effectiveSize(){return this.currentGroup()?.size??this._groupSize??this.size}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}constructor(){super(),this.size="m",this.appearance="default",this.pill=!1,this.hasLabel=!1,this.hasStart=!1,this.hasEnd=!1,this.labelTextObserver=new AccessibleTextController(this,[],()=>{this.recomputeHasLabel(),this.recomputeButtonAdornments()},["slot"]),this.hasInteracted=!1,this.swappingControl=!1,this._checked=!1,this._disabled=!1,this._required=!1,this._name="",this._value="on",this._fieldsetDisabled=!1,this._groupDisabled=!1,this._groupRequired=!1,this._groupSize=null,this._tabbable=!0,this._buttonRunPosition="standalone",this.groupOwner=null,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onClick=event=>{if(event&&this.isNestedInteractiveEvent(event)){event.stopPropagation();return}this.select()},this.onKeyDown=event=>{if(this.isNestedInteractiveEvent(event)){event.stopPropagation();return}this.effectiveDisabled||(event.key===" "||event.key==="Spacebar")&&(event.preventDefault(),this.select())},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{!this.effectiveDisabled&&!this.matches(":disabled")&&!this.swappingControl&&(this.hasInteracted=!0,this.reflectValidityStates()),relayNativeEvent(this,event)},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onAdornmentSlotChange=()=>{this.labelTextObserver.bind(),this.recomputeButtonAdornments()},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.currentGroup()?.customError??this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.syncFormState()}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part~="base"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this[VALIDITY_ANCHOR]();target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}willUpdate(changed){super.willUpdate(changed),this.swappingControl=this.hasUpdated&&changed.has("appearance")}updated(changed){super.updated(changed),this.swappingControl=!1,this.syncExternalDescription()}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.addEventListener("slotchange",this.onLabelSlotChange),this.addEventListener("slotchange",this.onAdornmentSlotChange),this.recomputeHasLabel(),this.recomputeButtonAdornments(),this.updateValidity(),this.group()}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),this.removeEventListener("slotchange",this.onLabelSlotChange),this.removeEventListener("slotchange",this.onAdornmentSlotChange),super.disconnectedCallback()}formResetCallback(){this.currentGroup()||(this.hasInteracted=!1,this.restoreCheckedFromDefault(),this.reflectValidityStates())}resetFromGroup(){this.hasInteracted=!1,this.restoreCheckedFromDefault()}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formStateRestoreCallback(state2,reason){if(this.currentGroup())return;const old=this._checked;this._checked=state2==="checked",this._checkedDirty=!0,this.syncFormState(),this.requestUpdate("checked",old),this.isConnected&&this.group()?.radioCheckedChanged?.(this)}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(this.updateValidity(),this.requestUpdate())}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){const owned=!!this.currentGroup(),violates=!this.barredFromValidation&&!owned&&this.effectiveRequired&&!this.checked;this.validityController.setValidity(violates?{valueMissing:!0}:{},this.localize("radioRequired")),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.effectiveRequired,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"disabled",this.effectiveDisabled)}setGroupDisabled(value){this._groupDisabled!==value&&(this._groupDisabled=value,this.updateValidity(),this.requestUpdate())}setGroupRequired(value){this._groupRequired!==value&&(this._groupRequired=value,this.updateValidity(),this.requestUpdate())}setGroupSize(value){this._groupSize!==value&&(this._groupSize=value,this.toggleAttribute("data-lr-group-size",value!==null),this.requestUpdate())}setGroupTabbable(value){this._tabbable!==value&&(this._tabbable=value,this.requestUpdate())}setButtonRunPosition(value){this._buttonRunPosition!==value&&(this._buttonRunPosition=value,this.requestUpdate())}setGroupOwner(owner){if(this.groupOwner===owner)return;this.groupOwner?.releaseRadio?.(this);const standaloneCustomError=this.validityController.customValidityMessage;this.groupOwner=owner,standaloneCustomError&&owner.setCustomValidity&&(owner.setCustomValidity(standaloneCustomError),this.validityController.setCustomValidity("")),this.syncFormState()}releaseGroupOwner(owner){if(this.groupOwner!==owner)return;this.groupOwner=null,this.setGroupRequired(!1),this.setGroupDisabled(!1),this.setGroupSize(null),this.setGroupTabbable(!0),this.setButtonRunPosition("standalone");const reflectedCustomError=this.getAttribute("custom-error")??"";reflectedCustomError&&this.validityController.setCustomValidity(reflectedCustomError),this.syncFormState()}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){const group=this.currentGroup();if(group?.setCustomValidity){group.setCustomValidity(message??"");return}this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}click(){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}syncFormState(){!!this.currentGroup()?this.internals.setFormValue(null):this.internals.setFormValue(this.checked?this.value:null,this.checked?"checked":"unchecked"),this.updateValidity()}currentGroup(){if(!this.isConnected)return null;const closest=this.closest;if(typeof closest!="function")return null;const group=closest.call(this,tag("radio-group"));return group?.isConnected&&group.ownsRadio?.(this)?group:null}group(){const group=this.currentGroup();return group?(this.setGroupOwner(group),group.reconcileRadio?.(this),group):(this.groupOwner?.releaseRadio?.(this),null)}activateFromGroup(){this.select()}select(){const group=this.group();if(!this.effectiveDisabled){if(this.checked||(this.hasInteracted=!0),group){group.selectRadio?.(this);return}this.checked||(this.checked=!0,this.uncheckSameNameRadios(),dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:!0,value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:!0,value:this.value})),this.emit("lr-activate",{value:this.value})}}uncheckSameNameRadios(){if(this.name)for(const other of this.getRootNode().querySelectorAll(`${tag("radio")},${tag("radio-button")}`))other!==this&&other.name===this.name&&other.form===this.form&&!other.currentGroup()&&(other.checked=!1)}get buttonRunPosition(){return this._buttonRunPosition}isNestedInteractiveEvent(event){const currentTarget=event.currentTarget;for(const entry of event.composedPath()){if(entry===currentTarget)break;if(entry&&typeof entry=="object"&&entry.nodeType===1&&isActionableElement(entry))return!0}return!1}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}recomputeHasLabel(){const slot=this.renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(this.childNodes??[]).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabel=hasRealContent(nodes)}assignedAdornmentNodes(names){const slots=names.map(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)).filter(slot=>!!slot);if(slots.length>0)return slots.flatMap(slot=>slot.assignedNodes({flatten:!0}));const children=this.children;return(children?Array.from(children):[]).filter(element=>names.includes(element.getAttribute("slot")??"")).flatMap(element=>{if(element.localName!=="slot")return[element];const forwardingSlot=element;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)})}recomputeButtonAdornments(){this.hasStart=hasRealContent(this.assignedAdornmentNodes(["start","prefix"])),this.hasEnd=hasRealContent(this.assignedAdornmentNodes(["end","suffix"]))}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.labelTextObserver.bind(),this.recomputeHasLabel())}renderButtonContent(){return html`
+import{__decorate}from"tslib";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{tag}from"../../../internal/prefix.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./radio.styles.js";import{appearanceStyles}from"./radio-button.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{CheckedFormAssociated}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{declaredDefaultConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_radioRequired}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();class LyraRadioBase extends LyraElement{}class LyraRadio extends CheckedFormAssociated(LyraRadioBase){constructor(){super(...arguments),this.size="m",this.appearance="default",this.pill=!1,this.hasLabel=!1,this.hasStart=!1,this.hasEnd=!1,this.labelTextObserver=new AccessibleTextController(this,[],()=>{this.recomputeHasLabel(),this.recomputeButtonAdornments()},["slot"]),this.swappingControl=!1,this.committingCustomError=!1,this.resettingCustomError=!1,this._radioName="",this._radioValue="on",this._groupDisabled=!1,this._groupRequired=!1,this._groupSize=null,this._tabbable=!0,this._buttonRunPosition="standalone",this.groupOwner=null,this.onClick=event=>{if(event&&this.isNestedInteractiveEvent(event)){event.stopPropagation();return}this.select()},this.onKeyDown=event=>{if(this.isNestedInteractiveEvent(event)){event.stopPropagation();return}this.effectiveDisabled||(event.key===" "||event.key==="Spacebar")&&(event.preventDefault(),this.select())},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{!this.effectiveDisabled&&!this.matches(":disabled")&&!this.swappingControl&&this.setInteracted(!0),relayNativeEvent(this,event)},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onAdornmentSlotChange=()=>{this.labelTextObserver.bind(),this.recomputeButtonAdornments()}}static{this.defaultStrings={...super.defaultStrings,radioRequired:LYRA_DEFAULT_radioRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}static{this.styles=[LyraElement.styles,sizes,styles,appearanceStyles]}static{this.properties={appearance:{reflect:!0,converter:declaredDefaultConverter("default")},pill:{type:Boolean,reflect:!0},size:{reflect:!0,converter:declaredDefaultConverter("m")}}}get name(){return this._radioName}set name(value){const old=this._radioName,next=value??"";if(old===next){!next&&this.hasAttribute("name")&&this.removeAttribute("name");return}this._radioName=next,next?this.getAttribute("name")!==next&&this.setAttribute("name",next):this.hasAttribute("name")&&this.removeAttribute("name"),this.requestUpdate("name",old)}get value(){return this._radioValue}set value(value){const old=this._radioValue,next=value??"on";old!==next&&(this._radioValue=next,value==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==next&&this.setAttribute("value",next),this.syncFormState(),this.requestUpdate("value",old))}radioCustomMessage(){return this.currentGroup()?.customError??this.validityController.customValidityMessage}get customError(){return this.radioCustomMessage()||null}set customError(next){this.setCustomValidity(next??"")}acceptsCheckedWrite(previous,next){return previous!==next}checkedWritten(previous){this.isConnected&&this.group()?.radioCheckedChanged?.(this)}isDisabledByOwner(){return!!this.currentGroup()&&this._groupDisabled}reportsRequired(){return this.effectiveRequired}requiredMessage(){return this.localize("radioRequired")}commitFormValue(value){this.currentGroup()?this.internals.setFormValue(null):this.internals.setFormValue(this.checked?value:null,this.checked?"checked":"unchecked")}updateValidity(){const owned=!!this.currentGroup(),violates=!this.isBarredFromValidation()&&!owned&&this.effectiveRequired&&!this.checked;this[SET_ANCHORED_VALIDITY](violates?{valueMissing:!0}:{},this.requiredMessage())}formResetCallback(){this.currentGroup()||super.formResetCallback()}formStateRestoreCallback(state2,reason){this.currentGroup()||(this.checked=state2==="checked")}get effectiveRequired(){return this.required||(this.currentGroup()?this._groupRequired:!1)}get effectiveName(){return this.currentGroup()?.name||this.name}get effectiveSize(){return this.currentGroup()?.size??this._groupSize??this.size}syncFormState(){this.commitFormValue(this.value),this.updateValidity()}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part~="base"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this[VALIDITY_ANCHOR]();target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}willUpdate(changed){super.willUpdate(changed),this.swappingControl=this.hasUpdated&&changed.has("appearance")}updated(changed){super.updated(changed),this.swappingControl=!1,this.syncExternalDescription()}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.addEventListener("slotchange",this.onLabelSlotChange),this.addEventListener("slotchange",this.onAdornmentSlotChange),this.recomputeHasLabel(),this.recomputeButtonAdornments(),this.updateValidity(),this.group()}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),this.removeEventListener("slotchange",this.onLabelSlotChange),this.removeEventListener("slotchange",this.onAdornmentSlotChange),super.disconnectedCallback()}resetFromGroup(){this.setInteracted(!1),this.restoreCheckedFromDefault()}setGroupDisabled(value){this._groupDisabled!==value&&(this._groupDisabled=value,this.updateValidity(),this.requestUpdate())}setGroupRequired(value){this._groupRequired!==value&&(this._groupRequired=value,this.updateValidity(),this.requestUpdate())}setGroupSize(value){this._groupSize!==value&&(this._groupSize=value,this.toggleAttribute("data-lr-group-size",value!==null),this.requestUpdate())}setGroupTabbable(value){this._tabbable!==value&&(this._tabbable=value,this.requestUpdate())}setButtonRunPosition(value){this._buttonRunPosition!==value&&(this._buttonRunPosition=value,this.requestUpdate())}setGroupOwner(owner){if(this.groupOwner===owner)return;this.groupOwner?.releaseRadio?.(this);const standaloneCustomError=this.validityController.customValidityMessage;this.groupOwner=owner,standaloneCustomError&&owner.setCustomValidity&&(owner.setCustomValidity(standaloneCustomError),this.validityController.setCustomValidity("")),this.syncFormState()}releaseGroupOwner(owner){if(this.groupOwner!==owner)return;this.groupOwner=null,this.setGroupRequired(!1),this.setGroupDisabled(!1),this.setGroupSize(null),this.setGroupTabbable(!0),this.setButtonRunPosition("standalone");const reflectedCustomError=this.getAttribute("custom-error")??"";reflectedCustomError&&this.validityController.setCustomValidity(reflectedCustomError),this.syncFormState()}setCustomValidity(message){if(this.committingCustomError){this.resettingCustomError&&this.applyCustomValidity(message??"");return}const old=this.radioCustomMessage()||null;this.committingCustomError=!0;try{this.applyCustomValidity(message??""),this.reflectCustomError(this.radioCustomMessage())}finally{this.committingCustomError=!1}this.requestUpdate("customError",old)}applyCustomValidity(message){const group=this.currentGroup();if(group?.setCustomValidity){group.setCustomValidity(message);return}this.validityController.setCustomValidity(message),this.syncValidityStates(),this.requestUpdate()}reflectCustomError(message){message?this.getAttribute("custom-error")!==message&&this.setAttribute("custom-error",message):this.hasAttribute("custom-error")&&this.removeAttribute("custom-error")}resetValidity(){if(this.committingCustomError)return;const old=this.radioCustomMessage()||null;this.committingCustomError=!0,this.resettingCustomError=!0;try{this.applyCustomValidity(""),this.reflectCustomError(this.radioCustomMessage())}finally{this.resettingCustomError=!1,this.committingCustomError=!1}this.requestUpdate("customError",old)}click(){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}currentGroup(){if(!this.isConnected)return null;const closest=this.closest;if(typeof closest!="function")return null;const group=closest.call(this,tag("radio-group"));return group?.isConnected&&group.ownsRadio?.(this)?group:null}group(){const group=this.currentGroup();return group?(this.setGroupOwner(group),group.reconcileRadio?.(this),group):(this.groupOwner?.releaseRadio?.(this),null)}activateFromGroup(){this.select()}select(){const group=this.group();if(!this.effectiveDisabled){if(this.checked||this.setInteracted(!0),group){group.selectRadio?.(this);return}this.checked||(this.checked=!0,this.uncheckSameNameRadios(),dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:!0,value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:!0,value:this.value})),this.emit("lr-activate",{value:this.value})}}uncheckSameNameRadios(){if(this.name)for(const other of this.getRootNode().querySelectorAll(`${tag("radio")},${tag("radio-button")}`))other!==this&&other.name===this.name&&other.form===this.form&&!other.currentGroup()&&(other.checked=!1)}get buttonRunPosition(){return this._buttonRunPosition}isNestedInteractiveEvent(event){const currentTarget=event.currentTarget;for(const entry of event.composedPath()){if(entry===currentTarget)break;if(entry&&typeof entry=="object"&&entry.nodeType===1&&isActionableElement(entry))return!0}return!1}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}recomputeHasLabel(){const slot=this.renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(this.childNodes??[]).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabel=hasRealContent(nodes)}assignedAdornmentNodes(names){const slots=names.map(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)).filter(slot=>!!slot);if(slots.length>0)return slots.flatMap(slot=>slot.assignedNodes({flatten:!0}));const children=this.children;return(children?Array.from(children):[]).filter(element=>names.includes(element.getAttribute("slot")??"")).flatMap(element=>{if(element.localName!=="slot")return[element];const forwardingSlot=element;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)})}recomputeButtonAdornments(){this.hasStart=hasRealContent(this.assignedAdornmentNodes(["start","prefix"])),this.hasEnd=hasRealContent(this.assignedAdornmentNodes(["end","suffix"]))}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.labelTextObserver.bind(),this.recomputeHasLabel())}renderButtonContent(){return html`
       <span part="start prefix" ?hidden=${!this.hasStart}>
         <slot name="start" @slotchange=${this.onAdornmentSlotChange}></slot>
         <slot name="prefix" @slotchange=${this.onAdornmentSlotChange}></slot>
@@ -32,4 +32,4 @@ import{__decorate}from"tslib";import{installFormControlLabelSupport}from"../../.
         <span part=${controlParts}>${this.checked?html`<span part="dot checked-icon"></span>`:nothing}</span>
         <span part="label" ?hidden=${!this.hasLabel}><slot @slotchange=${this.onSlotChange}></slot></span>
       </span>
-    `}}__decorate([state()],LyraRadio.prototype,"hasLabel",void 0),__decorate([state()],LyraRadio.prototype,"hasStart",void 0),__decorate([state()],LyraRadio.prototype,"hasEnd",void 0),__decorate([state()],LyraRadio.prototype,"hasInteracted",void 0);export{LyraRadio};
+    `}}__decorate([state()],LyraRadio.prototype,"hasLabel",void 0),__decorate([state()],LyraRadio.prototype,"hasStart",void 0),__decorate([state()],LyraRadio.prototype,"hasEnd",void 0);export{LyraRadio};

package/dist/components/forms/rubric-form/rubric-form.class.d.ts

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import'../../layout/segmented/segmented.class.js';import'../slider/slider.class.js';import'../select/select.class.js';import'../combobox/option.class.js';import'../checkbox/checkbox.class.js';import'../checkbox-group/checkbox-group.class.js';import'../textarea/textarea.class.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export interface RubricKeyOption{readonly value:string;readonly label?:string;readonly description?:string;
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import'../../layout/segmented/segmented.class.js';import'../slider/slider.class.js';import'../select/select.class.js';import'../combobox/option.class.js';import'../checkbox/checkbox.class.js';import'../checkbox-group/checkbox-group.class.js';import'../textarea/textarea.class.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export interface RubricKeyOption{readonly value:string;readonly label?:string;readonly description?:string;
 /** Optional decorative leading visual, rendered into `<lr-option>`'s `start` slot (single-select)
 *  or inline before the label (multiple-select). Deliberately general Lit content rather than an
 *  icon-name string, matching `LyraFilterBarOption.icon`/`LyraSegmentedItem.icon`. Rendered
@@ -120,7 +120,7 @@ export type RubricKey=ScoreRubricKey|CategoryRubricKey|CommentRubricKey;export t
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraRubricForm extends LyraElement<LyraRubricFormEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};keys:{attribute:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:boolean;noAccessor:boolean;};itemId:{attribute:string;reflect:boolean;noAccessor:boolean;};hasNext:{type:BooleanConstructor;attribute:string;noAccessor:boolean;};skippable:{type:BooleanConstructor;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};
+export declare class LyraRubricForm extends LyraFormControlElement<LyraRubricFormEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};keys:{attribute:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:boolean;noAccessor:boolean;};itemId:{attribute:string;reflect:boolean;noAccessor:boolean;};hasNext:{type:BooleanConstructor;attribute:string;noAccessor:boolean;};skippable:{type:BooleanConstructor;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};
 /** Aggregate label for the complete rubric. Rich content can use the matching slot. */
 label:string;
 /** Aggregate supporting text. */
@@ -132,9 +132,7 @@ withLabel:boolean;
 /** SSR hint-presence hint; hydrated instances also discover populated hint/help-text slots. */
 withHint:boolean;private _errors;private touchedFields;private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasErrorSlot();private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
-customError:string|null;private baseId;private aggregateLabelId;private aggregateHintId;private aggregateErrorId;private _fieldsetDisabled;private _name;private _keys;private _value;private _defaultValue;private _rawValue;private _rawDefaultValue;private _boundKeys?;private _boundValue?;private _valueDirty;private _itemId;private _hasNext;private _skippable;private _disabled;private lastValidityKey;private pendingFocusFirst;constructor();get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;
-/** Delegates straight to `ElementInternals.labels` -- no logic of its own. */
-get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;get keys():readonly RubricKey[];set keys(next:readonly RubricKey[]);
+customError:string|null;private baseId;private aggregateLabelId;private aggregateHintId;private aggregateErrorId;private _fieldsetDisabled;private _name;private _keys;private _value;private _defaultValue;private _rawValue;private _rawDefaultValue;private _boundKeys?;private _boundValue?;private _valueDirty;private _itemId;private _hasNext;private _skippable;private _disabled;private lastValidityKey;private pendingFocusFirst;constructor();get form():HTMLFormElement|null;set form(owner:FormOwnerValue);get keys():readonly RubricKey[];set keys(next:readonly RubricKey[]);
 /** Canonical live structured value. Reads are defensive snapshots; writes are normalized against
 * the current discriminated schema before rendering, validity, events, and form submission. */
 get value():RubricValue;set value(next:RubricValue);