@aceshooting/lyra-ui 26.0.0 → 28.0.0

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{requestThenCommit}from"../../../internal/request-commit.js";import{VetoWriteGuard,markVetoGuardWrite}from"../../../internal/veto-write-guard.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place,settlePopupTransition,PopupTransitionWaiters,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{chevronIcon,closeIcon}from"../../../internal/icons.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{DocumentPointerListener}from"../../../internal/document-pointer.js";import{revealRow}from"../../../internal/reveal-row.js";import{TypeAheadBuffer}from"../../../internal/type-ahead-buffer.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{styles}from"./select.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import"../combobox/option.class.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{isOptionSelectedDirty,isOptionSelectedWrite,wasOptionInitiallySelected,RESET_OPTION_SELECTED_FROM_OWNER,SET_OPTION_SELECTED_FROM_OWNER}from"../../../internal/option-selection.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_loading,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select,LYRA_DEFAULT_selectSelectedOverflow,LYRA_DEFAULT_selectValueMissing}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();function isLyraOptionElement(value){return isHtmlElement(value)&&value.localName===tag("option")}function normalizeSelectionValues(next){return Array.isArray(next)?next.filter(value=>typeof value=="string"):typeof next=="string"?[next]:[]}const POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,loading:LYRA_DEFAULT_loading,notInCatalog:LYRA_DEFAULT_notInCatalog,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select,selectSelectedOverflow:LYRA_DEFAULT_selectSelectedOverflow,selectValueMissing:LYRA_DEFAULT_selectValueMissing}}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-input","lr-change","lr-change-request"])}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-input":Object.freeze(["data"]),"lr-change":Object.freeze(["data"]),"lr-change-request":Object.freeze(["data"])})}static get validators(){return[currentValidityValidator("required","disabled","value","multiple")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},multiple:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},maxOptionsVisible:{type:Number,attribute:"max-options-visible",noAccessor:!0},defaultValue:{attribute:"default-value",noAccessor:!0}}}get open(){return this._open}set open(next){const requested=!!next,normalized=requested&&!this.effectiveDisabled;if(normalized===this._open){requested!==normalized&&this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(normalized)}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}focus(options){this.effectiveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.effectiveDisabled||this.triggerElement?.click()}constructor(){super(),this.placeholder="",this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.autofocus=!1,this.title="",this._open=!1,this.size="m",this.appearance="outlined",this.pill=!1,this.placement="bottom",this.topLayer=!1,this.filled=!1,this.withClear=!1,this.clearable=!1,this.withUnknownOption=!1,this.loading=!1,this.autoCommitSingleOption=!1,this.activeIndex=-1,this.options=[],this.optionsObserved=!1,this.touched=!1,this.hasInteracted=!1,this.slotPresence=new SlotPresenceController(this),this._fieldsetDisabled=!1,this.listId=nextId("select-list"),this.triggerId=nextId("select-trigger"),this.valueTextId=nextId("select-value"),this.positioningReady=Promise.resolve(!1),this.restoreFocusOnClose=!0,this.pointer=new DocumentPointerListener(this,event=>this.onDocPointer(event)),this.listboxHidden=!0,this.listboxRendered=!1,this.listboxPositioned=!1,this._isFirstUpdate=!0,this.openVetoed=!1,this.previousValue="",this.openStateGeneration=0,this.transitionToken=0,this.transitionWaiters=new PopupTransitionWaiters,this._selected=[],this._selectedOptions=[],this._selectedValuesByOption=new Map,this.adornmentClones=new WeakMap,this._multiple=!1,this._disabled=!1,this._required=!1,this._defaultSelected=[],this._defaultSelectedOptions=[],this._defaultCaptured=!1,this._valueDirty=!1,this._restoredStateActive=!1,this._resolvingPendingInitialSelection=!1,this._defaultValueDirty=!1,this.typeBuffer=new TypeAheadBuffer(this),this._name="",this._maxOptionsVisible=3,this.localDescriptionIds="",this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.collectOptions=e=>{this.collectOptionsFromSlot(e.target)},this.unknownOptionCache=new Map,this.optionRefreshPending=!1,this.onOptionChange=e=>{e.stopPropagation();const option=e.composedPath().find(isLyraOptionElement);if(isLyraOptionElement(option)&&this.options.includes(option)&&isOptionSelectedWrite(e)){markVetoGuardWrite(this.selectionWriteGuard),this._valueDirty=!0,this._restoredStateActive=!1;const selected=this._selectedOptions.includes(option);if(option.selected===selected&&(!selected||this._selectedValuesByOption.get(option)===option.value))return;if(option.selected&&!this.multiple){this.setSelection([option.value],[option]);return}const remaining=[...this._selectedOptions],preferred=this._selected.map(value=>{const index2=remaining.findIndex(candidate=>this._selectedValuesByOption.get(candidate)===value);return index2<0?void 0:remaining.splice(index2,1)[0]}),values=[...this._selected],index=preferred.indexOf(option);if(option.selected)index<0?(values.push(option.value),preferred.push(option)):values[index]=option.value;else{if(index<0)return;values.splice(index,1),preferred.splice(index,1)}this.setSelection(values,preferred);return}if(isLyraOptionElement(option)&&this.adornmentClones.get(option)?.markup!==this.adornmentMarkup(option)&&this.adornmentClones.delete(option),this.optionRefreshPending)return;this.optionRefreshPending=!0;const previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;queueMicrotask(()=>{this.optionRefreshPending=!1,this.refreshOptionDefaults(),this.reflectSelected(),this.options=[...this.options],this.reconcileActiveOption(previousActive,previousActiveRawIndex)})},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.selectionWriteGuard=new VetoWriteGuard,this.selectionRequestDispatching=!1,this.onTriggerClick=()=>{if(!this.effectiveDisabled){if(this.onlyOption)return this.selectOption(this.onlyOption);this.open?this.hide():this.show()}},this.onTriggerBlur=event=>{this.effectiveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),this.open&&(this.restoreFocusOnClose=!1),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{relayNativeEvent(this,event)},this.onKeyDown=e=>{if(e.isComposing||e.keyCode===229)return;const navigable=this.navigableOptions(),move=()=>resolveListMove(e,{count:navigable.length,current:this.activeIndex,orientation:"vertical",wrap:!1,clamp:!0,backwardFromMissing:"first"});switch(e.key){case"ArrowDown":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(move()??-1,navigable);break;case"ArrowUp":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(move()??-1,navigable);break;case"Enter":case" ":if(this.open){e.preventDefault();const active=navigable[this.activeIndex];this.activeIndex>=0&&active?this.selectOption(active):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.hide());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1,navigable));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1,navigable));break;case"Backspace":case"Delete":this.multiple&&this._selected.length>0&&(e.preventDefault(),this.removeValueAt(this._selected.length-1));break;default:this.typeBuffer.accepts(e)&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.preventDefault()},this.onListboxClick=e=>{const optionEl=e.target.closest('[part="option"]'),index=Number(optionEl?.dataset.index);if(!Number.isInteger(index))return;const option=this.listboxOptions[index];option&&this.selectOption(option)},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.syncFormValue()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.renderRoot.querySelector('[part="trigger"]');target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity(),this.hasUpdated&&this.open&&queueMicrotask(()=>this.reconnectOpenPopup())}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this._isFirstUpdate&&(this._pendingInitialDefaultValue!==void 0||this._pendingInitialValue!==void 0||this._pendingInitialSelectedOptions!==void 0)){this._resolvingPendingInitialSelection=!0;try{if(this._pendingInitialDefaultValue!==void 0){const pending=this._pendingInitialDefaultValue;this._pendingInitialDefaultValue=void 0,this.assignDefaultValue(pending)}if(this._pendingInitialValue!==void 0){const pending=this._pendingInitialValue;this._pendingInitialValue=void 0,this.assignValue(pending)}if(this._pendingInitialSelectedOptions!==void 0){const pending=this._pendingInitialSelectedOptions;this._pendingInitialSelectedOptions=void 0,this.selectedOptions=pending}}finally{this._resolvingPendingInitialSelection=!1}}if(this.announceOpenTransition(changed),changed.has("open")&&!this.openVetoed&&(this.listboxPositioned=!1),this.open&&(this.listboxHidden=!1,this.listboxRendered=!0),changed.has("open")&&!this.openVetoed){const navigable=this.navigableOptions();this.setActiveIndex(this.open?navigable.findIndex(option=>this._selectedOptions.includes(option)):-1,navigable)}}firstUpdated(changed){super.firstUpdated(changed);const slot=this.optionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>{const assigned=s.assignedElements({flatten:!0});this.optionsObserved=!0,assigned.some(isLyraOptionElement)&&this.collectOptionsFromSlot(s)})})}applyOpenState(next){const old=this._open;this.pendingOpenTransitionStart===void 0&&(this.pendingOpenTransitionStart=old),this.openStateGeneration++,this._open=next,this.requestUpdate("open",old)}forceCloseOpenState(){this.listboxHidden=!0;const isClosing=this._open||this.pendingOpenTransitionStart===!0;if(this.transitionToken++,this.transitionWaiters.resolve("lr-after-show"),this.transitionWaiters.resolve("lr-after-hide"),!this._open){isClosing&&(this.suppressedOpenLifecycleGeneration=this.openStateGeneration),this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(!1),this.suppressedOpenLifecycleGeneration=this.openStateGeneration}announceOpenTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.suppressedOpenLifecycleGeneration===this.openStateGeneration)return;const name=this.open?"lr-show":"lr-hide";if(!this.isConnected){this.emit("lr-hide");return}this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open,this.transitionWaiters.resolve(this.open?"lr-after-hide":"lr-after-show"))}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._name),this.syncFormValue(),this.requestUpdate("name",old)}get multiple(){return this._multiple}set multiple(next){markVetoGuardWrite(this.selectionWriteGuard);const old=this._multiple;this._multiple=!!next,this.toggleAttribute("multiple",this._multiple),!this._multiple&&this._selected.length>1?this.setSelection(this._selected.slice(0,1),this._selectedOptions.slice(0,1)):this.syncFormValue(),this.requestUpdate("multiple",old)}get maxOptionsVisible(){return this._maxOptionsVisible}set maxOptionsVisible(next){const old=this._maxOptionsVisible;this._maxOptionsVisible=finiteCount(next,3),this.requestUpdate("maxOptionsVisible",old)}get disabled(){return this._disabled}set disabled(next){markVetoGuardWrite(this.selectionWriteGuard);const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this._disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this.multiple?[...this._selected]:this._selected[0]??""}set value(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialValue=next),this._restoredStateActive=!1,this._valueDirty=!0;const values=normalizeSelectionValues(next);this.setSelection(values,values.map(value=>this.options.find(option=>option.value===value)))}get defaultValue(){return this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??""}set defaultValue(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialDefaultValue=next),this._defaultValueDirty=!0;const old=this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??"",values=normalizeSelectionValues(next);this._defaultSelected=this.multiple?[...values]:values.slice(0,1),this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected),!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]),this.requestUpdate("defaultValue",old)}get selectedOptions(){return[...this._selectedOptions]}set selectedOptions(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialSelectedOptions=next),this._restoredStateActive=!1,this._valueDirty=!0;const candidates=Array.isArray(next)?next:[],live=candidates.filter((option,index)=>isLyraOptionElement(option)&&this.contains(option)&&this.options.includes(option)&&candidates.indexOf(option)===index),selected=this.multiple?live:live.slice(0,1);this.setSelection(selected.map(option=>option.value),selected)}get selectedData(){return this.resolveOccurrenceSlots(this._selected,this._selectedOptions).map(option=>option?.data)}setSelection(next,preferred=[]){markVetoGuardWrite(this.selectionWriteGuard);const values=this.multiple?[...next]:next.slice(0,1),previousValues=this._selected,previousOptions=this._selectedOptions,old=this.multiple?[...previousValues]:previousValues[0]??"";this.previousValue=old,this._selected=values,this._selectedOptions=this.resolveOccurrences(values,preferred),this.syncFormValue(),this.reflectSelected(),this.updateValidity(),this.requestUpdate("value",old);const sameValues=previousValues.length===values.length&&previousValues.every((value,i)=>value===values[i]),sameOptions=previousOptions.length===this._selectedOptions.length&&previousOptions.every((option,i)=>option===this._selectedOptions[i]);sameValues&&!sameOptions&&this.requestUpdate()}resolveOccurrences(values,preferred=[]){return this.resolveOccurrenceSlots(values,preferred).filter(option=>option!==void 0)}resolveOccurrenceSlots(values,preferred=[]){const claimed=new Set;return values.map((value,index)=>{const hint=preferred.length===values.length?preferred[index]:preferred.find(option=>option?.value===value&&!claimed.has(option)),match=hint&&hint.value===value&&this.options.includes(hint)&&!claimed.has(hint)?hint:this.options.find(option=>option.value===value&&!claimed.has(option));if(match)return claimed.add(match),match})}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&this._selected.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("selectValueMissing")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"blank",this._selected.length===0)}syncFormValue(){if(!this.multiple){this.internals.setFormValue(this._selected[0]??"");return}const state2=JSON.stringify(this._selected);if(!this.name){this.internals.setFormValue(null,state2);return}const data=new FormData;for(const value of this._selected)data.append(this.name,value);this.internals.setFormValue(data,state2)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this._restoredStateActive=!1,this._valueDirty=!1;const resetOptions=this._defaultSelectedOptions.length>0?this._defaultSelectedOptions:this.options.filter(option=>wasOptionInitiallySelected(option));this._defaultSelectedOptions.length===0&&resetOptions.length>0&&(this._defaultSelectedOptions=[...resetOptions],this._defaultSelected=resetOptions.map(option=>option.value));const defaults=new Set(resetOptions);for(const option of this.options)option[RESET_OPTION_SELECTED_FROM_OWNER](defaults.has(option));this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}formStateRestoreCallback(state2,reason){if(!this.multiple)this.assignValue(typeof state2=="string"?state2:void 0);else{let restored=[];if(typeof state2=="string")try{const parsed=JSON.parse(state2);Array.isArray(parsed)&&parsed.every(entry=>typeof entry=="string")&&(restored=parsed)}catch{}this.assignValue(restored)}this._restoredStateActive=!0,this._valueDirty=!0}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;markVetoGuardWrite(this.selectionWriteGuard);const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity(()=>this.updateValidity())}reportValidity(){return this.validityController.syncConstraints(),this.updateValidity(),this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates()}resetValidity(){this.setCustomValidity("")}disconnectedCallback(){markVetoGuardWrite(this.selectionWriteGuard),this.listboxHidden=!0,this.releaseExternalDescription(),this.transitionToken++,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.typeBuffer.clear(),this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.transitionWaiters.resolve("lr-after-show"),this.transitionWaiters.resolve("lr-after-hide"),this.open=!1}adoptedCallback(){markVetoGuardWrite(this.selectionWriteGuard),super.adoptedCallback(),this.transitionToken++,this.transitionWaiters.resolve("lr-after-show"),this.transitionWaiters.resolve("lr-after-hide"),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.typeBuffer.clear(),queueMicrotask(()=>this.reconnectOpenPopup())}collectOptionsFromSlot(slot){const previous=new Set(this.options),previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;if(this.options=slot.assignedElements({flatten:!0}).filter(isLyraOptionElement),this.optionsObserved=!0,this.adornmentClones=new WeakMap,this.reconcileActiveOption(previousActive,previousActiveRawIndex),this._defaultCaptured){const newDefaults=this.options.filter(option=>!previous.has(option)&&option.defaultSelected),newLive=this.options.filter(option=>!previous.has(option)&&option.selected&&!option.defaultSelected);this.refreshOptionDefaults();const eligible=[...!this._restoredStateActive&&!this._valueDirty?newDefaults:[],...this._restoredStateActive?[]:newLive];if(eligible.length>0){const added=this.multiple?eligible:eligible.slice(-1),occurrences=this.multiple?[...new Set([...this._selectedOptions,...added])]:added;newLive.length>0&&(this._valueDirty=!0),this.setSelection(occurrences.map(option=>option.value),occurrences);return}}else{this._defaultCaptured=!0;const explicitDefault=this.hasAttribute("default-value")||this._defaultValueDirty,allDefaults=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?allDefaults:allDefaults.slice(0,1),allLive=this.options.filter(option=>option.selected),live=this.multiple?allLive:allLive.slice(0,1),initialLive=this.options.filter(option=>wasOptionInitiallySelected(option)),optionDirty=this.options.some(option=>isOptionSelectedDirty(option)),dirtySelected=this.options.filter(option=>isOptionSelectedDirty(option)&&option.selected);if(explicitDefault)this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected);else{const resetOptions=defaults.length>0?defaults:initialLive.length>0?initialLive:live;this._defaultSelected=resetOptions.map(option=>option.value),this._defaultSelectedOptions=[...resetOptions]}const fromDefaults=explicitDefault||defaults.length>0,initial=optionDirty?this.multiple?allLive:dirtySelected.slice(-1)[0]?dirtySelected.slice(-1):live:explicitDefault?this._defaultSelectedOptions:fromDefaults?defaults:live;if(initial.length>0&&!this._restoredStateActive&&!this._valueDirty){(!fromDefaults||optionDirty)&&(this._valueDirty=!0),this.setSelection(initial.map(option=>option.value),[...initial]);return}if(optionDirty&&(this._valueDirty=!0),explicitDefault&&!this._valueDirty&&!this._restoredStateActive){this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]);return}}this.reflectSelected()}refreshOptionDefaults(){if(this.hasAttribute("default-value")||this._defaultValueDirty)return;const declared=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?declared:declared.slice(0,1);this._defaultSelected=defaults.map(option=>option.value),this._defaultSelectedOptions=[...defaults],!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}reflectSelected(){this._selectedOptions=this.resolveOccurrences(this._selected,this._selectedOptions),this._selectedValuesByOption=new Map(this._selectedOptions.map(option=>[option,option.value]));const chosen=new Set(this._selectedOptions);for(const option of this.options)option[SET_OPTION_SELECTED_FROM_OWNER](chosen.has(option))}selectUnknownValue(value){if(!(this.selectionRequestDispatching||this.effectiveDisabled)){if(this.multiple){const index=this._selected.indexOf(value),values=index>=0?this._selected.filter((_,position)=>position!==index):[...this._selected,value];this.requestSelection(values,this.resolveOccurrenceSlots(values,this._selectedOptions),()=>{this.emitValueEvents(),this.emit("lr-activate",{value})});return}this.hide(),this.emit("lr-activate",{value})}}resolvedLabelFor(value,occurrenceIndex=0){const option=(this._selectedOptions[occurrenceIndex]?.value===value?this._selectedOptions[occurrenceIndex]:void 0)??this._selectedOptions.find(candidate=>candidate.value===value)??this.options.find(candidate=>candidate.value===value);return option&&(option.label||option.value)}labelFor(value,occurrenceIndex=0){const resolved=this.resolvedLabelFor(value,occurrenceIndex);if(resolved!==void 0)return resolved;if(this.loading)return this.localize("loading");const override=this.optionsObserved?this.getUnknownLabel?.(value):void 0;return override!==void 0&&override.trim().length>0?override:value}isUnknownValue(value,occurrenceIndex=0){return!this.optionsObserved||this.loading||value===""?!1:this.resolvedLabelFor(value,occurrenceIndex)===void 0}get onlyOption(){if(!this.autoCommitSingleOption)return;const navigable=this.navigableOptions(this.options);return navigable.length===1?navigable[0]:void 0}isOptionAvailable(option){return!option.disabled&&!option.inert&&!option.closest("[inert]")}navigableOptions(options=this.listboxOptions){return options.filter(option=>this.isOptionAvailable(option))}get unknownValues(){return this.withUnknownOption?this._selected.filter((value,index)=>this.isUnknownValue(value,index)):[]}get unknownOptions(){const values=this.unknownValues;if(values.length===0)return this.unknownOptionCache.clear(),[];for(const key of[...this.unknownOptionCache.keys()])values.includes(key)||this.unknownOptionCache.delete(key);return values.map(value=>{let option=this.unknownOptionCache.get(value);return option||(option=this.ownerDocument.createElement(tag("option")),this.unknownOptionCache.set(value,option)),option.value=value,option.label=this.labelFor(value),option})}get listboxOptions(){const unknown=this.unknownOptions;return unknown.length===0?this.options:[...this.options,...unknown]}setActiveIndex(next,navigable=this.navigableOptions()){if(next<0||navigable.length===0){this.activeIndex=-1,this.activeOption=void 0;return}const index=Math.min(next,navigable.length-1);this.activeIndex=index,this.activeOption=navigable[index]}reconcileActiveOption(previousActive,previousRawIndex){if(!previousActive&&this.activeIndex<0)return;const navigable=this.navigableOptions();if(previousActive){const preservedIndex=navigable.indexOf(previousActive);if(preservedIndex>=0){this.setActiveIndex(preservedIndex,navigable);return}}if(navigable.length===0){this.setActiveIndex(-1,navigable);return}const pivot=Math.max(0,previousRawIndex);let nearestIndex=0,nearestDistance=Number.POSITIVE_INFINITY,nearestRawIndex=-1;navigable.forEach((option,index)=>{const rawIndex=this.listboxOptions.indexOf(option),distance=Math.abs(rawIndex-pivot);(distance<nearestDistance||distance===nearestDistance&&rawIndex>=pivot&&nearestRawIndex<pivot)&&(nearestIndex=index,nearestDistance=distance,nearestRawIndex=rawIndex)}),this.setActiveIndex(nearestIndex,navigable)}show(){if(this.open||this.effectiveDisabled)return Promise.resolve();this.transitionWaiters.resolve("lr-after-hide");const settled=this.transitionWaiters.wait("lr-after-show");return this.open=!0,settled}hide(){if(!this.open)return Promise.resolve();this.transitionWaiters.resolve("lr-after-show");const settled=this.transitionWaiters.wait("lr-after-hide");return this.open=!1,settled}positionListbox(){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=this.effectiveDirection;const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');if(!anchor||!listbox)return;this.placedTopLayer=syncTopLayerRelease(listbox,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,listbox,{placement:rtlAwarePlacement(this.placement,this),...topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")),sync:this.sync});const operation=this.cleanup;this.positioningReady=operation.ready.then(positioned=>(positioned&&this.cleanup===operation&&this.open&&this.isConnected&&(this.listboxPositioned=!0,this.revealActiveOption()),positioned))}revealActiveOption(){if(!this.isConnected||!this.open||!this.listboxPositioned||!this.cleanup)return;const listbox=this.renderRoot.querySelector('[part="listbox"]'),activeId=this.triggerElement?.getAttribute("aria-activedescendant"),row=listbox?.querySelector('[part="option"][data-active]');listbox&&row&&activeId&&row.id===activeId&&revealRow(listbox,row)}activateListboxOverlay(){this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>{this.hide()},onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide()},restoreFocusTo:this.triggerElement??null}),this.bindDocumentPointer(),this.positionListbox()}teardownListboxOverlay(restoreFocus=this.restoreFocusOnClose){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.restoreFocusOnClose=!0}bindDocumentPointer(){this.isConnected&&this.pointer.bind()}unbindDocumentPointer(){this.pointer.unbind()}reconnectOpenPopup(){!this.isConnected||!this.open||this.activateListboxOverlay()}updated(changed){super.updated(changed),this.syncExternalDescription();const suppressOpenLifecycle=changed.has("open")&&this.suppressedOpenLifecycleGeneration===this.openStateGeneration,shouldRefreshPosition=this.open&&this.isConnected&&(changed.has("placement")||changed.has("positioningStrategy")||changed.has("topLayer")||changed.has("sync")||this.positionedDirection!==this.effectiveDirection);changed.has("open")&&!this.openVetoed?this.open&&this.isConnected?(this.activateListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-show")):this.open?this.teardownListboxOverlay(!1):(this.teardownListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-hide")):changed.has("open")&&this.openVetoed?(this.restoreFocusOnClose=!0,shouldRefreshPosition&&this.positionListbox()):shouldRefreshPosition&&this.positionListbox(),(changed.has("activeIndex")||changed.has("options")||changed.has("listboxPositioned"))&&this.revealActiveOption(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),changed.has("open")&&(this.pendingOpenTransitionStart=void 0,this.suppressedOpenLifecycleGeneration=void 0)}async settleTransition(event){const token=++this.transitionToken;await settlePopupTransition({host:this,popup:()=>this.renderRoot.querySelector('[part="listbox"]'),isCurrent:()=>this.transitionToken===token,waitForPosition:event==="lr-after-show"?async()=>{for(;this.open;){const readiness=this.positioningReady,positioned=await readiness;if(this.transitionToken!==token)return!1;if(positioned)break;if(readiness===this.positioningReady)return this.forceCloseOpenState(),!1}return!0}:void 0,conceal:event==="lr-after-hide"?()=>{this.listboxHidden=!0}:void 0,onSettled:()=>{this.emit(event),this.transitionWaiters.resolve(event)}})}emitValueEvents(){const self=this,data=this.selectedData,value=self.value,previousValue=this.previousValue;dispatchNativeInputEvent(this),self.emit("lr-input",{value,previousValue,data}),dispatchNativeEvent(this,"change"),self.emit("lr-change",{value,previousValue,data})}assignValue(next){this.value=next}assignDefaultValue(next){this.defaultValue=next}requestSelection(values,preferred,afterCommit,available=()=>!0){if(this.selectionRequestDispatching||this.effectiveDisabled)return!1;const multiple=this.multiple,document=this.ownerDocument,connected=this.isConnected,open=this.open,slots=this.resolveOccurrenceSlots(values,preferred),data=slots.map(option=>option?.data),value=multiple?[...values]:values[0]??"",previousValue=this.value,self=this;let committed=!1;this.selectionRequestDispatching=!0;try{requestThenCommit({requestDetail:{value,previousValue,data},guard:this.selectionWriteGuard,emitRequest:(detail,init)=>self.emit("lr-change-request",detail,init),commit:()=>{const liveOptions=new Set(this.renderRoot.querySelector("slot:not([name])")?.assignedElements({flatten:!0})??[]);this.effectiveDisabled||this.multiple!==multiple||this.ownerDocument!==document||this.isConnected!==connected||this.open!==open||!available(liveOptions)||slots.some((option,index)=>option&&(!liveOptions.has(option)||option.value!==values[index]||!Object.is(option.data,data[index])))||(this.hasInteracted=!0,this._restoredStateActive=!1,this._valueDirty=!0,this.setSelection(values,preferred),committed=!0,afterCommit())}})}finally{this.selectionRequestDispatching=!1}return committed}selectOption(option){if(this.selectionRequestDispatching||this.effectiveDisabled||!this.isOptionAvailable(option))return;if(this.unknownOptionCache.get(option.value)===option){this.selectUnknownValue(option.value);return}const value=option.value,available=liveOptions=>liveOptions.has(option)&&option.value===value&&this.isOptionAvailable(option);if(this.multiple){const currentSlots=this.resolveOccurrenceSlots(this._selected,this._selectedOptions),selectedIndex=currentSlots.indexOf(option),selected=selectedIndex>=0,occurrences=selected?currentSlots.filter((_,index)=>index!==selectedIndex):[...currentSlots,option],values=selected?this._selected.filter((_,index)=>index!==selectedIndex):[...this._selected,value];this.requestSelection(values,occurrences,()=>{this.emitValueEvents(),this.emit("lr-activate",{value})},available);return}if(!(option!==this._selectedOptions[0]||value!==this._selected[0])){this.hide(),this.emit("lr-activate",{value});return}this.requestSelection([value],[option],()=>{this.hide(),this.emitValueEvents(),this.emit("lr-activate",{value})},available)}removeValueAt(index){return this.effectiveDisabled||index<0||index>=this._selected.length?!1:this.requestSelection(this._selected.filter((_,candidateIndex)=>candidateIndex!==index),this.resolveOccurrenceSlots(this._selected,this._selectedOptions).filter((_,candidateIndex)=>candidateIndex!==index),()=>this.emitValueEvents())}clear(){this.effectiveDisabled||this._selected.length===0||this.requestSelection([],[],()=>{this.emitValueEvents(),this.emit("lr-clear")})}removeTag(value,index,event){event.stopPropagation(),this._selected[index]===value&&this.removeValueAt(index)&&this.updateComplete.then(()=>{const buttons=[...this.renderRoot.querySelectorAll('[part~="tag__remove-button"]')];(buttons[Math.min(index,buttons.length-1)]??this.triggerElement)?.focus()})}typeAhead(char){this.typeBuffer.add(char,this.effectiveLocale);const navigable=this.navigableOptions();if(!navigable.length)return;const currentOption=this.open?navigable[this.activeIndex]:this._selectedOptions[this._selectedOptions.length-1],currentIndex=navigable.indexOf(currentOption),match=this.typeBuffer.match(navigable,currentIndex,option=>option.label,this.effectiveLocale,option=>this.open||!this.multiple||!this._selectedOptions.includes(option));if(match===null)return;const candidate=navigable[match];this.open?this.setActiveIndex(match,navigable):this.selectOption(candidate)}adornmentMarkup(option){return Array.from(option.children).filter(child=>["start","end","prefix","suffix"].includes(child.getAttribute("slot")??"")).map(child=>child.outerHTML).join("")}adornmentsFor(option){const cached=this.adornmentClones.get(option);if(cached)return cached;const cloneSlot=selector=>{const nodes=Array.from(option.querySelectorAll(selector));if(nodes.length!==0)return nodes.map(node=>node.cloneNode(!0))},resolved={markup:this.adornmentMarkup(option),start:cloneSlot(':scope > [slot="start"], :scope > [slot="prefix"]'),end:cloneSlot(':scope > [slot="end"], :scope > [slot="suffix"]')};return this.adornmentClones.set(option,resolved),resolved}renderRows(options,activeId){const out=[],chosen=new Set(this._selectedOptions);let currentGroup,groupRows=[],groupIndex=0;const flushGroup=()=>{if(groupRows.length!==0){if(currentGroup){const labelId=`${this.listId}-group-${groupIndex++}`;out.push(html`<div role="group" aria-labelledby=${labelId}>
+import{__decorate}from"tslib";import{requestThenCommit}from"../../../internal/request-commit.js";import{VetoWriteGuard,markVetoGuardWrite}from"../../../internal/veto-write-guard.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{deferredPlaceReady as place,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{chevronIcon,closeIcon}from"../../../internal/icons.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{PopupController,emitPopupEvent}from"../../../internal/popup-controller.js";import{revealRow}from"../../../internal/reveal-row.js";import{TypeAheadBuffer}from"../../../internal/type-ahead-buffer.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{styles}from"./select.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import"../combobox/option.class.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{isOptionSelectedDirty,isOptionSelectedWrite,wasOptionInitiallySelected,RESET_OPTION_SELECTED_FROM_OWNER,SET_OPTION_SELECTED_FROM_OWNER}from"../../../internal/option-selection.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_selectSelectedOverflow,LYRA_DEFAULT_selectValueMissing}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_loading,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();function isLyraOptionElement(value){return isHtmlElement(value)&&value.localName===tag("option")}function normalizeSelectionValues(next){return Array.isArray(next)?next.filter(value=>typeof value=="string"):typeof next=="string"?[next]:[]}const POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraSelect extends LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,loading:LYRA_DEFAULT_loading,notInCatalog:LYRA_DEFAULT_notInCatalog,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select,selectSelectedOverflow:LYRA_DEFAULT_selectSelectedOverflow,selectValueMissing:LYRA_DEFAULT_selectValueMissing}}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-input","lr-change","lr-change-request"])}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-input":Object.freeze(["data"]),"lr-change":Object.freeze(["data"]),"lr-change-request":Object.freeze(["data"])})}static get validators(){return[currentValidityValidator("required","disabled","value","multiple")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},multiple:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},maxOptionsVisible:{type:Number,attribute:"max-options-visible",noAccessor:!0},defaultValue:{attribute:"default-value",noAccessor:!0}}}get open(){return this._open}set open(next){const requested=!!next,normalized=requested&&!this.effectiveDisabled;if(normalized===this._open){requested!==normalized&&this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(normalized)}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}focus(options){this.effectiveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.effectiveDisabled||this.triggerElement?.click()}constructor(){super(),this.placeholder="",this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.autofocus=!1,this.title="",this._open=!1,this.size="m",this.appearance="outlined",this.pill=!1,this.placement="bottom",this.topLayer=!1,this.filled=!1,this.withClear=!1,this.clearable=!1,this.withUnknownOption=!1,this.loading=!1,this.autoCommitSingleOption=!1,this.activeIndex=-1,this.options=[],this.optionsObserved=!1,this.touched=!1,this.hasInteracted=!1,this.slotPresence=new SlotPresenceController(this),this._fieldsetDisabled=!1,this.listId=nextId("select-list"),this.triggerId=nextId("select-trigger"),this.valueTextId=nextId("select-value"),this.positioningReady=Promise.resolve(!1),this.restoreFocusOnClose=!0,this.popupController=new PopupController({host:this,popup:()=>this.renderRoot.querySelector('[part="listbox"]'),emit:(name,cancelable)=>emitPopupEvent(this,name,cancelable),onPointer:event=>this.onDocPointer(event)}),this.listboxHidden=!0,this.listboxRendered=!1,this.listboxPositioned=!1,this._isFirstUpdate=!0,this.openVetoed=!1,this.previousValue="",this.openStateGeneration=0,this._selected=[],this._selectedOptions=[],this._selectedValuesByOption=new Map,this.adornmentClones=new WeakMap,this._multiple=!1,this._disabled=!1,this._required=!1,this._defaultSelected=[],this._defaultSelectedOptions=[],this._defaultCaptured=!1,this._valueDirty=!1,this._restoredStateActive=!1,this._resolvingPendingInitialSelection=!1,this._defaultValueDirty=!1,this.typeBuffer=new TypeAheadBuffer(this),this._name="",this._maxOptionsVisible=3,this.localDescriptionIds="",this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.collectOptions=e=>{this.collectOptionsFromSlot(e.target)},this.unknownOptionCache=new Map,this.optionRefreshPending=!1,this.onOptionChange=e=>{e.stopPropagation();const option=e.composedPath().find(isLyraOptionElement);if(isLyraOptionElement(option)&&this.options.includes(option)&&isOptionSelectedWrite(e)){markVetoGuardWrite(this.selectionWriteGuard),this._valueDirty=!0,this._restoredStateActive=!1;const selected=this._selectedOptions.includes(option);if(option.selected===selected&&(!selected||this._selectedValuesByOption.get(option)===option.value))return;if(option.selected&&!this.multiple){this.setSelection([option.value],[option]);return}const remaining=[...this._selectedOptions],preferred=this._selected.map(value=>{const index2=remaining.findIndex(candidate=>this._selectedValuesByOption.get(candidate)===value);return index2<0?void 0:remaining.splice(index2,1)[0]}),values=[...this._selected],index=preferred.indexOf(option);if(option.selected)index<0?(values.push(option.value),preferred.push(option)):values[index]=option.value;else{if(index<0)return;values.splice(index,1),preferred.splice(index,1)}this.setSelection(values,preferred);return}if(isLyraOptionElement(option)&&this.adornmentClones.get(option)?.markup!==this.adornmentMarkup(option)&&this.adornmentClones.delete(option),this.optionRefreshPending)return;this.optionRefreshPending=!0;const previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;queueMicrotask(()=>{this.optionRefreshPending=!1,this.refreshOptionDefaults(),this.reflectSelected(),this.options=[...this.options],this.reconcileActiveOption(previousActive,previousActiveRawIndex)})},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.selectionWriteGuard=new VetoWriteGuard,this.selectionRequestDispatching=!1,this.onTriggerClick=()=>{if(!this.effectiveDisabled){if(this.onlyOption)return this.selectOption(this.onlyOption);this.open?this.hide():this.show()}},this.onTriggerBlur=event=>{this.effectiveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),this.open&&(this.restoreFocusOnClose=!1),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{relayNativeEvent(this,event)},this.onKeyDown=e=>{if(e.isComposing||e.keyCode===229)return;const navigable=this.navigableOptions(),move=()=>resolveListMove(e,{count:navigable.length,current:this.activeIndex,orientation:"vertical",wrap:!1,clamp:!0,backwardFromMissing:"first"});switch(e.key){case"ArrowDown":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(move()??-1,navigable);break;case"ArrowUp":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(move()??-1,navigable);break;case"Enter":case" ":if(this.open){e.preventDefault();const active=navigable[this.activeIndex];this.activeIndex>=0&&active?this.selectOption(active):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.hide());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1,navigable));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1,navigable));break;case"Backspace":case"Delete":this.multiple&&this._selected.length>0&&(e.preventDefault(),this.removeValueAt(this._selected.length-1));break;default:this.typeBuffer.accepts(e)&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.preventDefault()},this.onListboxClick=e=>{const optionEl=e.target.closest('[part="option"]'),index=Number(optionEl?.dataset.index);if(!Number.isInteger(index))return;const option=this.listboxOptions[index];option&&this.selectOption(option)},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.syncFormValue()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.renderRoot.querySelector('[part="trigger"]');target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity(),this.hasUpdated&&this.open&&queueMicrotask(()=>this.reconnectOpenPopup())}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this._isFirstUpdate&&(this._pendingInitialDefaultValue!==void 0||this._pendingInitialValue!==void 0||this._pendingInitialSelectedOptions!==void 0)){this._resolvingPendingInitialSelection=!0;try{if(this._pendingInitialDefaultValue!==void 0){const pending=this._pendingInitialDefaultValue;this._pendingInitialDefaultValue=void 0,this.assignDefaultValue(pending)}if(this._pendingInitialValue!==void 0){const pending=this._pendingInitialValue;this._pendingInitialValue=void 0,this.assignValue(pending)}if(this._pendingInitialSelectedOptions!==void 0){const pending=this._pendingInitialSelectedOptions;this._pendingInitialSelectedOptions=void 0,this.selectedOptions=pending}}finally{this._resolvingPendingInitialSelection=!1}}if(this.announceOpenTransition(changed),changed.has("open")&&!this.openVetoed&&(this.listboxPositioned=!1),this.open&&(this.listboxHidden=!1,this.listboxRendered=!0),changed.has("open")&&!this.openVetoed){const navigable=this.navigableOptions();this.setActiveIndex(this.open?navigable.findIndex(option=>this._selectedOptions.includes(option)):-1,navigable)}}firstUpdated(changed){super.firstUpdated(changed);const slot=this.optionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>{const assigned=s.assignedElements({flatten:!0});this.optionsObserved=!0,assigned.some(isLyraOptionElement)&&this.collectOptionsFromSlot(s)})})}applyOpenState(next){const old=this._open;this.pendingOpenTransitionStart===void 0&&(this.pendingOpenTransitionStart=old),this.openStateGeneration++,this._open=next,this.requestUpdate("open",old)}forceCloseOpenState(){this.listboxHidden=!0;const isClosing=this._open||this.pendingOpenTransitionStart===!0;if(this.popupController.cancel(),!this._open){isClosing&&(this.suppressedOpenLifecycleGeneration=this.openStateGeneration),this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(!1),this.suppressedOpenLifecycleGeneration=this.openStateGeneration}announceOpenTransition(changed){if(this.openVetoed=!1,!(!changed.has("open")||this._isFirstUpdate||this.suppressedOpenLifecycleGeneration===this.openStateGeneration)){if(!this.isConnected){emitPopupEvent(this,"lr-hide",!1);return}this.openVetoed=this.popupController.announce(this.open,()=>{this.open=!this.open})}}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._name),this.syncFormValue(),this.requestUpdate("name",old)}get multiple(){return this._multiple}set multiple(next){markVetoGuardWrite(this.selectionWriteGuard);const old=this._multiple;this._multiple=!!next,this.toggleAttribute("multiple",this._multiple),!this._multiple&&this._selected.length>1?this.setSelection(this._selected.slice(0,1),this._selectedOptions.slice(0,1)):this.syncFormValue(),this.requestUpdate("multiple",old)}get maxOptionsVisible(){return this._maxOptionsVisible}set maxOptionsVisible(next){const old=this._maxOptionsVisible;this._maxOptionsVisible=finiteCount(next,3),this.requestUpdate("maxOptionsVisible",old)}get disabled(){return this._disabled}set disabled(next){markVetoGuardWrite(this.selectionWriteGuard);const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this._disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this.multiple?[...this._selected]:this._selected[0]??""}set value(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialValue=next),this._restoredStateActive=!1,this._valueDirty=!0;const values=normalizeSelectionValues(next);this.setSelection(values,values.map(value=>this.options.find(option=>option.value===value)))}get defaultValue(){return this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??""}set defaultValue(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialDefaultValue=next),this._defaultValueDirty=!0;const old=this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??"",values=normalizeSelectionValues(next);this._defaultSelected=this.multiple?[...values]:values.slice(0,1),this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected),!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]),this.requestUpdate("defaultValue",old)}get selectedOptions(){return[...this._selectedOptions]}set selectedOptions(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialSelectedOptions=next),this._restoredStateActive=!1,this._valueDirty=!0;const candidates=Array.isArray(next)?next:[],live=candidates.filter((option,index)=>isLyraOptionElement(option)&&this.contains(option)&&this.options.includes(option)&&candidates.indexOf(option)===index),selected=this.multiple?live:live.slice(0,1);this.setSelection(selected.map(option=>option.value),selected)}get selectedData(){return this.resolveOccurrenceSlots(this._selected,this._selectedOptions).map(option=>option?.data)}setSelection(next,preferred=[]){markVetoGuardWrite(this.selectionWriteGuard);const values=this.multiple?[...next]:next.slice(0,1),previousValues=this._selected,previousOptions=this._selectedOptions,old=this.multiple?[...previousValues]:previousValues[0]??"";this.previousValue=old,this._selected=values,this._selectedOptions=this.resolveOccurrences(values,preferred),this.syncFormValue(),this.reflectSelected(),this.updateValidity(),this.requestUpdate("value",old);const sameValues=previousValues.length===values.length&&previousValues.every((value,i)=>value===values[i]),sameOptions=previousOptions.length===this._selectedOptions.length&&previousOptions.every((option,i)=>option===this._selectedOptions[i]);sameValues&&!sameOptions&&this.requestUpdate()}resolveOccurrences(values,preferred=[]){return this.resolveOccurrenceSlots(values,preferred).filter(option=>option!==void 0)}resolveOccurrenceSlots(values,preferred=[]){const claimed=new Set;return values.map((value,index)=>{const hint=preferred.length===values.length?preferred[index]:preferred.find(option=>option?.value===value&&!claimed.has(option)),match=hint&&hint.value===value&&this.options.includes(hint)&&!claimed.has(hint)?hint:this.options.find(option=>option.value===value&&!claimed.has(option));if(match)return claimed.add(match),match})}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&this._selected.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("selectValueMissing")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"blank",this._selected.length===0)}syncFormValue(){if(!this.multiple){this.internals.setFormValue(this._selected[0]??"");return}const state2=JSON.stringify(this._selected);if(!this.name){this.internals.setFormValue(null,state2);return}const data=new FormData;for(const value of this._selected)data.append(this.name,value);this.internals.setFormValue(data,state2)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this._restoredStateActive=!1,this._valueDirty=!1;const resetOptions=this._defaultSelectedOptions.length>0?this._defaultSelectedOptions:this.options.filter(option=>wasOptionInitiallySelected(option));this._defaultSelectedOptions.length===0&&resetOptions.length>0&&(this._defaultSelectedOptions=[...resetOptions],this._defaultSelected=resetOptions.map(option=>option.value));const defaults=new Set(resetOptions);for(const option of this.options)option[RESET_OPTION_SELECTED_FROM_OWNER](defaults.has(option));this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}formStateRestoreCallback(state2,reason){if(!this.multiple)this.assignValue(typeof state2=="string"?state2:void 0);else{let restored=[];if(typeof state2=="string")try{const parsed=JSON.parse(state2);Array.isArray(parsed)&&parsed.every(entry=>typeof entry=="string")&&(restored=parsed)}catch{}this.assignValue(restored)}this._restoredStateActive=!0,this._valueDirty=!0}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;markVetoGuardWrite(this.selectionWriteGuard);const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity(()=>this.updateValidity())}reportValidity(){return this.validityController.syncConstraints(),this.updateValidity(),this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates()}resetValidity(){this.setCustomValidity("")}disconnectedCallback(){markVetoGuardWrite(this.selectionWriteGuard),this.listboxHidden=!0,this.releaseExternalDescription(),this.popupController.cancel(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.typeBuffer.clear(),this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.popupController.unbindPointer(),this.open=!1}adoptedCallback(){markVetoGuardWrite(this.selectionWriteGuard),super.adoptedCallback(),this.popupController.cancel(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.popupController.unbindPointer(),this.typeBuffer.clear(),queueMicrotask(()=>this.reconnectOpenPopup())}collectOptionsFromSlot(slot){const previous=new Set(this.options),previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;if(this.options=slot.assignedElements({flatten:!0}).filter(isLyraOptionElement),this.optionsObserved=!0,this.adornmentClones=new WeakMap,this.reconcileActiveOption(previousActive,previousActiveRawIndex),this._defaultCaptured){const newDefaults=this.options.filter(option=>!previous.has(option)&&option.defaultSelected),newLive=this.options.filter(option=>!previous.has(option)&&option.selected&&!option.defaultSelected);this.refreshOptionDefaults();const eligible=[...!this._restoredStateActive&&!this._valueDirty?newDefaults:[],...this._restoredStateActive?[]:newLive];if(eligible.length>0){const added=this.multiple?eligible:eligible.slice(-1),occurrences=this.multiple?[...new Set([...this._selectedOptions,...added])]:added;newLive.length>0&&(this._valueDirty=!0),this.setSelection(occurrences.map(option=>option.value),occurrences);return}}else{this._defaultCaptured=!0;const explicitDefault=this.hasAttribute("default-value")||this._defaultValueDirty,allDefaults=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?allDefaults:allDefaults.slice(0,1),allLive=this.options.filter(option=>option.selected),live=this.multiple?allLive:allLive.slice(0,1),initialLive=this.options.filter(option=>wasOptionInitiallySelected(option)),optionDirty=this.options.some(option=>isOptionSelectedDirty(option)),dirtySelected=this.options.filter(option=>isOptionSelectedDirty(option)&&option.selected);if(explicitDefault)this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected);else{const resetOptions=defaults.length>0?defaults:initialLive.length>0?initialLive:live;this._defaultSelected=resetOptions.map(option=>option.value),this._defaultSelectedOptions=[...resetOptions]}const fromDefaults=explicitDefault||defaults.length>0,initial=optionDirty?this.multiple?allLive:dirtySelected.slice(-1)[0]?dirtySelected.slice(-1):live:explicitDefault?this._defaultSelectedOptions:fromDefaults?defaults:live;if(initial.length>0&&!this._restoredStateActive&&!this._valueDirty){(!fromDefaults||optionDirty)&&(this._valueDirty=!0),this.setSelection(initial.map(option=>option.value),[...initial]);return}if(optionDirty&&(this._valueDirty=!0),explicitDefault&&!this._valueDirty&&!this._restoredStateActive){this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]);return}}this.reflectSelected()}refreshOptionDefaults(){if(this.hasAttribute("default-value")||this._defaultValueDirty)return;const declared=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?declared:declared.slice(0,1);this._defaultSelected=defaults.map(option=>option.value),this._defaultSelectedOptions=[...defaults],!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}reflectSelected(){this._selectedOptions=this.resolveOccurrences(this._selected,this._selectedOptions),this._selectedValuesByOption=new Map(this._selectedOptions.map(option=>[option,option.value]));const chosen=new Set(this._selectedOptions);for(const option of this.options)option[SET_OPTION_SELECTED_FROM_OWNER](chosen.has(option))}selectUnknownValue(value){if(!(this.selectionRequestDispatching||this.effectiveDisabled)){if(this.multiple){const index=this._selected.indexOf(value),values=index>=0?this._selected.filter((_,position)=>position!==index):[...this._selected,value];this.requestSelection(values,this.resolveOccurrenceSlots(values,this._selectedOptions),()=>{this.emitValueEvents(),this.emit("lr-activate",{value})});return}this.hide(),this.emit("lr-activate",{value})}}resolvedLabelFor(value,occurrenceIndex=0){const option=(this._selectedOptions[occurrenceIndex]?.value===value?this._selectedOptions[occurrenceIndex]:void 0)??this._selectedOptions.find(candidate=>candidate.value===value)??this.options.find(candidate=>candidate.value===value);return option&&(option.label||option.value)}labelFor(value,occurrenceIndex=0){const resolved=this.resolvedLabelFor(value,occurrenceIndex);if(resolved!==void 0)return resolved;if(this.loading)return this.localize("loading");const override=this.optionsObserved?this.getUnknownLabel?.(value):void 0;return override!==void 0&&override.trim().length>0?override:value}isUnknownValue(value,occurrenceIndex=0){return!this.optionsObserved||this.loading||value===""?!1:this.resolvedLabelFor(value,occurrenceIndex)===void 0}get onlyOption(){if(!this.autoCommitSingleOption)return;const navigable=this.navigableOptions(this.options);return navigable.length===1?navigable[0]:void 0}isOptionAvailable(option){return!option.disabled&&!option.inert&&!option.closest("[inert]")}navigableOptions(options=this.listboxOptions){return options.filter(option=>this.isOptionAvailable(option))}get unknownValues(){return this.withUnknownOption?this._selected.filter((value,index)=>this.isUnknownValue(value,index)):[]}get unknownOptions(){const values=this.unknownValues;if(values.length===0)return this.unknownOptionCache.clear(),[];for(const key of[...this.unknownOptionCache.keys()])values.includes(key)||this.unknownOptionCache.delete(key);return values.map(value=>{let option=this.unknownOptionCache.get(value);return option||(option=this.ownerDocument.createElement(tag("option")),this.unknownOptionCache.set(value,option)),option.value=value,option.label=this.labelFor(value),option})}get listboxOptions(){const unknown=this.unknownOptions;return unknown.length===0?this.options:[...this.options,...unknown]}setActiveIndex(next,navigable=this.navigableOptions()){if(next<0||navigable.length===0){this.activeIndex=-1,this.activeOption=void 0;return}const index=Math.min(next,navigable.length-1);this.activeIndex=index,this.activeOption=navigable[index]}reconcileActiveOption(previousActive,previousRawIndex){if(!previousActive&&this.activeIndex<0)return;const navigable=this.navigableOptions();if(previousActive){const preservedIndex=navigable.indexOf(previousActive);if(preservedIndex>=0){this.setActiveIndex(preservedIndex,navigable);return}}if(navigable.length===0){this.setActiveIndex(-1,navigable);return}const pivot=Math.max(0,previousRawIndex);let nearestIndex=0,nearestDistance=Number.POSITIVE_INFINITY,nearestRawIndex=-1;navigable.forEach((option,index)=>{const rawIndex=this.listboxOptions.indexOf(option),distance=Math.abs(rawIndex-pivot);(distance<nearestDistance||distance===nearestDistance&&rawIndex>=pivot&&nearestRawIndex<pivot)&&(nearestIndex=index,nearestDistance=distance,nearestRawIndex=rawIndex)}),this.setActiveIndex(nearestIndex,navigable)}show(){if(this.open||this.effectiveDisabled)return Promise.resolve();const settled=this.popupController.wait(!0);return this.open=!0,settled}hide(){if(!this.open)return Promise.resolve();const settled=this.popupController.wait(!1);return this.open=!1,settled}positionListbox(){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=this.effectiveDirection;const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');if(!anchor||!listbox)return;this.placedTopLayer=syncTopLayerRelease(listbox,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,listbox,{placement:rtlAwarePlacement(this.placement,this),...topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")),sync:this.sync});const operation=this.cleanup;this.positioningReady=operation.ready.then(positioned=>(positioned&&this.cleanup===operation&&this.open&&this.isConnected&&(this.listboxPositioned=!0,this.revealActiveOption()),positioned))}revealActiveOption(){if(!this.isConnected||!this.open||!this.listboxPositioned||!this.cleanup)return;const listbox=this.renderRoot.querySelector('[part="listbox"]'),activeId=this.triggerElement?.getAttribute("aria-activedescendant"),row=listbox?.querySelector('[part="option"][data-active]');listbox&&row&&activeId&&row.id===activeId&&revealRow(listbox,row)}activateListboxOverlay(){this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>{this.hide()},onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide()},restoreFocusTo:this.triggerElement??null}),this.popupController.bindPointer(),this.positionListbox()}teardownListboxOverlay(restoreFocus=this.restoreFocusOnClose){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.popupController.unbindPointer(),this.restoreFocusOnClose=!0}reconnectOpenPopup(){!this.isConnected||!this.open||this.activateListboxOverlay()}updated(changed){super.updated(changed),this.syncExternalDescription();const suppressOpenLifecycle=changed.has("open")&&this.suppressedOpenLifecycleGeneration===this.openStateGeneration,shouldRefreshPosition=this.open&&this.isConnected&&(changed.has("placement")||changed.has("positioningStrategy")||changed.has("topLayer")||changed.has("sync")||this.positionedDirection!==this.effectiveDirection);changed.has("open")&&!this.openVetoed?this.open&&this.isConnected?(this.activateListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-show")):this.open?this.teardownListboxOverlay(!1):(this.teardownListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-hide")):changed.has("open")&&this.openVetoed?(this.restoreFocusOnClose=!0,shouldRefreshPosition&&this.positionListbox()):shouldRefreshPosition&&this.positionListbox(),(changed.has("activeIndex")||changed.has("options")||changed.has("listboxPositioned"))&&this.revealActiveOption(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),changed.has("open")&&(this.pendingOpenTransitionStart=void 0,this.suppressedOpenLifecycleGeneration=void 0)}settleTransition(event){return this.popupController.settle(event,{waitForPosition:async stale=>{for(;this.open;){const readiness=this.positioningReady,positioned=await readiness;if(stale())return!1;if(positioned)break;if(readiness===this.positioningReady)return this.forceCloseOpenState(),!1}return!0},conceal:()=>{this.listboxHidden=!0}})}emitValueEvents(){const self=this,data=this.selectedData,value=self.value,previousValue=this.previousValue;dispatchNativeInputEvent(this),self.emit("lr-input",{value,previousValue,data}),dispatchNativeEvent(this,"change"),self.emit("lr-change",{value,previousValue,data})}assignValue(next){this.value=next}assignDefaultValue(next){this.defaultValue=next}requestSelection(values,preferred,afterCommit,available=()=>!0){if(this.selectionRequestDispatching||this.effectiveDisabled)return!1;const multiple=this.multiple,document=this.ownerDocument,connected=this.isConnected,open=this.open,slots=this.resolveOccurrenceSlots(values,preferred),data=slots.map(option=>option?.data),value=multiple?[...values]:values[0]??"",previousValue=this.value,self=this;let committed=!1;this.selectionRequestDispatching=!0;try{requestThenCommit({requestDetail:{value,previousValue,data},guard:this.selectionWriteGuard,emitRequest:(detail,init)=>self.emit("lr-change-request",detail,init),commit:()=>{const liveOptions=new Set(this.renderRoot.querySelector("slot:not([name])")?.assignedElements({flatten:!0})??[]);this.effectiveDisabled||this.multiple!==multiple||this.ownerDocument!==document||this.isConnected!==connected||this.open!==open||!available(liveOptions)||slots.some((option,index)=>option&&(!liveOptions.has(option)||option.value!==values[index]||!Object.is(option.data,data[index])))||(this.hasInteracted=!0,this._restoredStateActive=!1,this._valueDirty=!0,this.setSelection(values,preferred),committed=!0,afterCommit())}})}finally{this.selectionRequestDispatching=!1}return committed}selectOption(option){if(this.selectionRequestDispatching||this.effectiveDisabled||!this.isOptionAvailable(option))return;if(this.unknownOptionCache.get(option.value)===option){this.selectUnknownValue(option.value);return}const value=option.value,available=liveOptions=>liveOptions.has(option)&&option.value===value&&this.isOptionAvailable(option);if(this.multiple){const currentSlots=this.resolveOccurrenceSlots(this._selected,this._selectedOptions),selectedIndex=currentSlots.indexOf(option),selected=selectedIndex>=0,occurrences=selected?currentSlots.filter((_,index)=>index!==selectedIndex):[...currentSlots,option],values=selected?this._selected.filter((_,index)=>index!==selectedIndex):[...this._selected,value];this.requestSelection(values,occurrences,()=>{this.emitValueEvents(),this.emit("lr-activate",{value})},available);return}if(!(option!==this._selectedOptions[0]||value!==this._selected[0])){this.hide(),this.emit("lr-activate",{value});return}this.requestSelection([value],[option],()=>{this.hide(),this.emitValueEvents(),this.emit("lr-activate",{value})},available)}removeValueAt(index){return this.effectiveDisabled||index<0||index>=this._selected.length?!1:this.requestSelection(this._selected.filter((_,candidateIndex)=>candidateIndex!==index),this.resolveOccurrenceSlots(this._selected,this._selectedOptions).filter((_,candidateIndex)=>candidateIndex!==index),()=>this.emitValueEvents())}clear(){this.effectiveDisabled||this._selected.length===0||this.requestSelection([],[],()=>{this.emitValueEvents(),this.emit("lr-clear")})}removeTag(value,index,event){event.stopPropagation(),this._selected[index]===value&&this.removeValueAt(index)&&this.updateComplete.then(()=>{const buttons=[...this.renderRoot.querySelectorAll('[part~="tag__remove-button"]')];(buttons[Math.min(index,buttons.length-1)]??this.triggerElement)?.focus()})}typeAhead(char){this.typeBuffer.add(char,this.effectiveLocale);const navigable=this.navigableOptions();if(!navigable.length)return;const currentOption=this.open?navigable[this.activeIndex]:this._selectedOptions[this._selectedOptions.length-1],currentIndex=navigable.indexOf(currentOption),match=this.typeBuffer.match(navigable,currentIndex,option=>option.label,this.effectiveLocale,option=>this.open||!this.multiple||!this._selectedOptions.includes(option));if(match===null)return;const candidate=navigable[match];this.open?this.setActiveIndex(match,navigable):this.selectOption(candidate)}adornmentMarkup(option){return Array.from(option.children).filter(child=>["start","end","prefix","suffix"].includes(child.getAttribute("slot")??"")).map(child=>child.outerHTML).join("")}adornmentsFor(option){const cached=this.adornmentClones.get(option);if(cached)return cached;const cloneSlot=selector=>{const nodes=Array.from(option.querySelectorAll(selector));if(nodes.length!==0)return nodes.map(node=>node.cloneNode(!0))},resolved={markup:this.adornmentMarkup(option),start:cloneSlot(':scope > [slot="start"], :scope > [slot="prefix"]'),end:cloneSlot(':scope > [slot="end"], :scope > [slot="suffix"]')};return this.adornmentClones.set(option,resolved),resolved}renderRows(options,activeId){const out=[],chosen=new Set(this._selectedOptions);let currentGroup,groupRows=[],groupIndex=0;const flushGroup=()=>{if(groupRows.length!==0){if(currentGroup){const labelId=`${this.listId}-group-${groupIndex++}`;out.push(html`<div role="group" aria-labelledby=${labelId}>
           <div id=${labelId} class="group-label" part="group-label">${currentGroup}</div>
           ${groupRows}
         </div>`)}else out.push(...groupRows);groupRows=[]}};return options.forEach((o,i)=>{o.group!==currentGroup&&(flushGroup(),currentGroup=o.group);const id=`${this.listId}-opt-${i}`,unknown=this.unknownOptionCache.get(o.value)===o,selected=unknown||chosen.has(o),adornments=this.adornmentsFor(o);groupRows.push(html`<div
@@ -8,6 +8,7 @@ import{__decorate}from"tslib";import{requestThenCommit}from"../../../internal/re
           data-index=${i}
           data-value=${o.value}
           ?data-unknown-value=${unknown}
+          title=${o.title||nothing}
           aria-selected=${selected?"true":"false"}
           aria-disabled=${this.isOptionAvailable(o)?"false":"true"}
           ?data-active=${id===activeId}
@@ -23,7 +24,7 @@ import{__decorate}from"tslib";import{requestThenCommit}from"../../../internal/re
           </span>
           ${unknown?html`<span part="option-badge">${this.localize("notInCatalog")}</span>`:""}
           ${adornments.end?renderInertPresentation(adornments.end,{part:"option-end"}):""}
-        </div>`)}),flushGroup(),out}renderTag(value,index){const option=(this._selectedOptions[index]?.value===value?this._selectedOptions[index]:void 0)??this.options.find(candidate=>candidate.value===value);if(this.getTag&&option)return this.getTag(option,index);const label=this.labelFor(value,index),unknown=this.isUnknownValue(value,index);return html`<span part="tag tag__base" ?data-unknown-value=${unknown}>
+        </div>`)}),flushGroup(),out}renderTag(value,index){const option=(this._selectedOptions[index]?.value===value?this._selectedOptions[index]:void 0)??this.options.find(candidate=>candidate.value===value);if(this.getTag&&option)return this.getTag(option,index);const label=this.labelFor(value,index),unknown=this.isUnknownValue(value,index);return html`<span part="tag tag__base" title=${option?.title||nothing} ?data-unknown-value=${unknown}>
       <span part="tag-label"
         ><span part="tag__content" aria-hidden="true">${label}</span
         >${unknown?html`<span part="unknown-value" aria-hidden="true">${this.localize("notInCatalog")}</span>`:""}</span

package/dist/components/forms/signature-pad/signature-pad.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing,svg}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{isBarredFromValidation}from"../../../internal/form-associated.js";import{AnchoredValidityController}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{dispatchNativeEvent}from"../../../internal/native-event-relay.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{styles}from"./signature-pad.styles.js";import{SIGNATURE_PAD_MAX_STROKES,SIGNATURE_PAD_MAX_POINTS}from"./signature-pad-limits.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_signaturePad,LYRA_DEFAULT_signaturePadEmpty,LYRA_DEFAULT_signaturePadInstructions,LYRA_DEFAULT_signaturePadLabel,LYRA_DEFAULT_signaturePadPenDown,LYRA_DEFAULT_signaturePadPenUp,LYRA_DEFAULT_signaturePadSigned}from"../../../internal/default-strings.generated.js";import{SIGNATURE_PAD_MAX_STROKES as SIGNATURE_PAD_MAX_STROKES2,SIGNATURE_PAD_MAX_POINTS as SIGNATURE_PAD_MAX_POINTS2}from"./signature-pad-limits.js";installFormControlLabelSupport();const EMPTY=Object.freeze([]),EXPORT_SIZE=1024,MIN_DISTANCE=.002,at=(x,y)=>Object.freeze([x,y].map(v=>Math.round(Math.min(1,Math.max(0,v))*1e4)/1e4));function normalizeStrokes(input){const strokes=[];for(const raw of Array.isArray(input)?input:[]){if(strokes.length===SIGNATURE_PAD_MAX_STROKES)break;const points=[];for(const point of Array.isArray(raw)?raw:[]){if(points.length===SIGNATURE_PAD_MAX_POINTS)break;const[x,y]=Array.isArray(point)?point:[];Number.isFinite(x)&&Number.isFinite(y)&&points.push(at(x,y))}points.length&&strokes.push(Object.freeze(points))}return Object.freeze(strokes)}function pathData(stroke){const points=stroke.map(([x,y])=>`${x} ${y}`);return`M${points.join("L")}L${points[points.length-1]}`}class LyraSignaturePad extends LyraElement{static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,signaturePad:LYRA_DEFAULT_signaturePad,signaturePadEmpty:LYRA_DEFAULT_signaturePadEmpty,signaturePadInstructions:LYRA_DEFAULT_signaturePadInstructions,signaturePadLabel:LYRA_DEFAULT_signaturePadLabel,signaturePadPenDown:LYRA_DEFAULT_signaturePadPenDown,signaturePadPenUp:LYRA_DEFAULT_signaturePadPenUp,signaturePadSigned:LYRA_DEFAULT_signaturePadSigned}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},strokes:{attribute:!1,noAccessor:!0}}}constructor(){super(),this.label="",this.hint="",this.errorText="",this.penDown=!1,this.cursor=at(.5,.5),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this.surface),this.slots=new SlotPresenceController(this),this._name="",this._required=!1,this._disabled=!1,this.fieldsetDisabled=!1,this.hasInteracted=!1,this._strokes=EMPTY,this.ratio=3,this.markInteracted=()=>{this.hasInteracted=!0,this.syncStates()},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted)}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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.syncDisabled(),this.requestUpdate("disabled",old)}get strokes(){return this._strokes}set strokes(next){next!==this._strokes&&this.applyStrokes(normalizeStrokes(next))}get value(){return this._strokes.length?this.dataUrl??=this.exportPng():""}get form(){return this.internals.form}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}clear(){this.applyStrokes(EMPTY)}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncStates()}formResetCallback(){this.hasInteracted=!1,this.applyStrokes(EMPTY)}formStateRestoreCallback(state2){let saved;try{saved=typeof state2=="string"?JSON.parse(state2):void 0}catch{}this.applyStrokes(normalizeStrokes(saved))}formDisabledCallback(disabled){this.fieldsetDisabled=disabled,this.syncDisabled()}connectedCallback(){super.connectedCallback(),this.updateValidity()}disconnectedCallback(){super.disconnectedCallback(),this.cancelStroke(),this.sink?.release(),this.sink=void 0}get inactive(){return this._disabled||this.fieldsetDisabled}get barred(){return isBarredFromValidation({disabled:this.inactive},this.internals)}get surface(){return this.renderRoot?.querySelector('[part="surface"]')}syncDisabled(){this.inactive&&this.cancelStroke(),this.updateValidity()}updateValidity(){const missing=this._required&&!this._strokes.length&&!this.barred;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("fieldRequired"):""),this.syncStates()}syncStates(){syncValidityStates(this.internals,{required:this._required,hasInteracted:this.hasInteracted,barred:this.barred}),this.requestUpdate()}applyStrokes(strokes){const old=this._strokes;this.cancelStroke(),this._strokes=strokes,this.dataUrl=void 0;const{value}=this;value?this.internals.setFormValue(value,JSON.stringify(strokes)):this.internals.setFormValue(null),this.updateValidity(),this.requestUpdate("strokes",old)}exportPng(){const box=this.surface?.getBoundingClientRect();box?.width&&box.height&&(this.ratio=box.width/box.height);const canvas=this.ownerDocument.createElement("canvas"),width=canvas.width=Math.round(EXPORT_SIZE*Math.min(1,this.ratio)),height=canvas.height=Math.round(EXPORT_SIZE/Math.max(1,this.ratio)),context=canvas.getContext("2d");if(!context)return"";context.lineWidth=EXPORT_SIZE/256,context.lineCap=context.lineJoin="round";for(const stroke of this._strokes){context.beginPath();for(const[x,y]of stroke)context.lineTo(x*width,y*height),stroke.length===1&&context.arc(x*width,y*height,context.lineWidth/2,0,2*Math.PI);stroke.length===1?context.fill():context.stroke()}return canvas.toDataURL()}begin(point){return this._strokes.length>=SIGNATURE_PAD_MAX_STROKES?!1:(this.active=[point],this.paintActive(),!0)}extend(point){const stroke=this.active,last=stroke?.[stroke.length-1];!stroke||!last||stroke.length>=SIGNATURE_PAD_MAX_POINTS||Math.hypot(point[0]-last[0],point[1]-last[1])<MIN_DISTANCE||(stroke.push(point),this.paintActive())}commit(){const stroke=this.active;if(!stroke)return this.cancelStroke();this.applyStrokes(Object.freeze([...this._strokes,Object.freeze(stroke)])),this.userChange()}cancelStroke(){this.active=this.pointerId=void 0,this.penDown=!1,this.paintActive()}paintActive(){const path=this.renderRoot?.querySelector(".active");this.active?path?.setAttribute("d",pathData(this.active)):path?.removeAttribute("d")}userChange(){this.markInteracted(),dispatchNativeEvent(this,"change"),this.emit("lr-change")}onPointerDown(event){if(this.inactive||this.active||!event.isPrimary||event.button!==0)return;const surface=event.currentTarget,rect=this.rect=surface.getBoundingClientRect();if(!(!rect.width||!rect.height||!this.begin(this.point(event)))){this.pointerId=event.pointerId;try{surface.setPointerCapture(event.pointerId)}catch{}}}onPointerMove(event){event.pointerId===this.pointerId&&this.extend(this.point(event))}onPointerEnd(event){event.pointerId===this.pointerId&&this.commit()}point({clientX,clientY}){const{left,top,width,height}=this.rect;return at((clientX-left)/width,(clientY-top)/height)}onKeyDown(event){if(this.inactive||event.altKey||event.ctrlKey||event.metaKey)return;const step=event.shiftKey?.1:.01,[x,y]=this.cursor,move={ArrowLeft:[x-step,y],ArrowRight:[x+step,y],ArrowUp:[x,y-step],ArrowDown:[x,y+step]}[event.key];if(move)this.cursor=at(...move),this.penDown&&this.extend(this.cursor);else if(event.key===" "||event.key==="Enter"||event.key==="Escape"&&this.penDown)this.togglePen();else return;event.preventDefault()}togglePen(){this.penDown?(this.sink?.announce(this.localize("signaturePadPenUp")),this.commit()):!this.active&&this.begin(this.cursor)&&(this.penDown=!0,this.sink?.announce(this.localize("signaturePadPenDown")))}onFocus(){this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this})}onBlur(){this.penDown&&this.commit(),this.markInteracted()}onClear(){this.applyStrokes(EMPTY),this.userChange(),this.surface?.focus()}render(){const hasLabel=!!this.label||this.slots.has("label"),hasHint=!!this.hint||this.slots.has("hint"),hasError=!!this.errorText||this.slots.has("error"),hostLabel=this.getAttribute("aria-label"),count=this._strokes.length,[x,y]=this.cursor;return html`
+import{__decorate}from"tslib";import{html,nothing,svg}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{isBarredFromValidation}from"../../../internal/form-associated.js";import{AnchoredValidityController}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{dispatchNativeEvent}from"../../../internal/native-event-relay.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{styles}from"./signature-pad.styles.js";import{SIGNATURE_PAD_MAX_STROKES,SIGNATURE_PAD_MAX_POINTS}from"./signature-pad-limits.js";import{LYRA_DEFAULT_signaturePad,LYRA_DEFAULT_signaturePadEmpty,LYRA_DEFAULT_signaturePadInstructions,LYRA_DEFAULT_signaturePadLabel,LYRA_DEFAULT_signaturePadPenDown,LYRA_DEFAULT_signaturePadPenUp,LYRA_DEFAULT_signaturePadSigned}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";import{SIGNATURE_PAD_MAX_STROKES as SIGNATURE_PAD_MAX_STROKES2,SIGNATURE_PAD_MAX_POINTS as SIGNATURE_PAD_MAX_POINTS2}from"./signature-pad-limits.js";installFormControlLabelSupport();const EMPTY=Object.freeze([]),EXPORT_SIZE=1024,MIN_DISTANCE=.002,at=(x,y)=>Object.freeze([x,y].map(v=>Math.round(Math.min(1,Math.max(0,v))*1e4)/1e4));function normalizeStrokes(input){const strokes=[];for(const raw of Array.isArray(input)?input:[]){if(strokes.length===SIGNATURE_PAD_MAX_STROKES)break;const points=[];for(const point of Array.isArray(raw)?raw:[]){if(points.length===SIGNATURE_PAD_MAX_POINTS)break;const[x,y]=Array.isArray(point)?point:[];Number.isFinite(x)&&Number.isFinite(y)&&points.push(at(x,y))}points.length&&strokes.push(Object.freeze(points))}return Object.freeze(strokes)}function pathData(stroke){const points=stroke.map(([x,y])=>`${x} ${y}`);return`M${points.join("L")}L${points[points.length-1]}`}class LyraSignaturePad extends LyraElement{static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,signaturePad:LYRA_DEFAULT_signaturePad,signaturePadEmpty:LYRA_DEFAULT_signaturePadEmpty,signaturePadInstructions:LYRA_DEFAULT_signaturePadInstructions,signaturePadLabel:LYRA_DEFAULT_signaturePadLabel,signaturePadPenDown:LYRA_DEFAULT_signaturePadPenDown,signaturePadPenUp:LYRA_DEFAULT_signaturePadPenUp,signaturePadSigned:LYRA_DEFAULT_signaturePadSigned}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},strokes:{attribute:!1,noAccessor:!0}}}constructor(){super(),this.label="",this.hint="",this.errorText="",this.penDown=!1,this.cursor=at(.5,.5),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this.surface),this.slots=new SlotPresenceController(this),this._name="",this._required=!1,this._disabled=!1,this.fieldsetDisabled=!1,this.hasInteracted=!1,this._strokes=EMPTY,this.ratio=3,this.markInteracted=()=>{this.hasInteracted=!0,this.syncStates()},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted)}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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.syncDisabled(),this.requestUpdate("disabled",old)}get strokes(){return this._strokes}set strokes(next){next!==this._strokes&&this.applyStrokes(normalizeStrokes(next))}get value(){return this._strokes.length?this.dataUrl??=this.exportPng():""}get form(){return this.internals.form}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}clear(){this.applyStrokes(EMPTY)}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncStates()}formResetCallback(){this.hasInteracted=!1,this.applyStrokes(EMPTY)}formStateRestoreCallback(state2){let saved;try{saved=typeof state2=="string"?JSON.parse(state2):void 0}catch{}this.applyStrokes(normalizeStrokes(saved))}formDisabledCallback(disabled){this.fieldsetDisabled=disabled,this.syncDisabled()}connectedCallback(){super.connectedCallback(),this.updateValidity()}disconnectedCallback(){super.disconnectedCallback(),this.cancelStroke(),this.sink?.release(),this.sink=void 0}get inactive(){return this._disabled||this.fieldsetDisabled}get barred(){return isBarredFromValidation({disabled:this.inactive},this.internals)}get surface(){return this.renderRoot?.querySelector('[part="surface"]')}syncDisabled(){this.inactive&&this.cancelStroke(),this.updateValidity()}updateValidity(){const missing=this._required&&!this._strokes.length&&!this.barred;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("fieldRequired"):""),this.syncStates()}syncStates(){syncValidityStates(this.internals,{required:this._required,hasInteracted:this.hasInteracted,barred:this.barred}),this.requestUpdate()}applyStrokes(strokes){const old=this._strokes;this.cancelStroke(),this._strokes=strokes,this.dataUrl=void 0;const{value}=this;value?this.internals.setFormValue(value,JSON.stringify(strokes)):this.internals.setFormValue(null),this.updateValidity(),this.requestUpdate("strokes",old)}exportPng(){const box=this.surface?.getBoundingClientRect();box?.width&&box.height&&(this.ratio=box.width/box.height);const canvas=this.ownerDocument.createElement("canvas"),width=canvas.width=Math.round(EXPORT_SIZE*Math.min(1,this.ratio)),height=canvas.height=Math.round(EXPORT_SIZE/Math.max(1,this.ratio)),context=canvas.getContext("2d");if(!context)return"";context.lineWidth=EXPORT_SIZE/256,context.lineCap=context.lineJoin="round";for(const stroke of this._strokes){context.beginPath();for(const[x,y]of stroke)context.lineTo(x*width,y*height),stroke.length===1&&context.arc(x*width,y*height,context.lineWidth/2,0,2*Math.PI);stroke.length===1?context.fill():context.stroke()}return canvas.toDataURL()}begin(point){return this._strokes.length>=SIGNATURE_PAD_MAX_STROKES?!1:(this.active=[point],this.paintActive(),!0)}extend(point){const stroke=this.active,last=stroke?.[stroke.length-1];!stroke||!last||stroke.length>=SIGNATURE_PAD_MAX_POINTS||Math.hypot(point[0]-last[0],point[1]-last[1])<MIN_DISTANCE||(stroke.push(point),this.paintActive())}commit(){const stroke=this.active;if(!stroke)return this.cancelStroke();this.applyStrokes(Object.freeze([...this._strokes,Object.freeze(stroke)])),this.userChange()}cancelStroke(){this.active=this.pointerId=void 0,this.penDown=!1,this.paintActive()}paintActive(){const path=this.renderRoot?.querySelector(".active");this.active?path?.setAttribute("d",pathData(this.active)):path?.removeAttribute("d")}userChange(){this.markInteracted(),dispatchNativeEvent(this,"change"),this.emit("lr-change")}onPointerDown(event){if(this.inactive||this.active||!event.isPrimary||event.button!==0)return;const surface=event.currentTarget,rect=this.rect=surface.getBoundingClientRect();if(!(!rect.width||!rect.height||!this.begin(this.point(event)))){this.pointerId=event.pointerId;try{surface.setPointerCapture(event.pointerId)}catch{}}}onPointerMove(event){event.pointerId===this.pointerId&&this.extend(this.point(event))}onPointerEnd(event){event.pointerId===this.pointerId&&this.commit()}point({clientX,clientY}){const{left,top,width,height}=this.rect;return at((clientX-left)/width,(clientY-top)/height)}onKeyDown(event){if(this.inactive||event.altKey||event.ctrlKey||event.metaKey)return;const step=event.shiftKey?.1:.01,[x,y]=this.cursor,move={ArrowLeft:[x-step,y],ArrowRight:[x+step,y],ArrowUp:[x,y-step],ArrowDown:[x,y+step]}[event.key];if(move)this.cursor=at(...move),this.penDown&&this.extend(this.cursor);else if(event.key===" "||event.key==="Enter"||event.key==="Escape"&&this.penDown)this.togglePen();else return;event.preventDefault()}togglePen(){this.penDown?(this.sink?.announce(this.localize("signaturePadPenUp")),this.commit()):!this.active&&this.begin(this.cursor)&&(this.penDown=!0,this.sink?.announce(this.localize("signaturePadPenDown")))}onFocus(){this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this})}onBlur(){this.penDown&&this.commit(),this.markInteracted()}onClear(){this.applyStrokes(EMPTY),this.userChange(),this.surface?.focus()}render(){const hasLabel=!!this.label||this.slots.has("label"),hasHint=!!this.hint||this.slots.has("hint"),hasError=!!this.errorText||this.slots.has("error"),hostLabel=this.getAttribute("aria-label"),count=this._strokes.length,[x,y]=this.cursor;return html`
       <div part="form-control">
         <div id="label" part="form-control-label" ?hidden=${!hasLabel}>${this.label}<slot name="label"></slot></div>
         <div part="base">

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

@@ -1,4 +1,4 @@
-import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import type{LyraSize}from'../../../internal/variants.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';import{type LyraFormValidator}from'../form-validator.js';
+import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import type{LyraSize}from'../../../internal/variants.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';import{type LyraFormValidator}from'../form-validator.js';
 /** The value axis. `'horizontal'` maps values to the inline axis (mirroring
 *  under RTL), `'vertical'` to the block axis with the domain minimum at the
 *  block end. */
@@ -20,7 +20,7 @@ export type SliderValueFormatter=(value:number,handle:SliderHandle)=>string|null
 /** Payload of `lr-input`/`lr-change`. `value` is the value of the handle that
 *  moved and `handle` says which one that was; `minValue`/`maxValue` always
 *  carry both range-handle positions. */
-export interface LyraSliderChangeDetail{value:number;minValue:number;maxValue:number;handle:SliderHandle;}export interface LyraSliderEventMap{input:InputEvent;change:Event;'lr-input':CustomEvent<LyraSliderChangeDetail>;'lr-change':CustomEvent<LyraSliderChangeDetail>;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent<null>;}declare class LyraSliderBase extends LyraElement<LyraSliderEventMap>{}
+export interface LyraSliderChangeDetail{value:number;minValue:number;maxValue:number;handle:SliderHandle;}export interface LyraSliderEventMap{input:InputEvent;change:Event;'lr-input':CustomEvent<LyraSliderChangeDetail>;'lr-change':CustomEvent<LyraSliderChangeDetail>;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent<null>;}declare class LyraSliderBase extends LyraFormControlElement<LyraSliderEventMap>{}
 /**
 * `<lr-slider>` — a numeric range control (e.g. an LLM "temperature"
 * setting), form-associated. Its live `value` and reflected/reset `defaultValue` are numbers;
@@ -202,7 +202,7 @@ get name():string|null;set name(next:string|null);
 get required():boolean;set required(next:boolean);
 /** Prevents focus, user edits, and form submission.
 * @default false */
-get disabled():boolean;set disabled(next:boolean);get effectiveDisabled():boolean;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
+get disabled():boolean;set disabled(next:boolean);get effectiveDisabled():boolean;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);
 /** Lower domain bound.
 * @default 0 */
 get min():number;set min(next:number);

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{RangeDragController,rangePointerRatio,nearestRangeEnd,RANGE_PAGE_STEP_MULTIPLIER}from"../../../internal/range-drag.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{falseDefaultBooleanConverter,literalSetConverter}from"../../../internal/converters.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";installFormControlLabelSupport();const MAX_MARKER_INTERVALS=100,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.withValue=!1,this.valueDisplay="numeric",this.valuePlacement="inline",this.slotPresence=new SlotPresenceController(this),this.dragController=new RangeDragController(this,event=>this.onPointerMove(event),event=>this.onPointerUp(event)),this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.matches(":disabled")||this.rangeFocusTransfer||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,RANGE_PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-RANGE_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,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,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.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),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,reflectFormName(this,this._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._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,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(...args){args[0]==="readonly"&&this.readonly&&(this.pendingKeyHandle=null,this.abortActiveDrags()),super.requestUpdate(...args)}get hasHintSlot(){return this.slotPresence.has("hint")||this.slotPresence.has("help-text")}get hasErrorSlot(){return this.slotPresence.has("error")}get hasLabelSlot(){return this.slotPresence.has("label")}get hasReferenceSlot(){return this.slotPresence.has("reference")}get drags(){return this.dragController.active}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.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.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.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){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=fieldsetDisabled,wasDisabled!==this.effectiveDisabled&&(fieldsetDisabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate())}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),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(){setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"dragging",this.drags.size>0),setCustomState(this.internals,"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>0?this.step:(hi-lo)/100)*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){return rangePointerRatio(e.clientX,e.clientY,rect,rtl,this.orientation==="vertical")}nearestHandle(target){return nearestRangeEnd(target,this.minValue,this.maxValue)===0?"min":"max"}beginDrag(event,handle,captureTarget,rect,rtl){const drag=this.dragController.begin(event,{handle,changed:!1,captureTarget,rect,rtl});return drag&&(this.syncInteractionStates(),this.requestUpdate()),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.dragController.end(pointerId);drag&&(commit&&drag.changed&&this.emitChange(drag.handle),this.syncInteractionStates(),this.requestUpdate())}abortActiveDrags(){this.drags.size!==0&&(this.dragController.abort(),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)}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,invalid){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`
+import{__decorate}from"tslib";import{RangeDragController,rangePointerRatio,nearestRangeEnd,RANGE_PAGE_STEP_MULTIPLIER}from"../../../internal/range-drag.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{falseDefaultBooleanConverter,literalSetConverter}from"../../../internal/converters.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,shadowFocusTarget}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();const MAX_MARKER_INTERVALS=100,HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label",SLIDER_ORIENTATION=literalSetConverter(["horizontal","vertical"],"horizontal");class LyraSliderBase extends LyraFormControlElement{}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.withValue=!1,this.valueDisplay="numeric",this.valuePlacement="inline",this.slotPresence=new SlotPresenceController(this),this.dragController=new RangeDragController(this,event=>this.onPointerMove(event),event=>this.onPointerUp(event)),this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.matches(":disabled")||this.rangeFocusTransfer||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,RANGE_PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-RANGE_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,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,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.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),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,reflectFormName(this,this._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._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,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)}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(...args){args[0]==="readonly"&&this.readonly&&(this.pendingKeyHandle=null,this.abortActiveDrags()),super.requestUpdate(...args)}get hasHintSlot(){return this.slotPresence.has("hint")||this.slotPresence.has("help-text")}get hasErrorSlot(){return this.slotPresence.has("error")}get hasLabelSlot(){return this.slotPresence.has("label")}get hasReferenceSlot(){return this.slotPresence.has("reference")}get drags(){return this.dragController.active}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.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=shadowFocusTarget(this);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=shadowFocusTarget(this),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.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.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){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=fieldsetDisabled,wasDisabled!==this.effectiveDisabled&&(fieldsetDisabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate())}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),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(){setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"dragging",this.drags.size>0),setCustomState(this.internals,"focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=shadowFocusTarget(this);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>0?this.step:(hi-lo)/100)*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){return rangePointerRatio(e.clientX,e.clientY,rect,rtl,this.orientation==="vertical")}nearestHandle(target){return nearestRangeEnd(target,this.minValue,this.maxValue)===0?"min":"max"}beginDrag(event,handle,captureTarget,rect,rtl){const drag=this.dragController.begin(event,{handle,changed:!1,captureTarget,rect,rtl});return drag&&(this.syncInteractionStates(),this.requestUpdate()),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.dragController.end(pointerId);drag&&(commit&&drag.changed&&this.emitChange(drag.handle),this.syncInteractionStates(),this.requestUpdate())}abortActiveDrags(){this.drags.size!==0&&(this.dragController.abort(),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)}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,invalid){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"

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

@@ -1 +1 @@
-import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { --_lr-slider-thumb-size: calc(var(--lr-form-control-height) * 0.4); --_lr-slider-track-thickness: calc( var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 0.25 ); --_lr-slider-row-size: calc(var(--lr-form-control-height) * 0.6); display: flex; align-items: center; flex-wrap: wrap; gap: var(--lr-slider-gap, var(--lr-space-s)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; } [part~="base"] { position: relative; flex: 1 1 auto; min-inline-size: 0; block-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); } [part="track"] { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-inactive, var(--lr-color-border)); } [part="indicator"] { position: absolute; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-active, var(--lr-color-brand)); translate: var(--track-active-offset, 0) 0; } [part="markers"] { position: absolute; inset: 0; pointer-events: none; } [part="marker"] { position: absolute; inset-block-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); transform: translate(-50%, -50%); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); } [part~="thumb"] { position: absolute; inset-block-start: 50%; inline-size: var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); block-size: var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); border-radius: 50%; background: var(--lr-slider-thumb-bg, var(--lr-color-brand)); border: var(--lr-border-width-medium) solid var(--lr-slider-thumb-border-color, var(--lr-color-surface)); box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; touch-action: none; } :host(:dir(rtl)) [part~="thumb"], :host(:dir(rtl)) [part="marker"] { transform: translate(50%, -50%); } [part~="thumb"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); block-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); transform: translate(-50%, -50%); border-radius: 50%; } :host(:dir(rtl)) [part~="thumb"]::before { transform: translate(50%, -50%); } [part~="thumb"]:focus-visible { ${focusRing} } :host(:not(:disabled):not([readonly])) [part~="thumb"]:hover { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)); } :host(:not(:disabled):not([readonly])) [part~="thumb"]:active { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var( --lr-slider-thumb-active-ring-color, var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)) ); cursor: grabbing; } [part~="tooltip"] { position: absolute; inset-block-start: 50%; padding-block: var(--lr-space-2xs); padding-inline: var(--lr-space-xs); border-radius: var(--lr-radius); background: var(--lr-color-neutral); color: var(--lr-color-on-neutral); font-size: var(--lr-font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--lr-transition-fast); } [part~="tooltip"][data-placement="top"] { transform: translate( -50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } [part~="tooltip"][data-placement="bottom"] { transform: translate( -50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } [part~="tooltip"][data-placement="left"] { transform: translate( calc( -100% - var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ), -50% ); } [part~="tooltip"][data-placement="right"] { transform: translate( calc( var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ), -50% ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="top"], :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="left"] { transform: translate(calc(-1 * (var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ))), -50%); } :host(:dir(rtl)) [part~="tooltip"][data-placement="right"] { transform: translate(calc(100% + var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) )), -50%); } [part~="tooltip-visible"] { opacity: 1; } [part="tooltip__arrow"] { position: absolute; inline-size: var(--lr-space-xs); block-size: var(--lr-space-xs); background: inherit; transform: rotate(45deg); } [data-placement="top"] [part="tooltip__arrow"] { inset-block-end: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="bottom"] [part="tooltip__arrow"] { inset-block-start: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="left"] [part="tooltip__arrow"] { inset-inline-end: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="right"] [part="tooltip__arrow"] { inset-inline-start: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } :host(:dir(rtl)) [data-placement="left"] [part="tooltip__arrow"] { inset-inline: calc(var(--lr-space-xs) * -0.5) auto; } :host(:dir(rtl)) [data-placement="right"] [part="tooltip__arrow"] { inset-inline: auto calc(var(--lr-space-xs) * -0.5); } [part~="label"], [part="references"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part~="label"] { font-weight: var(--lr-font-weight-semibold); color: var(--lr-color-text); } [part="references"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="label"][hidden], [part="references"][hidden] { display: none; } ${formControlRequiredMarker} [part='tooltip__content'], [part='value'] [data-readout-end] { unicode-bidi: plaintext; } [part='value'] { flex: 0 0 auto; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); font-variant-numeric: tabular-nums; min-inline-size: var(--lr-size-2-5ch); text-align: end; } [part='label-row'] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lr-slider-gap, var(--lr-space-s)); flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; } [part='label-row'] [part~='label'] { flex: 1 1 0; } [part='label-row'] [part='value'] { flex: 0 1 auto; margin-inline-start: auto; max-inline-size: 100%; overflow-wrap: anywhere; } [part="error"], [part~="hint"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="error"] { color: var(--lr-color-danger); } [part="error"][hidden], [part~="hint"][hidden] { display: none; } :host([orientation="vertical"]) { display: inline-flex; flex-direction: column; inline-size: auto; } :host([orientation="vertical"]) [part~="base"] { flex: 0 0 auto; inline-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); block-size: var(--lr-slider-track-length, var(--lr-size-10rem)); } :host([orientation="vertical"]) [part="track"] { inset-inline: auto; inset-inline-start: 50%; inset-block: 0; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); block-size: auto; transform: translateX(-50%); } :host([orientation="vertical"]) [part="indicator"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateX(-50%); } :host([orientation="vertical"]) [part~="thumb"] { inset-block-start: auto; inset-inline-start: 50%; transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part="marker"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part~="tooltip"] { inset-block-start: auto; inset-inline-start: 50%; } :host([orientation="vertical"]) [part="error"], :host([orientation="vertical"]) [part~="hint"] { flex: 0 0 auto; } :host([orientation="vertical"]:dir(rtl)) [part="track"], :host([orientation="vertical"]:dir(rtl)) [part="indicator"] { transform: translateX(50%); } :host([orientation="vertical"]:dir(rtl)) [part~="thumb"], :host([orientation="vertical"]:dir(rtl)) [part="marker"] { transform: translate(50%, 50%); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="thumb"] { cursor: not-allowed; } :host([readonly]) [part~="thumb"] { cursor: default; } @media (prefers-reduced-motion: reduce) { [part~="tooltip"] { transition: none; } } `;export{styles};
+import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { --_lr-slider-thumb-size: calc(var(--lr-form-control-height) * 0.4); --_lr-slider-track-thickness: calc( var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 0.25 ); --_lr-slider-row-size: calc(var(--lr-form-control-height) * 0.6); display: flex; align-items: center; flex-wrap: wrap; gap: var(--lr-slider-gap, var(--lr-space-s)); inline-size: 100%; min-inline-size: auto; max-inline-size: 100%; } [part~="base"] { position: relative; flex: 1 1 auto; min-inline-size: 0; block-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); } [part="track"] { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-inactive, var(--lr-color-border)); } [part="indicator"] { position: absolute; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-active, var(--lr-color-brand)); translate: var(--track-active-offset, 0) 0; } [part="markers"] { position: absolute; inset: 0; pointer-events: none; } [part="marker"] { position: absolute; inset-block-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); transform: translate(-50%, -50%); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); } [part~="thumb"] { position: absolute; inset-block-start: 50%; inline-size: var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); block-size: var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); border-radius: 50%; background: var(--lr-slider-thumb-bg, var(--lr-color-brand)); border: var(--lr-border-width-medium) solid var(--lr-slider-thumb-border-color, var(--lr-color-surface)); box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; touch-action: none; } :host(:dir(rtl)) [part~="thumb"], :host(:dir(rtl)) [part="marker"] { transform: translate(50%, -50%); } [part~="thumb"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); block-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); transform: translate(-50%, -50%); border-radius: 50%; } :host(:dir(rtl)) [part~="thumb"]::before { transform: translate(50%, -50%); } [part~="thumb"]:focus-visible { ${focusRing} } :host(:not(:disabled):not([readonly])) [part~="thumb"]:hover { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)); } :host(:not(:disabled):not([readonly])) [part~="thumb"]:active { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var( --lr-slider-thumb-active-ring-color, var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)) ); cursor: grabbing; } [part~="tooltip"] { position: absolute; inset-block-start: 50%; padding-block: var(--lr-space-2xs); padding-inline: var(--lr-space-xs); border-radius: var(--lr-radius); background: var(--lr-color-neutral); color: var(--lr-color-on-neutral); font-size: var(--lr-font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--lr-transition-fast); } [part~="tooltip"][data-placement="top"] { transform: translate( -50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } [part~="tooltip"][data-placement="bottom"] { transform: translate( -50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } [part~="tooltip"][data-placement="left"] { transform: translate( calc( -100% - var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ), -50% ); } [part~="tooltip"][data-placement="right"] { transform: translate( calc( var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ), -50% ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="top"], :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="left"] { transform: translate(calc(-1 * (var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ))), -50%); } :host(:dir(rtl)) [part~="tooltip"][data-placement="right"] { transform: translate(calc(100% + var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) )), -50%); } [part~="tooltip-visible"] { opacity: 1; } [part="tooltip__arrow"] { position: absolute; inline-size: var(--lr-space-xs); block-size: var(--lr-space-xs); background: inherit; transform: rotate(45deg); } [data-placement="top"] [part="tooltip__arrow"] { inset-block-end: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="bottom"] [part="tooltip__arrow"] { inset-block-start: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="left"] [part="tooltip__arrow"] { inset-inline-end: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="right"] [part="tooltip__arrow"] { inset-inline-start: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } :host(:dir(rtl)) [data-placement="left"] [part="tooltip__arrow"] { inset-inline: calc(var(--lr-space-xs) * -0.5) auto; } :host(:dir(rtl)) [data-placement="right"] [part="tooltip__arrow"] { inset-inline: auto calc(var(--lr-space-xs) * -0.5); } [part~="label"], [part="references"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: break-word; } [part~="label"] { font-weight: var(--lr-font-weight-semibold); color: var(--lr-color-text); } [part="references"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="label"][hidden], [part="references"][hidden] { display: none; } ${formControlRequiredMarker} [part='tooltip__content'], [part='value'] [data-readout-end] { unicode-bidi: plaintext; } [part='value'] { flex: 0 0 auto; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); font-variant-numeric: tabular-nums; min-inline-size: var(--lr-size-2-5ch); text-align: end; } [part='label-row'] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lr-slider-gap, var(--lr-space-s)); flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; } [part='label-row'] [part~='label'] { flex: 1 1 0; } [part='label-row'] [part='value'] { flex: 0 1 auto; margin-inline-start: auto; max-inline-size: 100%; overflow-wrap: break-word; } [part="error"], [part~="hint"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: break-word; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="error"] { color: var(--lr-color-danger); } [part="error"][hidden], [part~="hint"][hidden] { display: none; } :host([orientation="vertical"]) { display: inline-flex; flex-direction: column; inline-size: auto; } :host([orientation="vertical"]) [part~="base"] { flex: 0 0 auto; inline-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); block-size: var(--lr-slider-track-length, var(--lr-size-10rem)); } :host([orientation="vertical"]) [part="track"] { inset-inline: auto; inset-inline-start: 50%; inset-block: 0; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); block-size: auto; transform: translateX(-50%); } :host([orientation="vertical"]) [part="indicator"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateX(-50%); } :host([orientation="vertical"]) [part~="thumb"] { inset-block-start: auto; inset-inline-start: 50%; transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part="marker"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part~="tooltip"] { inset-block-start: auto; inset-inline-start: 50%; } :host([orientation="vertical"]) [part="error"], :host([orientation="vertical"]) [part~="hint"] { flex: 0 0 auto; } :host([orientation="vertical"]:dir(rtl)) [part="track"], :host([orientation="vertical"]:dir(rtl)) [part="indicator"] { transform: translateX(50%); } :host([orientation="vertical"]:dir(rtl)) [part~="thumb"], :host([orientation="vertical"]:dir(rtl)) [part="marker"] { transform: translate(50%, 50%); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="thumb"] { cursor: not-allowed; } :host([readonly]) [part~="thumb"] { cursor: default; } @media (prefers-reduced-motion: reduce) { [part~="tooltip"] { transition: none; } } `;export{styles};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{setCustomState}from"../../../internal/custom-states.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isRtl}from"../../../internal/rtl.js";import{gemstoneGlyph,gemstoneSelectedGlyphStyles}from"../../../theme/gemstones.js";import{styles}from"./swatch-picker.styles.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{literalSetConverter}from"../../../internal/converters.js";import{activeElementIn}from"../../../internal/active-element.js";import{swatchKeyTarget}from"./swatch-keys.js";const SWATCH_PICKER_MODE=literalSetConverter(["swatch","gemstone"],"swatch");class LyraSwatchPicker extends LyraElement{constructor(){super(...arguments),this.stateInternals=attachInternalsSafely(this),this._items=Object.freeze([]),this.itemSnapshots=new WeakMap,this.value=null,this.size="m",this._mode="swatch",this.accessibleLabel="",this.disabled=!1,this.fallbackTabbableIndex=0,this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items;if(navigable.length===0)return;const targetIndex=swatchKeyTarget(e.key,this.keyboardOriginIndex(e),navigable.length,index=>navigable[index].disabled===!0,isRtl(this));if(targetIndex<0)return;e.preventDefault();const target=navigable[targetIndex];this.select(target,targetIndex),this.focusSwatch(targetIndex)}}static{this.styles=[LyraElement.styles,styles,gemstoneSelectedGlyphStyles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}get items(){return this._items}set items(next){const old=this._items,snapshots=[],rows=[],reserved=new Set;if(Array.isArray(next))for(let index=0;index<Math.min(next.length,512);index++)try{const raw=next[index];if(raw===null||typeof raw!="object")continue;rows.push(raw),reserved.add(this.itemSnapshots.get(raw))}catch{}const identities=new Map,identity=value=>(identities.has(value)||identities.set(value,identities.size),identities.get(value)),snapshotKey=item=>JSON.stringify([item.value,item.color,item.label,identity(item.gemstone),identity(item.icon),item.disabled===!0]),buckets=new Map;for(const item of[...old].reverse()){if(reserved.has(item))continue;const key=snapshotKey(item);let queue=buckets.get(key);queue||buckets.set(key,queue=[]),queue.push(item)}for(const raw of rows)try{let item=this.itemSnapshots.get(raw);if(item&&reserved.delete(item)){snapshots.push(item);continue}if(!item){const{value,color,label}=raw;if(typeof value!="string"||typeof color!="string"||typeof label!="string"||label.trim()==="")continue;const{icon,gemstone,disabled}=raw;item={value,color,label,...icon===void 0?{}:{icon},...gemstone===void 0?{}:{gemstone},...disabled===!0?{disabled}:{}}}const snapshot=buckets.get(snapshotKey(item))?.pop()??Object.freeze({...item});this.itemSnapshots.has(raw)||this.itemSnapshots.set(raw,snapshot),snapshots.push(snapshot)}catch{}this._items=Object.freeze(snapshots),this.requestUpdate("items",old)}get mode(){return this._mode}set mode(next){const normalized=SWATCH_PICKER_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}resolveSelectedIndex(){if(this.value===null)return this.selectedOption=void 0,-1;const identityIndex=this.selectedOption?.value===this.value?this.items.indexOf(this.selectedOption):-1,selectedIndex=identityIndex>=0?identityIndex:this.items.findIndex(option=>option.value===this.value);return this.selectedOption=this.items[selectedIndex],selectedIndex}select(option,index){if(this.disabled||option.disabled)return;const previousIndex=this.resolveSelectedIndex();if(index!==previousIndex||option.value!==this.value){const previousValue=this.value;this.selectedOption=option,this.value=option.value,previousValue===option.value&&this.requestUpdate(),this.emit("lr-change",{value:option.value})}this.emit("lr-activate",{value:option.value})}focusSwatch(index){if(this.disabled)return;const button=this.renderRoot.querySelector(`[part~="swatch"][data-index="${index}"]`);this.cancelFocusReveal(),this.focusRevealFrame=requestAnimationFrame(()=>{if(this.focusRevealFrame=void 0,!this.isConnected||this.disabled)return;const focused=activeElementIn(this.shadowRoot);!(focused instanceof HTMLElement)||!focused.part.contains("swatch")||focused.scrollIntoView({block:"nearest",inline:"nearest",behavior:"instant"})}),button?.focus({preventScroll:!0})}cancelFocusReveal(){this.focusRevealFrame!==void 0&&cancelAnimationFrame(this.focusRevealFrame),this.focusRevealFrame=void 0}disconnectedCallback(){this.cancelFocusReveal(),super.disconnectedCallback()}willUpdate(changed){if(super.willUpdate(changed),setCustomState(this.stateInternals,"selected",this.resolveSelectedIndex()>=0),!changed.has("items"))return;const active=activeElementIn(this.shadowRoot);if(!active?.part?.contains("swatch"))return;const previousOptions=changed.get("items"),previousIndex=Number(active.dataset.index);if(!Number.isInteger(previousIndex)||previousIndex<0)return;const focusedOption=previousOptions?.[previousIndex],identityIndex=focusedOption===void 0?-1:this.items.indexOf(focusedOption),nextIndex=identityIndex>=0?identityIndex:Math.min(previousIndex,this.items.length-1);if(nextIndex<0){this.pendingFocusIndex=void 0,this.fallbackTabbableIndex=0;return}this.pendingFocusIndex=nextIndex,this.fallbackTabbableIndex=nextIndex}updated(changed){super.updated(changed),!(!changed.has("items")||this.pendingFocusIndex===void 0)&&this.scheduleAfterUpdate(()=>{const pendingIndex=this.pendingFocusIndex;this.pendingFocusIndex=void 0,!(pendingIndex===void 0||this.items.length===0)&&this.focusSwatch(Math.min(pendingIndex,this.items.length-1))},"restore-swatch-picker-focus")}tabbableSwatch(){return this.renderRoot?.querySelector(`[part~="swatch"][data-index="${this.tabbableIndex()}"]`)??null}tabbableIndex(){const selectedIndex=this.resolveSelectedIndex(),index=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return this.items[index]?.disabled?this.items.findIndex(item=>!item.disabled):index}click(){this.disabled||this.tabbableSwatch()?.click()}focus(options){this.cancelFocusReveal(),!this.disabled&&this.tabbableSwatch()?.focus(options)}blur(){this.cancelFocusReveal(),this.tabbableSwatch()?.blur()}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.part?.contains("swatch")===!0&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.shadowRoot),candidate=fromEvent??(focused?.part?.contains("swatch")?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:this.resolveSelectedIndex()}render(){const hostLabel=this.getAttribute("aria-label"),ariaLabel=hostLabel!==null?hostLabel:this.accessibleLabel||nothing,selectedIndex=this.resolveSelectedIndex(),tabbableIndex=this.tabbableIndex();return html`
+import{__decorate}from"tslib";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{setCustomState}from"../../../internal/custom-states.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isRtl}from"../../../internal/rtl.js";import{gemstoneGlyph,gemstoneSelectedGlyphStyles}from"../../../theme/gemstones.js";import{styles}from"./swatch-picker.styles.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{literalSetConverter}from"../../../internal/converters.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{swatchKeyTarget}from"./swatch-keys.js";const SWATCH_PICKER_MODE=literalSetConverter(["swatch","gemstone"],"swatch");class LyraSwatchPicker extends LyraElement{constructor(){super(...arguments),this.stateInternals=attachInternalsSafely(this),this._items=Object.freeze([]),this.itemSnapshots=new WeakMap,this.value=null,this.size="m",this._mode="swatch",this.accessibleLabel="",this.disabled=!1,this.fallbackTabbableIndex=0,this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items;if(navigable.length===0)return;const targetIndex=swatchKeyTarget(e.key,this.keyboardOriginIndex(e),navigable.length,index=>navigable[index].disabled===!0,isRtl(this));if(targetIndex<0)return;e.preventDefault();const target=navigable[targetIndex];this.select(target,targetIndex),this.focusSwatch(targetIndex)}}static{this.styles=[LyraElement.styles,styles,gemstoneSelectedGlyphStyles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}get items(){return this._items}set items(next){const old=this._items,snapshots=[],rows=[],reserved=new Set;if(Array.isArray(next))for(let index=0;index<Math.min(next.length,512);index++)try{const raw=next[index];if(raw===null||typeof raw!="object")continue;rows.push(raw),reserved.add(this.itemSnapshots.get(raw))}catch{}const identities=new Map,identity=value=>(identities.has(value)||identities.set(value,identities.size),identities.get(value)),snapshotKey=item=>JSON.stringify([item.value,item.color,item.label,identity(item.gemstone),identity(item.icon),item.disabled===!0]),buckets=new Map;for(const item of[...old].reverse()){if(reserved.has(item))continue;const key=snapshotKey(item);let queue=buckets.get(key);queue||buckets.set(key,queue=[]),queue.push(item)}for(const raw of rows)try{let item=this.itemSnapshots.get(raw);if(item&&reserved.delete(item)){snapshots.push(item);continue}if(!item){const{value,color,label}=raw;if(typeof value!="string"||typeof color!="string"||typeof label!="string"||label.trim()==="")continue;const{icon,gemstone,disabled}=raw;item={value,color,label,...icon===void 0?{}:{icon},...gemstone===void 0?{}:{gemstone},...disabled===!0?{disabled}:{}}}const snapshot=buckets.get(snapshotKey(item))?.pop()??Object.freeze({...item});this.itemSnapshots.has(raw)||this.itemSnapshots.set(raw,snapshot),snapshots.push(snapshot)}catch{}this._items=Object.freeze(snapshots),this.requestUpdate("items",old)}get mode(){return this._mode}set mode(next){const normalized=SWATCH_PICKER_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}resolveSelectedIndex(){if(this.value===null)return this.selectedOption=void 0,-1;const identityIndex=this.selectedOption?.value===this.value?this.items.indexOf(this.selectedOption):-1,selectedIndex=identityIndex>=0?identityIndex:this.items.findIndex(option=>option.value===this.value);return this.selectedOption=this.items[selectedIndex],selectedIndex}select(option,index){if(this.disabled||option.disabled)return;const previousIndex=this.resolveSelectedIndex();if(index!==previousIndex||option.value!==this.value){const previousValue=this.value;this.selectedOption=option,this.value=option.value,previousValue===option.value&&this.requestUpdate(),this.emit("lr-change",{value:option.value})}this.emit("lr-activate",{value:option.value})}focusSwatch(index){if(this.disabled)return;const button=this.renderRoot.querySelector(`[part~="swatch"][data-index="${index}"]`);this.cancelFocusReveal(),this.focusRevealFrame=requestAnimationFrame(()=>{if(this.focusRevealFrame=void 0,!this.isConnected||this.disabled)return;const focused=shadowFocusTarget(this);!(focused instanceof HTMLElement)||!focused.part.contains("swatch")||focused.scrollIntoView({block:"nearest",inline:"nearest",behavior:"instant"})}),button?.focus({preventScroll:!0})}cancelFocusReveal(){this.focusRevealFrame!==void 0&&cancelAnimationFrame(this.focusRevealFrame),this.focusRevealFrame=void 0}disconnectedCallback(){this.cancelFocusReveal(),super.disconnectedCallback()}willUpdate(changed){if(super.willUpdate(changed),setCustomState(this.stateInternals,"selected",this.resolveSelectedIndex()>=0),!changed.has("items"))return;const active=shadowFocusTarget(this);if(!active?.part?.contains("swatch"))return;const previousOptions=changed.get("items"),previousIndex=Number(active.dataset.index);if(!Number.isInteger(previousIndex)||previousIndex<0)return;const focusedOption=previousOptions?.[previousIndex],identityIndex=focusedOption===void 0?-1:this.items.indexOf(focusedOption),nextIndex=identityIndex>=0?identityIndex:Math.min(previousIndex,this.items.length-1);if(nextIndex<0){this.pendingFocusIndex=void 0,this.fallbackTabbableIndex=0;return}this.pendingFocusIndex=nextIndex,this.fallbackTabbableIndex=nextIndex}updated(changed){super.updated(changed),!(!changed.has("items")||this.pendingFocusIndex===void 0)&&this.scheduleAfterUpdate(()=>{const pendingIndex=this.pendingFocusIndex;this.pendingFocusIndex=void 0,!(pendingIndex===void 0||this.items.length===0)&&this.focusSwatch(Math.min(pendingIndex,this.items.length-1))},"restore-swatch-picker-focus")}tabbableSwatch(){return this.renderRoot?.querySelector(`[part~="swatch"][data-index="${this.tabbableIndex()}"]`)??null}tabbableIndex(){const selectedIndex=this.resolveSelectedIndex(),index=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return this.items[index]?.disabled?this.items.findIndex(item=>!item.disabled):index}click(){this.disabled||this.tabbableSwatch()?.click()}focus(options){this.cancelFocusReveal(),!this.disabled&&this.tabbableSwatch()?.focus(options)}blur(){this.cancelFocusReveal(),this.tabbableSwatch()?.blur()}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.part?.contains("swatch")===!0&&candidate2.getRootNode()===this.renderRoot),focused=shadowFocusTarget(this),candidate=fromEvent??(focused?.part?.contains("swatch")?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:this.resolveSelectedIndex()}render(){const hostLabel=this.getAttribute("aria-label"),ariaLabel=hostLabel!==null?hostLabel:this.accessibleLabel||nothing,selectedIndex=this.resolveSelectedIndex(),tabbableIndex=this.tabbableIndex();return html`
       <div
         part="base"
         role="radiogroup"