@aceshooting/lyra-ui 19.0.1 → 20.0.0

package/dist/components/forms/rubric-form/rubric-form.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{repeat}from"lit/directives/repeat.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{nextId}from"../../../internal/a11y.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{styles}from"./rubric-form.styles.js";import"../../layout/segmented/segmented.class.js";import"../slider/slider.class.js";import"../select/select.class.js";import"../combobox/option.class.js";import"../checkbox/checkbox.class.js";import"../checkbox-group/checkbox-group.class.js";import"../textarea/textarea.class.js";import{getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noData,LYRA_DEFAULT_rubricSkip,LYRA_DEFAULT_rubricSubmit,LYRA_DEFAULT_rubricSubmitAndNext,LYRA_DEFAULT_unsupportedFieldType}from"../../../internal/default-strings.generated.js";const EMPTY_KEYS=[],EMPTY_VALUE={},MAX_RUBRIC_COLLECTION_ENTRIES=1e4;function cloneRubricValue(value){return Object.freeze(Object.fromEntries(Object.entries(value).map(([key,entry])=>[key,Array.isArray(entry)?Object.freeze([...entry]):entry])))}function projectRubricStringArray(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return;const values=[];for(let index=0;index<Math.min(length.value,MAX_RUBRIC_COLLECTION_ENTRIES);index+=1){const entry=getOwnDataDescriptor(value,String(index));entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR||typeof entry.value=="string"&&values.push(entry.value)}return Object.freeze(values)}catch{return}}function projectRubricOptions(value){try{if(!Array.isArray(value))return Object.freeze([]);const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return Object.freeze([]);const options=[];for(let index=0;index<Math.min(length.value,MAX_RUBRIC_COLLECTION_ENTRIES);index+=1){const candidate=getOwnDataDescriptor(value,String(index));if(candidate===MISSING_OWN_DATA_DESCRIPTOR||candidate===UNSAFE_OWN_DATA_DESCRIPTOR||candidate.value===null||typeof candidate.value!="object"||Array.isArray(candidate.value))continue;const optionValue=getOwnDataDescriptor(candidate.value,"value"),label=getOwnDataDescriptor(candidate.value,"label"),description=getOwnDataDescriptor(candidate.value,"description");if(optionValue===MISSING_OWN_DATA_DESCRIPTOR||optionValue===UNSAFE_OWN_DATA_DESCRIPTOR||typeof optionValue.value!="string")continue;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof label.value=="string"?label.value:void 0,descriptionValue=description===MISSING_OWN_DATA_DESCRIPTOR||description===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof description.value=="string"?description.value:void 0;options.push(Object.freeze({value:optionValue.value,...labelValue===void 0?{}:{label:labelValue},...descriptionValue===void 0?{}:{description:descriptionValue}}))}return Object.freeze(options)}catch{return Object.freeze([])}}function projectRubricKey(candidate){try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))return;const key=getOwnDataDescriptor(candidate,"key"),type=getOwnDataDescriptor(candidate,"type"),label=getOwnDataDescriptor(candidate,"label"),description=getOwnDataDescriptor(candidate,"description"),required=getOwnDataDescriptor(candidate,"required");if(key===MISSING_OWN_DATA_DESCRIPTOR||key===UNSAFE_OWN_DATA_DESCRIPTOR||type===UNSAFE_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||description===UNSAFE_OWN_DATA_DESCRIPTOR||required===UNSAFE_OWN_DATA_DESCRIPTOR||typeof key.value!="string"||key.value.trim().length===0)return;const typeValue=type===MISSING_OWN_DATA_DESCRIPTOR?"":type.value;if(typeof typeValue!="string")return;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR?void 0:label.value,descriptionValue=description===MISSING_OWN_DATA_DESCRIPTOR?void 0:description.value,requiredValue=required===MISSING_OWN_DATA_DESCRIPTOR?void 0:required.value,common={key:key.value,...typeof labelValue=="string"?{label:labelValue}:{},...typeof descriptionValue=="string"?{description:descriptionValue}:{},...typeof requiredValue=="boolean"?{required:requiredValue}:{}};if(typeValue==="score"){const min=getOwnDataDescriptor(candidate,"min"),max=getOwnDataDescriptor(candidate,"max"),step=getOwnDataDescriptor(candidate,"step");return min===UNSAFE_OWN_DATA_DESCRIPTOR||max===UNSAFE_OWN_DATA_DESCRIPTOR||step===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:Object.freeze({...common,type:"score",...min!==MISSING_OWN_DATA_DESCRIPTOR&&typeof min.value=="number"?{min:min.value}:{},...max!==MISSING_OWN_DATA_DESCRIPTOR&&typeof max.value=="number"?{max:max.value}:{},...step!==MISSING_OWN_DATA_DESCRIPTOR&&typeof step.value=="number"?{step:step.value}:{}})}if(typeValue==="category"){const options=getOwnDataDescriptor(candidate,"options"),multiple=getOwnDataDescriptor(candidate,"multiple");return options===UNSAFE_OWN_DATA_DESCRIPTOR||multiple===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:Object.freeze({...common,type:"category",options:options===MISSING_OWN_DATA_DESCRIPTOR?Object.freeze([]):projectRubricOptions(options.value),...multiple!==MISSING_OWN_DATA_DESCRIPTOR&&typeof multiple.value=="boolean"?{multiple:multiple.value}:{}})}if(typeValue==="comment"){const placeholder=getOwnDataDescriptor(candidate,"placeholder");return placeholder===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:Object.freeze({...common,type:"comment",...placeholder!==MISSING_OWN_DATA_DESCRIPTOR&&typeof placeholder.value=="string"?{placeholder:placeholder.value}:{}})}return Object.freeze({...common,type:typeValue})}catch{return}}function normalizeRubricKeys(next){try{if(!Array.isArray(next))return EMPTY_KEYS;const length=getOwnDataDescriptor(next,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return EMPTY_KEYS;const seen=new Set,normalized=[];for(let index=0;index<Math.min(length.value,MAX_RUBRIC_COLLECTION_ENTRIES);index+=1){const candidate=getOwnDataDescriptor(next,String(index));if(candidate===MISSING_OWN_DATA_DESCRIPTOR||candidate===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const key=projectRubricKey(candidate.value);!key||seen.has(key.key)||(seen.add(key.key),normalized.push(key))}return Object.freeze(normalized)}catch{return EMPTY_KEYS}}function scoreDomain(key){const min=Number.isFinite(key.min)?key.min:0,rawMax=Number.isFinite(key.max)?key.max:5,max=Math.max(min,rawMax),step=Number.isFinite(key.step)&&key.step>0?key.step:1;return{min,max,step}}function isSegmentedScoreKey(key){if(key.step!==void 0&&(!Number.isFinite(key.step)||key.step<=0)||Number.isFinite(key.min)&&Number.isFinite(key.max)&&key.max<key.min)return!1;const{min,max,step}=scoreDomain(key);if(!Number.isInteger(min)||!Number.isInteger(max)||!Number.isInteger(step))return!1;const count=(max-min)/step;return Number.isInteger(count)&&count>=0&&count<=10}function canonicalScore(value,key){if(typeof value!="number"||!Number.isFinite(value))return;const{min,max,step}=scoreDomain(key),clamped=Math.min(max,Math.max(min,value)),snapped=Math.min(max,Math.max(min,min+Math.round((clamped-min)/step)*step));return Number(snapped.toPrecision(15))}function normalizeRubricValue(value,keys){const source=value!==null&&typeof value=="object"&&!Array.isArray(value)?value:EMPTY_VALUE,normalized={};for(const key of keys){const descriptor=getOwnDataDescriptor(source,key.key);if(descriptor===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const hasEntry=descriptor!==MISSING_OWN_DATA_DESCRIPTOR,entry=descriptor===MISSING_OWN_DATA_DESCRIPTOR?void 0:descriptor.value;if(key.type==="score"){const{min,max}=scoreDomain(key),score=canonicalScore(hasEntry?entry:isSegmentedScoreKey(key)?void 0:min+(max-min)/2,key);score!==void 0&&(normalized[key.key]=score)}else if(key.type==="category"){if(!hasEntry)continue;const allowed=(key.options??[]).map(option=>option.value);if(key.multiple){const entries=projectRubricStringArray(entry);if(!entries)continue;const remaining=new Map;for(const option of allowed)remaining.set(option,(remaining.get(option)??0)+1);const selected=[];for(const candidate of entries){const count=remaining.get(candidate)??0;count<=0||(selected.push(candidate),remaining.set(candidate,count-1))}normalized[key.key]=selected}else typeof entry=="string"&&entry!==""&&allowed.includes(entry)&&(normalized[key.key]=entry)}else key.type==="comment"&&hasEntry&&typeof entry=="string"&&(normalized[key.key]=entry)}return normalized}class LyraRubricForm extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noData:LYRA_DEFAULT_noData,rubricSkip:LYRA_DEFAULT_rubricSkip,rubricSubmit:LYRA_DEFAULT_rubricSubmit,rubricSubmitAndNext:LYRA_DEFAULT_rubricSubmitAndNext,unsupportedFieldType:LYRA_DEFAULT_unsupportedFieldType}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},keys:{attribute:!1,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:!1,noAccessor:!0},itemId:{attribute:"item-id",reflect:!0,noAccessor:!0},hasNext:{type:Boolean,attribute:"has-next",noAccessor:!0},skippable:{type:Boolean,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}constructor(){super(),this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this._errors={},this.touchedFields=new Set,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.baseId=nextId("rubric-form"),this.aggregateLabelId=`${this.baseId}-label`,this.aggregateHintId=`${this.baseId}-hint`,this.aggregateErrorId=`${this.baseId}-error`,this._fieldsetDisabled=!1,this._name="",this._keys=EMPTY_KEYS,this._value=EMPTY_VALUE,this._defaultValue=EMPTY_VALUE,this._rawValue=EMPTY_VALUE,this._rawDefaultValue=EMPTY_VALUE,this._valueDirty=!1,this._itemId="",this._hasNext=!1,this._skippable=!1,this._disabled=!1,this.pendingFocusFirst=!1,this.markInteracted=()=>{Object.keys(this._errors).length!==0&&(this.touchedFields=new Set([...this.touchedFields,...Object.keys(this._errors)]),this.syncCustomStates())},this.onFormKeyDown=e=>{e.key==="Enter"&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),this.submit())},this.stopChildEvent=event=>{event.stopPropagation()},this.onAggregateSlotChange=event=>{this.applyAggregateSlotAssignment(event.target)},this.internals=this.safeAttachInternals(),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),this.addEventListener("keydown",this.onFormKeyDown),this.syncFormState()}safeAttachInternals(){if(typeof globalThis.ElementInternals>"u")return this.inertInternals();try{return this.attachInternals()}catch{return this.inertInternals()}}inertInternals(){return{form:null,labels:[],validity:{},validationMessage:"",willValidate:!1,setFormValue:()=>{},setValidity:()=>{},checkValidity:()=>!0,reportValidity:()=>!0,states:new Set}}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 keys(){return this._keys}set keys(next){const old=this._keys,recoverFromRaw=old.length===0;this._keys=normalizeRubricKeys(next??EMPTY_KEYS);const oldDefault=this._defaultValue,oldValue=this._value;this._defaultValue=normalizeRubricValue(recoverFromRaw?this._rawDefaultValue:this._defaultValue,this._keys),this._value=this._valueDirty?normalizeRubricValue(recoverFromRaw?this._rawValue:this._value,this._keys):cloneRubricValue(this._defaultValue),this.syncFormState(),this.requestUpdate("keys",old),this.requestUpdate("defaultValue",oldDefault),this.requestUpdate("value",oldValue)}get value(){return cloneRubricValue(this._value)}set value(next){this.setLiveValue(next,!0)}get defaultValue(){return cloneRubricValue(this._defaultValue)}set defaultValue(next){const old=this._defaultValue;this._rawDefaultValue=next??EMPTY_VALUE,this._defaultValue=normalizeRubricValue(this._rawDefaultValue,this._keys),this._valueDirty||this.setLiveValue(this._defaultValue,!1),this.requestUpdate("defaultValue",old)}setLiveValue(next,dirty){const old=this._value;this._rawValue=next??EMPTY_VALUE,this._value=normalizeRubricValue(this._rawValue,this._keys),this._valueDirty=dirty,this.syncFormState(),this.requestUpdate("value",old)}get itemId(){return this._itemId}set itemId(next){const old=this._itemId;this._itemId=next??"",old!==this._itemId&&(this.touchedFields=new Set,this.syncCustomStates(),this.hasUpdated&&(this.pendingFocusFirst=!0)),this._itemId?this.setAttribute("item-id",this._itemId):this.removeAttribute("item-id"),this.requestUpdate("itemId",old)}get hasNext(){return this._hasNext}set hasNext(next){const old=this._hasNext;this._hasNext=!!next,this.toggleAttribute("has-next",this._hasNext),this.requestUpdate("hasNext",old)}get skippable(){return this._skippable}set skippable(next){const old=this._skippable;this._skippable=!!next,this.requestUpdate("skippable",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.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.validityController&&this.syncFormState(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get errors(){return this.publicValidityErrors()}publicValidityErrors(){const errors={...this._errors};return this.willValidate&&this.validityController.customValidityMessage&&(errors.base=this.validationMessage),Object.freeze(errors)}publishValiditySnapshot(){if(!this.isConnected)return;const valid=!this.willValidate||this.validity.valid,errors=valid?Object.freeze({}):this.publicValidityErrors(),key=JSON.stringify({valid,errors});key!==this.lastValidityKey&&(this.lastValidityKey=key,this.emit("lr-validity-change",Object.freeze({valid,errors})))}fieldElement(key){const root=this.renderRoot,ownerCss=this.ownerDocument.defaultView?.CSS;if(typeof ownerCss?.escape=="function")try{const candidate=root.querySelector(`[part="field"][data-key="${ownerCss.escape(key)}"]`);if(candidate?.getAttribute("data-key")===key)return candidate}catch{}return Array.from(root.querySelectorAll('[part="field"][data-key]')).find(candidate=>candidate.getAttribute("data-key")===key)??null}[VALIDITY_ANCHOR](){const firstInvalidKey=Object.keys(this._errors)[0];return!firstInvalidKey||!this.renderRoot?void 0:this.fieldElement(firstInvalidKey)?.querySelector(".control")??void 0}isSegmentedScore(k){return isSegmentedScoreKey(k)}scoreValues(k){if(!this.isSegmentedScore(k))return[];const{min,max,step}=scoreDomain(k),count=Math.round((max-min)/step);return Array.from({length:count+1},(_,index)=>index===count?max:min+index*step)}computeValidation(){const errors={},flags={};for(const k of this._keys){if(k.type!=="score"&&k.type!=="category"&&k.type!=="comment"){const unsupported=k;errors[unsupported.key]=this.localize("unsupportedFieldType",void 0,{type:unsupported.type}),flags.customError=!0;continue}if(!k.required)continue;const v=this._value[k.key];(k.type==="category"&&k.multiple?Array.isArray(v)&&v.length>0:v!==void 0&&v!=="")||(errors[k.key]=this.localize("fieldRequired"),flags.valueMissing=!0)}return{errors,flags}}syncFormState(){const{errors,flags}=this.computeValidation();this._errors=errors;let formValue=null;try{formValue=JSON.stringify(this._value)}catch{formValue=null}if(this.internals.setFormValue(formValue,formValue),this.barredFromValidation||Object.keys(flags).length===0)this.validityController.setValidity({});else{const message=Object.values(errors)[0]??"";this.validityController.setValidity(flags,message)}this.syncCustomStates(),this.publishValiditySnapshot()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this._keys.some(key=>!!key.required),hasInteracted:this.touchedFields.size>0,barred:this.barredFromValidation})}checkValidity(){return this.syncFormState(),withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.syncFormState(),Object.keys(this._errors).length>0&&(this.touchedFields=new Set([...this.touchedFields,...Object.keys(this._errors)]),this.syncCustomStates()),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.publishValiditySnapshot(),this.requestUpdate()}formResetCallback(){this.setLiveValue(this._defaultValue,!1),this.touchedFields=new Set,this.syncCustomStates()}formStateRestoreCallback(state2,_mode){let restored={};if(typeof state2=="string")try{const parsed=JSON.parse(state2);parsed!==null&&typeof parsed=="object"&&!Array.isArray(parsed)&&(restored=parsed)}catch{}this.setLiveValue(restored,!0)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.syncFormState(),this.requestUpdate()}setFieldValue(key,val){this.effectiveDisabled||(this.value={...this._value,[key]:val},this.emit("lr-input",Object.freeze({value:cloneRubricValue(this._value)})))}applyAggregateSlotAssignment(slot){const populated=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType===Node.ELEMENT_NODE||!!node.textContent?.trim());slot.name==="label"?this.hasLabelSlot=populated:slot.name==="hint"?this.hasHintSlot=populated:slot.name==="error"&&(this.hasErrorSlot=populated)}markTouched(key){this.effectiveDisabled||this.touchedFields.has(key)||(this.touchedFields=new Set(this.touchedFields).add(key),this.syncCustomStates())}submit(){this.effectiveDisabled||this.reportValidity()&&this.emit("lr-submit",Object.freeze({value:cloneRubricValue(this._value),itemId:this.itemId}))}skip(){this.effectiveDisabled||this.emit("lr-skip",{itemId:this.itemId})}focusFirstControl(){const firstKey=this._keys[0];if(!firstKey)return;const control=this.fieldElement(firstKey.key)?.querySelector(".control");control&&(firstKey.type==="score"&&this.isSegmentedScore(firstKey)?control.shadowRoot?.querySelector('[part="segment"][tabindex="0"]')?.focus():firstKey.type==="score"?control.shadowRoot?.querySelector('[part="thumb"]')?.focus():firstKey.type==="category"&&firstKey.multiple?control.querySelector("lr-checkbox")?.focus():control.focus())}click(){this.effectiveDisabled||this.focusFirstControl()}syncExternalDescription(){const target=this.isConnected?this.renderRoot.querySelector('[part="base"][role="group"]'):null;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}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}firstUpdated(changed){super.firstUpdated(changed);const labelSlot=this.aggregateLabelSlotEl,hintSlot=this.aggregateHintSlotEl,errorSlot=this.aggregateErrorSlotEl;queueMicrotask(()=>{collectInitialSlotAssignment(labelSlot,slot=>this.applyAggregateSlotAssignment(slot)),collectInitialSlotAssignment(hintSlot,slot=>this.applyAggregateSlotAssignment(slot)),collectInitialSlotAssignment(errorSlot,slot=>this.applyAggregateSlotAssignment(slot))})}updated(changed){super.updated(changed),this.syncExternalDescription(),this.publishValiditySnapshot(),this.pendingFocusFirst&&(this.pendingFocusFirst=!1,this.focusFirstControl())}renderScoreControl(k,fieldId,current,hasError){const{min,max,step}=scoreDomain(k),disabled=this.effectiveDisabled,accessibleLabel=[k.label??k.key,k.description,hasError?this._errors[k.key]:void 0].filter(value=>!!value).join(". ");if(this.isSegmentedScore(k)){const numberFormat=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}),items=this.scoreValues(k).map(score=>({value:String(score),label:numberFormat.format(score),disabled})),value=typeof current=="number"?String(current):"";return html`<lr-segmented
+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{repeat}from"lit/directives/repeat.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{nextId}from"../../../internal/a11y.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{styles}from"./rubric-form.styles.js";import"../../layout/segmented/segmented.class.js";import"../slider/slider.class.js";import"../select/select.class.js";import"../combobox/option.class.js";import"../checkbox/checkbox.class.js";import"../checkbox-group/checkbox-group.class.js";import"../textarea/textarea.class.js";import{getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noData,LYRA_DEFAULT_rubricSkip,LYRA_DEFAULT_rubricSubmit,LYRA_DEFAULT_rubricSubmitAndNext,LYRA_DEFAULT_unsupportedFieldType}from"../../../internal/default-strings.generated.js";const EMPTY_KEYS=[],EMPTY_VALUE={},MAX_RUBRIC_COLLECTION_ENTRIES=1e4;function cloneRubricValue(value){return Object.freeze(Object.fromEntries(Object.entries(value).map(([key,entry])=>[key,Array.isArray(entry)?Object.freeze([...entry]):entry])))}function projectRubricStringArray(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return;const values=[];for(let index=0;index<Math.min(length.value,MAX_RUBRIC_COLLECTION_ENTRIES);index+=1){const entry=getOwnDataDescriptor(value,String(index));entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR||typeof entry.value=="string"&&values.push(entry.value)}return Object.freeze(values)}catch{return}}function projectRubricOptions(value){try{if(!Array.isArray(value))return Object.freeze([]);const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return Object.freeze([]);const options=[];for(let index=0;index<Math.min(length.value,MAX_RUBRIC_COLLECTION_ENTRIES);index+=1){const candidate=getOwnDataDescriptor(value,String(index));if(candidate===MISSING_OWN_DATA_DESCRIPTOR||candidate===UNSAFE_OWN_DATA_DESCRIPTOR||candidate.value===null||typeof candidate.value!="object"||Array.isArray(candidate.value))continue;const optionValue=getOwnDataDescriptor(candidate.value,"value"),label=getOwnDataDescriptor(candidate.value,"label"),description=getOwnDataDescriptor(candidate.value,"description"),icon=getOwnDataDescriptor(candidate.value,"icon");if(optionValue===MISSING_OWN_DATA_DESCRIPTOR||optionValue===UNSAFE_OWN_DATA_DESCRIPTOR||typeof optionValue.value!="string")continue;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof label.value=="string"?label.value:void 0,descriptionValue=description===MISSING_OWN_DATA_DESCRIPTOR||description===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof description.value=="string"?description.value:void 0,iconValue=icon===MISSING_OWN_DATA_DESCRIPTOR||icon===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:icon.value;options.push(Object.freeze({value:optionValue.value,...labelValue===void 0?{}:{label:labelValue},...descriptionValue===void 0?{}:{description:descriptionValue},...iconValue===void 0?{}:{icon:iconValue}}))}return Object.freeze(options)}catch{return Object.freeze([])}}function projectRubricKey(candidate){try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))return;const key=getOwnDataDescriptor(candidate,"key"),type=getOwnDataDescriptor(candidate,"type"),label=getOwnDataDescriptor(candidate,"label"),description=getOwnDataDescriptor(candidate,"description"),required=getOwnDataDescriptor(candidate,"required");if(key===MISSING_OWN_DATA_DESCRIPTOR||key===UNSAFE_OWN_DATA_DESCRIPTOR||type===UNSAFE_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||description===UNSAFE_OWN_DATA_DESCRIPTOR||required===UNSAFE_OWN_DATA_DESCRIPTOR||typeof key.value!="string"||key.value.trim().length===0)return;const typeValue=type===MISSING_OWN_DATA_DESCRIPTOR?"":type.value;if(typeof typeValue!="string")return;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR?void 0:label.value,descriptionValue=description===MISSING_OWN_DATA_DESCRIPTOR?void 0:description.value,requiredValue=required===MISSING_OWN_DATA_DESCRIPTOR?void 0:required.value,common={key:key.value,...typeof labelValue=="string"?{label:labelValue}:{},...typeof descriptionValue=="string"?{description:descriptionValue}:{},...typeof requiredValue=="boolean"?{required:requiredValue}:{}};if(typeValue==="score"){const min=getOwnDataDescriptor(candidate,"min"),max=getOwnDataDescriptor(candidate,"max"),step=getOwnDataDescriptor(candidate,"step");return min===UNSAFE_OWN_DATA_DESCRIPTOR||max===UNSAFE_OWN_DATA_DESCRIPTOR||step===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:Object.freeze({...common,type:"score",...min!==MISSING_OWN_DATA_DESCRIPTOR&&typeof min.value=="number"?{min:min.value}:{},...max!==MISSING_OWN_DATA_DESCRIPTOR&&typeof max.value=="number"?{max:max.value}:{},...step!==MISSING_OWN_DATA_DESCRIPTOR&&typeof step.value=="number"?{step:step.value}:{}})}if(typeValue==="category"){const options=getOwnDataDescriptor(candidate,"options"),multiple=getOwnDataDescriptor(candidate,"multiple");return options===UNSAFE_OWN_DATA_DESCRIPTOR||multiple===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:Object.freeze({...common,type:"category",options:options===MISSING_OWN_DATA_DESCRIPTOR?Object.freeze([]):projectRubricOptions(options.value),...multiple!==MISSING_OWN_DATA_DESCRIPTOR&&typeof multiple.value=="boolean"?{multiple:multiple.value}:{}})}if(typeValue==="comment"){const placeholder=getOwnDataDescriptor(candidate,"placeholder");return placeholder===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:Object.freeze({...common,type:"comment",...placeholder!==MISSING_OWN_DATA_DESCRIPTOR&&typeof placeholder.value=="string"?{placeholder:placeholder.value}:{}})}return Object.freeze({...common,type:typeValue})}catch{return}}function normalizeRubricKeys(next){try{if(!Array.isArray(next))return EMPTY_KEYS;const length=getOwnDataDescriptor(next,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return EMPTY_KEYS;const seen=new Set,normalized=[];for(let index=0;index<Math.min(length.value,MAX_RUBRIC_COLLECTION_ENTRIES);index+=1){const candidate=getOwnDataDescriptor(next,String(index));if(candidate===MISSING_OWN_DATA_DESCRIPTOR||candidate===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const key=projectRubricKey(candidate.value);!key||seen.has(key.key)||(seen.add(key.key),normalized.push(key))}return Object.freeze(normalized)}catch{return EMPTY_KEYS}}function scoreDomain(key){const min=Number.isFinite(key.min)?key.min:0,rawMax=Number.isFinite(key.max)?key.max:5,max=Math.max(min,rawMax),step=Number.isFinite(key.step)&&key.step>0?key.step:1;return{min,max,step}}function isSegmentedScoreKey(key){if(key.step!==void 0&&(!Number.isFinite(key.step)||key.step<=0)||Number.isFinite(key.min)&&Number.isFinite(key.max)&&key.max<key.min)return!1;const{min,max,step}=scoreDomain(key);if(!Number.isInteger(min)||!Number.isInteger(max)||!Number.isInteger(step))return!1;const count=(max-min)/step;return Number.isInteger(count)&&count>=0&&count<=10}function canonicalScore(value,key){if(typeof value!="number"||!Number.isFinite(value))return;const{min,max,step}=scoreDomain(key),clamped=Math.min(max,Math.max(min,value)),snapped=Math.min(max,Math.max(min,min+Math.round((clamped-min)/step)*step));return Number(snapped.toPrecision(15))}function normalizeRubricValue(value,keys){const source=value!==null&&typeof value=="object"&&!Array.isArray(value)?value:EMPTY_VALUE,normalized={};for(const key of keys){const descriptor=getOwnDataDescriptor(source,key.key);if(descriptor===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const hasEntry=descriptor!==MISSING_OWN_DATA_DESCRIPTOR,entry=descriptor===MISSING_OWN_DATA_DESCRIPTOR?void 0:descriptor.value;if(key.type==="score"){const{min,max}=scoreDomain(key),score=canonicalScore(hasEntry?entry:isSegmentedScoreKey(key)?void 0:min+(max-min)/2,key);score!==void 0&&(normalized[key.key]=score)}else if(key.type==="category"){if(!hasEntry)continue;const allowed=(key.options??[]).map(option=>option.value);if(key.multiple){const entries=projectRubricStringArray(entry);if(!entries)continue;const remaining=new Map;for(const option of allowed)remaining.set(option,(remaining.get(option)??0)+1);const selected=[];for(const candidate of entries){const count=remaining.get(candidate)??0;count<=0||(selected.push(candidate),remaining.set(candidate,count-1))}normalized[key.key]=selected}else typeof entry=="string"&&entry!==""&&allowed.includes(entry)&&(normalized[key.key]=entry)}else key.type==="comment"&&hasEntry&&typeof entry=="string"&&(normalized[key.key]=entry)}return normalized}class LyraRubricForm extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noData:LYRA_DEFAULT_noData,rubricSkip:LYRA_DEFAULT_rubricSkip,rubricSubmit:LYRA_DEFAULT_rubricSubmit,rubricSubmitAndNext:LYRA_DEFAULT_rubricSubmitAndNext,unsupportedFieldType:LYRA_DEFAULT_unsupportedFieldType}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},keys:{attribute:!1,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:!1,noAccessor:!0},itemId:{attribute:"item-id",reflect:!0,noAccessor:!0},hasNext:{type:Boolean,attribute:"has-next",noAccessor:!0},skippable:{type:Boolean,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}constructor(){super(),this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this._errors={},this.touchedFields=new Set,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.baseId=nextId("rubric-form"),this.aggregateLabelId=`${this.baseId}-label`,this.aggregateHintId=`${this.baseId}-hint`,this.aggregateErrorId=`${this.baseId}-error`,this._fieldsetDisabled=!1,this._name="",this._keys=EMPTY_KEYS,this._value=EMPTY_VALUE,this._defaultValue=EMPTY_VALUE,this._rawValue=EMPTY_VALUE,this._rawDefaultValue=EMPTY_VALUE,this._valueDirty=!1,this._itemId="",this._hasNext=!1,this._skippable=!1,this._disabled=!1,this.pendingFocusFirst=!1,this.markInteracted=()=>{Object.keys(this._errors).length!==0&&(this.touchedFields=new Set([...this.touchedFields,...Object.keys(this._errors)]),this.syncCustomStates())},this.onFormKeyDown=e=>{e.key==="Enter"&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),this.submit())},this.stopChildEvent=event=>{event.stopPropagation()},this.onAggregateSlotChange=event=>{this.applyAggregateSlotAssignment(event.target)},this.internals=this.safeAttachInternals(),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),this.addEventListener("keydown",this.onFormKeyDown),this.syncFormState()}safeAttachInternals(){if(typeof globalThis.ElementInternals>"u")return this.inertInternals();try{return this.attachInternals()}catch{return this.inertInternals()}}inertInternals(){return{form:null,labels:[],validity:{},validationMessage:"",willValidate:!1,setFormValue:()=>{},setValidity:()=>{},checkValidity:()=>!0,reportValidity:()=>!0,states:new Set}}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 keys(){return this._keys}set keys(next){const old=this._keys,recoverFromRaw=old.length===0;this._keys=normalizeRubricKeys(next??EMPTY_KEYS);const oldDefault=this._defaultValue,oldValue=this._value;this._defaultValue=normalizeRubricValue(recoverFromRaw?this._rawDefaultValue:this._defaultValue,this._keys),this._value=this._valueDirty?normalizeRubricValue(recoverFromRaw?this._rawValue:this._value,this._keys):cloneRubricValue(this._defaultValue),this.syncFormState(),this.requestUpdate("keys",old),this.requestUpdate("defaultValue",oldDefault),this.requestUpdate("value",oldValue)}get value(){return cloneRubricValue(this._value)}set value(next){this.setLiveValue(next,!0)}get defaultValue(){return cloneRubricValue(this._defaultValue)}set defaultValue(next){const old=this._defaultValue;this._rawDefaultValue=next??EMPTY_VALUE,this._defaultValue=normalizeRubricValue(this._rawDefaultValue,this._keys),this._valueDirty||this.setLiveValue(this._defaultValue,!1),this.requestUpdate("defaultValue",old)}setLiveValue(next,dirty){const old=this._value;this._rawValue=next??EMPTY_VALUE,this._value=normalizeRubricValue(this._rawValue,this._keys),this._valueDirty=dirty,this.syncFormState(),this.requestUpdate("value",old)}get itemId(){return this._itemId}set itemId(next){const old=this._itemId;this._itemId=next??"",old!==this._itemId&&(this.touchedFields=new Set,this.syncCustomStates(),this.hasUpdated&&(this.pendingFocusFirst=!0)),this._itemId?this.setAttribute("item-id",this._itemId):this.removeAttribute("item-id"),this.requestUpdate("itemId",old)}get hasNext(){return this._hasNext}set hasNext(next){const old=this._hasNext;this._hasNext=!!next,this.toggleAttribute("has-next",this._hasNext),this.requestUpdate("hasNext",old)}get skippable(){return this._skippable}set skippable(next){const old=this._skippable;this._skippable=!!next,this.requestUpdate("skippable",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.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.validityController&&this.syncFormState(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get errors(){return this.publicValidityErrors()}publicValidityErrors(){const errors={...this._errors};return this.willValidate&&this.validityController.customValidityMessage&&(errors.base=this.validationMessage),Object.freeze(errors)}publishValiditySnapshot(){if(!this.isConnected)return;const valid=!this.willValidate||this.validity.valid,errors=valid?Object.freeze({}):this.publicValidityErrors(),key=JSON.stringify({valid,errors});key!==this.lastValidityKey&&(this.lastValidityKey=key,this.emit("lr-validity-change",Object.freeze({valid,errors})))}fieldElement(key){const root=this.renderRoot,ownerCss=this.ownerDocument.defaultView?.CSS;if(typeof ownerCss?.escape=="function")try{const candidate=root.querySelector(`[part="field"][data-key="${ownerCss.escape(key)}"]`);if(candidate?.getAttribute("data-key")===key)return candidate}catch{}return Array.from(root.querySelectorAll('[part="field"][data-key]')).find(candidate=>candidate.getAttribute("data-key")===key)??null}[VALIDITY_ANCHOR](){const firstInvalidKey=Object.keys(this._errors)[0];return!firstInvalidKey||!this.renderRoot?void 0:this.fieldElement(firstInvalidKey)?.querySelector(".control")??void 0}isSegmentedScore(k){return isSegmentedScoreKey(k)}scoreValues(k){if(!this.isSegmentedScore(k))return[];const{min,max,step}=scoreDomain(k),count=Math.round((max-min)/step);return Array.from({length:count+1},(_,index)=>index===count?max:min+index*step)}computeValidation(){const errors={},flags={};for(const k of this._keys){if(k.type!=="score"&&k.type!=="category"&&k.type!=="comment"){const unsupported=k;errors[unsupported.key]=this.localize("unsupportedFieldType",void 0,{type:unsupported.type}),flags.customError=!0;continue}if(!k.required)continue;const v=this._value[k.key];(k.type==="category"&&k.multiple?Array.isArray(v)&&v.length>0:v!==void 0&&v!=="")||(errors[k.key]=this.localize("fieldRequired"),flags.valueMissing=!0)}return{errors,flags}}syncFormState(){const{errors,flags}=this.computeValidation();this._errors=errors;let formValue=null;try{formValue=JSON.stringify(this._value)}catch{formValue=null}if(this.internals.setFormValue(formValue,formValue),this.barredFromValidation||Object.keys(flags).length===0)this.validityController.setValidity({});else{const message=Object.values(errors)[0]??"";this.validityController.setValidity(flags,message)}this.syncCustomStates(),this.publishValiditySnapshot()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this._keys.some(key=>!!key.required),hasInteracted:this.touchedFields.size>0,barred:this.barredFromValidation})}checkValidity(){return this.syncFormState(),withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.syncFormState(),Object.keys(this._errors).length>0&&(this.touchedFields=new Set([...this.touchedFields,...Object.keys(this._errors)]),this.syncCustomStates()),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.publishValiditySnapshot(),this.requestUpdate()}formResetCallback(){this.setLiveValue(this._defaultValue,!1),this.touchedFields=new Set,this.syncCustomStates()}formStateRestoreCallback(state2,_mode){let restored={};if(typeof state2=="string")try{const parsed=JSON.parse(state2);parsed!==null&&typeof parsed=="object"&&!Array.isArray(parsed)&&(restored=parsed)}catch{}this.setLiveValue(restored,!0)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.syncFormState(),this.requestUpdate()}setFieldValue(key,val){this.effectiveDisabled||(this.value={...this._value,[key]:val},this.emit("lr-input",Object.freeze({value:cloneRubricValue(this._value)})))}applyAggregateSlotAssignment(slot){const populated=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType===Node.ELEMENT_NODE||!!node.textContent?.trim());slot.name==="label"?this.hasLabelSlot=populated:slot.name==="hint"?this.hasHintSlot=populated:slot.name==="error"&&(this.hasErrorSlot=populated)}markTouched(key){this.effectiveDisabled||this.touchedFields.has(key)||(this.touchedFields=new Set(this.touchedFields).add(key),this.syncCustomStates())}submit(){this.effectiveDisabled||this.reportValidity()&&this.emit("lr-submit",Object.freeze({value:cloneRubricValue(this._value),itemId:this.itemId}))}skip(){this.effectiveDisabled||this.emit("lr-skip",{itemId:this.itemId})}focusFirstControl(options){const firstKey=this._keys[0];if(!firstKey)return;const control=this.fieldElement(firstKey.key)?.querySelector(".control");control&&(firstKey.type==="score"&&this.isSegmentedScore(firstKey)?control.shadowRoot?.querySelector('[part="segment"][tabindex="0"]')?.focus(options):firstKey.type==="score"?control.shadowRoot?.querySelector('[part="thumb"]')?.focus(options):firstKey.type==="category"&&firstKey.multiple?control.querySelector("lr-checkbox")?.focus(options):control.focus(options))}focus(options){this.effectiveDisabled||this.focusFirstControl(options)}click(){this.effectiveDisabled||this.focusFirstControl()}syncExternalDescription(){const target=this.isConnected?this.renderRoot.querySelector('[part="base"][role="group"]'):null;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}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}firstUpdated(changed){super.firstUpdated(changed);const labelSlot=this.aggregateLabelSlotEl,hintSlot=this.aggregateHintSlotEl,errorSlot=this.aggregateErrorSlotEl;queueMicrotask(()=>{collectInitialSlotAssignment(labelSlot,slot=>this.applyAggregateSlotAssignment(slot)),collectInitialSlotAssignment(hintSlot,slot=>this.applyAggregateSlotAssignment(slot)),collectInitialSlotAssignment(errorSlot,slot=>this.applyAggregateSlotAssignment(slot))})}updated(changed){super.updated(changed),this.syncExternalDescription(),this.publishValiditySnapshot(),this.pendingFocusFirst&&(this.pendingFocusFirst=!1,this.focusFirstControl())}renderScoreControl(k,fieldId,current,hasError){const{min,max,step}=scoreDomain(k),disabled=this.effectiveDisabled,accessibleLabel=[k.label??k.key,k.description,hasError?this._errors[k.key]:void 0].filter(value=>!!value).join(". ");if(this.isSegmentedScore(k)){const numberFormat=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}),items=this.scoreValues(k).map(score=>({value:String(score),label:numberFormat.format(score),disabled})),value=typeof current=="number"?String(current):"";return html`<lr-segmented
         @lr-activate=${this.stopChildEvent}
         id=${fieldId}
         class="control"
@@ -38,7 +38,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         <span slot="label" part="label">${label}</span>
         ${description} ${error}
         ${options.map(opt=>html`<lr-checkbox value=${opt.value} .checked=${live(selected.includes(opt.value))} ?disabled=${disabled}
-              ><span
+              >${opt.icon==null?nothing:renderInertPresentation(opt.icon)}<span
                 >${opt.label??opt.value}${opt.description?html`<small class="option-description">${opt.description}</small>`:nothing}</span
               ></lr-checkbox
             >`)}
@@ -57,7 +57,9 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
     >
       <span slot="label" part="label">${label}</span>
       ${description} ${error}
-      ${options.map(opt=>html`<lr-option value=${opt.value} .sub=${opt.description??""}>${opt.label??opt.value}</lr-option>`)}
+      ${options.map(opt=>html`<lr-option value=${opt.value} .sub=${opt.description??""}
+          >${opt.icon==null?nothing:html`<span slot="start" aria-hidden="true" inert>${opt.icon}</span>`}${opt.label??opt.value}</lr-option
+        >`)}
     </lr-select>`}renderCommentControl(k,fieldId,current,hasError){const value=typeof current=="string"?current:"",label=k.label??k.key;return html`<lr-textarea
       id=${fieldId}
       class="control"

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

@@ -238,6 +238,10 @@ export type LyraSelectChangeEvent<Multiple extends boolean=boolean> =LyraSelectE
 *   same unknown-value chip.
 * @cssprop [--lr-select-option-badge-bg=var(--lr-color-brand-quiet)] - Background of the
 *   `[part='option-badge']` "not in catalog" badge.
+* @cssprop [--lr-select-tag-remove-hover-bg=var(--lr-color-brand-quiet)] - Background of a
+*   hovered `[part='tag__remove-button']`. The pressed state mixes from this same token. Scoped
+*   independently of `--lr-select-trigger-hover-bg`/`--lr-select-option-active-bg`, which already
+*   scope the same shared `--lr-color-brand-quiet` token for their own purposes.
 * @cssprop [--tag-max-size=var(--lr-size-12rem)] - Maximum inline size of one selected-value tag.
 * @cssprop [--show-duration=var(--lr-transition-fast)] - Listbox enter-transition timing.
 * @cssprop [--hide-duration=var(--lr-transition-fast)] - Listbox exit-transition timing.

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; --_lr-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-select-trigger-min-height: var(--lr-form-control-height); --_lr-select-font-size: var(--lr-form-control-font-size); --_lr-select-expand-size: var(--lr-size-1-75rem); --_lr-select-gap: var(--lr-space-xs); --_lr-select-radius: var(--lr-form-control-radius); --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-select-tag-font-size: var(--lr-font-size-sm); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([size="2xs"]), :host([size="xs"]) { --_lr-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-select-expand-size: var(--lr-size-1-25rem); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} :host([pill]) { --_lr-select-radius: var(--lr-radius-pill); } :host([filled]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } .control { position: relative; display: grid; } .control > [part="trigger"], .control > [part="tags"] { grid-area: 1 / 1; } [part="trigger"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-select-gap, var(--_lr-select-gap)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-select-trigger-height, var(--lr-select-trigger-min-height, var(--_lr-select-trigger-min-height)) ); box-sizing: border-box; block-size: var(--lr-select-trigger-height, auto); padding: var( --lr-select-trigger-padding, var(--_lr-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-select-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: var(--lr-select-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-select-font-size, var(--_lr-select-font-size)); text-align: start; cursor: pointer; } [part="trigger"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="trigger"]:focus { ${formControlFocusHalo} } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="filled"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="filled-outlined"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); } :host([appearance="plain"]) [part="trigger"] { background: var(--lr-select-trigger-fill, transparent); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="accent"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-brand)); border-color: var(--lr-select-trigger-border-color, transparent); color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="trigger"] .trigger-label[data-placeholder], :host([appearance="accent"]) [part="trigger"] [part="expand-icon"], :host([appearance="accent"]) [part="trigger"] [part="start"], :host([appearance="accent"]) [part="trigger"] [part="end"] { color: inherit; } :host([appearance="accent"]) [part~="tag"] { background: color-mix(in srgb, currentColor 20%, transparent); } :host([appearance="filled"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)) { border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :host([appearance="filled"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="accent"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var( --lr-select-trigger-hover-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="accent"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([open]) [part="trigger"] { border-color: var(--lr-select-open-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part="trigger"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); pointer-events: none; } [part="start"][hidden], [part="end"][hidden] { display: none; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part="tags"] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-space-2xs); min-inline-size: 0; } .control > [part="tags"] { z-index: var(--lr-layer-content); align-self: center; margin-inline-start: var(--lr-form-control-padding-inline); margin-inline-end: calc( var(--lr-select-expand-size, var(--_lr-select-expand-size)) + var(--lr-form-control-padding-inline) ); padding-block: var(--lr-form-control-padding-block); pointer-events: none; } [part~="tag"] { display: inline-flex; align-items: center; box-sizing: border-box; max-inline-size: min(100%, var(--tag-max-size, var(--lr-size-12rem))); padding: var(--lr-select-tag-padding, var(--_lr-select-tag-padding)); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface-raised); font-size: var(--lr-select-tag-font-size, var(--_lr-select-tag-font-size)); line-height: var(--lr-line-height-none); pointer-events: auto; } [part="tag-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part~="tag-overflow"] { color: var(--lr-color-text-quiet); white-space: nowrap; } [part~="tag__remove-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); margin-block: calc(var(--lr-space-2xs) * -1); margin-inline-end: calc(var(--lr-space-xs) * -1); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; } [part~="tag__remove-button"]:hover { color: var(--lr-color-text); background: var(--lr-color-brand-quiet); } [part~="tag__remove-button"]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="tag__remove-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="tag__remove-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="clear-button"] { position: absolute; z-index: var(--lr-layer-content); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: none; color: var(--lr-color-text-quiet); font: inherit; line-height: var(--lr-line-height-none); cursor: pointer; } .control[data-clearable] [part="trigger"] { padding-inline-end: var(--lr-icon-button-size); } [part="clear-button"]:hover { color: var(--lr-color-text); } [part="clear-button"]:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="clear-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="clear-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="expand-icon"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"][hidden] { display: none; } [part="listbox"] { position: absolute; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--hide-duration, var(--lr-transition-fast)), transform var(--hide-duration, var(--lr-transition-fast)), visibility var(--hide-duration, var(--lr-transition-fast)); } :host(:not([sync="width"]):not([sync="both"])) [part="listbox"] { min-inline-size: var(--lr-size-12rem); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); } :host([sync="width"]) [part="listbox"], :host([sync="both"]) [part="listbox"] { max-inline-size: var(--lr-positioner-available-inline-size, 100vw); } :host([hoist]) [part="listbox"] { position: fixed; } :host([open]) [part="listbox"][data-positioned] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--show-duration, var(--lr-transition-fast)), transform var(--show-duration, var(--lr-transition-fast)), visibility var(--show-duration, var(--lr-transition-fast)); } :host(:disabled) [part="listbox"] { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; flex-direction: row; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-select-option-selected-bg, transparent); border-color: var( --lr-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-select-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part="option"]:where(:not([aria-disabled="true"])):hover, [part="option"][data-active] { background: var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)); } [part="option"]:where(:not([aria-disabled="true"])):active { background: color-mix( in oklab, var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="option-dot"] { inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-radius: 50%; flex: 0 0 auto; } [part="option-start"], [part="option-end"] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-inline-size: 40%; overflow: hidden; } [part="option-label"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="option-sub"] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } .trigger-label[data-unknown-value], [part~="tag"][data-unknown-value] [part="tag__content"] { font-style: italic; } [part~="tag"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part~="option"][data-unknown-value] [part="option-label"] { font-style: italic; } [part~="option"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part="option-badge"] { flex: 0 0 auto; margin-inline-start: auto; padding: 0 var(--lr-space-xs); border-radius: var(--lr-radius-pill); background: var(--lr-select-option-badge-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); font-style: normal; } [part="unknown-value"] { margin-inline-start: var(--lr-space-2xs); font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part="option"] { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; } [part="option-label"] { max-inline-size: 100%; overflow-wrap: anywhere; } [part="option-sub"], .group-label { overflow-wrap: anywhere; } .group-label { padding: var(--lr-space-xs) var(--lr-space-s) 0; font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); } [part~="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } `;export{styles};
+import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; --_lr-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-select-trigger-min-height: var(--lr-form-control-height); --_lr-select-font-size: var(--lr-form-control-font-size); --_lr-select-expand-size: var(--lr-size-1-75rem); --_lr-select-gap: var(--lr-space-xs); --_lr-select-radius: var(--lr-form-control-radius); --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-select-tag-font-size: var(--lr-font-size-sm); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([size="2xs"]), :host([size="xs"]) { --_lr-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-select-expand-size: var(--lr-size-1-25rem); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} :host([pill]) { --_lr-select-radius: var(--lr-radius-pill); } :host([filled]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } .control { position: relative; display: grid; } .control > [part="trigger"], .control > [part="tags"] { grid-area: 1 / 1; } [part="trigger"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-select-gap, var(--_lr-select-gap)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-select-trigger-height, var(--lr-select-trigger-min-height, var(--_lr-select-trigger-min-height)) ); box-sizing: border-box; block-size: var(--lr-select-trigger-height, auto); padding: var( --lr-select-trigger-padding, var(--_lr-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-select-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: var(--lr-select-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-select-font-size, var(--_lr-select-font-size)); text-align: start; cursor: pointer; } [part="trigger"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="trigger"]:focus { ${formControlFocusHalo} } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="filled"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="filled-outlined"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); } :host([appearance="plain"]) [part="trigger"] { background: var(--lr-select-trigger-fill, transparent); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="accent"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-brand)); border-color: var(--lr-select-trigger-border-color, transparent); color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="trigger"] .trigger-label[data-placeholder], :host([appearance="accent"]) [part="trigger"] [part="expand-icon"], :host([appearance="accent"]) [part="trigger"] [part="start"], :host([appearance="accent"]) [part="trigger"] [part="end"] { color: inherit; } :host([appearance="accent"]) [part~="tag"] { background: color-mix(in srgb, currentColor 20%, transparent); } :host([appearance="filled"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)) { border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :host([appearance="filled"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="accent"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var( --lr-select-trigger-hover-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="accent"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([open]) [part="trigger"] { border-color: var(--lr-select-open-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part="trigger"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); pointer-events: none; } [part="start"][hidden], [part="end"][hidden] { display: none; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part="tags"] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-space-2xs); min-inline-size: 0; } .control > [part="tags"] { z-index: var(--lr-layer-content); align-self: center; margin-inline-start: var(--lr-form-control-padding-inline); margin-inline-end: calc( var(--lr-select-expand-size, var(--_lr-select-expand-size)) + var(--lr-form-control-padding-inline) ); padding-block: var(--lr-form-control-padding-block); pointer-events: none; } [part~="tag"] { display: inline-flex; align-items: center; box-sizing: border-box; max-inline-size: min(100%, var(--tag-max-size, var(--lr-size-12rem))); padding: var(--lr-select-tag-padding, var(--_lr-select-tag-padding)); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface-raised); font-size: var(--lr-select-tag-font-size, var(--_lr-select-tag-font-size)); line-height: var(--lr-line-height-none); pointer-events: auto; } [part="tag-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part~="tag-overflow"] { color: var(--lr-color-text-quiet); white-space: nowrap; } [part~="tag__remove-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); margin-block: calc(var(--lr-space-2xs) * -1); margin-inline-end: calc(var(--lr-space-xs) * -1); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; } [part~="tag__remove-button"]:hover { color: var(--lr-color-text); background: var(--lr-select-tag-remove-hover-bg, var(--lr-color-brand-quiet)); } [part~="tag__remove-button"]:active { background: color-mix( in oklab, var(--lr-select-tag-remove-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="tag__remove-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="tag__remove-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="clear-button"] { position: absolute; z-index: var(--lr-layer-content); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: none; color: var(--lr-color-text-quiet); font: inherit; line-height: var(--lr-line-height-none); cursor: pointer; } .control[data-clearable] [part="trigger"] { padding-inline-end: var(--lr-icon-button-size); } [part="clear-button"]:hover { color: var(--lr-color-text); } [part="clear-button"]:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="clear-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="clear-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="expand-icon"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"][hidden] { display: none; } [part="listbox"] { position: absolute; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--hide-duration, var(--lr-transition-fast)), transform var(--hide-duration, var(--lr-transition-fast)), visibility var(--hide-duration, var(--lr-transition-fast)); } :host(:not([sync="width"]):not([sync="both"])) [part="listbox"] { min-inline-size: var(--lr-size-12rem); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); } :host([sync="width"]) [part="listbox"], :host([sync="both"]) [part="listbox"] { max-inline-size: var(--lr-positioner-available-inline-size, 100vw); } :host([hoist]) [part="listbox"] { position: fixed; } :host([open]) [part="listbox"][data-positioned] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--show-duration, var(--lr-transition-fast)), transform var(--show-duration, var(--lr-transition-fast)), visibility var(--show-duration, var(--lr-transition-fast)); } :host(:disabled) [part="listbox"] { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; flex-direction: row; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-select-option-selected-bg, transparent); border-color: var( --lr-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-select-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part="option"]:where(:not([aria-disabled="true"])):hover, [part="option"][data-active] { background: var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)); } [part="option"]:where(:not([aria-disabled="true"])):active { background: color-mix( in oklab, var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="option-dot"] { inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-radius: 50%; flex: 0 0 auto; } [part="option-start"], [part="option-end"] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-inline-size: 40%; overflow: hidden; } [part="option-label"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="option-sub"] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } .trigger-label[data-unknown-value], [part~="tag"][data-unknown-value] [part="tag__content"] { font-style: italic; } [part~="tag"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part~="option"][data-unknown-value] [part="option-label"] { font-style: italic; } [part~="option"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part="option-badge"] { flex: 0 0 auto; margin-inline-start: auto; padding: 0 var(--lr-space-xs); border-radius: var(--lr-radius-pill); background: var(--lr-select-option-badge-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); font-style: normal; } [part="unknown-value"] { margin-inline-start: var(--lr-space-2xs); font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part="option"] { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; } [part="option-label"] { max-inline-size: 100%; overflow-wrap: anywhere; } [part="option-sub"], .group-label { overflow-wrap: anywhere; } .group-label { padding: var(--lr-space-xs) var(--lr-space-s) 0; font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); } [part~="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } `;export{styles};

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

@@ -375,7 +375,11 @@ private beginDrag;private trackRect;private onPointerDown;
 *  is otherwise ambiguous. */
 private onBasePointerDown;private onPointerMove;private onPointerUp;
 /** Stop the drag owned by `pointerId`, optionally committing a final lr-change. */
-private endDrag;private teardownDragWindow;private abortActiveDrags;private onHandleFocus;private onHandleBlur;private onSlotChange;private slotsHaveContent;private formatValue;
+private endDrag;private teardownDragWindow;private abortActiveDrags;private onHandleFocus;private onHandleBlur;private onSlotChange;
+/** The one-time connect-time light-DOM sample `connectedCallback()` seeds (directly on a
+*  reconnect, deferred through `seedFirstRenderState()` on a hydrating first connect); ongoing
+*  changes are handled by {@link onSlotChange}. */
+private syncSupportSlotFlags;private slotsHaveContent;private formatValue;
 /** One value, or both handles joined by an en dash. Caller formatting is opt-in;
 * localized numeric data remains the default and nullish-result fallback. */
 private readoutText;

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

@@ -1,9 +1,9 @@
-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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./slider.styles.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10,MAX_MARKER_INTERVALS=100,falseDefaultBooleanConverter={fromAttribute:value=>value!==null&&value!=="false"},HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label";class LyraSliderBase extends LyraElement{}class LyraSlider extends LyraSliderBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart,sliderLabel:LYRA_DEFAULT_sliderLabel}}static get validators(){return[currentValidityValidator("required","disabled","value","min","max","step")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",type:Number,reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},min:{type:Number,noAccessor:!0},max:{type:Number,noAccessor:!0},step:{type:Number,noAccessor:!0},range:{type:Boolean,reflect:!0,noAccessor:!0},minValue:{type:Number,attribute:"min-value",noAccessor:!0},maxValue:{type:Number,attribute:"max-value",noAccessor:!0},size:{reflect:!0}}}captureValueBatch(){return this.pendingValueBatch||(this.pendingValueBatch={value:this._value,min:this._minValue,max:this._maxValue},this.requestUpdate()),this.pendingValueBatch}constructor(){super(),this.size="m",this._value=0,this._defaultValue=0,this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._name=null,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this._hasInteracted=!1,this._min=0,this._max=100,this._step=1,this._range=!1,this._minValue=0,this._maxValue=50,this._minValueDirty=!1,this._maxValueDirty=!1,this.applyingRangeValueAttribute=!1,this._defaultMinValue=0,this._defaultMaxValue=50,this.label="",this.hint="",this.helpText="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.autofocus=!1,this.orientation="horizontal",this.readonly=!1,this.withMarkers=!1,this.withTooltip=!1,this.tooltipPlacement="top",this.tooltipDistance=8,this.tooltip="none",this.showValue=!1,this.valueDisplay="numeric",this.valuePlacement="inline",this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasReferenceSlot=!1,this.drags=new Map,this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.markInteracted()},this.onKeyDown=(handle,e)=>{if(!this.interactive)return;const current=this.valueForHandle(handle),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",bounds=this.reachableBounds(handle),move=next=>{e.preventDefault(),this.assignValueFor(handle,next)&&(this.pendingKeyHandle=handle,this.emitInput(handle))};e.key===forwardKey||e.key==="ArrowUp"?move(this.directionalStep(current,1)):e.key===backwardKey||e.key==="ArrowDown"?move(this.directionalStep(current,-1)):e.key==="PageUp"?move(this.directionalStep(current,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-PAGE_STEP_MULTIPLIER)):e.key==="Home"?move(bounds.min):e.key==="End"&&move(bounds.max)},this.onKeyUp=e=>{if(!this.interactive||!isSliderKey(e.key))return;const handle=this.pendingKeyHandle;handle!==null&&(this.pendingKeyHandle=null,this.emitChange(handle))},this.onPointerDown=(handle,e)=>{!this.interactive||e.button!==0||this.beginDrag(e.pointerId,handle,e.target,this.trackRect(),isRtl(this))},this.onBasePointerDown=e=>{if(!this.interactive||e.button!==0)return;const thumbs=Array.from(this.renderRoot.querySelectorAll('[part~="thumb"]'));if(thumbs.length===0||thumbs.includes(e.target))return;const rect=this.trackRect();if(!rect)return;const rtl=isRtl(this),{lo,hi}=this.domain(),target=finiteInterpolate(lo,hi,this.ratioFromPointer(e,rect,rtl)),handle=this.range?this.nearestHandle(target):"value",thumb=this.handleElement(handle)??thumbs[0];if(!thumb)return;const drag=this.beginDrag(e.pointerId,handle,thumb,rect,rtl);drag&&(this.setValueFor(handle,target,!1)&&(drag.changed=!0),thumb.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(!this.interactive){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const{lo,hi}=this.domain(),value=finiteInterpolate(lo,hi,this.ratioFromPointer(e,drag.rect,drag.rtl));this.setValueFor(drag.handle,value,!1)&&(drag.changed=!0)},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&this.interactive)},this.onSlotChange=event=>{const slot=event.target;(slot.name==="hint"||slot.name==="help-text")&&(this.hasHintSlot=this.slotsHaveContent(["hint","help-text"])),slot.name==="error"&&(this.hasErrorSlot=this.slotsHaveContent(["error"])),slot.name==="label"&&(this.hasLabelSlot=this.slotsHaveContent(["label"])),slot.name==="reference"&&(this.hasReferenceSlot=this.slotsHaveContent(["reference"]))},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)),this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),installInteractionOnInvalid(this,this.markInteracted),this.syncValidityStates()}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const raw=finiteNumber(Number(next),this.defaultNumericValue());this.captureValueBatch().value=raw,this._value=this.clampValue(raw),this.syncFormValue(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next==null?0:finiteNumber(Number(next),0),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",String(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get valueAsNumber(){return this.value}set valueAsNumber(next){this.value=next}get valueAsString(){return String(this.value)}set valueAsString(next){this.value=next}get name(){return this._name}set name(next){const old=this._name;this._name=next||null,this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),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.updateValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}get min(){return this._min}set min(next){this.captureValueBatch();const old=this._min;this._min=finiteNumber(next,0),this.requestUpdate("min",old),this.sanitizeCurrentValue()}get max(){return this._max}set max(next){this.captureValueBatch();const old=this._max;this._max=finiteNumber(next,100),this.requestUpdate("max",old),this.sanitizeCurrentValue()}get step(){return this._step}set step(next){this.captureValueBatch();const old=this._step;this._step=next==null?1:finiteRange(next,0,0),this.requestUpdate("step",old),this.sanitizeCurrentValue()}get range(){return this._range}set range(next){const old=this._range;this._range=!!next,this.requestUpdate("range",old),this.syncFormValue()}get isRange(){return this.range}get minValue(){return this._minValue}set minValue(next){const batch=this.captureValueBatch();batch.min=finiteNumber(next,0),batch.lastRange="min";const old=this._minValue;if(this.applyingRangeValueAttribute||(this._minValueDirty=!0),this._minValue=this.clampValue(finiteNumber(next,0)),this._minValue>this._maxValue){const oldMax=this._maxValue;this._maxValue=this._minValue,this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this.requestUpdate("maxValue",oldMax)}this.syncFormValue(),this.requestUpdate("minValue",old)}get maxValue(){return this._maxValue}set maxValue(next){const batch=this.captureValueBatch();batch.max=finiteNumber(next,50),batch.lastRange="max";const old=this._maxValue;if(this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this._maxValue=this.clampValue(finiteNumber(next,50)),this._maxValue<this._minValue){const oldMin=this._minValue;this._minValue=this._maxValue,this.applyingRangeValueAttribute||(this._minValueDirty=!0),this.requestUpdate("minValue",oldMin)}this.syncFormValue(),this.requestUpdate("maxValue",old)}requestUpdate(name,oldValue,options){name==="readonly"&&this.readonly&&(this.pendingKeyHandle=null,this.abortActiveDrags()),super.requestUpdate(name,oldValue,options)}syncExternalDescription(){const primary=this.isConnected?this.range?this.handleElement("min"):this.firstThumb():null;primary?this.externalDescriptionLease?this.externalDescriptionLease.update(primary):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,primary,"aria-describedby"):(this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0);const secondary=this.isConnected&&this.range?this.handleElement("max"):null;secondary?this.externalDescriptionLeaseMax?this.externalDescriptionLeaseMax.update(secondary):this.externalDescriptionLeaseMax=acquireResolvedAriaRelationship(this,secondary,"aria-describedby"):(this.externalDescriptionLeaseMax?.release(),this.externalDescriptionLeaseMax=void 0)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0,this.externalDescriptionLeaseMax?.release(),this.externalDescriptionLeaseMax=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this._valueDirty?this.sanitizeCurrentValue():this.restoreLiveValueFromDefault(),this._minValueDirty||(this._minValue=this.clampValue(this._defaultMinValue)),this._maxValueDirty||(this._maxValue=this.clampValue(this._defaultMaxValue)),this.sanitizeHandles();const slots=Array.from(this.children??[],child=>child.getAttribute("slot"));this.hasHintSlot=slots.some(slot=>slot==="hint"||slot==="help-text"),this.hasErrorSlot=slots.includes("error"),this.hasLabelSlot=slots.includes("label"),this.hasReferenceSlot=slots.includes("reference"),this.syncFormValue(),this.updateValidity(),this.syncInteractionStates()}willUpdate(changed){if(super.willUpdate(changed),this.pendingValueBatch&&(this.sanitizeCurrentValue(),this.pendingValueBatch=void 0),!changed.has("range")||!this.hasUpdated)return;const active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="thumb"]')){const target=this.range?"min":"value";this.rangeFocusTransfer={origin:active,target},this.focusedHandle=target,this.syncInteractionStates(),this.rangeFocusGeneration++}this.pendingKeyHandle=null,this.abortActiveDrags()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("readonly")&&this.syncValidityStates(),!changed.has("range"))return;const transfer=this.rangeFocusTransfer;if(this.rangeFocusTransfer=void 0,!transfer)return;const generation=this.rangeFocusGeneration;this.scheduleAfterUpdate(()=>{if(generation!==this.rangeFocusGeneration||!this.isConnected||this.effectiveDisabled)return;const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument),focusStayedAtOrigin=internalActive===transfer.origin,originWasRemovedWithoutReplacement=internalActive===null&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body);if(!focusStayedAtOrigin&&!originWasRemovedWithoutReplacement)return;this.handleElement(transfer.target)?.focus()},"slider-range-focus")}firstUpdated(changed){if(super.firstUpdated(changed),!this.autofocus)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const handle=owner.requestAnimationFrame(()=>{this.autofocusFrame?.owner!==owner||this.autofocusFrame.handle!==handle||(this.autofocusFrame=void 0,this.isConnected&&this.ownerDocument.defaultView===owner&&this.autofocus&&this.focus())});this.autofocusFrame={owner,handle}}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}cancelAutofocusFrame(){const autofocusFrame=this.autofocusFrame;this.autofocusFrame=void 0,autofocusFrame&&autofocusFrame.owner.cancelAnimationFrame(autofocusFrame.handle)}attributeChangedCallback(name,old,value){const isRangeValue=name==="min-value"||name==="max-value";isRangeValue&&(this.applyingRangeValueAttribute=!0);try{super.attributeChangedCallback(name,old,value)}finally{isRangeValue&&(this.applyingRangeValueAttribute=!1)}name==="min-value"&&(this._defaultMinValue=value===null?0:finiteNumber(Number(value),0)),name==="max-value"&&(this._defaultMaxValue=value===null?50:finiteNumber(Number(value),50))}formDisabledCallback(fieldsetDisabled){this._fieldsetDisabled=fieldsetDisabled,fieldsetDisabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}formResetCallback(){this.pendingValueBatch={value:this._defaultValue,min:this._defaultMinValue,max:this._defaultMaxValue},this.restoreLiveValueFromDefault(),this._minValue=this._defaultMinValue,this._maxValue=this._defaultMaxValue,this._minValueDirty=!1,this._maxValueDirty=!1,this.sanitizeHandles(),this._hasInteracted=!1,this.syncFormValue(),this.syncValidityStates(),this.requestUpdate()}formStateRestoreCallback(state2,reason){const values=this.readFormDataStrings(state2);if(values){values.length>=2&&(this.minValue=finiteNumber(Number(values[0]),this._defaultMinValue),this.maxValue=finiteNumber(Number(values[1]),this._defaultMaxValue));return}this.value=typeof state2=="string"?state2:this._defaultValue}readFormDataStrings(value){if(value===null||typeof value!="object")return null;const FormDataCtor=this.ownerDocument.defaultView?.FormData;if(!FormDataCtor)return null;try{const iterator=FormDataCtor.prototype.values.call(value),strings=[];for(const entry of iterator)typeof entry=="string"&&strings.push(entry);return strings}catch{return null}}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}updateValidity(){this.validityController.setValidity({}),this.syncValidityStates()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this._hasInteracted,barred:this.barredFromValidation})}syncInteractionStates(){const states=this.internals.states,set=(name,active)=>{active?states.add(name):states.delete(name)};set("disabled",this.effectiveDisabled),set("dragging",this.drags.size>0),set("focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part~="thumb"]')?active.blur():this.firstThumb()?.blur()}stepUp(steps=1){this.stepBy(steps)}stepDown(steps=1){this.stepBy(-steps)}stepBy(steps){if(!this.interactive||finiteRange(this.step,0,0)<=0)return;const count=Math.trunc(finiteNumber(steps,1));if(count===0)return;const handle=this.range&&this.focusedHandle!=="max"?"min":this.focusedHandle??"value";this.assignValueFor(handle,this.directionalStep(this.valueForHandle(handle),count))}directionalStep(current,count){const{lo,hi}=this.domain();if(count===0)return current;const direction=Math.sign(count),magnitude=this.step*Math.abs(count);if(!Number.isFinite(magnitude))return direction>0?hi:lo;const candidate=current+direction*magnitude;return Number.isFinite(candidate)?candidate:direction>0?hi:lo}firstThumb(){return this.renderRoot?.querySelector('[part~="thumb"]')??null}handleElement(handle){const selector={value:'[part~="thumb"]',min:'[part~="thumb-min"]',max:'[part~="thumb-max"]'}[handle];return this.renderRoot?.querySelector(selector)??null}get interactive(){return!this.effectiveDisabled&&!this.matches(":disabled")&&!this.readonly}sanitizeCurrentValue(){this.sanitizeHandles();const old=this._value;this._value=this.clampValue(this.pendingValueBatch?.value??this._value),this._value!==old&&this.requestUpdate("value",old),this.syncFormValue()}sanitizeHandles(){this._minValue=this.clampValue(this.pendingValueBatch?.min??this._minValue),this._maxValue=this.clampValue(this.pendingValueBatch?.max??this._maxValue),this._minValue>this._maxValue&&(this.pendingValueBatch?.lastRange==="max"?this._minValue=this._maxValue:this._maxValue=this._minValue)}syncFormValue(){if(!this.internals)return;if(!this.range){const serialized=String(this.value);this.internals.setFormValue(serialized,serialized),this.updateValidity();return}const FormDataCtor=this.ownerDocument?.defaultView?.FormData;if(!FormDataCtor){this.internals.setFormValue(null),this.updateValidity();return}const state2=new FormDataCtor,stateKey=this.name||"value";if(state2.append(stateKey,String(this.minValue)),state2.append(stateKey,String(this.maxValue)),!this.name)this.internals.setFormValue(null,state2);else{const submission=new FormDataCtor;submission.append(this.name,String(this.minValue)),submission.append(this.name,String(this.maxValue)),this.internals.setFormValue(submission,state2)}this.updateValidity()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}defaultNumericValue(){return this.clampValue(0)}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}clampValue(raw){const{lo,hi}=this.domain();return clampSteppedValue(raw,lo,hi,this.step)}valueForHandle(handle){return handle==="min"?this.minValue:handle==="max"?this.maxValue:this.valueAsNumber}reachableBounds(handle){const{lo,hi}=this.domain();return{min:lo,max:hi}}detailFor(handle){return{value:this.valueForHandle(handle),minValue:this.minValue,maxValue:this.maxValue,handle}}emitInput(handle){dispatchNativeInputEvent(this),this.emit("lr-input",this.detailFor(handle))}emitChange(handle){dispatchNativeEvent(this,"change"),this.emit("lr-change",this.detailFor(handle))}assignValueFor(handle,raw){const previous=this.valueForHandle(handle),stepped=this.clampValue(raw);if(stepped===previous)return!1;if(handle==="min"){if(this._minValueDirty=!0,this._minValue=stepped,this.requestUpdate("minValue",previous),this._minValue>this._maxValue){const previousMax=this._maxValue;this._maxValueDirty=!0,this._maxValue=this._minValue,this.requestUpdate("maxValue",previousMax)}}else if(handle==="max"){if(this._maxValueDirty=!0,this._maxValue=stepped,this.requestUpdate("maxValue",previous),this._maxValue<this._minValue){const previousMin=this._minValue;this._minValueDirty=!0,this._minValue=this._maxValue,this.requestUpdate("minValue",previousMin)}}else this.value=stepped;return handle!=="value"&&this.syncFormValue(),!0}setValueFor(handle,raw,commit){return this.assignValueFor(handle,raw)?(this.emitInput(handle),commit&&this.emitChange(handle),!0):!1}ratioFromPointer(e,rect,rtl){if(this.orientation==="vertical"){const raw2=rect.height===0?0:(e.clientY-rect.top)/rect.height;return Math.min(1,Math.max(0,1-raw2))}const raw=rect.width===0?0:(e.clientX-rect.left)/rect.width;return Math.min(1,Math.max(0,rtl?1-raw:raw))}nearestHandle(target){const toMin=Math.abs(target-this.minValue),toMax=Math.abs(target-this.maxValue);return toMin<toMax?"min":toMax<toMin?"max":target<this.minValue?"min":"max"}beginDrag(pointerId,handle,captureTarget,rect,rtl){const dragWindow=captureTarget.ownerDocument.defaultView;if(!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture(pointerId);const drag={handle,changed:!1,captureTarget,rect,rtl};return this.drags.set(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)),this.syncInteractionStates(),this.requestUpdate(),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag!==void 0&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(drag.handle),this.drags.size===0&&this.teardownDragWindow(),this.syncInteractionStates(),this.requestUpdate())}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)}abortActiveDrags(){const activeDrags=[...this.drags.entries()];if(activeDrags.length!==0){this.drags.clear(),this.teardownDragWindow();for(const[pointerId,drag]of activeDrags)try{drag.captureTarget.hasPointerCapture(pointerId)&&drag.captureTarget.releasePointerCapture(pointerId)}catch{}this.syncInteractionStates()}}onHandleFocus(handle,event){this.focusedHandle!==handle&&(this.focusedHandle=handle,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}onHandleBlur(handle,event){this.pendingKeyHandle===handle&&(this.pendingKeyHandle=null,this.interactive&&this.isConnected&&this.emitChange(handle)),this.focusedHandle===handle&&(this.focusedHandle=null,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}slotsHaveContent(names){return names.some(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)?.assignedNodes({flatten:!0}).some(node=>node.nodeType===1||!!node.textContent?.trim())??!1)}formatValue(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}).format(value)}readoutText(){const format=(value,handle)=>{if(this.valueDisplay==="formatted"){const text=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?.(value);if(text!=null)return text}return this.formatValue(value)};return this.range?`${format(this.minValue,"min")}–${format(this.maxValue,"max")}`:format(this.valueAsNumber,"value")}resolvedLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label||this.localize("sliderLabel")}offsetStyle(percent){return this.orientation==="vertical"?`inset-block-end:${percent}%`:`inset-inline-start:${percent}%`}markerPercents(){if(!this.withMarkers)return[];const step=finiteRange(this.step,0,0);if(step<=0)return[];const{lo,hi}=this.domain(),span=hi-lo;if(!Number.isFinite(span)||span<=0)return[];const ratio=span/step,intervals=Math.floor(ratio+Number.EPSILON*Math.max(1,Math.abs(ratio))*4);return!Number.isFinite(intervals)||intervals<1||intervals>MAX_MARKER_INTERVALS?[]:Array.from({length:intervals+1},(_unused,index)=>{const value=lo+index*step;return finiteRatio(value,lo,hi)*100})}renderHandle(handle,describedBy,labelledBy){const value=this.valueForHandle(handle),bounds=this.reachableBounds(handle),percent=this.percentOf(value),numeric=this.formatValue(value),valueText=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?this.tooltipFormatter(value):numeric,partName={value:"thumb",min:"thumb thumb-min",max:"thumb thumb-max"}[handle],handleLabel={value:this.resolvedLabel(),min:this.localize("rangeStart"),max:this.localize("rangeEnd")}[handle],tooltipPart=this.focusedHandle===handle||Array.from(this.drags.values()).some(drag=>drag.handle===handle)?"tooltip tooltip__tooltip tooltip-visible":"tooltip tooltip__tooltip",showTooltip=this.withTooltip||this.tooltip!=="none",placement=this.tooltip==="none"?this.tooltipPlacement:this.tooltip,tooltipStyle=`${this.offsetStyle(percent)};--lr-slider-tooltip-distance:${finiteRange(this.tooltipDistance,8,0)}`;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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{literalSetConverter}from"../../../internal/converters.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./slider.styles.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10,MAX_MARKER_INTERVALS=100,falseDefaultBooleanConverter={fromAttribute:value=>value!==null&&value!=="false"},HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label",SLIDER_ORIENTATION=literalSetConverter(["horizontal","vertical"],"horizontal");class LyraSliderBase extends LyraElement{}class LyraSlider extends LyraSliderBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart,sliderLabel:LYRA_DEFAULT_sliderLabel}}static get validators(){return[currentValidityValidator("required","disabled","value","min","max","step")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",type:Number,reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},min:{type:Number,noAccessor:!0},max:{type:Number,noAccessor:!0},step:{type:Number,noAccessor:!0},range:{type:Boolean,reflect:!0,noAccessor:!0},minValue:{type:Number,attribute:"min-value",noAccessor:!0},maxValue:{type:Number,attribute:"max-value",noAccessor:!0},size:{reflect:!0}}}captureValueBatch(){return this.pendingValueBatch||(this.pendingValueBatch={value:this._value,min:this._minValue,max:this._maxValue},this.requestUpdate()),this.pendingValueBatch}constructor(){super(),this.size="m",this._value=0,this._defaultValue=0,this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._name=null,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this._hasInteracted=!1,this._min=0,this._max=100,this._step=1,this._range=!1,this._minValue=0,this._maxValue=50,this._minValueDirty=!1,this._maxValueDirty=!1,this.applyingRangeValueAttribute=!1,this._defaultMinValue=0,this._defaultMaxValue=50,this.label="",this.hint="",this.helpText="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.autofocus=!1,this.orientation="horizontal",this.readonly=!1,this.withMarkers=!1,this.withTooltip=!1,this.tooltipPlacement="top",this.tooltipDistance=8,this.tooltip="none",this.showValue=!1,this.valueDisplay="numeric",this.valuePlacement="inline",this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasReferenceSlot=!1,this.drags=new Map,this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.markInteracted()},this.onKeyDown=(handle,e)=>{if(!this.interactive)return;const current=this.valueForHandle(handle),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",bounds=this.reachableBounds(handle),move=next=>{e.preventDefault(),this.assignValueFor(handle,next)&&(this.pendingKeyHandle=handle,this.emitInput(handle))};e.key===forwardKey||e.key==="ArrowUp"?move(this.directionalStep(current,1)):e.key===backwardKey||e.key==="ArrowDown"?move(this.directionalStep(current,-1)):e.key==="PageUp"?move(this.directionalStep(current,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-PAGE_STEP_MULTIPLIER)):e.key==="Home"?move(bounds.min):e.key==="End"&&move(bounds.max)},this.onKeyUp=e=>{if(!this.interactive||!isSliderKey(e.key))return;const handle=this.pendingKeyHandle;handle!==null&&(this.pendingKeyHandle=null,this.emitChange(handle))},this.onPointerDown=(handle,e)=>{!this.interactive||e.button!==0||this.beginDrag(e.pointerId,handle,e.target,this.trackRect(),isRtl(this))},this.onBasePointerDown=e=>{if(!this.interactive||e.button!==0)return;const thumbs=Array.from(this.renderRoot.querySelectorAll('[part~="thumb"]'));if(thumbs.length===0||thumbs.includes(e.target))return;const rect=this.trackRect();if(!rect)return;const rtl=isRtl(this),{lo,hi}=this.domain(),target=finiteInterpolate(lo,hi,this.ratioFromPointer(e,rect,rtl)),handle=this.range?this.nearestHandle(target):"value",thumb=this.handleElement(handle)??thumbs[0];if(!thumb)return;const drag=this.beginDrag(e.pointerId,handle,thumb,rect,rtl);drag&&(this.setValueFor(handle,target,!1)&&(drag.changed=!0),thumb.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(!this.interactive){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const{lo,hi}=this.domain(),value=finiteInterpolate(lo,hi,this.ratioFromPointer(e,drag.rect,drag.rtl));this.setValueFor(drag.handle,value,!1)&&(drag.changed=!0)},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&this.interactive)},this.onSlotChange=event=>{const slot=event.target;(slot.name==="hint"||slot.name==="help-text")&&(this.hasHintSlot=this.slotsHaveContent(["hint","help-text"])),slot.name==="error"&&(this.hasErrorSlot=this.slotsHaveContent(["error"])),slot.name==="label"&&(this.hasLabelSlot=this.slotsHaveContent(["label"])),slot.name==="reference"&&(this.hasReferenceSlot=this.slotsHaveContent(["reference"]))},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)),this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),installInteractionOnInvalid(this,this.markInteracted),this.syncValidityStates()}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const raw=finiteNumber(Number(next),this.defaultNumericValue());this.captureValueBatch().value=raw,this._value=this.clampValue(raw),this.syncFormValue(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next==null?0:finiteNumber(Number(next),0),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",String(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get valueAsNumber(){return this.value}set valueAsNumber(next){this.value=next}get valueAsString(){return String(this.value)}set valueAsString(next){this.value=next}get name(){return this._name}set name(next){const old=this._name;this._name=next||null,this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),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.updateValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}get min(){return this._min}set min(next){this.captureValueBatch();const old=this._min;this._min=finiteNumber(next,0),this.requestUpdate("min",old),this.sanitizeCurrentValue()}get max(){return this._max}set max(next){this.captureValueBatch();const old=this._max;this._max=finiteNumber(next,100),this.requestUpdate("max",old),this.sanitizeCurrentValue()}get step(){return this._step}set step(next){this.captureValueBatch();const old=this._step;this._step=next==null?1:finiteRange(next,0,0),this.requestUpdate("step",old),this.sanitizeCurrentValue()}get range(){return this._range}set range(next){const old=this._range;this._range=!!next,this.requestUpdate("range",old),this.syncFormValue()}get isRange(){return this.range}get minValue(){return this._minValue}set minValue(next){const batch=this.captureValueBatch();batch.min=finiteNumber(next,0),batch.lastRange="min";const old=this._minValue;if(this.applyingRangeValueAttribute||(this._minValueDirty=!0),this._minValue=this.clampValue(finiteNumber(next,0)),this._minValue>this._maxValue){const oldMax=this._maxValue;this._maxValue=this._minValue,this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this.requestUpdate("maxValue",oldMax)}this.syncFormValue(),this.requestUpdate("minValue",old)}get maxValue(){return this._maxValue}set maxValue(next){const batch=this.captureValueBatch();batch.max=finiteNumber(next,50),batch.lastRange="max";const old=this._maxValue;if(this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this._maxValue=this.clampValue(finiteNumber(next,50)),this._maxValue<this._minValue){const oldMin=this._minValue;this._minValue=this._maxValue,this.applyingRangeValueAttribute||(this._minValueDirty=!0),this.requestUpdate("minValue",oldMin)}this.syncFormValue(),this.requestUpdate("maxValue",old)}requestUpdate(name,oldValue,options){name==="readonly"&&this.readonly&&(this.pendingKeyHandle=null,this.abortActiveDrags()),super.requestUpdate(name,oldValue,options)}syncExternalDescription(){const primary=this.isConnected?this.range?this.handleElement("min"):this.firstThumb():null;primary?this.externalDescriptionLease?this.externalDescriptionLease.update(primary):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,primary,"aria-describedby"):(this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0);const secondary=this.isConnected&&this.range?this.handleElement("max"):null;secondary?this.externalDescriptionLeaseMax?this.externalDescriptionLeaseMax.update(secondary):this.externalDescriptionLeaseMax=acquireResolvedAriaRelationship(this,secondary,"aria-describedby"):(this.externalDescriptionLeaseMax?.release(),this.externalDescriptionLeaseMax=void 0)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0,this.externalDescriptionLeaseMax?.release(),this.externalDescriptionLeaseMax=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this._valueDirty?this.sanitizeCurrentValue():this.restoreLiveValueFromDefault(),this._minValueDirty||(this._minValue=this.clampValue(this._defaultMinValue)),this._maxValueDirty||(this._maxValue=this.clampValue(this._defaultMaxValue)),this.sanitizeHandles(),this.hasUpdated?this.syncSupportSlotFlags():this.seedFirstRenderState(()=>this.syncSupportSlotFlags()),this.syncFormValue(),this.updateValidity(),this.syncInteractionStates()}willUpdate(changed){if(super.willUpdate(changed),this.pendingValueBatch&&(this.sanitizeCurrentValue(),this.pendingValueBatch=void 0),!changed.has("range")||!this.hasUpdated)return;const active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="thumb"]')){const target=this.range?"min":"value";this.rangeFocusTransfer={origin:active,target},this.focusedHandle=target,this.syncInteractionStates(),this.rangeFocusGeneration++}this.pendingKeyHandle=null,this.abortActiveDrags()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("readonly")&&this.syncValidityStates(),!changed.has("range"))return;const transfer=this.rangeFocusTransfer;if(this.rangeFocusTransfer=void 0,!transfer)return;const generation=this.rangeFocusGeneration;this.scheduleAfterUpdate(()=>{if(generation!==this.rangeFocusGeneration||!this.isConnected||this.effectiveDisabled)return;const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument),focusStayedAtOrigin=internalActive===transfer.origin,originWasRemovedWithoutReplacement=internalActive===null&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body);if(!focusStayedAtOrigin&&!originWasRemovedWithoutReplacement)return;this.handleElement(transfer.target)?.focus()},"slider-range-focus")}firstUpdated(changed){if(super.firstUpdated(changed),!this.autofocus)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const handle=owner.requestAnimationFrame(()=>{this.autofocusFrame?.owner!==owner||this.autofocusFrame.handle!==handle||(this.autofocusFrame=void 0,this.isConnected&&this.ownerDocument.defaultView===owner&&this.autofocus&&this.focus())});this.autofocusFrame={owner,handle}}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}cancelAutofocusFrame(){const autofocusFrame=this.autofocusFrame;this.autofocusFrame=void 0,autofocusFrame&&autofocusFrame.owner.cancelAnimationFrame(autofocusFrame.handle)}attributeChangedCallback(name,old,value){const isRangeValue=name==="min-value"||name==="max-value";isRangeValue&&(this.applyingRangeValueAttribute=!0);try{super.attributeChangedCallback(name,old,value)}finally{isRangeValue&&(this.applyingRangeValueAttribute=!1)}name==="min-value"&&(this._defaultMinValue=value===null?0:finiteNumber(Number(value),0)),name==="max-value"&&(this._defaultMaxValue=value===null?50:finiteNumber(Number(value),50))}formDisabledCallback(fieldsetDisabled){this._fieldsetDisabled=fieldsetDisabled,fieldsetDisabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}formResetCallback(){this.pendingValueBatch={value:this._defaultValue,min:this._defaultMinValue,max:this._defaultMaxValue},this.restoreLiveValueFromDefault(),this._minValue=this._defaultMinValue,this._maxValue=this._defaultMaxValue,this._minValueDirty=!1,this._maxValueDirty=!1,this.sanitizeHandles(),this._hasInteracted=!1,this.syncFormValue(),this.syncValidityStates(),this.requestUpdate()}formStateRestoreCallback(state2,reason){const values=this.readFormDataStrings(state2);if(values){values.length>=2&&(this.minValue=finiteNumber(Number(values[0]),this._defaultMinValue),this.maxValue=finiteNumber(Number(values[1]),this._defaultMaxValue));return}this.value=typeof state2=="string"?state2:this._defaultValue}readFormDataStrings(value){if(value===null||typeof value!="object")return null;const FormDataCtor=this.ownerDocument.defaultView?.FormData;if(!FormDataCtor)return null;try{const iterator=FormDataCtor.prototype.values.call(value),strings=[];for(const entry of iterator)typeof entry=="string"&&strings.push(entry);return strings}catch{return null}}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}updateValidity(){this.validityController.setValidity({}),this.syncValidityStates()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this._hasInteracted,barred:this.barredFromValidation})}syncInteractionStates(){const states=this.internals.states,set=(name,active)=>{active?states.add(name):states.delete(name)};set("disabled",this.effectiveDisabled),set("dragging",this.drags.size>0),set("focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part~="thumb"]')?active.blur():this.firstThumb()?.blur()}stepUp(steps=1){this.stepBy(steps)}stepDown(steps=1){this.stepBy(-steps)}stepBy(steps){if(!this.interactive||finiteRange(this.step,0,0)<=0)return;const count=Math.trunc(finiteNumber(steps,1));if(count===0)return;const handle=this.range&&this.focusedHandle!=="max"?"min":this.focusedHandle??"value";this.assignValueFor(handle,this.directionalStep(this.valueForHandle(handle),count))}directionalStep(current,count){const{lo,hi}=this.domain();if(count===0)return current;const direction=Math.sign(count),magnitude=this.step*Math.abs(count);if(!Number.isFinite(magnitude))return direction>0?hi:lo;const candidate=current+direction*magnitude;return Number.isFinite(candidate)?candidate:direction>0?hi:lo}firstThumb(){return this.renderRoot?.querySelector('[part~="thumb"]')??null}handleElement(handle){const selector={value:'[part~="thumb"]',min:'[part~="thumb-min"]',max:'[part~="thumb-max"]'}[handle];return this.renderRoot?.querySelector(selector)??null}get interactive(){return!this.effectiveDisabled&&!this.matches(":disabled")&&!this.readonly}sanitizeCurrentValue(){this.sanitizeHandles();const old=this._value;this._value=this.clampValue(this.pendingValueBatch?.value??this._value),this._value!==old&&this.requestUpdate("value",old),this.syncFormValue()}sanitizeHandles(){this._minValue=this.clampValue(this.pendingValueBatch?.min??this._minValue),this._maxValue=this.clampValue(this.pendingValueBatch?.max??this._maxValue),this._minValue>this._maxValue&&(this.pendingValueBatch?.lastRange==="max"?this._minValue=this._maxValue:this._maxValue=this._minValue)}syncFormValue(){if(!this.internals)return;if(!this.range){const serialized=String(this.value);this.internals.setFormValue(serialized,serialized),this.updateValidity();return}const FormDataCtor=this.ownerDocument?.defaultView?.FormData;if(!FormDataCtor){this.internals.setFormValue(null),this.updateValidity();return}const state2=new FormDataCtor,stateKey=this.name||"value";if(state2.append(stateKey,String(this.minValue)),state2.append(stateKey,String(this.maxValue)),!this.name)this.internals.setFormValue(null,state2);else{const submission=new FormDataCtor;submission.append(this.name,String(this.minValue)),submission.append(this.name,String(this.maxValue)),this.internals.setFormValue(submission,state2)}this.updateValidity()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}defaultNumericValue(){return this.clampValue(0)}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}clampValue(raw){const{lo,hi}=this.domain();return clampSteppedValue(raw,lo,hi,this.step)}valueForHandle(handle){return handle==="min"?this.minValue:handle==="max"?this.maxValue:this.valueAsNumber}reachableBounds(handle){const{lo,hi}=this.domain();return{min:lo,max:hi}}detailFor(handle){return{value:this.valueForHandle(handle),minValue:this.minValue,maxValue:this.maxValue,handle}}emitInput(handle){dispatchNativeInputEvent(this),this.emit("lr-input",this.detailFor(handle))}emitChange(handle){dispatchNativeEvent(this,"change"),this.emit("lr-change",this.detailFor(handle))}assignValueFor(handle,raw){const previous=this.valueForHandle(handle),stepped=this.clampValue(raw);if(stepped===previous)return!1;if(handle==="min"){if(this._minValueDirty=!0,this._minValue=stepped,this.requestUpdate("minValue",previous),this._minValue>this._maxValue){const previousMax=this._maxValue;this._maxValueDirty=!0,this._maxValue=this._minValue,this.requestUpdate("maxValue",previousMax)}}else if(handle==="max"){if(this._maxValueDirty=!0,this._maxValue=stepped,this.requestUpdate("maxValue",previous),this._maxValue<this._minValue){const previousMin=this._minValue;this._minValueDirty=!0,this._minValue=this._maxValue,this.requestUpdate("minValue",previousMin)}}else this.value=stepped;return handle!=="value"&&this.syncFormValue(),!0}setValueFor(handle,raw,commit){return this.assignValueFor(handle,raw)?(this.emitInput(handle),commit&&this.emitChange(handle),!0):!1}ratioFromPointer(e,rect,rtl){if(this.orientation==="vertical"){const raw2=rect.height===0?0:(e.clientY-rect.top)/rect.height;return Math.min(1,Math.max(0,1-raw2))}const raw=rect.width===0?0:(e.clientX-rect.left)/rect.width;return Math.min(1,Math.max(0,rtl?1-raw:raw))}nearestHandle(target){const toMin=Math.abs(target-this.minValue),toMax=Math.abs(target-this.maxValue);return toMin<toMax?"min":toMax<toMin?"max":target<this.minValue?"min":"max"}beginDrag(pointerId,handle,captureTarget,rect,rtl){const dragWindow=captureTarget.ownerDocument.defaultView;if(!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture(pointerId);const drag={handle,changed:!1,captureTarget,rect,rtl};return this.drags.set(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)),this.syncInteractionStates(),this.requestUpdate(),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag!==void 0&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(drag.handle),this.drags.size===0&&this.teardownDragWindow(),this.syncInteractionStates(),this.requestUpdate())}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)}abortActiveDrags(){const activeDrags=[...this.drags.entries()];if(activeDrags.length!==0){this.drags.clear(),this.teardownDragWindow();for(const[pointerId,drag]of activeDrags)try{drag.captureTarget.hasPointerCapture(pointerId)&&drag.captureTarget.releasePointerCapture(pointerId)}catch{}this.syncInteractionStates()}}onHandleFocus(handle,event){this.focusedHandle!==handle&&(this.focusedHandle=handle,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}onHandleBlur(handle,event){this.pendingKeyHandle===handle&&(this.pendingKeyHandle=null,this.interactive&&this.isConnected&&this.emitChange(handle)),this.focusedHandle===handle&&(this.focusedHandle=null,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}syncSupportSlotFlags(){const slots=Array.from(this.children??[],child=>child.getAttribute("slot"));this.hasHintSlot=slots.some(slot=>slot==="hint"||slot==="help-text"),this.hasErrorSlot=slots.includes("error"),this.hasLabelSlot=slots.includes("label"),this.hasReferenceSlot=slots.includes("reference")}slotsHaveContent(names){return names.some(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)?.assignedNodes({flatten:!0}).some(node=>node.nodeType===1||!!node.textContent?.trim())??!1)}formatValue(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}).format(value)}readoutText(){const format=(value,handle)=>{if(this.valueDisplay==="formatted"){const text=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?.(value);if(text!=null)return text}return this.formatValue(value)};return this.range?`${format(this.minValue,"min")}–${format(this.maxValue,"max")}`:format(this.valueAsNumber,"value")}resolvedLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label||this.localize("sliderLabel")}offsetStyle(percent){return this.orientation==="vertical"?`inset-block-end:${percent}%`:`inset-inline-start:${percent}%`}markerPercents(){if(!this.withMarkers)return[];const step=finiteRange(this.step,0,0);if(step<=0)return[];const{lo,hi}=this.domain(),span=hi-lo;if(!Number.isFinite(span)||span<=0)return[];const ratio=span/step,intervals=Math.floor(ratio+Number.EPSILON*Math.max(1,Math.abs(ratio))*4);return!Number.isFinite(intervals)||intervals<1||intervals>MAX_MARKER_INTERVALS?[]:Array.from({length:intervals+1},(_unused,index)=>{const value=lo+index*step;return finiteRatio(value,lo,hi)*100})}renderHandle(handle,describedBy,labelledBy){const value=this.valueForHandle(handle),bounds=this.reachableBounds(handle),percent=this.percentOf(value),ariaOrientation=SLIDER_ORIENTATION.normalize(this.orientation),numeric=this.formatValue(value),valueText=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?this.tooltipFormatter(value):numeric,partName={value:"thumb",min:"thumb thumb-min",max:"thumb thumb-max"}[handle],handleLabel={value:this.resolvedLabel(),min:this.localize("rangeStart"),max:this.localize("rangeEnd")}[handle],tooltipPart=this.focusedHandle===handle||Array.from(this.drags.values()).some(drag=>drag.handle===handle)?"tooltip tooltip__tooltip tooltip-visible":"tooltip tooltip__tooltip",showTooltip=this.withTooltip||this.tooltip!=="none",placement=this.tooltip==="none"?this.tooltipPlacement:this.tooltip,tooltipStyle=`${this.offsetStyle(percent)};--lr-slider-tooltip-distance:${finiteRange(this.tooltipDistance,8,0)}`;return html`
       <div
         part=${partName}
         role="slider"
         tabindex=${this.effectiveDisabled?"-1":"0"}
-        aria-orientation=${this.orientation}
+        aria-orientation=${ariaOrientation}
         aria-valuemin=${bounds.min}
         aria-valuemax=${bounds.max}
         aria-valuenow=${value}
@@ -60,4 +60,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ${this.hint||this.helpText}<slot name="hint" @slotchange=${this.onSlotChange}></slot
         ><slot name="help-text" @slotchange=${this.onSlotChange}></slot>
       </div>
-    `}}__decorate([property()],LyraSlider.prototype,"label",void 0),__decorate([property()],LyraSlider.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSlider.prototype,"helpText",void 0),__decorate([property({attribute:"error-text"})],LyraSlider.prototype,"errorText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraSlider.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSlider.prototype,"withHint",void 0),__decorate([property({type:Boolean})],LyraSlider.prototype,"autofocus",void 0),__decorate([property({type:Number,attribute:"indicator-offset"})],LyraSlider.prototype,"indicatorOffset",void 0),__decorate([property({reflect:!0})],LyraSlider.prototype,"orientation",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSlider.prototype,"readonly",void 0),__decorate([property({type:Boolean,attribute:"with-markers"})],LyraSlider.prototype,"withMarkers",void 0),__decorate([property({type:Boolean,attribute:"with-tooltip"})],LyraSlider.prototype,"withTooltip",void 0),__decorate([property({reflect:!0,attribute:"tooltip-placement"})],LyraSlider.prototype,"tooltipPlacement",void 0),__decorate([property({type:Number,attribute:"tooltip-distance"})],LyraSlider.prototype,"tooltipDistance",void 0),__decorate([property()],LyraSlider.prototype,"tooltip",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"valueFormatter",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"tooltipFormatter",void 0),__decorate([property({type:Boolean,attribute:"show-value",converter:falseDefaultBooleanConverter})],LyraSlider.prototype,"showValue",void 0),__decorate([property({attribute:"value-display"})],LyraSlider.prototype,"valueDisplay",void 0),__decorate([property({attribute:"value-placement"})],LyraSlider.prototype,"valuePlacement",void 0),__decorate([state()],LyraSlider.prototype,"hasHintSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasReferenceSlot",void 0);export{LyraSlider};
+    `}}__decorate([property()],LyraSlider.prototype,"label",void 0),__decorate([property()],LyraSlider.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSlider.prototype,"helpText",void 0),__decorate([property({attribute:"error-text"})],LyraSlider.prototype,"errorText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraSlider.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSlider.prototype,"withHint",void 0),__decorate([property({type:Boolean})],LyraSlider.prototype,"autofocus",void 0),__decorate([property({type:Number,attribute:"indicator-offset"})],LyraSlider.prototype,"indicatorOffset",void 0),__decorate([property({reflect:!0,converter:SLIDER_ORIENTATION})],LyraSlider.prototype,"orientation",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSlider.prototype,"readonly",void 0),__decorate([property({type:Boolean,attribute:"with-markers"})],LyraSlider.prototype,"withMarkers",void 0),__decorate([property({type:Boolean,attribute:"with-tooltip"})],LyraSlider.prototype,"withTooltip",void 0),__decorate([property({reflect:!0,attribute:"tooltip-placement"})],LyraSlider.prototype,"tooltipPlacement",void 0),__decorate([property({type:Number,attribute:"tooltip-distance"})],LyraSlider.prototype,"tooltipDistance",void 0),__decorate([property()],LyraSlider.prototype,"tooltip",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"valueFormatter",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"tooltipFormatter",void 0),__decorate([property({type:Boolean,attribute:"show-value",converter:falseDefaultBooleanConverter})],LyraSlider.prototype,"showValue",void 0),__decorate([property({attribute:"value-display"})],LyraSlider.prototype,"valueDisplay",void 0),__decorate([property({attribute:"value-placement"})],LyraSlider.prototype,"valuePlacement",void 0),__decorate([state()],LyraSlider.prototype,"hasHintSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasReferenceSlot",void 0);export{LyraSlider};

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

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraSwitchEventMap{input:InputEvent;change:Event;'lr-input':CustomEvent<{checked:boolean;}>;'lr-change':CustomEvent<{checked:boolean;}>;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent<null>;'lr-switch-toggle-request':CustomEvent<{checked:boolean;}>;}
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraSwitchEventMap{input:InputEvent;change:Event;'lr-input':CustomEvent<{checked:boolean;value:string;}>;'lr-change':CustomEvent<{checked:boolean;value:string;}>;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent<null>;'lr-switch-toggle-request':CustomEvent<{checked:boolean;value:string;}>;}
 /**
 * `<lr-switch>` — a boolean toggle-switch form control. Structurally the
 * same idea as a checkbox (form-associated via `ElementInternals`, click and
@@ -34,17 +34,18 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @slot help-text - Shoelace alias for `hint`.
 * @slot error - Custom error content.
 * @event {InputEvent} input - The user toggled the switch; bubbling and composed like a native form event.
-* @event lr-input - Prefixed compatibility alias for `input`; `detail: { checked }`.
+* @event lr-input - Prefixed compatibility alias for `input`; `detail: { checked, value }`.
 * @event {Event} change - Fired immediately after `input` for the same user toggle, matching the native
 * checkbox/radio contract a form library expects from a boolean control.
 * @event lr-change - Compatibility alias fired after `input` and `change` (click, Space, logical
 * ArrowLeft/ArrowRight, or
-* the programmatic `click()` activation path). `detail: { checked }`. Not fired for a plain
+* the programmatic `click()` activation path). `detail: { checked, value }`. Not fired for a plain
 * `.checked` property assignment, `form.reset()`, session-state restoration, or a user toggle a
 * listener refused through `lr-switch-toggle-request`.
 * @event lr-switch-toggle-request - A user toggle (click, Space, the logical arrow keys, or the
-* programmatic `click()` activation path) is about to change `checked`; `detail: { checked }`
-* carries the state the control *would* take, and `checked` itself still holds the old value while
+* programmatic `click()` activation path) is about to change `checked`; `detail: { checked, value }`
+* carries the state the control *would* take (`value` is the current `.value`, unaffected by the
+* toggle), and `checked` itself still holds the old value while
 * this dispatches. Cancelable: calling `preventDefault()` keeps the current state, so the switch
 * never slides at all rather than sliding and snapping back, and none of
 * `input`/`lr-input`/`change`/`lr-change` fire. A listener may instead resolve the request by

package/dist/components/forms/switch/switch.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{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,state}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{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./switch.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_switchRequired}from"../../../internal/default-strings.generated.js";class LyraSwitch extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,switchRequired:LYRA_DEFAULT_switchRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.formAssociated=!0}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},checked:{attribute:!1,noAccessor:!0},defaultChecked:{attribute:"checked",type:Boolean,reflect:!0,useDefault:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},value:{reflect:!0,noAccessor:!0}}}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get checked(){return this._checked}set checked(next){const old=this._checked;this.settingDefaultChecked||(this._checkedDirty=!0),this._checked=!!next,markVetoGuardWrite(this.toggleGuard),this.syncFormState(),this.requestUpdate("checked",old)}get defaultChecked(){return this._defaultChecked}set defaultChecked(next){if(this.reflectingDefaultChecked)return;const old=this._defaultChecked;this._defaultChecked=!!next,this.reflectingDefaultChecked=!0;try{this.toggleAttribute("checked",this._defaultChecked)}finally{this.reflectingDefaultChecked=!1}this._checkedDirty||this.restoreCheckedFromDefault(),this.requestUpdate("defaultChecked",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.updateValidity(),this.requestUpdate("disabled",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.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this._value}set value(next){const old=this._value;this._value=next??"on",next==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==this._value&&this.setAttribute("value",this._value),this.syncFormState(),this.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.withHint=!1,this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasHelpTextSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.hasInteracted=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._name="",this._checked=!1,this._disabled=!1,this._required=!1,this._value="on",this.toggleGuard=new VetoWriteGuard,this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onClick=event=>{const owner=this[VALIDITY_ANCHOR]();for(const target of event.composedPath()){if(target===event.currentTarget)break;if(target&&typeof target=="object"&&target.nodeType===1&&target!==owner&&isActionableElement(target))return}this.setFromUser(!this.checked)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onKeyDown=e=>{if(!this.liveDisabled&&!e.repeat){if(e.key===" "||e.key==="Spacebar"){e.preventDefault(),this.setFromUser(!this.checked);return}if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();const turnsOn=this.effectiveDirection==="rtl"?e.key==="ArrowLeft":e.key==="ArrowRight";this.setFromUser(turnsOn)}}},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onHintSlotChange=()=>{this.hasHintSlot=this.hasLightDomChildWithSlot("hint")},this.onHelpTextSlotChange=()=>{this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text")},this.onErrorSlotChange=()=>{this.hasErrorSlot=this.hasLightDomChildWithSlot("error")},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormState()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector(".switch-owner")??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.liveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}syncExternalDescription(){if(!this.isConnected)return;const target=this[VALIDITY_ANCHOR]();target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}updated(changed){super.updated(changed),this.syncExternalDescription()}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeHasLabelSlot()}):void 0,this.addEventListener("slotchange",this.onLabelSlotChange),this.bindLabelObserverTargets(),this.hasUpdated?this.recomputeLightDomSlotState():this.seedFirstRenderState(()=>this.recomputeLightDomSlotState())}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("switchRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){this.internals.setFormValue(this.checked?this.value:null,this.checked?"checked":"unchecked"),this.updateValidity()}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this.restoreCheckedFromDefault(),this.reflectValidityStates()}formStateRestoreCallback(state2,reason){this.checked=state2==="checked"}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.requestUpdate()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}setFromUser(next){this.liveDisabled||this.checked!==next&&requestThenCommit({requestDetail:{checked:next},emitRequest:(detail,init)=>this.emit("lr-switch-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.hasInteracted=!0,this.checked=next,dispatchNativeInputEvent(this),this.emit("lr-input",{checked:this.checked}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked})}})}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}observeLabelNode(node){if(this.labelObserver){if(node.nodeType===3){this.labelObserver.observe(node,{characterData:!0});return}node.nodeType===1&&this.labelObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","class","hidden","inert","slot","style"],childList:!0,characterData:!0,subtree:!0})}}bindLabelObserverTargets(){if(this.labelObserver){this.labelObserver.disconnect(),this.observeLabelNode(this);for(const slot of this.labelForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))this.observeLabelNode(assigned)}}recomputeHasLabelSlot(){const renderRoot=this.renderRoot,childNodes=this.childNodes;if(!renderRoot||!childNodes)return;const slot=renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(childNodes).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabelSlot=hasRealContent(nodes)}hasLightDomChildWithSlot(name){const children=this.children;return children?Array.from(children).some(element=>element.getAttribute("slot")===name):!1}recomputeLightDomSlotState(){this.recomputeHasLabelSlot(),this.hasHintSlot=this.hasLightDomChildWithSlot("hint"),this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text"),this.hasErrorSlot=this.hasLightDomChildWithSlot("error")}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.bindLabelObserverTargets(),this.recomputeHasLabelSlot())}render(){const hasHint=this.withHint||this.hasHintSlot||this.hasHelpTextSlot||(this.hint??"").length>0||(this.helpText??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=[hasError?"switch-error":"",hasHint?"switch-hint":""].filter(Boolean).join(" ");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{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,state}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{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./switch.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_switchRequired}from"../../../internal/default-strings.generated.js";class LyraSwitch extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,switchRequired:LYRA_DEFAULT_switchRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.formAssociated=!0}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},checked:{attribute:!1,noAccessor:!0},defaultChecked:{attribute:"checked",type:Boolean,reflect:!0,useDefault:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},value:{reflect:!0,noAccessor:!0}}}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get checked(){return this._checked}set checked(next){const old=this._checked;this.settingDefaultChecked||(this._checkedDirty=!0),this._checked=!!next,markVetoGuardWrite(this.toggleGuard),this.syncFormState(),this.requestUpdate("checked",old)}get defaultChecked(){return this._defaultChecked}set defaultChecked(next){if(this.reflectingDefaultChecked)return;const old=this._defaultChecked;this._defaultChecked=!!next,this.reflectingDefaultChecked=!0;try{this.toggleAttribute("checked",this._defaultChecked)}finally{this.reflectingDefaultChecked=!1}this._checkedDirty||this.restoreCheckedFromDefault(),this.requestUpdate("defaultChecked",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.updateValidity(),this.requestUpdate("disabled",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.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this._value}set value(next){const old=this._value;this._value=next??"on",next==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==this._value&&this.setAttribute("value",this._value),this.syncFormState(),this.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.withHint=!1,this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasHelpTextSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.hasInteracted=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._name="",this._checked=!1,this._disabled=!1,this._required=!1,this._value="on",this.toggleGuard=new VetoWriteGuard,this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onClick=event=>{const owner=this[VALIDITY_ANCHOR]();for(const target of event.composedPath()){if(target===event.currentTarget)break;if(target&&typeof target=="object"&&target.nodeType===1&&target!==owner&&isActionableElement(target))return}this.setFromUser(!this.checked)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onKeyDown=e=>{if(!this.liveDisabled&&!e.repeat){if(e.key===" "||e.key==="Spacebar"){e.preventDefault(),this.setFromUser(!this.checked);return}if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();const turnsOn=this.effectiveDirection==="rtl"?e.key==="ArrowLeft":e.key==="ArrowRight";this.setFromUser(turnsOn)}}},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onHintSlotChange=()=>{this.hasHintSlot=this.hasLightDomChildWithSlot("hint")},this.onHelpTextSlotChange=()=>{this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text")},this.onErrorSlotChange=()=>{this.hasErrorSlot=this.hasLightDomChildWithSlot("error")},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormState()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector(".switch-owner")??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.liveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}syncExternalDescription(){if(!this.isConnected)return;const target=this[VALIDITY_ANCHOR]();target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}updated(changed){super.updated(changed),this.syncExternalDescription()}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeHasLabelSlot()}):void 0,this.addEventListener("slotchange",this.onLabelSlotChange),this.bindLabelObserverTargets(),this.hasUpdated?this.recomputeLightDomSlotState():this.seedFirstRenderState(()=>this.recomputeLightDomSlotState())}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("switchRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){this.internals.setFormValue(this.checked?this.value:null,this.checked?"checked":"unchecked"),this.updateValidity()}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this.restoreCheckedFromDefault(),this.reflectValidityStates()}formStateRestoreCallback(state2,reason){this.checked=state2==="checked"}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.requestUpdate()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}setFromUser(next){this.liveDisabled||this.checked!==next&&requestThenCommit({requestDetail:{checked:next,value:this.value},emitRequest:(detail,init)=>this.emit("lr-switch-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.hasInteracted=!0,this.checked=next,dispatchNativeInputEvent(this),this.emit("lr-input",{checked:this.checked,value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked,value:this.value})}})}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}observeLabelNode(node){if(this.labelObserver){if(node.nodeType===3){this.labelObserver.observe(node,{characterData:!0});return}node.nodeType===1&&this.labelObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","class","hidden","inert","slot","style"],childList:!0,characterData:!0,subtree:!0})}}bindLabelObserverTargets(){if(this.labelObserver){this.labelObserver.disconnect(),this.observeLabelNode(this);for(const slot of this.labelForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))this.observeLabelNode(assigned)}}recomputeHasLabelSlot(){const renderRoot=this.renderRoot,childNodes=this.childNodes;if(!renderRoot||!childNodes)return;const slot=renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(childNodes).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabelSlot=hasRealContent(nodes)}hasLightDomChildWithSlot(name){const children=this.children;return children?Array.from(children).some(element=>element.getAttribute("slot")===name):!1}recomputeLightDomSlotState(){this.recomputeHasLabelSlot(),this.hasHintSlot=this.hasLightDomChildWithSlot("hint"),this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text"),this.hasErrorSlot=this.hasLightDomChildWithSlot("error")}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.bindLabelObserverTargets(),this.recomputeHasLabelSlot())}render(){const hasHint=this.withHint||this.hasHintSlot||this.hasHelpTextSlot||(this.hint??"").length>0||(this.helpText??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=[hasError?"switch-error":"",hasHint?"switch-hint":""].filter(Boolean).join(" ");return html`
       <div part="form-control">
         <span class="switch-layout" part="row" @click=${this.onClick}>
           <span

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

@@ -54,8 +54,8 @@ readonly id?:string;}export interface LyraTimeRangeEventMap{input:Event;change:E
 * a plain handle drag.
 *
 * Deliberately no label/hint/error chrome -- `startLabel`/`endLabel` here are per-handle
-* accessible-name overrides, not visible label text, the same carve-out `<lr-slider>` states for
-* its own single-handle `label`; a labeled-field consumer wraps this element in their own layout.
+* accessible-name overrides, not visible label text; a labeled-field consumer wraps this element
+* in their own layout.
 * The `base` around both handles is still an accessible `role="group"`, named by a non-empty host
 * `aria-label`; native external `<label for>` associations remain available through `labels` but do
 * not cross into the shadow-root group. The two handles retain their individual names.

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

@@ -17,6 +17,11 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * emitting user events, so a later delimiter/Enter/Tab/blur commit consumes the edited text.
 * `focus()` and `click()` are synchronous no-ops under own or fieldset-cascaded disablement,
 * including the same task that begins the disabled transition before Lit updates the draft input.
+* `readonly` keeps the draft input, the remove buttons and (with `editable`) every token label
+* focusable and browseable while blocking every value-committing affordance -- typing a new draft,
+* committing it, removing a token, and opening or committing the inline token editor; selection/
+* copy, form submission/reset, and programmatic writes remain available, mirroring `lr-input`'s
+* `readonly`.
 * If a focused token surface disappears through its own remove action or a controlled
 * `value`/`defaultValue` shrink, focus moves to the nearest surviving equivalent surface, or to
 * the draft input when no token remains. A newer external focus destination always wins.
@@ -122,7 +127,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraTokenInput extends LyraElement<LyraTokenInputEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;converter:{fromAttribute:(value:string|null)=>readonly string[]|null;toAttribute:(value:readonly string[]|null)=>string|null;};noAccessor:boolean;};};label:string;hint:string;errorText:string;placeholder:string;
+export declare class LyraTokenInput extends LyraElement<LyraTokenInputEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};readonly:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;converter:{fromAttribute:(value:string|null)=>readonly string[]|null;toAttribute:(value:readonly string[]|null)=>string|null;};noAccessor:boolean;};};label:string;hint:string;errorText:string;placeholder:string;
 /** Forwarded to both native text inputs using the native explicit `"true"`/`"false"`
 *  attribute vocabulary. */
 spellcheck:boolean;
@@ -160,14 +165,19 @@ private rovingIndex;private focusEditorPending;private focusTokenPending;private
 /** One native blur can be followed by a teardown blur when its commit removes the focused editor. */
 private editorBlurRelayed;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private hasStartSlot;private hasEndSlot;private inputEl?;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
-customError:string|null;private labelId;private hintId;private errorId;private _value;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private _fieldsetDisabled;private _name;private _required;private _disabled;get value():readonly string[];set value(next:readonly string[]);
+customError:string|null;private labelId;private hintId;private errorId;private _value;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private _fieldsetDisabled;private _name;private _required;private _disabled;private _readonly;get value():readonly string[];set value(next:readonly string[]);
 /** Reflected JSON-array reset default; changing it never overwrites a dirty live token list. */
 get defaultValue():readonly string[];set defaultValue(next:readonly string[]|null);
 /** The form submission key, reflected synchronously for native form APIs.
 *  This control keys its `FormData` entries directly off `name` (see
 *  `syncValidity()`), so a rename must rebuild that `FormData` in the same
 *  tick -- mirrors `<lr-combobox>`'s identical `name` setter. */
-get name():string;set name(next:string);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
+get name():string;set name(next:string);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);
+/** Forwards native read-only behavior to the draft input and the inline token editor, and
+*  blocks every other value-committing affordance (adding, removing, or editing a token) while
+*  leaving the control, its tokens, and its remove buttons focusable and its current value
+*  submitted with the form -- mirroring `lr-input`'s `readonly`. */
+get readonly():boolean;set readonly(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
 /** Effective disabled state: this element's own `disabled` OR an ancestor
 *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
 *  own `disabled` IDL property/attribute is never mutated by a fieldset. */