@aceshooting/lyra-ui 16.0.0 → 17.0.0

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{styles}from"./textarea.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{sanitizeCssResize}from"../../../internal/safe-css.js";import{finiteCount,finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_textareaCharacterCount,LYRA_DEFAULT_textareaCharactersRemaining,LYRA_DEFAULT_textareaLabel,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const COUNT_ANNOUNCE_DELAY_MS=1e3;class LyraTextareaBase extends LyraElement{}class LyraTextarea extends FormAssociated(LyraTextareaBase){static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,textareaCharacterCount:LYRA_DEFAULT_textareaCharacterCount,textareaCharactersRemaining:LYRA_DEFAULT_textareaCharactersRemaining,textareaLabel:LYRA_DEFAULT_textareaLabel,valueInvalid:LYRA_DEFAULT_valueInvalid}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","minlength","maxlength")]}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??"",this.settlingValueFromInput||this.settledDebounce.cancel()}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}constructor(){super(),this.rows=4,this.resize="vertical",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.withCount=!1,this.placeholder="",this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.spellcheck=!0,this.autofocus=!1,this.title="",this.autocapitalize="",this.autocorrectValue=!0,this.wrap="soft",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.touched=!1,this.announcedCountText="",this.slotPresence=new SlotPresenceController(this),this.settlingValueFromInput=!1,this.settledDebounce=new DebounceController(0,value=>{this.emit("lr-input-settled",{value})}),this.onInput=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settlingValueFromInput=!0,this.value=this.textareaEl.value,this.settlingValueFromInput=!1,this.resize==="auto"&&this.fitToContent(),this.scheduleCountAnnouncement(),relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}),this.isDebounced()?(this.settledDebounce.delayMs=this.effectiveDebounceMs,this.settledDebounce.push(this.value)):this.settledDebounce.cancel())},this.onChange=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settledDebounce.flush(),this.value=this.textareaEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.settledDebounce.flush(),relayNativeEvent(this,event)},this.onKeyDown=event=>{if(this.liveDisabled){event.stopPropagation();return}event.key==="Enter"&&this.settledDebounce.flush()},this.addEventListener("invalid",()=>{this.touched=!0})}get input(){return this.textareaEl??null}get selectionStart(){return this.textareaEl?.selectionStart??null}set selectionStart(value){this.textareaEl&&(this.textareaEl.selectionStart=value??0)}get selectionEnd(){return this.textareaEl?.selectionEnd??null}set selectionEnd(value){this.textareaEl&&(this.textareaEl.selectionEnd=value??0)}get selectionDirection(){return this.textareaEl?.selectionDirection}set selectionDirection(value){this.textareaEl&&(this.textareaEl.selectionDirection=value??"none")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.textareaEl?.click()}focus(options){this.liveDisabled||this.textareaEl?.focus(options)}blur(){this.textareaEl?.blur()}select(){this.textareaEl?.select()}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.textareaEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}scrollPosition(position){const ta=this.textareaEl;if(ta){if(position){position.top!==void 0&&(ta.scrollTop=finiteNumber(position.top,ta.scrollTop)),position.left!==void 0&&(ta.scrollLeft=finiteNumber(position.left,ta.scrollLeft));return}return{top:ta.scrollTop,left:ta.scrollLeft}}}setRangeText(replacement,start,end,selectMode="preserve"){const ta=this.textareaEl;ta&&(start===void 0||end===void 0?ta.setRangeText(replacement):ta.setRangeText(replacement,start,end,selectMode),this.value=ta.value,this.fitToContent())}connectedCallback(){super.connectedCallback(),this.countAnnouncementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.resize==="auto"&&this.hasUpdated&&(this.armResizeObserver(),this.fitToContent()),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.settledDebounce.cancel(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf!==void 0&&this.resizeRafOwner?.cancelAnimationFrame(this.resizeRaf),this.resizeRaf=void 0,this.resizeRafOwner=void 0,this.countAnnounceTimer!==void 0&&this.countAnnounceTimerOwner?.clearTimeout(this.countAnnounceTimer),this.countAnnounceTimer=void 0,this.countAnnounceTimerOwner=void 0,this.countAnnouncementSink?.release(),this.countAnnouncementSink=void 0,this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}syncExternalDescription(){const target=this.textareaEl??null;if(!target){this.releaseExternalDescription();return}if(!this.externalDescriptionLease){this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby");return}this.externalDescriptionLease.update(target)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}effectiveLengthLimit(declared){if(!(declared===void 0||!Number.isFinite(declared)||declared<0))return finiteCount(Math.trunc(declared),0)}countMaxlength(){return this.effectiveLengthLimit(this.maxlength)}countText(){const format=getNumberFormat(this.effectiveLocale),max=this.countMaxlength();if(max!==void 0){const remaining=Math.max(0,max-this.value.length);return this.localize("textareaCharactersRemaining",void 0,{count:format.format(remaining),pluralCount:remaining})}const length=this.value.length;return this.localize("textareaCharacterCount",void 0,{count:format.format(length),pluralCount:length})}scheduleCountAnnouncement(){if(this.countAnnounceTimer!==void 0&&this.countAnnounceTimerOwner?.clearTimeout(this.countAnnounceTimer),this.countAnnounceTimer=void 0,this.countAnnounceTimerOwner=void 0,!this.withCount)return;const view=this.ownerDocument.defaultView;view&&(this.countAnnounceTimerOwner=view,this.countAnnounceTimer=view.setTimeout(()=>{if(this.countAnnounceTimer=void 0,this.countAnnounceTimerOwner=void 0,!this.isConnected||this.ownerDocument.defaultView!==view||!this.withCount||!isAccessibilityVisible(this))return;const text=this.countText();this.announcedCountText=text,this.countAnnouncementSink?.announce(text)},COUNT_ANNOUNCE_DELAY_MS))}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}const native=this.textareaEl;native&&native.value!==this.value&&(native.value=this.value);const effectiveMinlength=this.effectiveLengthLimit(this.minlength),effectiveMaxlength=this.effectiveLengthLimit(this.maxlength),own=lengthViolations(this.value,effectiveMinlength,effectiveMaxlength),tooShort=!!native?.validity.tooShort||own.tooShort,tooLong=!!native?.validity.tooLong||own.tooLong;if(!tooShort&&!tooLong){this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({tooShort,tooLong},native?.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed),changed.has("value")&&(this.value===""?this.internals.states.add("blank"):this.internals.states.delete("blank")),this.syncExternalDescription(),(changed.has("minlength")||changed.has("maxlength")||changed.has("readonly"))&&this.updateValidity(),changed.has("resize")&&(this.resize==="auto"?this.armResizeObserver():changed.get("resize")==="auto"&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf!==void 0&&this.resizeRafOwner?.cancelAnimationFrame(this.resizeRaf),this.resizeRaf=void 0,this.resizeRafOwner=void 0,this.textareaEl&&(this.textareaEl.style.blockSize="",this.textareaEl.style.overflowY=""))),this.resize==="auto"&&(this.armResizeObserver(),(changed.has("value")||changed.has("rows")||changed.has("resize"))&&this.fitToContent())}formResetCallback(){super.formResetCallback(),this.touched=!1}armResizeObserver(){const textarea=this.textareaEl;if(this.resizeObserver||!textarea)return;const view=this.ownerDocument.defaultView,ResizeObserverCtor=view?.ResizeObserver;!view||!ResizeObserverCtor||(this.lastObservedWidth=textarea.getBoundingClientRect().width,this.resizeObserver=new ResizeObserverCtor(entries=>{if(!this.isConnected||this.ownerDocument.defaultView!==view)return;const width=entries[0]?.contentRect.width;width===void 0||this.lastObservedWidth!==void 0&&Math.abs(width-this.lastObservedWidth)<.5||(this.lastObservedWidth=width,this.resizeRaf!==void 0&&this.resizeRafOwner?.cancelAnimationFrame(this.resizeRaf),this.resizeRafOwner=view,this.resizeRaf=view.requestAnimationFrame(()=>{this.resizeRaf=void 0,this.resizeRafOwner=void 0,!(!this.isConnected||this.ownerDocument.defaultView!==view)&&this.fitToContent()}))}),this.resizeObserver.observe(textarea))}fitToContent(){const ta=this.textareaEl;if(!ta||this.resize!=="auto")return;ta.style.blockSize="auto";const computed=ta.ownerDocument.defaultView?.getComputedStyle(ta);if(!computed)return;const borderBlock=parseFloat(computed.borderBlockStartWidth)+parseFloat(computed.borderBlockEndWidth),parsedMax=parseFloat(computed.maxBlockSize),maxBlockSize=Number.isFinite(parsedMax)?parsedMax:Number.POSITIVE_INFINITY,contentBlockSize=ta.scrollHeight+borderBlock;ta.style.blockSize=`${Math.min(contentBlockSize,maxBlockSize)}px`,ta.style.overflowY=contentBlockSize>maxBlockSize?"auto":"hidden"}get effectiveDebounceMs(){return finiteDuration(this.debounce??0,0)}isDebounced(){return this.effectiveDebounceMs>0}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"textarea-error":"",hasHint?"textarea-hint":""].filter(Boolean).join(" "),cssResize=this.resize==="auto"?"none":sanitizeCssResize(this.resize,"vertical");return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{styles}from"./textarea.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{sanitizeCssResize}from"../../../internal/safe-css.js";import{finiteCount,finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_textareaCharacterCount,LYRA_DEFAULT_textareaCharactersRemaining,LYRA_DEFAULT_textareaLabel,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const COUNT_ANNOUNCE_DELAY_MS=1e3;class LyraTextareaBase extends LyraElement{}class LyraTextarea extends FormAssociated(LyraTextareaBase){static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,textareaCharacterCount:LYRA_DEFAULT_textareaCharacterCount,textareaCharactersRemaining:LYRA_DEFAULT_textareaCharactersRemaining,textareaLabel:LYRA_DEFAULT_textareaLabel,valueInvalid:LYRA_DEFAULT_valueInvalid}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","minlength","maxlength")]}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){const normalized=next??"";super.value=normalized,this.settlingValueFromInput||this.settledDebounce.cancelIfChanged(normalized)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}constructor(){super(),this.rows=4,this.resize="vertical",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.withCount=!1,this.placeholder="",this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.spellcheck=!0,this.autofocus=!1,this.title="",this.autocapitalize="",this.autocorrectValue=!0,this.wrap="soft",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.touched=!1,this.announcedCountText="",this.slotPresence=new SlotPresenceController(this),this.settlingValueFromInput=!1,this.settledDebounce=new DebounceController(0,value=>{this.emit("lr-input-settled",{value})}),this.onInput=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settlingValueFromInput=!0,this.value=this.textareaEl.value,this.settlingValueFromInput=!1,this.resize==="auto"&&this.fitToContent(),this.scheduleCountAnnouncement(),relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}),this.isDebounced()?(this.settledDebounce.delayMs=this.effectiveDebounceMs,this.settledDebounce.push(this.value)):this.settledDebounce.cancel())},this.onChange=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settledDebounce.flush(),this.value=this.textareaEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.settledDebounce.flush(),relayNativeEvent(this,event)},this.onKeyDown=event=>{if(this.liveDisabled){event.stopPropagation();return}event.key==="Enter"&&this.settledDebounce.flush()},this.addEventListener("invalid",()=>{this.touched=!0})}get input(){return this.textareaEl??null}get selectionStart(){return this.textareaEl?.selectionStart??null}set selectionStart(value){this.textareaEl&&(this.textareaEl.selectionStart=value??0)}get selectionEnd(){return this.textareaEl?.selectionEnd??null}set selectionEnd(value){this.textareaEl&&(this.textareaEl.selectionEnd=value??0)}get selectionDirection(){return this.textareaEl?.selectionDirection}set selectionDirection(value){this.textareaEl&&(this.textareaEl.selectionDirection=value??"none")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.textareaEl?.click()}focus(options){this.liveDisabled||this.textareaEl?.focus(options)}blur(){this.textareaEl?.blur()}select(){this.textareaEl?.select()}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.textareaEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}scrollPosition(position){const ta=this.textareaEl;if(ta){if(position){position.top!==void 0&&(ta.scrollTop=finiteNumber(position.top,ta.scrollTop)),position.left!==void 0&&(ta.scrollLeft=finiteNumber(position.left,ta.scrollLeft));return}return{top:ta.scrollTop,left:ta.scrollLeft}}}setRangeText(replacement,start,end,selectMode="preserve"){const ta=this.textareaEl;ta&&(start===void 0||end===void 0?ta.setRangeText(replacement):ta.setRangeText(replacement,start,end,selectMode),this.value=ta.value,this.fitToContent())}connectedCallback(){super.connectedCallback(),this.countAnnouncementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.resize==="auto"&&this.hasUpdated&&(this.armResizeObserver(),this.fitToContent()),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.settledDebounce.cancel(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf!==void 0&&this.resizeRafOwner?.cancelAnimationFrame(this.resizeRaf),this.resizeRaf=void 0,this.resizeRafOwner=void 0,this.countAnnounceTimer!==void 0&&this.countAnnounceTimerOwner?.clearTimeout(this.countAnnounceTimer),this.countAnnounceTimer=void 0,this.countAnnounceTimerOwner=void 0,this.countAnnouncementSink?.release(),this.countAnnouncementSink=void 0,this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}syncExternalDescription(){const target=this.textareaEl??null;if(!target){this.releaseExternalDescription();return}if(!this.externalDescriptionLease){this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby");return}this.externalDescriptionLease.update(target)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}effectiveLengthLimit(declared){if(!(declared===void 0||!Number.isFinite(declared)||declared<0))return finiteCount(Math.trunc(declared),0)}countMaxlength(){return this.effectiveLengthLimit(this.maxlength)}countText(){const format=getNumberFormat(this.effectiveLocale),max=this.countMaxlength();if(max!==void 0){const remaining=Math.max(0,max-this.value.length);return this.localize("textareaCharactersRemaining",void 0,{count:format.format(remaining),pluralCount:remaining})}const length=this.value.length;return this.localize("textareaCharacterCount",void 0,{count:format.format(length),pluralCount:length})}scheduleCountAnnouncement(){if(this.countAnnounceTimer!==void 0&&this.countAnnounceTimerOwner?.clearTimeout(this.countAnnounceTimer),this.countAnnounceTimer=void 0,this.countAnnounceTimerOwner=void 0,!this.withCount)return;const view=this.ownerDocument.defaultView;view&&(this.countAnnounceTimerOwner=view,this.countAnnounceTimer=view.setTimeout(()=>{if(this.countAnnounceTimer=void 0,this.countAnnounceTimerOwner=void 0,!this.isConnected||this.ownerDocument.defaultView!==view||!this.withCount||!isAccessibilityVisible(this))return;const text=this.countText();this.announcedCountText=text,this.countAnnouncementSink?.announce(text)},COUNT_ANNOUNCE_DELAY_MS))}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}const native=this.textareaEl;native&&native.value!==this.value&&(native.value=this.value);const effectiveMinlength=this.effectiveLengthLimit(this.minlength),effectiveMaxlength=this.effectiveLengthLimit(this.maxlength),own=lengthViolations(this.value,effectiveMinlength,effectiveMaxlength),tooShort=!!native?.validity.tooShort||own.tooShort,tooLong=!!native?.validity.tooLong||own.tooLong;if(!tooShort&&!tooLong){this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({tooShort,tooLong},native?.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed),changed.has("value")&&(this.value===""?this.internals.states.add("blank"):this.internals.states.delete("blank")),this.syncExternalDescription(),(changed.has("minlength")||changed.has("maxlength")||changed.has("readonly"))&&this.updateValidity(),changed.has("resize")&&(this.resize==="auto"?this.armResizeObserver():changed.get("resize")==="auto"&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf!==void 0&&this.resizeRafOwner?.cancelAnimationFrame(this.resizeRaf),this.resizeRaf=void 0,this.resizeRafOwner=void 0,this.textareaEl&&(this.textareaEl.style.blockSize="",this.textareaEl.style.overflowY=""))),this.resize==="auto"&&(this.armResizeObserver(),(changed.has("value")||changed.has("rows")||changed.has("resize"))&&this.fitToContent())}formResetCallback(){super.formResetCallback(),this.touched=!1}armResizeObserver(){const textarea=this.textareaEl;if(this.resizeObserver||!textarea)return;const view=this.ownerDocument.defaultView,ResizeObserverCtor=view?.ResizeObserver;!view||!ResizeObserverCtor||(this.lastObservedWidth=textarea.getBoundingClientRect().width,this.resizeObserver=new ResizeObserverCtor(entries=>{if(!this.isConnected||this.ownerDocument.defaultView!==view)return;const width=entries[0]?.contentRect.width;width===void 0||this.lastObservedWidth!==void 0&&Math.abs(width-this.lastObservedWidth)<.5||(this.lastObservedWidth=width,this.resizeRaf!==void 0&&this.resizeRafOwner?.cancelAnimationFrame(this.resizeRaf),this.resizeRafOwner=view,this.resizeRaf=view.requestAnimationFrame(()=>{this.resizeRaf=void 0,this.resizeRafOwner=void 0,!(!this.isConnected||this.ownerDocument.defaultView!==view)&&this.fitToContent()}))}),this.resizeObserver.observe(textarea))}fitToContent(){const ta=this.textareaEl;if(!ta||this.resize!=="auto")return;ta.style.blockSize="auto";const computed=ta.ownerDocument.defaultView?.getComputedStyle(ta);if(!computed)return;const borderBlock=parseFloat(computed.borderBlockStartWidth)+parseFloat(computed.borderBlockEndWidth),parsedMax=parseFloat(computed.maxBlockSize),maxBlockSize=Number.isFinite(parsedMax)?parsedMax:Number.POSITIVE_INFINITY,contentBlockSize=ta.scrollHeight+borderBlock;ta.style.blockSize=`${Math.min(contentBlockSize,maxBlockSize)}px`,ta.style.overflowY=contentBlockSize>maxBlockSize?"auto":"hidden"}get effectiveDebounceMs(){return finiteDuration(this.debounce??0,0)}isDebounced(){return this.effectiveDebounceMs>0}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"textarea-error":"",hasHint?"textarea-hint":""].filter(Boolean).join(" "),cssResize=this.resize==="auto"?"none":sanitizeCssResize(this.resize,"vertical");return html`
       <div part="form-control">
         <label part="form-control-label" for="textarea" ?hidden=${!hasLabel}>
           <span part="label">${this.label}<slot name="label"></slot></span>

package/dist/components/forms/time-range/time-range.class.d.ts

@@ -86,8 +86,8 @@ readonly id?:string;}export interface LyraTimeRangeEventMap{input:Event;change:E
 *   `setCustomValidity()` error is set.
 * @cssstate invalid - Matches while a `setCustomValidity()` error is set.
 * @cssstate user-valid - `valid`, but only after the user has interacted: moving a handle, picking
-*   a preset, blurring the control, or a `reportValidity()` call (which is what a submit attempt
-*   runs).
+*   a preset, blurring the control, `reportValidity()`, or a submission attempt. Not after a
+*   silent `checkValidity()` alone.
 * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this
 *   rather than `invalid`: a range the consumer rejected before the user touched anything is
 *   genuinely invalid, but colouring it red on first paint is hostile. A `form.reset()` puts the
@@ -174,10 +174,12 @@ private dragWindow?;private keyboardChanged;private internals;private validityCo
 /** Reflected consumer validity message; only `setCustomValidity('')` clears it. */
 customError:string|null;
 /** Whether the user has acted on this control yet, which is what gates the `user-valid`/
-*  `user-invalid` custom states: a committed handle move, a preset pick, a blur, or a
-*  `reportValidity()` call. A range a consumer has already rejected is genuinely invalid, but
-*  styling it as an error before the user has done anything is hostile, which is the entire
-*  reason the `user-*` pair exists. Not a reactive property: nothing in `render()` reads it. */
+*  `user-invalid` custom states: a committed handle move, a preset pick, a blur, or
+*  interactive validation (`reportValidity()` or a submission attempt, via
+*  `installInteractionOnInvalid()`). A silent `checkValidity()` alone never counts. A range a
+*  consumer has already rejected is genuinely invalid, but styling it as an error before the
+*  user has done anything is hostile, which is the entire reason the `user-*` pair exists. Not a
+*  reactive property: nothing in `render()` reads it. */
 private hasInteracted;constructor();private markInteracted;
 /** Includes the UA's synchronous fieldset cascade before its callback updates cached state. */
 private get liveDisabled();private emitInput;private emitChange;private onHandleFocus;private onHandleBlur;
@@ -194,7 +196,10 @@ private get liveDisabled();private emitInput;private emitChange;private onHandle
 *  publishing, exactly as the platform stops matching. */
 private reflectValidityStates;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
 /** Whether the control currently satisfies its constraints — the silent query, so it
-*  deliberately does not count as interaction for the `user-*` custom states. */
+*  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;

package/dist/components/forms/time-range/time-range.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{isRtl}from"../../../internal/rtl.js";import{decimalPlaces,finiteAdd,finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./time-range.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10;function createInternalsSafely(host){if(typeof host.attachInternals!="function")return createNoopInternals();try{return host.attachInternals()}catch{return createNoopInternals()}}function createNoopInternals(){return{form:null,labels:[],validity:{},validationMessage:"",willValidate:!1,setValidity(){},checkValidity(){return!0},reportValidity(){return!0},states:new Set}}class LyraTimeRange extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0}}}get presets(){return this._presets}set presets(next){const previous=this._presets;if(next===previous)return;const snapshots=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,256);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object"||typeof raw.label!="string"||typeof raw.start!="number"||typeof raw.end!="number")continue;snapshots.push(Object.freeze(typeof raw.id=="string"?{label:raw.label,start:raw.start,end:raw.end,id:raw.id}:{label:raw.label,start:raw.start,end:raw.end}))}catch{}this._appliedPreset=void 0,this._presets=Object.freeze(snapshots),this.requestUpdate("presets",previous)}get appliedPreset(){return this._appliedPreset}constructor(){super(),this.min=0,this.max=100,this.start=0,this.end=100,this.step=1,this.size="m",this._presets=Object.freeze([]),this._disabled=!1,this._fieldsetDisabled=!1,this.drags=new Map,this.keyboardChanged=!1,this.hasInteracted=!1,this.markInteracted=()=>{this.liveDisabled||this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onHandleFocus=event=>{relayNativeEvent(this,event)},this.onHandleBlur=event=>{this.finishKeyboardGesture(),relayNativeEvent(this,event)},this.onKeyDown=(handle,e)=>{if(this.liveDisabled)return;const current=handle==="start"?finiteRange(this.start,this.domain().lo):finiteRange(this.end,this.domain().hi),step=finiteRange(this.step,0,0),move=(direction,multiplier=1)=>{const delta=finiteRange(step*multiplier,Number.MAX_VALUE,0,Number.MAX_VALUE);delta!==0&&(this.keyboardChanged=this.setValue(handle,finiteAdd(current,direction*delta,current),!1)||this.keyboardChanged)},rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";e.key===forwardKey||e.key==="ArrowUp"?(e.preventDefault(),move(1)):e.key===backwardKey||e.key==="ArrowDown"?(e.preventDefault(),move(-1)):e.key==="PageUp"?(e.preventDefault(),move(1,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?(e.preventDefault(),move(-1,PAGE_STEP_MULTIPLIER)):e.key==="Home"?(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).min,!1)||this.keyboardChanged):e.key==="End"&&(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).max,!1)||this.keyboardChanged)},this.onKeyUp=e=>{isSliderKey(e.key)&&this.finishKeyboardGesture()},this.onPointerDown=(handle,e)=>{this.beginDrag(handle,e,e.target)},this.onBasePointerDown=e=>{if(this.liveDisabled)return;const handles=Array.from(this.renderRoot.querySelectorAll('[part="handle-start"],[part="handle-end"]'));if(handles.length===0||handles.includes(e.target))return;const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;const rect=base.getBoundingClientRect();if(rect.width===0)return;const target=this.valueAtPointer(e.clientX,rect,isRtl(this)),handle=this.nearestHandle(target),handleEl=this.renderRoot.querySelector(`[part="handle-${handle}"]`);if(!handleEl)return;const drag=this.beginDrag(handle,e,handleEl);drag&&(this.setValue(handle,target,!1)&&(drag.changed=!0),handleEl.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(this.liveDisabled){this.endDrag(e.pointerId,!1);return}const value=this.valueAtPointer(e.clientX,drag.rect,drag.rtl);drag.changed=this.setValue(drag.handle,value,!1)||drag.changed},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&!this.liveDisabled)},this.internals=createInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.addEventListener("focusout",this.markInteracted),this.reflectValidityStates()}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}emitInput(){dispatchNativeEvent(this,"input"),this.emit("lr-input",{start:this.start,end:this.end})}emitChange(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{start:this.start,end:this.end})}reflectValidityStates(){syncValidityStates(this.internals,{required:!1,hasInteracted:this.hasInteracted,barred:isBarredFromValidation(this,this.internals)})}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="handle-start"]')??null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this._disabled&&this.abortActiveGestures(),this.toggleAttribute("disabled",this._disabled),this.reflectValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.abortActiveGestures(),this.reflectValidityStates(),this.requestUpdate()}declaredHandleValue(handle,fallback){const declared=this.getAttribute(handle);return declared===null?fallback:finiteNumber(Number(declared),fallback)}formResetCallback(){const hadAppliedPreset=this._appliedPreset!==void 0;this._appliedPreset=void 0;const{lo,hi}=this.domain(),declaredStart=this.declaredHandleValue("start",lo),declaredEnd=this.declaredHandleValue("end",hi),start=finiteRange(declaredStart,lo,lo,hi),end=finiteRange(declaredEnd,hi,lo,hi);this.start=Math.min(start,end),this.end=Math.max(start,end),this.abortActiveGestures(),this.hasInteracted=!1,this.reflectValidityStates(),hadAppliedPreset&&this.requestUpdate()}disconnectedCallback(){super.disconnectedCallback(),this.drags.clear(),this.keyboardChanged=!1,this.teardownDragWindow()}adoptedCallback(){super.adoptedCallback(),this.drags.clear(),this.keyboardChanged=!1,this.teardownDragWindow()}click(){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.click()}focus(options){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part^="handle-"]')?active.blur():this.renderRoot?.querySelector('[part="handle-start"]')?.blur()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}reachableBounds(handle){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo,lo,hi),end=finiteRange(this.end,hi,lo,hi);return handle==="start"?{min:lo,max:end}:{min:start,max:hi}}clamp(handle,value){const{lo,hi}=this.domain();let stepped=finiteNumber(value,lo);const step=finiteRange(this.step,0,0);if(Number.isFinite(step)&&step>0){const stepsFromLo=Math.round((stepped-lo)/step);if(Number.isFinite(stepsFromLo)){const candidate=lo+stepsFromLo*step,factor=10**Math.min(decimalPlaces(step),15);Number.isFinite(candidate)&&(stepped=Number.isFinite(candidate*factor)?Math.round(candidate*factor)/factor:candidate)}}const bounded=Math.min(hi,Math.max(lo,stepped));return handle==="start"?Math.min(bounded,finiteRange(this.end,hi,lo,hi)):Math.max(bounded,finiteRange(this.start,lo,lo,hi))}setValue(handle,value,commit){const clamped=this.clamp(handle,value),previous=handle==="start"?this.start:this.end;return clamped===previous?!1:(this._appliedPreset=void 0,handle==="start"?this.start=clamped:this.end=clamped,this.markInteracted(),this.emitInput(),commit&&this.emitChange(),!0)}applyPreset(preset){if(this.liveDisabled)return;const{start:nextStart,end:nextEnd}=this.normalizePreset(preset),previousPreset=this._appliedPreset;if(this._appliedPreset=preset,nextStart===this.start&&nextEnd===this.end){previousPreset!==preset&&this.requestUpdate();return}this.start=nextStart,this.end=nextEnd,this.markInteracted(),this.emitInput(),this.emitChange()}normalizePreset(preset){const{lo,hi}=this.domain(),start=finiteRange(preset.start,lo,lo,hi),end=finiteRange(preset.end,hi,lo,hi);return{start:Math.min(start,end),end:Math.max(start,end)}}reconcileAppliedPreset(){if(!this._appliedPreset)return;const normalized=this.normalizePreset(this._appliedPreset);(normalized.start!==this.start||normalized.end!==this.end)&&(this._appliedPreset=void 0)}finishKeyboardGesture(){this.keyboardChanged&&(this.keyboardChanged=!1,this.liveDisabled||this.emitChange())}beginDrag(handle,e,captureTarget){if(e.button!==0||this.liveDisabled)return;const base=this.renderRoot.querySelector('[part="base"]'),dragWindow=base?.ownerDocument.defaultView;if(!base||!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture?.(e.pointerId);const drag={handle,changed:!1,rect:base.getBoundingClientRect(),rtl:isRtl(this)};return this.drags.set(e.pointerId,drag),firstDrag&&(this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerUp),dragWindow.addEventListener("lostpointercapture",this.onPointerUp)),drag}valueAtPointer(clientX,rect,rtl){const raw=rect.width===0?0:(clientX-rect.left)/rect.width,ratio=Math.min(1,Math.max(0,rtl?1-raw:raw)),{lo,hi}=this.domain();return finiteInterpolate(lo,hi,ratio)}nearestHandle(target){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo),end=finiteRange(this.end,hi),toStart=Math.abs(target-start),toEnd=Math.abs(target-end);return toStart<toEnd?"start":toEnd<toStart?"end":target<start?"start":"end"}abortActiveGestures(){this.keyboardChanged=!1;for(const pointerId of[...this.drags.keys()])this.endDrag(pointerId,!1)}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(),this.drags.size===0&&this.teardownDragWindow())}teardownDragWindow(){const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerUp),dragWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}willUpdate(changed){if(super.willUpdate(changed),changed.has("start")||changed.has("end")||changed.has("min")||changed.has("max")){const{lo,hi}=this.domain(),start=Number.isFinite(this.start)?finiteRange(this.start,lo,lo,hi):this.start,end=Number.isFinite(this.end)?finiteRange(this.end,hi,lo,hi):this.end;if(changed.has("start")&&changed.has("end")&&Number.isFinite(start)&&Number.isFinite(end)){this.start=Math.min(start,end),this.end=Math.max(start,end),this.reconcileAppliedPreset();return}Number.isFinite(start)&&(this.start=start),Number.isFinite(end)&&(this.end=end)}(changed.has("start")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.start=Math.min(this.start,this.end)),(changed.has("end")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.end=Math.max(this.end,this.start)),this.reconcileAppliedPreset()}render(){const startPct=this.percentOf(this.start),endPct=this.percentOf(this.end),startBounds=this.reachableBounds("start"),endBounds=this.reachableBounds("end"),startValue=Number.isFinite(this.start)?finiteRange(this.start,startBounds.min,startBounds.min,startBounds.max):void 0,endValue=Number.isFinite(this.end)?finiteRange(this.end,endBounds.min,endBounds.min,endBounds.max):void 0,startValueText=startValue===void 0?void 0:this.valueFormatter?.(startValue,"start"),endValueText=endValue===void 0?void 0:this.valueFormatter?.(endValue,"end");return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{isRtl}from"../../../internal/rtl.js";import{decimalPlaces,finiteAdd,finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./time-range.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10;function createInternalsSafely(host){if(typeof host.attachInternals!="function")return createNoopInternals();try{return host.attachInternals()}catch{return createNoopInternals()}}function createNoopInternals(){return{form:null,labels:[],validity:{},validationMessage:"",willValidate:!1,setValidity(){},checkValidity(){return!0},reportValidity(){return!0},states:new Set}}class LyraTimeRange extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0}}}get presets(){return this._presets}set presets(next){const previous=this._presets;if(next===previous)return;const snapshots=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,256);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object"||typeof raw.label!="string"||typeof raw.start!="number"||typeof raw.end!="number")continue;snapshots.push(Object.freeze(typeof raw.id=="string"?{label:raw.label,start:raw.start,end:raw.end,id:raw.id}:{label:raw.label,start:raw.start,end:raw.end}))}catch{}this._appliedPreset=void 0,this._presets=Object.freeze(snapshots),this.requestUpdate("presets",previous)}get appliedPreset(){return this._appliedPreset}constructor(){super(),this.min=0,this.max=100,this.start=0,this.end=100,this.step=1,this.size="m",this._presets=Object.freeze([]),this._disabled=!1,this._fieldsetDisabled=!1,this.drags=new Map,this.keyboardChanged=!1,this.hasInteracted=!1,this.markInteracted=()=>{this.liveDisabled||this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onHandleFocus=event=>{relayNativeEvent(this,event)},this.onHandleBlur=event=>{this.finishKeyboardGesture(),relayNativeEvent(this,event)},this.onKeyDown=(handle,e)=>{if(this.liveDisabled)return;const current=handle==="start"?finiteRange(this.start,this.domain().lo):finiteRange(this.end,this.domain().hi),step=finiteRange(this.step,0,0),move=(direction,multiplier=1)=>{const delta=finiteRange(step*multiplier,Number.MAX_VALUE,0,Number.MAX_VALUE);delta!==0&&(this.keyboardChanged=this.setValue(handle,finiteAdd(current,direction*delta,current),!1)||this.keyboardChanged)},rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";e.key===forwardKey||e.key==="ArrowUp"?(e.preventDefault(),move(1)):e.key===backwardKey||e.key==="ArrowDown"?(e.preventDefault(),move(-1)):e.key==="PageUp"?(e.preventDefault(),move(1,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?(e.preventDefault(),move(-1,PAGE_STEP_MULTIPLIER)):e.key==="Home"?(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).min,!1)||this.keyboardChanged):e.key==="End"&&(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).max,!1)||this.keyboardChanged)},this.onKeyUp=e=>{isSliderKey(e.key)&&this.finishKeyboardGesture()},this.onPointerDown=(handle,e)=>{this.beginDrag(handle,e,e.target)},this.onBasePointerDown=e=>{if(this.liveDisabled)return;const handles=Array.from(this.renderRoot.querySelectorAll('[part="handle-start"],[part="handle-end"]'));if(handles.length===0||handles.includes(e.target))return;const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;const rect=base.getBoundingClientRect();if(rect.width===0)return;const target=this.valueAtPointer(e.clientX,rect,isRtl(this)),handle=this.nearestHandle(target),handleEl=this.renderRoot.querySelector(`[part="handle-${handle}"]`);if(!handleEl)return;const drag=this.beginDrag(handle,e,handleEl);drag&&(this.setValue(handle,target,!1)&&(drag.changed=!0),handleEl.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(this.liveDisabled){this.endDrag(e.pointerId,!1);return}const value=this.valueAtPointer(e.clientX,drag.rect,drag.rtl);drag.changed=this.setValue(drag.handle,value,!1)||drag.changed},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&!this.liveDisabled)},this.internals=createInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.addEventListener("focusout",this.markInteracted),installInteractionOnInvalid(this,this.markInteracted),this.reflectValidityStates()}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}emitInput(){dispatchNativeEvent(this,"input"),this.emit("lr-input",{start:this.start,end:this.end})}emitChange(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{start:this.start,end:this.end})}reflectValidityStates(){syncValidityStates(this.internals,{required:!1,hasInteracted:this.hasInteracted,barred:isBarredFromValidation(this,this.internals)})}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="handle-start"]')??null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this._disabled&&this.abortActiveGestures(),this.toggleAttribute("disabled",this._disabled),this.reflectValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.abortActiveGestures(),this.reflectValidityStates(),this.requestUpdate()}declaredHandleValue(handle,fallback){const declared=this.getAttribute(handle);return declared===null?fallback:finiteNumber(Number(declared),fallback)}formResetCallback(){const hadAppliedPreset=this._appliedPreset!==void 0;this._appliedPreset=void 0;const{lo,hi}=this.domain(),declaredStart=this.declaredHandleValue("start",lo),declaredEnd=this.declaredHandleValue("end",hi),start=finiteRange(declaredStart,lo,lo,hi),end=finiteRange(declaredEnd,hi,lo,hi);this.start=Math.min(start,end),this.end=Math.max(start,end),this.abortActiveGestures(),this.hasInteracted=!1,this.reflectValidityStates(),hadAppliedPreset&&this.requestUpdate()}disconnectedCallback(){super.disconnectedCallback(),this.drags.clear(),this.keyboardChanged=!1,this.teardownDragWindow()}adoptedCallback(){super.adoptedCallback(),this.drags.clear(),this.keyboardChanged=!1,this.teardownDragWindow()}click(){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.click()}focus(options){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part^="handle-"]')?active.blur():this.renderRoot?.querySelector('[part="handle-start"]')?.blur()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}reachableBounds(handle){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo,lo,hi),end=finiteRange(this.end,hi,lo,hi);return handle==="start"?{min:lo,max:end}:{min:start,max:hi}}clamp(handle,value){const{lo,hi}=this.domain();let stepped=finiteNumber(value,lo);const step=finiteRange(this.step,0,0);if(Number.isFinite(step)&&step>0){const stepsFromLo=Math.round((stepped-lo)/step);if(Number.isFinite(stepsFromLo)){const candidate=lo+stepsFromLo*step,factor=10**Math.min(decimalPlaces(step),15);Number.isFinite(candidate)&&(stepped=Number.isFinite(candidate*factor)?Math.round(candidate*factor)/factor:candidate)}}const bounded=Math.min(hi,Math.max(lo,stepped));return handle==="start"?Math.min(bounded,finiteRange(this.end,hi,lo,hi)):Math.max(bounded,finiteRange(this.start,lo,lo,hi))}setValue(handle,value,commit){const clamped=this.clamp(handle,value),previous=handle==="start"?this.start:this.end;return clamped===previous?!1:(this._appliedPreset=void 0,handle==="start"?this.start=clamped:this.end=clamped,this.markInteracted(),this.emitInput(),commit&&this.emitChange(),!0)}applyPreset(preset){if(this.liveDisabled)return;const{start:nextStart,end:nextEnd}=this.normalizePreset(preset),previousPreset=this._appliedPreset;if(this._appliedPreset=preset,nextStart===this.start&&nextEnd===this.end){previousPreset!==preset&&this.requestUpdate();return}this.start=nextStart,this.end=nextEnd,this.markInteracted(),this.emitInput(),this.emitChange()}normalizePreset(preset){const{lo,hi}=this.domain(),start=finiteRange(preset.start,lo,lo,hi),end=finiteRange(preset.end,hi,lo,hi);return{start:Math.min(start,end),end:Math.max(start,end)}}reconcileAppliedPreset(){if(!this._appliedPreset)return;const normalized=this.normalizePreset(this._appliedPreset);(normalized.start!==this.start||normalized.end!==this.end)&&(this._appliedPreset=void 0)}finishKeyboardGesture(){this.keyboardChanged&&(this.keyboardChanged=!1,this.liveDisabled||this.emitChange())}beginDrag(handle,e,captureTarget){if(e.button!==0||this.liveDisabled)return;const base=this.renderRoot.querySelector('[part="base"]'),dragWindow=base?.ownerDocument.defaultView;if(!base||!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture?.(e.pointerId);const drag={handle,changed:!1,rect:base.getBoundingClientRect(),rtl:isRtl(this)};return this.drags.set(e.pointerId,drag),firstDrag&&(this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerUp),dragWindow.addEventListener("lostpointercapture",this.onPointerUp)),drag}valueAtPointer(clientX,rect,rtl){const raw=rect.width===0?0:(clientX-rect.left)/rect.width,ratio=Math.min(1,Math.max(0,rtl?1-raw:raw)),{lo,hi}=this.domain();return finiteInterpolate(lo,hi,ratio)}nearestHandle(target){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo),end=finiteRange(this.end,hi),toStart=Math.abs(target-start),toEnd=Math.abs(target-end);return toStart<toEnd?"start":toEnd<toStart?"end":target<start?"start":"end"}abortActiveGestures(){this.keyboardChanged=!1;for(const pointerId of[...this.drags.keys()])this.endDrag(pointerId,!1)}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(),this.drags.size===0&&this.teardownDragWindow())}teardownDragWindow(){const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerUp),dragWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}willUpdate(changed){if(super.willUpdate(changed),changed.has("start")||changed.has("end")||changed.has("min")||changed.has("max")){const{lo,hi}=this.domain(),start=Number.isFinite(this.start)?finiteRange(this.start,lo,lo,hi):this.start,end=Number.isFinite(this.end)?finiteRange(this.end,hi,lo,hi):this.end;if(changed.has("start")&&changed.has("end")&&Number.isFinite(start)&&Number.isFinite(end)){this.start=Math.min(start,end),this.end=Math.max(start,end),this.reconcileAppliedPreset();return}Number.isFinite(start)&&(this.start=start),Number.isFinite(end)&&(this.end=end)}(changed.has("start")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.start=Math.min(this.start,this.end)),(changed.has("end")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.end=Math.max(this.end,this.start)),this.reconcileAppliedPreset()}render(){const startPct=this.percentOf(this.start),endPct=this.percentOf(this.end),startBounds=this.reachableBounds("start"),endBounds=this.reachableBounds("end"),startValue=Number.isFinite(this.start)?finiteRange(this.start,startBounds.min,startBounds.min,startBounds.max):void 0,endValue=Number.isFinite(this.end)?finiteRange(this.end,endBounds.min,endBounds.min,endBounds.max):void 0,startValueText=startValue===void 0?void 0:this.valueFormatter?.(startValue,"start"),endValueText=endValue===void 0?void 0:this.valueFormatter?.(endValue,"end");return html`
       ${this.presets.length>0?html`<div part="presets">
             ${this.presets.map(preset=>{const active=preset===this._appliedPreset;return html`<button
                 part="preset-button"

package/dist/components/forms/time-range/time-range.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-time-range-handle-size:calc(var(--lr-size-14px) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-hit-size:max(var(--lr-size-24px), calc(var(--lr-size-28px) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale))));--_lr-time-range-track-size:calc(var(--lr-size-4px) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-base-size:calc(var(--lr-size-1-5rem) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-preset-gap:var(--lr-space-xs);--_lr-time-range-preset-radius:var(--lr-radius);--_lr-time-range-preset-padding:calc(var(--lr-space-xs) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale))) calc(var(--lr-space-s) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-preset-font-size:calc(var(--lr-font-size-sm) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-size-scale:1;inline-size:100%;display:block}:host([size="2xs"]){--_lr-time-range-size-scale:.5}:host([size=xs]){--_lr-time-range-size-scale:.6}:host([size=s]),:host([size=small]){--_lr-time-range-size-scale:.75}:host([size=l]),:host([size=large]){--_lr-time-range-size-scale:1.2}:host([size=xl]){--_lr-time-range-size-scale:1.4}[part=presets]{gap:var(--lr-time-range-preset-gap,var(--_lr-time-range-preset-gap));flex-wrap:wrap;margin-block-end:var(--lr-space-s);display:flex}[part=preset-button]{min-block-size:var(--lr-size-24px);min-inline-size:var(--lr-size-24px);padding:var(--lr-time-range-preset-padding,var(--_lr-time-range-preset-padding));border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-time-range-preset-radius,var(--_lr-time-range-preset-radius));background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;font-size:var(--lr-time-range-preset-font-size,var(--_lr-time-range-preset-font-size));cursor:pointer;transition:var(--lr-transition-fast);align-items:center;display:inline-flex}:where([part=preset-button]):hover:where(:not(:disabled)){border-color:var(--lr-time-range-preset-hover-border-color,var(--lr-color-brand))}:where([part=preset-button]):active:where(:not(:disabled)){border-color:var(--lr-time-range-preset-pressed-border-color,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)));background:var(--lr-time-range-preset-pressed-bg,color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=preset-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=preset-button][data-active]{background:var(--lr-time-range-preset-active-bg,var(--lr-color-brand));border-color:var(--lr-time-range-preset-active-border-color,var(--lr-color-brand));color:var(--lr-time-range-preset-active-color,var(--lr-color-on-brand))}[part=preset-button][data-active]:active:where(:not(:disabled)){background:color-mix(in oklab, var(--lr-time-range-preset-active-bg,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active));border-color:color-mix(in oklab, var(--lr-time-range-preset-active-border-color,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=preset-button]:disabled{cursor:not-allowed}[part=base]{inline-size:100%;block-size:var(--lr-time-range-base-size,var(--_lr-time-range-base-size));align-items:center;display:flex;position:relative}[part=track]{block-size:var(--lr-time-range-track-size,var(--_lr-time-range-track-size));border-radius:var(--lr-size-2px);background:var(--lr-color-border);position:absolute;inset-inline:0}[part=range]{block-size:var(--lr-time-range-track-size,var(--_lr-time-range-track-size));border-radius:var(--lr-size-2px);background:var(--lr-color-brand);position:absolute}[part^=handle]{inline-size:var(--lr-time-range-handle-size,var(--_lr-time-range-handle-size));block-size:var(--lr-time-range-handle-size,var(--_lr-time-range-handle-size));background:var(--lr-time-range-handle-bg,var(--lr-color-brand));border:var(--lr-border-width-medium) solid var(--lr-time-range-handle-border-color,var(--lr-color-surface));box-shadow:var(--lr-shadow-s);cursor:grab;touch-action:none;border-radius:50%;position:absolute;transform:translate(-50%)}[part^=handle][data-at-domain-start]{transform:translate(0)}[part^=handle][data-at-domain-end]{transform:translate(-100%)}:host(:dir(rtl)) [part^=handle]{transform:translate(50%)}:host(:dir(rtl)) [part^=handle][data-at-domain-start]{transform:translate(0)}:host(:dir(rtl)) [part^=handle][data-at-domain-end]{transform:translate(100%)}[part^=handle]:before{content:"";inline-size:var(--lr-time-range-hit-size,var(--_lr-time-range-hit-size));block-size:var(--lr-time-range-hit-size,var(--_lr-time-range-hit-size));border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}[part^=handle][data-at-domain-start]:before{inset-inline-start:0;transform:translateY(-50%)}[part^=handle][data-at-domain-end]:before{inset-inline-start:100%;transform:translate(-100%,-50%)}:host(:dir(rtl)) [part^=handle]:not([data-at-domain-start]):not([data-at-domain-end]):before{transform:translate(50%,-50%)}:host(:dir(rtl)) [part^=handle][data-at-domain-start]:before{transform:translateY(-50%)}:host(:dir(rtl)) [part^=handle][data-at-domain-end]:before{transform:translate(100%,-50%)}[part^=handle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:not(:disabled)) [part^=handle]:hover{background:var(--lr-time-range-handle-hover-bg,color-mix(in oklab, var(--lr-time-range-handle-bg,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}:host(:not(:disabled)) [part^=handle]:active{background:var(--lr-time-range-handle-pressed-bg,color-mix(in oklab, var(--lr-time-range-handle-bg,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active)));cursor:grabbing}:host(:disabled){opacity:var(--lr-opacity-disabled);cursor:not-allowed}:host(:disabled) [part^=handle]{cursor:not-allowed}@media (prefers-reduced-motion:reduce){[part=preset-button],[part^=handle],[part=range]{transition:none!important}}[part=presets]{min-inline-size:0;max-inline-size:100%}[part=preset-button]{overflow-wrap:anywhere;max-inline-size:100%}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-time-range-handle-size:calc(var(--lr-size-14px) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-hit-size:max(var(--lr-size-24px), calc(var(--lr-size-28px) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale))));--_lr-time-range-track-size:calc(var(--lr-size-4px) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-base-size:calc(var(--lr-size-1-5rem) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-preset-gap:var(--lr-space-xs);--_lr-time-range-preset-radius:var(--lr-radius);--_lr-time-range-preset-padding:calc(var(--lr-space-xs) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale))) calc(var(--lr-space-s) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-preset-font-size:calc(var(--lr-font-size-sm) * var(--lr-time-range-size-scale,var(--_lr-time-range-size-scale)));--_lr-time-range-size-scale:1;inline-size:100%;display:block}:host([size="2xs"]){--_lr-time-range-size-scale:.5}:host([size=xs]){--_lr-time-range-size-scale:.6}:host([size=s]),:host([size=small]){--_lr-time-range-size-scale:.75}:host([size=l]),:host([size=large]){--_lr-time-range-size-scale:1.2}:host([size=xl]){--_lr-time-range-size-scale:1.4}[part=presets]{gap:var(--lr-time-range-preset-gap,var(--_lr-time-range-preset-gap));flex-wrap:wrap;margin-block-end:var(--lr-space-s);display:flex}[part=preset-button]{min-block-size:var(--lr-size-24px);min-inline-size:var(--lr-size-24px);padding:var(--lr-time-range-preset-padding,var(--_lr-time-range-preset-padding));border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-time-range-preset-radius,var(--_lr-time-range-preset-radius));background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;font-size:var(--lr-time-range-preset-font-size,var(--_lr-time-range-preset-font-size));cursor:pointer;transition:var(--lr-transition-interactive);align-items:center;display:inline-flex}:where([part=preset-button]):hover:where(:not(:disabled)){border-color:var(--lr-time-range-preset-hover-border-color,var(--lr-color-brand))}:where([part=preset-button]):active:where(:not(:disabled)){border-color:var(--lr-time-range-preset-pressed-border-color,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)));background:var(--lr-time-range-preset-pressed-bg,color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=preset-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=preset-button][data-active]{background:var(--lr-time-range-preset-active-bg,var(--lr-color-brand));border-color:var(--lr-time-range-preset-active-border-color,var(--lr-color-brand));color:var(--lr-time-range-preset-active-color,var(--lr-color-on-brand))}[part=preset-button][data-active]:active:where(:not(:disabled)){background:color-mix(in oklab, var(--lr-time-range-preset-active-bg,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active));border-color:color-mix(in oklab, var(--lr-time-range-preset-active-border-color,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=preset-button]:disabled{cursor:not-allowed}[part=base]{inline-size:100%;block-size:var(--lr-time-range-base-size,var(--_lr-time-range-base-size));align-items:center;display:flex;position:relative}[part=track]{block-size:var(--lr-time-range-track-size,var(--_lr-time-range-track-size));border-radius:var(--lr-size-2px);background:var(--lr-color-border);position:absolute;inset-inline:0}[part=range]{block-size:var(--lr-time-range-track-size,var(--_lr-time-range-track-size));border-radius:var(--lr-size-2px);background:var(--lr-color-brand);position:absolute}[part^=handle]{inline-size:var(--lr-time-range-handle-size,var(--_lr-time-range-handle-size));block-size:var(--lr-time-range-handle-size,var(--_lr-time-range-handle-size));background:var(--lr-time-range-handle-bg,var(--lr-color-brand));border:var(--lr-border-width-medium) solid var(--lr-time-range-handle-border-color,var(--lr-color-surface));box-shadow:var(--lr-shadow-s);cursor:grab;touch-action:none;border-radius:50%;position:absolute;transform:translate(-50%)}[part^=handle][data-at-domain-start]{transform:translate(0)}[part^=handle][data-at-domain-end]{transform:translate(-100%)}:host(:dir(rtl)) [part^=handle]{transform:translate(50%)}:host(:dir(rtl)) [part^=handle][data-at-domain-start]{transform:translate(0)}:host(:dir(rtl)) [part^=handle][data-at-domain-end]{transform:translate(100%)}[part^=handle]:before{content:"";inline-size:var(--lr-time-range-hit-size,var(--_lr-time-range-hit-size));block-size:var(--lr-time-range-hit-size,var(--_lr-time-range-hit-size));border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}[part^=handle][data-at-domain-start]:before{inset-inline-start:0;transform:translateY(-50%)}[part^=handle][data-at-domain-end]:before{inset-inline-start:100%;transform:translate(-100%,-50%)}:host(:dir(rtl)) [part^=handle]:not([data-at-domain-start]):not([data-at-domain-end]):before{transform:translate(50%,-50%)}:host(:dir(rtl)) [part^=handle][data-at-domain-start]:before{transform:translateY(-50%)}:host(:dir(rtl)) [part^=handle][data-at-domain-end]:before{transform:translate(100%,-50%)}[part^=handle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:not(:disabled)) [part^=handle]:hover{background:var(--lr-time-range-handle-hover-bg,color-mix(in oklab, var(--lr-time-range-handle-bg,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}:host(:not(:disabled)) [part^=handle]:active{background:var(--lr-time-range-handle-pressed-bg,color-mix(in oklab, var(--lr-time-range-handle-bg,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active)));cursor:grabbing}:host(:disabled){opacity:var(--lr-opacity-disabled);cursor:not-allowed}:host(:disabled) [part^=handle]{cursor:not-allowed}@media (prefers-reduced-motion:reduce){[part=preset-button],[part^=handle],[part=range]{transition:none!important}}[part=presets]{min-inline-size:0;max-inline-size:100%}[part=preset-button]{overflow-wrap:anywhere;max-inline-size:100%}`;export{styles};

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

@@ -114,8 +114,9 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @cssstate valid - Matches while the control satisfies its constraints.
 * @cssstate invalid - Matches while it does not — including a pristine required control with no
 *   tokens yet, exactly like native `:invalid`.
-* @cssstate user-valid - `valid`, but only after the user has interacted (blurred the text input,
-*   or been through a `reportValidity()`/submit attempt).
+* @cssstate user-valid - `valid`, but only after the user has interacted: blurred the text
+*   input, `reportValidity()`, or a submission attempt. Not after a silent `checkValidity()`
+*   alone.
 * @cssstate user-invalid - `invalid`, but only after that same interaction — a required control
 *   nobody has touched yet is invalid without being styled as an error.
 * @status stable
@@ -177,10 +178,11 @@ get effectiveDisabled():boolean;
 * `effectiveDisabled`) so a consumer's explicit `disabled` survives the
 * fieldset re-enabling instead of being permanently overwritten.
 */
-formDisabledCallback(disabled:boolean):void;checkValidity():boolean;
+formDisabledCallback(disabled:boolean):void;private markInteracted;checkValidity():boolean;
 /** Reporting is what a submit attempt does, and a failed submit is precisely when native
 *  `:user-invalid` starts matching — so it counts as interaction, exactly as it does in the
-*  `FormAssociated` mixin. */
+*  `FormAssociated` mixin. (A submission attempt itself never calls this method -- it drives
+*  `ElementInternals` directly -- which is what `installInteractionOnInvalid()` above covers.) */
 reportValidity():boolean;
 /**
 * Sets or clears a consumer-supplied validation error — the standard channel for a rejection no

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./token-input.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";const delimiterConverter={fromAttribute:value=>value===null?",":value===""||value==="none"?null:value};function normalizeStringArray(value){if(!Array.isArray(value))return Object.freeze([]);try{const normalized=[];for(const entry of value)typeof entry=="string"&&normalized.push(entry);return Object.freeze(normalized)}catch{return Object.freeze([])}}const stringArrayConverter={fromAttribute:value=>{if(value===null)return null;try{const parsed=JSON.parse(value);return normalizeStringArray(parsed)}catch{return[]}},toAttribute:value=>value==null?null:JSON.stringify(value)};class LyraTokenInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,removeWithContext:LYRA_DEFAULT_removeWithContext,tokenInputEditWithContext:LYRA_DEFAULT_tokenInputEditWithContext,tokenInputRequired:LYRA_DEFAULT_tokenInputRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,converter:stringArrayConverter,noAccessor:!0}}}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get editable(){return this._editable}set editable(next){const old=this._editable;this._editable=!!next,this._editable||this.discardTransientState(!1),this.requestUpdate("editable",old)}syncExternalDescription(){const target=this.isConnected?this.inputEl:void 0;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const normalized=normalizeStringArray(next);this.captureTokenFocusRepair(normalized),this.editingIndex>=0&&normalized!==old&&(this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1),this._value=normalized,this.requestUpdate("value",old),this.internals&&this.syncValidity()}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=normalizeStringArray(next),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",JSON.stringify(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncValidity(),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled,wasEffectivelyDisabled=this.effectiveDisabled;this._disabled=!!next,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.toggleAttribute("disabled",this._disabled),this.syncValidity(),this.requestUpdate("disabled",old)}constructor(){super(),this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.accessibleLabel="",this.size="m",this.pill=!1,this.allowDuplicates=!1,this._editable=!1,this.delimiter=",",this.draft="",this.touched=!1,this.editingIndex=-1,this.editDraft="",this.rovingIndex=0,this.focusEditorPending=!1,this.focusTokenPending=-1,this.editorBlurRelayed=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.labelId=nextId("token-input-label"),this.hintId=nextId("token-input-hint"),this.errorId=nextId("token-input-error"),this._value=Object.freeze([]),this._defaultValue=Object.freeze([]),this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this.onEditInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.editDraft=event.target.value)},this.onEditFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}this.editorBlurRelayed=!1,relayNativeEvent(this,event)},this.onEditKeyDown=event=>{event.isComposing||event.keyCode===229||(event.key==="Enter"?(event.preventDefault(),this.commitEdit(!0)):event.key==="Escape"&&(event.preventDefault(),event.stopPropagation(),this.cancelEdit()))},this.onEditBlur=event=>{if(this.editorBlurRelayed){event.stopPropagation();return}this.editorBlurRelayed=!0,event.stopPropagation(),queueMicrotask(()=>{!this.isConnected||!this.editable||this.liveDisabled?this.discardTransientState(!1):this.commitEdit(!1),relayNativeEvent(this,event)})},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.draft=event.target.value)},this.onKeyDown=event=>{event.isComposing||event.keyCode===229||this.liveDisabled||(event.key==="Enter"||this.delimiter!==null&&event.key===this.delimiter?this.draft.trim()?(event.preventDefault(),this.addDraft()):event.key==="Enter"&&submitOnEnter(this,event):event.key==="Tab"?this.draft.trim()&&this.addDraft():event.key==="Backspace"&&!this.draft&&this.value.length&&this.editingIndex<0&&this.removeToken(this.value.length-1))},this.onBlur=event=>{this.liveDisabled||(this.draft.trim()&&this.addDraft(),this.touched=!0),this.syncValidity(),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncValidity()}disconnectedCallback(){this.releaseExternalDescription(),this.tokenFocusRepairPending=void 0,this.discardTransientState(!0),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}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}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){const wasEffectivelyDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.syncValidity(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.inputEl??this.renderRoot?.querySelector('[part="input-wrapper"]')??null}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncValidity(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidity()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.inputEl?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.inputEl?.focus()}select(){this.inputEl?.select()}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection??"none")}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.draft=input.value)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end"))}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidity(){const barred=this.barredFromValidation,missing=!barred&&this.required&&this.value.length===0;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("tokenInputRequired"):""),this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred});const data=new FormData;this.name&&this.value.forEach(token=>data.append(this.name,token)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,this.value))}updateValue(next){this.value=next,this.syncValidity(),dispatchNativeInputEvent(this),this.emit("lr-input",Object.freeze({value:Object.freeze([...this.value])})),dispatchNativeEvent(this,"change"),this.emit("lr-change",Object.freeze({value:Object.freeze([...this.value])}))}addDraft(){if(this.liveDisabled)return;const candidates=(this.delimiter?this.draft.split(this.delimiter):[this.draft]).map(token=>token.trim()).filter(Boolean),next=[...this.value],seen=this.allowDuplicates?null:new Set(next),added=[];for(const token of candidates)seen?.has(token)||(seen?.add(token),next.push(token),added.push(token));if(added.length===0){this.draft="";return}this.emit("lr-add",Object.freeze({value:added[added.length-1],values:Object.freeze([...added])}),{cancelable:!0}).defaultPrevented||(this.updateValue(next),this.draft="")}discardTransientState(clearDraft){this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1,this.focusTokenPending=-1,clearDraft&&(this.draft="",this.inputEl&&(this.inputEl.value=""))}retireDisabledInteraction(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0);const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}captureTokenFocusRepair(next){this.tokenFocusRepairPending=void 0;const tokens=[...this.renderRoot?.querySelectorAll('[part~="token"]')??[]];if(next.length>=tokens.length)return;const active=activeElementIn(this.shadowRoot),token=typeof active?.closest=="function"?active.closest('[part~="token"]'):null;if(!active||!token)return;const index=tokens.indexOf(token);if(index<0)return;const repair=captureComposedFocusRepair(this,active);if(!repair)return;const targetIndex=Math.min(index,Math.max(0,next.length-1));this.rovingIndex=targetIndex,this.tokenFocusRepairPending={index:targetIndex,surface:active.matches('[part~="remove"]')?"remove":"label",repair}}removeToken(index){if(this.liveDisabled)return;const removed=this.value[index];removed===void 0||this.emit("lr-remove",{value:removed,index},{cancelable:!0}).defaultPrevented||(this.editingIndex>=0&&(this.editingIndex=-1,this.editDraft=""),this.updateValue(this.value.filter((_token,i)=>i!==index)))}get activeTokenIndex(){return this.value.length?Math.min(Math.max(this.rovingIndex,0),this.value.length-1):-1}startEdit(index){this.liveDisabled||!this.editable||index<0||index>=this.value.length||(this.editingIndex=index,this.editDraft=this.value[index],this.rovingIndex=index,this.editorBlurRelayed=!1,this.focusEditorPending=!0)}cancelEdit(){this.editingIndex<0||(this.focusTokenPending=this.editingIndex,this.editingIndex=-1,this.editDraft="")}commitEdit(restoreFocus){if(this.liveDisabled){this.discardTransientState(!1);return}const index=this.editingIndex;if(index<0)return;const previousValue=this.value[index],next=this.editDraft.trim();if(previousValue===void 0||!next||next===previousValue||!this.allowDuplicates&&this.value.some((token,i)=>i!==index&&token===next)){restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="";return}this.emit("lr-token-edit",{value:next,previousValue,index},{cancelable:!0}).defaultPrevented||(restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="",this.updateValue(this.value.map((token,i)=>i===index?next:token)))}moveRovingFocus(index){if(!this.value.length)return;const clamped=Math.min(Math.max(index,0),this.value.length-1);this.rovingIndex=clamped,this.focusTokenPending=clamped}onTokenKeyDown(event,index){if(this.liveDisabled)return;const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";event.key==="Enter"||event.key===" "||event.key==="F2"?(event.preventDefault(),this.startEdit(index)):event.key===forward?(event.preventDefault(),this.moveRovingFocus(index+1)):event.key===backward?(event.preventDefault(),this.moveRovingFocus(index-1)):event.key==="Home"?(event.preventDefault(),this.moveRovingFocus(0)):event.key==="End"&&(event.preventDefault(),this.moveRovingFocus(this.value.length-1))}stopInternalChange(event){event.stopPropagation()}formResetCallback(){this.restoreLiveValueFromDefault(),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=[...this._defaultValue]}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=readStringArrayFormDataState(state2),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),this.focusEditorPending){this.focusEditorPending=!1;const editor=this.renderRoot?.querySelector('[part="token-editor"]');editor?.focus(),editor?.select()}if(this.focusTokenPending>=0){const index=this.focusTokenPending;this.focusTokenPending=-1;const label=this.renderRoot?.querySelectorAll('[part="token-label"]')?.[index];label?.focus(),label?.scrollIntoView({block:"nearest",inline:"nearest"})}const pending=this.tokenFocusRepairPending;if(this.tokenFocusRepairPending=void 0,pending){const token=[...this.renderRoot.querySelectorAll('[part~="token"]')][pending.index],target=(pending.surface==="remove"?token?.querySelector('[part~="remove"]'):token?.querySelector('[part~="token-label"]'))??token?.querySelector('[part~="remove"]')??this.inputEl??null;applyComposedFocusRepair(pending.repair,target)&&target?.scrollIntoView({block:"nearest",inline:"nearest"})}}renderRemoveButton(token,index){return html`<button
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./token-input.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";const delimiterConverter={fromAttribute:value=>value===null?",":value===""||value==="none"?null:value};function normalizeStringArray(value){if(!Array.isArray(value))return Object.freeze([]);try{const normalized=[];for(const entry of value)typeof entry=="string"&&normalized.push(entry);return Object.freeze(normalized)}catch{return Object.freeze([])}}const stringArrayConverter={fromAttribute:value=>{if(value===null)return null;try{const parsed=JSON.parse(value);return normalizeStringArray(parsed)}catch{return[]}},toAttribute:value=>value==null?null:JSON.stringify(value)};class LyraTokenInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,removeWithContext:LYRA_DEFAULT_removeWithContext,tokenInputEditWithContext:LYRA_DEFAULT_tokenInputEditWithContext,tokenInputRequired:LYRA_DEFAULT_tokenInputRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,converter:stringArrayConverter,noAccessor:!0}}}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get editable(){return this._editable}set editable(next){const old=this._editable;this._editable=!!next,this._editable||this.discardTransientState(!1),this.requestUpdate("editable",old)}syncExternalDescription(){const target=this.isConnected?this.inputEl:void 0;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const normalized=normalizeStringArray(next);this.captureTokenFocusRepair(normalized),this.editingIndex>=0&&normalized!==old&&(this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1),this._value=normalized,this.requestUpdate("value",old),this.internals&&this.syncValidity()}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=normalizeStringArray(next),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",JSON.stringify(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncValidity(),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled,wasEffectivelyDisabled=this.effectiveDisabled;this._disabled=!!next,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.toggleAttribute("disabled",this._disabled),this.syncValidity(),this.requestUpdate("disabled",old)}constructor(){super(),this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.accessibleLabel="",this.size="m",this.pill=!1,this.allowDuplicates=!1,this._editable=!1,this.delimiter=",",this.draft="",this.touched=!1,this.editingIndex=-1,this.editDraft="",this.rovingIndex=0,this.focusEditorPending=!1,this.focusTokenPending=-1,this.editorBlurRelayed=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.labelId=nextId("token-input-label"),this.hintId=nextId("token-input-hint"),this.errorId=nextId("token-input-error"),this._value=Object.freeze([]),this._defaultValue=Object.freeze([]),this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncValidity())},this.onEditInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.editDraft=event.target.value)},this.onEditFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}this.editorBlurRelayed=!1,relayNativeEvent(this,event)},this.onEditKeyDown=event=>{event.isComposing||event.keyCode===229||(event.key==="Enter"?(event.preventDefault(),this.commitEdit(!0)):event.key==="Escape"&&(event.preventDefault(),event.stopPropagation(),this.cancelEdit()))},this.onEditBlur=event=>{if(this.editorBlurRelayed){event.stopPropagation();return}this.editorBlurRelayed=!0,event.stopPropagation(),queueMicrotask(()=>{!this.isConnected||!this.editable||this.liveDisabled?this.discardTransientState(!1):this.commitEdit(!1),relayNativeEvent(this,event)})},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.draft=event.target.value)},this.onKeyDown=event=>{event.isComposing||event.keyCode===229||this.liveDisabled||(event.key==="Enter"||this.delimiter!==null&&event.key===this.delimiter?this.draft.trim()?(event.preventDefault(),this.addDraft()):event.key==="Enter"&&submitOnEnter(this,event):event.key==="Tab"?this.draft.trim()&&this.addDraft():event.key==="Backspace"&&!this.draft&&this.value.length&&this.editingIndex<0&&this.removeToken(this.value.length-1))},this.onBlur=event=>{this.liveDisabled||(this.draft.trim()&&this.addDraft(),this.touched=!0),this.syncValidity(),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted)}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncValidity()}disconnectedCallback(){this.releaseExternalDescription(),this.tokenFocusRepairPending=void 0,this.discardTransientState(!0),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}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}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){const wasEffectivelyDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.syncValidity(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.inputEl??this.renderRoot?.querySelector('[part="input-wrapper"]')??null}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.touched=!0,this.syncValidity(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidity()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.inputEl?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.inputEl?.focus()}select(){this.inputEl?.select()}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection??"none")}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.draft=input.value)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end"))}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidity(){const barred=this.barredFromValidation,missing=!barred&&this.required&&this.value.length===0;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("tokenInputRequired"):""),this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred});const data=new FormData;this.name&&this.value.forEach(token=>data.append(this.name,token)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,this.value))}updateValue(next){this.value=next,this.syncValidity(),dispatchNativeInputEvent(this),this.emit("lr-input",Object.freeze({value:Object.freeze([...this.value])})),dispatchNativeEvent(this,"change"),this.emit("lr-change",Object.freeze({value:Object.freeze([...this.value])}))}addDraft(){if(this.liveDisabled)return;const candidates=(this.delimiter?this.draft.split(this.delimiter):[this.draft]).map(token=>token.trim()).filter(Boolean),next=[...this.value],seen=this.allowDuplicates?null:new Set(next),added=[];for(const token of candidates)seen?.has(token)||(seen?.add(token),next.push(token),added.push(token));if(added.length===0){this.draft="";return}this.emit("lr-add",Object.freeze({value:added[added.length-1],values:Object.freeze([...added])}),{cancelable:!0}).defaultPrevented||(this.updateValue(next),this.draft="")}discardTransientState(clearDraft){this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1,this.focusTokenPending=-1,clearDraft&&(this.draft="",this.inputEl&&(this.inputEl.value=""))}retireDisabledInteraction(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0);const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}captureTokenFocusRepair(next){this.tokenFocusRepairPending=void 0;const tokens=[...this.renderRoot?.querySelectorAll('[part~="token"]')??[]];if(next.length>=tokens.length)return;const active=activeElementIn(this.shadowRoot),token=typeof active?.closest=="function"?active.closest('[part~="token"]'):null;if(!active||!token)return;const index=tokens.indexOf(token);if(index<0)return;const repair=captureComposedFocusRepair(this,active);if(!repair)return;const targetIndex=Math.min(index,Math.max(0,next.length-1));this.rovingIndex=targetIndex,this.tokenFocusRepairPending={index:targetIndex,surface:active.matches('[part~="remove"]')?"remove":"label",repair}}removeToken(index){if(this.liveDisabled)return;const removed=this.value[index];removed===void 0||this.emit("lr-remove",{value:removed,index},{cancelable:!0}).defaultPrevented||(this.editingIndex>=0&&(this.editingIndex=-1,this.editDraft=""),this.updateValue(this.value.filter((_token,i)=>i!==index)))}get activeTokenIndex(){return this.value.length?Math.min(Math.max(this.rovingIndex,0),this.value.length-1):-1}startEdit(index){this.liveDisabled||!this.editable||index<0||index>=this.value.length||(this.editingIndex=index,this.editDraft=this.value[index],this.rovingIndex=index,this.editorBlurRelayed=!1,this.focusEditorPending=!0)}cancelEdit(){this.editingIndex<0||(this.focusTokenPending=this.editingIndex,this.editingIndex=-1,this.editDraft="")}commitEdit(restoreFocus){if(this.liveDisabled){this.discardTransientState(!1);return}const index=this.editingIndex;if(index<0)return;const previousValue=this.value[index],next=this.editDraft.trim();if(previousValue===void 0||!next||next===previousValue||!this.allowDuplicates&&this.value.some((token,i)=>i!==index&&token===next)){restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="";return}this.emit("lr-token-edit",{value:next,previousValue,index},{cancelable:!0}).defaultPrevented||(restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="",this.updateValue(this.value.map((token,i)=>i===index?next:token)))}moveRovingFocus(index){if(!this.value.length)return;const clamped=Math.min(Math.max(index,0),this.value.length-1);this.rovingIndex=clamped,this.focusTokenPending=clamped}onTokenKeyDown(event,index){if(this.liveDisabled)return;const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";event.key==="Enter"||event.key===" "||event.key==="F2"?(event.preventDefault(),this.startEdit(index)):event.key===forward?(event.preventDefault(),this.moveRovingFocus(index+1)):event.key===backward?(event.preventDefault(),this.moveRovingFocus(index-1)):event.key==="Home"?(event.preventDefault(),this.moveRovingFocus(0)):event.key==="End"&&(event.preventDefault(),this.moveRovingFocus(this.value.length-1))}stopInternalChange(event){event.stopPropagation()}formResetCallback(){this.restoreLiveValueFromDefault(),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=[...this._defaultValue]}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=readStringArrayFormDataState(state2),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),this.focusEditorPending){this.focusEditorPending=!1;const editor=this.renderRoot?.querySelector('[part="token-editor"]');editor?.focus(),editor?.select()}if(this.focusTokenPending>=0){const index=this.focusTokenPending;this.focusTokenPending=-1;const label=this.renderRoot?.querySelectorAll('[part="token-label"]')?.[index];label?.focus(),label?.scrollIntoView({block:"nearest",inline:"nearest"})}const pending=this.tokenFocusRepairPending;if(this.tokenFocusRepairPending=void 0,pending){const token=[...this.renderRoot.querySelectorAll('[part~="token"]')][pending.index],target=(pending.surface==="remove"?token?.querySelector('[part~="remove"]'):token?.querySelector('[part~="token-label"]'))??token?.querySelector('[part~="remove"]')??this.inputEl??null;applyComposedFocusRepair(pending.repair,target)&&target?.scrollIntoView({block:"nearest",inline:"nearest"})}}renderRemoveButton(token,index){return html`<button
       part="remove"
       type="button"
       aria-label=${this.localize("removeWithContext",void 0,{label:token})}

package/dist/components/layout/app-rail/app-rail-item.class.d.ts

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';export interface LyraAppRailItemToggleDetail{open:boolean;}export interface LyraAppRailItemEventMap{'lr-toggle-request':CustomEvent<LyraAppRailItemToggleDetail>;'lr-toggle':CustomEvent<LyraAppRailItemToggleDetail>;}
 /**
 * `<lr-app-rail-item>` — an explicit icon/label navigation item for
 * `<lr-app-rail>`. The rail sets its `icon-only` attribute as the viewport
@@ -13,6 +13,30 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * to the stable owning rail surface when there is no return target; a newer external focus move
 * always wins.
 *
+* An item may own its own expandable child list -- the treeitem-with-link pattern used by
+* repository trees, Notion-style page trees and IDE explorers, where the row itself is a
+* destination and a SEPARATE disclosure expands that one item's own nested rows beneath it.
+* `<lr-app-rail-group>` cannot express this: its collapsible heading IS the toggle, so nesting a
+* navigable link inside it would put an interactive element inside a button. Slotting one or more
+* `<lr-app-rail-item>`s into `children` instead renders a built-in disclosure -- a SIBLING of
+* `[part="base"]`, never nested inside it, so the link keeps navigating on its own and the
+* disclosure keeps toggling on its own; clicking one never triggers the other. The disclosure
+* carries `aria-expanded`/`aria-controls` and a localized accessible name interpolating this
+* item's own label, mirroring `<lr-app-rail-group>`'s collapsible contract for event name, detail
+* shape and cancelable request/commit semantics exactly (see `lr-toggle-request`/`lr-toggle`
+* below). An item with nothing slotted into `children` renders no disclosure and no extra
+* wrapper -- byte-identical to an item with no children slot at all.
+*
+* `icon-only` forwards onto every `<lr-app-rail-item>` this item DIRECTLY owns through `children`,
+* exactly how `<lr-app-rail-group>` forwards onto the items and nested groups it owns -- so a
+* nested item's own icon/label presentation tracks the rail's presentation without the rail
+* reaching through two hosts. The disclosure itself never changes shape between presentations: it
+* is always a fixed icon-button-sized square beside `[part="base"]`, the same footprint `end` and
+* icon-only `[part="base"]` already use, so it needs no icon-only-specific styling of its own.
+* There is no ancestor-current treatment: `<lr-app-rail-group>` has no equivalent concept for a
+* group containing the current item, so none is invented here either -- a current descendant
+* stays perceivable only through its own `current` property, exactly as an unnested item would.
+*
 * @customElement lr-app-rail-item
 * @slot - The visible navigation label.
 * @slot icon - The leading decorative icon. Its flattened subtree is inert and hidden from
@@ -26,6 +50,19 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   `header-actions`), so a slotted control keeps its own click, keyboard activation and focus
 *   order instead of being swallowed by the item's own activation target. Unlike `meta` it stays
 *   visible in `icon-only` mode, where it shares the narrow rail's width with the icon.
+* @slot children - Nested `<lr-app-rail-item>`s disclosed beneath this item. Rendering anything
+*   into this slot grows a built-in disclosure button (`[part="toggle"]`) as a sibling of
+*   `[part="base"]`; leaving it empty renders neither the disclosure nor `[part="children"]`.
+* @event lr-toggle-request - Cancelable proposal emitted before `expanded` changes from the
+*   built-in disclosure. Call `preventDefault()` to keep the current state, or assign `expanded`
+*   from the listener to resolve it yourself -- a write during the dispatch suppresses the default
+*   commit even when it assigns the value the property already held. Not emitted for a direct
+*   `expanded` write. `detail: LyraAppRailItemToggleDetail` (`{ open: boolean }` -- the field is
+*   named `open`, matching `<lr-app-rail-group>`'s identical event name and detail shape exactly,
+*   so a listener bound to both components' `lr-toggle-request` need not branch on which fired).
+* @event lr-toggle - The item finished expanding or collapsing its `children`. Non-cancelable,
+*   emitted after `expanded` is written, and never emitted for a vetoed or listener-resolved
+*   request. `detail: LyraAppRailItemToggleDetail`.
 * @csspart base - The link or button receiving focus and activation.
 * @csspart icon - The icon wrapper.
 * @csspart label - The label wrapper; visually clipped in icon-only mode.
@@ -36,6 +73,17 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   an item without secondary text renders exactly as before the slot existed.
 * @csspart end - The wrapper around the `end` slot, following `[part="meta"]`. Hidden while empty
 *   for the same reason.
+* @csspart toggle - The disclosure control, rendered only while something is slotted into
+*   `children`. A sibling of `[part="base"]`, never nested inside it, so activating one never
+*   triggers the other. Carries `aria-expanded` in both states and `aria-controls` pointing at
+*   `[part="children"]`'s id; its accessible name is a localized `this.localize()` template
+*   interpolating this item's own label, with no literal fallback.
+* @csspart toggle-icon - The wrapper around the disclosure chevron. Direction-aware through this
+*   wrapper's own `transform`, never a second mirrored glyph -- mirrors
+*   `<lr-app-rail-group>`'s `[part="toggle-icon"]`.
+* @csspart children - The wrapper around the `children` slot. Rendered only while something is
+*   slotted into `children`; hidden (but present, so `aria-controls` keeps resolving) while
+*   `expanded` is `false`.
 * @csspart tooltip - The hover/focus label flyout, only rendered while `tooltip` is set, the item
 *   is `icon-only`, and it is hovered or focused.
 * @cssprop [--lr-app-rail-item-current-bg=var(--lr-color-brand-quiet)] - Background of the
@@ -55,6 +103,17 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   `[part="current-indicator"]` while current.
 * @cssprop [--lr-app-rail-item-current-indicator-inset-inline=0 auto] - Logical inline-start and
 *   inline-end insets for `[part="current-indicator"]`; set `auto 0` to place it at inline-end.
+* @cssprop [--lr-app-rail-item-current-indicator-display] - `[part="current-indicator"]`'s
+*   `display` while `icon-only`. Unset (the default), the indicator is suppressed there -- a
+*   full-height edge bar on the square icon-only tile reads as a rendering glitch. Set to `block`
+*   (or any non-`none` display) to restore it. Full presentation is unaffected either way; its own
+*   `[part="current-indicator"]` rule declares no `display` at all.
+* @cssprop [--lr-app-rail-item-current-ring] - `box-shadow` on `[part="base"]` while
+*   `current`/`aria-current="page"`. Unset, icon-only gets an inset ring by default -- the
+*   non-color-only signal that replaces the indicator bar suppressed there (WCAG 1.4.1); full
+*   presentation, which already conveys current state through the indicator bar and
+*   `--lr-app-rail-item-current-font-weight`, stays ring-free (`none`) by default. Setting this
+*   token explicitly applies the same value in both presentations.
 * @cssprop [--lr-app-rail-item-hover-bg=var(--lr-color-brand-quiet)] - Hover background.
 * @cssprop [--lr-app-rail-item-hover-color=var(--lr-color-brand)] - Hover text/icon color.
 * @cssprop --lr-app-rail-item-active-bg - Pressed background; defaults to the former brand-quiet
@@ -73,12 +132,25 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 *   font size.
 * @cssprop [--lr-app-rail-item-icon-size=var(--lr-icon-button-size)] - `[part="icon"]`'s inline
 *   size. Not floor-clamped -- the icon is decorative, not itself a pointer target.
+* @cssprop [--lr-app-rail-item-icon-only-size] - When set, sizes `[part="base"]`'s icon-only
+*   square (`inline-size` and `block-size` alike) directly, independent of the row's own
+*   `--lr-app-rail-item-min-block-size`. Unset (the default), the square is still derived via
+*   `aspect-ratio: 1` against the row's block size, exactly as before. Still floor-clamped to
+*   `--lr-icon-button-size` by `[part="base"]`'s shared `min-block-size` rule.
 * @cssprop [--lr-app-rail-item-font-size=inherit] - `[part="base"]`'s font size, set after the
 *   `font` shorthand so it alone can be retuned while family/weight/line-height stay inherited.
+* @cssprop --lr-positioning-strategy - Cascading `absolute`/`fixed` override for the icon-only
+*   flyout tooltip's `fixed` default, read from computed style when it is (re)positioned. Set it
+*   once on `:root`, a theme, or one clipping ancestor to change every unset rail item beneath it;
+*   an unrecognized value falls back to `fixed`.
+* @cssprop [--lr-app-rail-item-indent=var(--lr-space-l)] - `[part="children"]`'s
+*   `padding-inline-start`. Applied once per nesting level -- a doubly-nested `children` list
+*   compounds two insets automatically, since each level's own `[part="children"]` applies the
+*   token again. Logical, so it mirrors under `dir="rtl"` with no separate rule.
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraAppRailItem extends LyraElement{static styles:import("lit").CSSResultGroup[];static get observedAttributes():string[];
+export declare class LyraAppRailItem extends LyraElement<LyraAppRailItemEventMap>{static styles:import("lit").CSSResultGroup[];static get observedAttributes():string[];
 /** Optional destination. Without `href`, the item renders as a button. */
 href:string;
 /** Optional link target. */
@@ -95,10 +167,43 @@ current:boolean;
 *  documented property instead of an unverified cross-browser `::part()` + `::after` + `attr()`
 *  composition. No effect outside icon-only mode, since the label is already visible there.
 *  `false` (the default) reproduces today's exact output. */
-tooltip:boolean;private showTooltip;
+tooltip:boolean;
+/** Whether this item's `children` are shown. `false` by default -- a nested list expanding
+*  itself on first paint would be a surprising default, and it reproduces exactly what an item
+*  with no `expanded` property rendered before this feature existed. Mirrors
+*  `<lr-app-rail-group>`'s `open` accessor: every write, including one that assigns the value
+*  already held, marks the veto guard so a synchronous `lr-toggle-request` listener resolving
+*  this itself is observed correctly (see {@link VetoWriteGuard}). */
+get expanded():boolean;set expanded(next:boolean);private _expanded;private readonly toggleGuard;private showTooltip;
 /** `:empty` cannot see slotted light-DOM content (the wrapper always holds a `<slot>` element),
 *  so emptiness is tracked from `slotchange` the same way `<lr-details>` tracks its own
 *  `header-actions` wrapper. */
-private hasEndSlot;private hasMetaSlot;private stopPositioning?;private labelObserver?;private semanticFocusRepair?;private focusReturnTarget?;connectedCallback():void;private armLabelObserver;private get labelText();private get tooltipText();private onFocusShow;private onBlurHide;private onEndSlotChange;private onMetaSlotChange;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;disconnectedCallback():void;private focusFallback;
+private hasEndSlot;private hasMetaSlot;private metaSlot?;private endSlot?;private stopPositioning?;private labelObserver?;private childrenObserver?;private semanticFocusRepair?;private focusReturnTarget?;private readonly childrenId;
+/** Reads the light-DOM `slot` attribute directly rather than a live `assignedNodes()` snapshot
+*  -- the same WebKit-safe pattern `<lr-app-rail>`'s own `onHeaderSlotChange`/`onFooterSlotChange`
+*  use -- so the very first render (before any mutation has ever fired) already renders the
+*  disclosure and `[part="children"]` when the item was authored with children in markup,
+*  with no flash of the childless state. Only ELEMENT children can carry a `slot` attribute, so
+*  reading `this.children` (not `this.childNodes`) already excludes stray text nodes. */
+private get hasChildrenSlotted();connectedCallback():void;private armLabelObserver;
+/** Watches the light DOM for a `children`-slotted node being added, removed, or re-slotted, so
+*  `hasChildrenSlotted` (read fresh from `render()`, never cached) triggers a re-render at the
+*  moment the disclosure/`[part="children"]` should appear or disappear -- including the very
+*  first time a consumer appends a nested item after construction. `childList` catches
+*  add/remove; the `subtree`-scoped `slot`-only `attributes` filter catches an existing child
+*  being re-slotted into or out of `children`, mirroring what a real `slotchange` listener would
+*  see for an always-rendered slot (this slot is instead rendered on demand, so there is no
+*  `<slot>` element to listen on while it does not exist). Also re-syncs this item's own
+*  `icon-only` forwarding onto whatever it owns, since either kind of mutation can change which
+*  nodes this item owns. */
+private armChildrenObserver;
+/** Mirrors this item's own `icon-only` state onto every `<lr-app-rail-item>` it DIRECTLY owns
+*  through `children` -- exactly how `<lr-app-rail-group>`'s `syncOwnedItems()` forwards onto the
+*  items and nested groups it owns. One owner per node: ownership is resolved from the node's
+*  PARENT, never the node itself, so a grandchild's own next sync does not immediately undo a
+*  grandparent's write, and a nested item's own `attributeChangedCallback` cascades the same
+*  forwarding one level further down in turn. Gated on `isConnected` so a detached item stops
+*  claiming ownership of nodes appended to it afterwards. */
+private syncOwnedChildren;private onToggleClick;private get labelText();private get tooltipText();private onFocusShow;private onBlurHide;private onEndSlotChange;private applyEndSlotPresence;private onMetaSlotChange;private applyMetaSlotPresence;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected firstUpdated(changed:PropertyValues):void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;disconnectedCallback():void;private focusFallback;
 /** Activates the internal link or button. Disabled items remain inert. */
 click():void;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-app-rail-item':LyraAppRailItem;}}