@aceshooting/lyra-ui 14.0.0 → 14.1.1

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{activeElementIn,deepActiveElementIn}from"../../../internal/active-element.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./emoji-picker.styles.js";import{loadEmojiDataCached}from"./emoji-data-loader.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_emojiPickerEmpty,LYRA_DEFAULT_emojiPickerGridLabel,LYRA_DEFAULT_emojiPickerGroupActivities,LYRA_DEFAULT_emojiPickerGroupAnimalsNature,LYRA_DEFAULT_emojiPickerGroupComponent,LYRA_DEFAULT_emojiPickerGroupFlags,LYRA_DEFAULT_emojiPickerGroupFoodDrink,LYRA_DEFAULT_emojiPickerGroupObjects,LYRA_DEFAULT_emojiPickerGroupPeopleBody,LYRA_DEFAULT_emojiPickerGroupSmileysEmotion,LYRA_DEFAULT_emojiPickerGroupSymbols,LYRA_DEFAULT_emojiPickerGroupTravelPlaces,LYRA_DEFAULT_emojiPickerGroupUnknown,LYRA_DEFAULT_emojiPickerLoadError,LYRA_DEFAULT_emojiPickerSearchLabel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_item,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const VIRTUALIZE_AT=200,ITEM_SIZE_FALLBACK=40,GAP_FALLBACK=2,VIRTUAL_ROW_HEIGHT_FALLBACK=56,MAX_VIRTUAL_COLUMNS=20,BUILT_IN_GROUP_LABEL_KEYS={0:"emojiPickerGroupSmileysEmotion",1:"emojiPickerGroupPeopleBody",2:"emojiPickerGroupComponent",3:"emojiPickerGroupAnimalsNature",4:"emojiPickerGroupFoodDrink",5:"emojiPickerGroupTravelPlaces",6:"emojiPickerGroupActivities",7:"emojiPickerGroupObjects",8:"emojiPickerGroupSymbols",9:"emojiPickerGroupFlags"},MAX_EMOJI_GROUPS=64,MAX_EMOJIS=2e4,MAX_SHORTCODES_PER_EMOJI=64;function snapshotEmojiGroups(source,itemSnapshots){if(!Array.isArray(source))return Object.freeze([]);const groups=[];let remaining=MAX_EMOJIS;for(let groupIndex=0;groupIndex<Math.min(source.length,MAX_EMOJI_GROUPS)&&remaining>0;groupIndex+=1)try{const rawGroup=source[groupIndex];if(rawGroup===null||typeof rawGroup!="object")continue;const group=rawGroup,key=group.key,label=group.label,rawEmojis=group.emojis;if(typeof key!="string"||typeof label!="string"||!Array.isArray(rawEmojis))continue;const emojis=[],length=Math.min(rawEmojis.length,remaining);for(let itemIndex=0;itemIndex<length;itemIndex+=1)try{const rawItem=rawEmojis[itemIndex];if(rawItem===null||typeof rawItem!="object")continue;const cached=itemSnapshots.get(rawItem);if(cached){emojis.push(cached);continue}const item=rawItem,emoji=item.emoji,name=item.name,rawShortcodes=item.shortcodes;if(typeof emoji!="string"||typeof name!="string"||rawShortcodes!==void 0&&!Array.isArray(rawShortcodes))continue;const shortcodes=rawShortcodes===void 0?void 0:Object.freeze(rawShortcodes.slice(0,MAX_SHORTCODES_PER_EMOJI).filter(entry=>typeof entry=="string")),snapshot=Object.freeze({emoji,name,...shortcodes===void 0?{}:{shortcodes}});itemSnapshots.set(rawItem,snapshot),emojis.push(snapshot)}catch{}remaining-=emojis.length,groups.push(Object.freeze({key,label,emojis:Object.freeze(emojis)}))}catch{}return Object.freeze(groups)}function probePixels(probe,fallback,allowZero=!1){const computed=probe.ownerDocument.defaultView?.getComputedStyle(probe);if(!computed)return fallback;const px=Number.parseFloat(computed.inlineSize);return!Number.isFinite(px)||px<0?fallback:px>0||allowZero?px:fallback}class EmojiPickerBase extends LyraElement{}class LyraEmojiPicker extends FormAssociated(EmojiPickerBase){constructor(){super(...arguments),this._groups=Object.freeze([]),this.itemSnapshots=new WeakMap,this.builtInGroups=new WeakSet,this.groupsWereSet=!1,this.peerLoadFailed=!1,this.accessibleLabel="",this.size="m",this.label="",this.hint="",this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.labelId=nextId("emoji-picker-label"),this.hintId=nextId("emoji-picker-hint"),this.errorId=nextId("emoji-picker-error"),this.loadGroups=loadEmojiDataCached,this.queryText="",this.activeIndex=0,this.virtualScrollTop=0,this.observedGridVirtualized=!1,this.liveGeometryReady=!1,this.ownerRealmGeneration=0,this.gridId=nextId("emoji-picker-grid"),this.haystacks=new WeakMap,this.onGeometryResize=()=>{const previous=this.geometryCache;if(this.geometryCache=void 0,!previous)return;const next=this.geometry();next.itemSize===previous.itemSize&&next.gap===previous.gap&&next.rowHeight===previous.rowHeight||this.requestUpdate()},this.onSearchInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.pendingGridFocus=void 0,this.queryText=event.target.value,this.activeIndex=0)},this.onSearchFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onLabelSlotChange=event=>{this.hasLabelSlot=event.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedElements({flatten:!0}).length>0},this.onNavigationKeyDown=event=>{if(this.liveDisabled)return;const items=this.flatItems;if(items.length===0)return;const inSearch=event.currentTarget===this.searchEl,forwardKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";let target;if(event.key===forwardKey)target=this.activeIndex+1;else if(event.key===backwardKey)target=this.activeIndex-1;else if(event.key==="ArrowDown")target=this.activeIndex+this.columnsPerRow();else if(event.key==="ArrowUp")target=this.activeIndex-this.columnsPerRow();else if(event.key==="Home"&&!inSearch)target=0;else if(event.key==="End"&&!inSearch)target=items.length-1;else if(event.key==="Enter"||event.key===" "&&!inSearch){event.preventDefault();const item=items[this.activeIndex];item&&this.pick(item);return}else return;event.preventDefault(),inSearch&&(this.pendingGridFocus=void 0),this.setActiveIndex(target,!inSearch)},this.onGridFocusIn=event=>{const button=event.target;if(button?.nodeType!==1||button.localName!=="button")return;const option=button,indexed=Number(option.dataset.index),index=Number.isInteger(indexed)?indexed:this.optionButtons().indexOf(option);this.pendingGridFocus||(this.focusedGridItem=this.flatItems[index],index>=0&&index!==this.activeIndex&&this.setActiveIndex(index,!1))},this.onEmojiPointerEnter=itemIndex=>{this.pendingGridFocus=void 0,this.setActiveIndex(itemIndex,!1)},this.onGridScroll=event=>{if(!this.isVirtualized)return;const grid=event.currentTarget;this.virtualScrollTop=grid.scrollTop;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||this.virtualScrollRaf!==void 0&&this.virtualScrollRafWindow===ownerWindow&&this.virtualScrollRafDocument===ownerDocument)return;this.cancelVirtualScrollFrame();const generation=this.ownerRealmGeneration;let handle=0;handle=ownerWindow.requestAnimationFrame(()=>{this.virtualScrollRaf!==handle||this.virtualScrollRafWindow!==ownerWindow||this.virtualScrollRafDocument!==ownerDocument||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.virtualScrollRaf=void 0,this.virtualScrollRafWindow=void 0,this.virtualScrollRafDocument=void 0,this.requestUpdate())}),this.virtualScrollRaf=handle,this.virtualScrollRafWindow=ownerWindow,this.virtualScrollRafDocument=ownerDocument}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,emojiPickerEmpty:LYRA_DEFAULT_emojiPickerEmpty,emojiPickerGridLabel:LYRA_DEFAULT_emojiPickerGridLabel,emojiPickerGroupActivities:LYRA_DEFAULT_emojiPickerGroupActivities,emojiPickerGroupAnimalsNature:LYRA_DEFAULT_emojiPickerGroupAnimalsNature,emojiPickerGroupComponent:LYRA_DEFAULT_emojiPickerGroupComponent,emojiPickerGroupFlags:LYRA_DEFAULT_emojiPickerGroupFlags,emojiPickerGroupFoodDrink:LYRA_DEFAULT_emojiPickerGroupFoodDrink,emojiPickerGroupObjects:LYRA_DEFAULT_emojiPickerGroupObjects,emojiPickerGroupPeopleBody:LYRA_DEFAULT_emojiPickerGroupPeopleBody,emojiPickerGroupSmileysEmotion:LYRA_DEFAULT_emojiPickerGroupSmileysEmotion,emojiPickerGroupSymbols:LYRA_DEFAULT_emojiPickerGroupSymbols,emojiPickerGroupTravelPlaces:LYRA_DEFAULT_emojiPickerGroupTravelPlaces,emojiPickerGroupUnknown:LYRA_DEFAULT_emojiPickerGroupUnknown,emojiPickerLoadError:LYRA_DEFAULT_emojiPickerLoadError,emojiPickerSearchLabel:LYRA_DEFAULT_emojiPickerSearchLabel,fieldRequired:LYRA_DEFAULT_fieldRequired,item:LYRA_DEFAULT_item,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get groups(){return this._groups}set groups(value){const old=this._groups,focused=activeElementIn(this.shadowRoot),focusedIndex=Number(focused?.dataset?.index);this.pendingGridFocus=typeof focused?.getAttribute=="function"&&focused.getAttribute("part")?.split(/\s+/).includes("emoji")&&Number.isInteger(focusedIndex)?{item:this.focusedGridItem??this.flatItems[focusedIndex],index:focusedIndex}:void 0,this.groupsWereSet=!0,this.peerLoadFailed=!1,this.builtInGroups=new WeakSet,this._groups=snapshotEmojiGroups(value,this.itemSnapshots),this.requestUpdate("groups",old)}connectedCallback(){if(super.connectedCallback(),this.hasUpdated&&this.syncGeometryProbe(),this.observeGeometryProbe(),this.syncGridObserver(),this.groupsWereSet)return;const ownerDocument=this.ownerDocument,generation=this.ownerRealmGeneration;this.loadGroups().then(loaded=>{if(!(this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.groupsWereSet)){if(!loaded){this.peerLoadFailed=!0,this.announcePeerLoadFailure();return}this.groups=loaded,this.builtInGroups=new WeakSet(this._groups)}})}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.searchEl?.focus(options)}blur(){const active=deepActiveElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.searchEl?.click()}haystackFor(item){const locale=this.effectiveLocale;let cached=this.haystacks.get(item);return(cached===void 0||cached.locale!==locale)&&(cached={locale,value:[item.name,...item.shortcodes??[]].join(" ").toLocaleLowerCase(locale)},this.haystacks.set(item,cached)),cached.value}projection(){const locale=this.effectiveLocale,query2=this.queryText.trim().toLocaleLowerCase(locale),cached=this.projectionCache;if(cached?.source===this._groups&&cached.query===query2&&cached.locale===locale)return cached;const groups=query2?this._groups.map(group=>({...group,emojis:group.emojis.filter(item=>this.haystackFor(item).includes(query2))})).filter(group=>group.emojis.length>0):this._groups,next={source:this._groups,query:query2,locale,groups,items:groups.flatMap(group=>group.emojis)};return this.projectionCache=next,next}get filteredGroups(){return this.projection().groups}get flatItems(){return this.projection().items}get isVirtualized(){return this.flatItems.length>=VIRTUALIZE_AT}geometry(){if(this.geometryCache)return this.geometryCache;const probe=this.geometryProbe;return probe?(this.geometryCache={itemSize:probePixels(probe.item,ITEM_SIZE_FALLBACK),gap:probePixels(probe.gap,GAP_FALLBACK,!0),rowHeight:probePixels(probe.row,VIRTUAL_ROW_HEIGHT_FALLBACK)},this.geometryCache):{itemSize:ITEM_SIZE_FALLBACK,gap:GAP_FALLBACK,rowHeight:VIRTUAL_ROW_HEIGHT_FALLBACK}}syncGeometryProbe(){if(this.geometryProbe||!this.isVirtualized||!this.ownerDocument)return;const makeProbe=name=>{const probe=this.ownerDocument.createElement("div");return probe.dataset.probe=name,probe},root=makeProbe("root");root.setAttribute("aria-hidden","true");const item=makeProbe("item"),gap=makeProbe("gap"),row=makeProbe("row");root.append(item,gap,row),this.renderRoot.append(root),this.geometryProbe={root,item,gap,row},this.geometry(),root.remove(),this.geometryProbe=void 0}bindRenderedGeometryProbe(){const root=this.renderRoot?.querySelector('[data-probe="root"]'),item=root?.querySelector('[data-probe="item"]'),gap=root?.querySelector('[data-probe="gap"]'),row=root?.querySelector('[data-probe="row"]');if(!root||!item||!gap||!row)return;if(this.geometryProbe?.root===root){this.observeGeometryProbe();return}const prior=this.geometryCache??{itemSize:ITEM_SIZE_FALLBACK,gap:GAP_FALLBACK,rowHeight:VIRTUAL_ROW_HEIGHT_FALLBACK};this.geometryProbe={root,item,gap,row},this.geometryCache=void 0;const next=this.geometry();this.liveGeometryReady=!0,this.observeGeometryProbe(),(prior.itemSize!==next.itemSize||prior.gap!==next.gap||prior.rowHeight!==next.rowHeight)&&this.ownerDocument.defaultView?.requestAnimationFrame(()=>{this.isConnected&&this.geometryProbe?.root===root&&this.requestUpdate()})}observeGeometryProbe(){const probe=this.geometryProbe,ownerDocument=this.ownerDocument;if(!probe||!this.isConnected||this.geometryObserver&&this.geometryObserverDocument===ownerDocument&&this.geometryObserverRoot===probe.root)return;this.resetGeometryObserver();const ResizeObserverCtor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const generation=this.ownerRealmGeneration,observer=new ResizeObserverCtor(()=>{this.geometryObserver!==observer||this.geometryObserverDocument!==ownerDocument||this.geometryObserverRoot!==probe.root||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onGeometryResize()});this.geometryObserver=observer,this.geometryObserverDocument=ownerDocument,this.geometryObserverRoot=probe.root,observer.observe(probe.item),observer.observe(probe.gap),observer.observe(probe.row)}resetGeometryObserver(){this.geometryObserver?.disconnect(),this.geometryObserver=void 0,this.geometryObserverDocument=void 0,this.geometryObserverRoot=void 0}groupLabel(group){if(!this.builtInGroups.has(group))return group.label;const labelKey=BUILT_IN_GROUP_LABEL_KEYS[group.key];return labelKey?this.localize(labelKey):this.localize("emojiPickerGroupUnknown",void 0,{group:group.key})}virtualRows(){const projection=this.projection(),columns=this.columnsPerRow();if(this.rowCache?.projection===projection&&this.rowCache.columns===columns)return this.rowCache.rows;let index=0;const rows=[];for(const group of projection.groups)for(let offset=0;offset<group.emojis.length;offset+=columns)rows.push({label:offset===0?this.groupLabel(group):void 0,items:group.emojis.slice(offset,offset+columns).map(item=>({item,index:index++}))});return this.rowCache={projection,columns,rows},rows}optionButtons(){return[...this.renderRoot.querySelectorAll('[part="emoji"]')]}get selectedIndex(){return this.value?this.flatItems.findIndex(item=>item.emoji===this.value):-1}syncSelectedProjection(){const selectedIndex=this.selectedIndex;for(const button of this.optionButtons())button.setAttribute("aria-selected",Number(button.dataset.index)===selectedIndex?"true":"false")}columnsPerRow(){if(this.isVirtualized){const width=(this.liveGeometryReady?this.renderRoot?.querySelector('[part="grid"]'):void 0)?.clientWidth??0,{itemSize,gap}=this.geometry();return Math.min(MAX_VIRTUAL_COLUMNS,Math.max(1,Math.floor((Math.max(width,itemSize)+gap)/(itemSize+gap))))}const buttons=this.optionButtons();if(buttons.length===0)return 1;const firstTop=buttons[0].offsetTop;let columns=0;for(const button of buttons){if(button.offsetTop!==firstTop)break;columns+=1}return Math.max(1,columns)}setActiveIndex(next,focusTarget){const buttons=this.optionButtons();if(buttons.length===0&&!this.isVirtualized)return;this.activeIndex=Math.max(0,Math.min(next,this.flatItems.length-1)),focusTarget&&(this.pendingGridFocus={item:this.flatItems[this.activeIndex],index:this.activeIndex});const target=this.isVirtualized?this.renderRoot.querySelector(`[part="emoji"][data-index="${this.activeIndex}"]`):buttons[this.activeIndex],previous=this.renderRoot.querySelector('[part="emoji"][data-active]');if(previous&&previous!==target&&(previous.tabIndex=-1,previous.removeAttribute("data-active")),target)target.tabIndex=0,target.setAttribute("data-active",""),this.searchEl?.setAttribute("aria-activedescendant",target.id),target.scrollIntoView({block:"nearest"});else if(this.isVirtualized){this.searchEl?.setAttribute("aria-activedescendant",`${this.gridId}-item-${this.activeIndex}`);const rowIndex=this.virtualRows().findIndex(row=>row.items.some(({index})=>index===this.activeIndex)),grid=this.renderRoot.querySelector('[part="grid"]');rowIndex>=0&&grid&&(grid.scrollTop=rowIndex*this.geometry().rowHeight,this.virtualScrollTop=grid.scrollTop,this.requestUpdate())}focusTarget&&target&&(this.pendingGridFocus=void 0,target.focus())}pick(item){this.liveDisabled||(this.value=item.emoji,this.syncSelectedProjection(),dispatchNativeInputEvent(this),this.emit("lr-input",{value:item.emoji}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:item.emoji}))}cancelVirtualScrollFrame(){this.virtualScrollRaf!==void 0&&this.virtualScrollRafWindow?.cancelAnimationFrame(this.virtualScrollRaf),this.virtualScrollRaf=void 0,this.virtualScrollRafWindow=void 0,this.virtualScrollRafDocument=void 0}syncGridObserver(){const grid=this.renderRoot?.querySelector('[part="grid"]'),virtualized=this.isVirtualized,ownerDocument=this.ownerDocument;if(grid===this.observedGrid&&virtualized===this.observedGridVirtualized&&(!virtualized||this.gridResizeObserverDocument===ownerDocument)||(this.resetGridObserver(),!this.isConnected)||(this.observedGrid=grid??void 0,this.observedGridVirtualized=virtualized,!grid||!virtualized))return;grid.addEventListener("scroll",this.onGridScroll,{passive:!0});const ResizeObserverCtor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const generation=this.ownerRealmGeneration,observer=new ResizeObserverCtor(()=>{this.gridResizeObserver!==observer||this.gridResizeObserverDocument!==ownerDocument||this.observedGrid!==grid||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.requestUpdate()});this.gridResizeObserver=observer,this.gridResizeObserverDocument=ownerDocument,observer.observe(grid)}resetGridObserver(){this.observedGrid?.removeEventListener("scroll",this.onGridScroll),this.gridResizeObserver?.disconnect(),this.gridResizeObserver=void 0,this.gridResizeObserverDocument=void 0,this.observedGrid=void 0,this.observedGridVirtualized=!1,this.cancelVirtualScrollFrame()}willUpdate(changed){super.willUpdate(changed),this.isVirtualized&&this.geometryProbe&&(this.geometryCache=void 0),this.syncGeometryProbe(),this.hasUpdated||this.seedFirstRenderState(()=>{this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error")})}updated(changed){if(super.updated(changed),this.bindRenderedGeometryProbe(),this.syncGridObserver(),!changed.has("queryText")&&!changed.has("groups")){this.restorePendingGridFocus();return}const buttons=this.optionButtons();if(buttons.length===0){this.searchEl?.removeAttribute("aria-activedescendant"),this.pendingGridFocus&&(this.pendingGridFocus=void 0,this.searchEl?.focus());return}if(this.pendingGridFocus){const retainedIndex=this.pendingGridFocus.item?this.flatItems.indexOf(this.pendingGridFocus.item):-1;this.activeIndex=retainedIndex>=0?retainedIndex:Math.max(0,Math.min(this.pendingGridFocus.index,this.flatItems.length-1)),this.pendingGridFocus={item:this.flatItems[this.activeIndex],index:this.activeIndex}}else!this.isVirtualized&&this.activeIndex>=buttons.length&&(this.activeIndex=0);this.setActiveIndex(this.activeIndex,!1),this.syncSelectedProjection(),this.restorePendingGridFocus()}restorePendingGridFocus(){if(!this.pendingGridFocus)return;const target=this.renderRoot.querySelector(`[part="emoji"][data-index="${this.activeIndex}"]`);target&&(this.pendingGridFocus=void 0,target.focus())}disconnectedCallback(){super.disconnectedCallback(),this.releasePeerErrorAnnouncementSink(),this.resetOwnerRealmResources()}announcePeerLoadFailure(){this.isConnected&&(this.peerErrorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releasePeerErrorAnnouncementSink(),this.peerErrorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})),this.peerErrorAnnouncementSink?.announce(this.localize("emojiPickerLoadError")))}releasePeerErrorAnnouncementSink(){this.peerErrorAnnouncementSink?.release(),this.peerErrorAnnouncementSink=void 0}adoptedCallback(){super.adoptedCallback(),this.resetOwnerRealmResources()}resetOwnerRealmResources(){this.ownerRealmGeneration+=1,this.pendingGridFocus=void 0,this.resetGridObserver(),this.resetGeometryObserver()}renderEmojiButton(item,itemIndex,total,selectedIndex){return html`<button
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{activeElementIn,deepActiveElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./emoji-picker.styles.js";import{loadEmojiDataCached}from"./emoji-data-loader.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_emojiPickerEmpty,LYRA_DEFAULT_emojiPickerGridLabel,LYRA_DEFAULT_emojiPickerGroupActivities,LYRA_DEFAULT_emojiPickerGroupAnimalsNature,LYRA_DEFAULT_emojiPickerGroupComponent,LYRA_DEFAULT_emojiPickerGroupFlags,LYRA_DEFAULT_emojiPickerGroupFoodDrink,LYRA_DEFAULT_emojiPickerGroupObjects,LYRA_DEFAULT_emojiPickerGroupPeopleBody,LYRA_DEFAULT_emojiPickerGroupSmileysEmotion,LYRA_DEFAULT_emojiPickerGroupSymbols,LYRA_DEFAULT_emojiPickerGroupTravelPlaces,LYRA_DEFAULT_emojiPickerGroupUnknown,LYRA_DEFAULT_emojiPickerLoadError,LYRA_DEFAULT_emojiPickerSearchLabel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_item,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const VIRTUALIZE_AT=200,ITEM_SIZE_FALLBACK=40,GAP_FALLBACK=2,VIRTUAL_ROW_HEIGHT_FALLBACK=56,MAX_VIRTUAL_COLUMNS=20,BUILT_IN_GROUP_LABEL_KEYS={0:"emojiPickerGroupSmileysEmotion",1:"emojiPickerGroupPeopleBody",2:"emojiPickerGroupComponent",3:"emojiPickerGroupAnimalsNature",4:"emojiPickerGroupFoodDrink",5:"emojiPickerGroupTravelPlaces",6:"emojiPickerGroupActivities",7:"emojiPickerGroupObjects",8:"emojiPickerGroupSymbols",9:"emojiPickerGroupFlags"},MAX_EMOJI_GROUPS=64,MAX_EMOJIS=2e4,MAX_SHORTCODES_PER_EMOJI=64;function snapshotEmojiGroups(source,itemSnapshots,replacements){if(!Array.isArray(source))return Object.freeze([]);const groups=[];let remaining=MAX_EMOJIS;for(let groupIndex=0;groupIndex<Math.min(source.length,MAX_EMOJI_GROUPS)&&remaining>0;groupIndex+=1)try{const rawGroup=source[groupIndex];if(rawGroup===null||typeof rawGroup!="object")continue;const group=rawGroup,key=group.key,label=group.label,rawEmojis=group.emojis;if(typeof key!="string"||typeof label!="string"||!Array.isArray(rawEmojis))continue;const emojis=[],length=Math.min(rawEmojis.length,remaining);for(let itemIndex=0;itemIndex<length;itemIndex+=1)try{const rawItem=rawEmojis[itemIndex];if(rawItem===null||typeof rawItem!="object")continue;const item=rawItem,emoji=item.emoji,name=item.name,rawShortcodes=item.shortcodes;if(typeof emoji!="string"||typeof name!="string"||rawShortcodes!==void 0&&!Array.isArray(rawShortcodes))continue;const shortcodes=rawShortcodes===void 0?void 0:Object.freeze(rawShortcodes.slice(0,MAX_SHORTCODES_PER_EMOJI).filter(entry=>typeof entry=="string")),cached=itemSnapshots.get(rawItem),snapshot=cached?.emoji===emoji&&cached.name===name&&(shortcodes===void 0?cached.shortcodes===void 0:cached.shortcodes!==void 0&&cached.shortcodes.length===shortcodes.length&&shortcodes.every((shortcode,index)=>shortcode===cached.shortcodes?.[index]))?cached:Object.freeze({emoji,name,...shortcodes===void 0?{}:{shortcodes}});cached&&cached!==snapshot&&replacements.set(cached,snapshot),itemSnapshots.set(rawItem,snapshot),emojis.push(snapshot)}catch{}remaining-=emojis.length,groups.push(Object.freeze({key,label,emojis:Object.freeze(emojis)}))}catch{}return Object.freeze(groups)}function probePixels(probe,fallback,allowZero=!1){const computed=probe.ownerDocument.defaultView?.getComputedStyle(probe);if(!computed)return fallback;const px=Number.parseFloat(computed.inlineSize);return!Number.isFinite(px)||px<0?fallback:px>0||allowZero?px:fallback}class EmojiPickerBase extends LyraElement{}class LyraEmojiPicker extends FormAssociated(EmojiPickerBase){constructor(){super(...arguments),this._groups=Object.freeze([]),this.itemSnapshots=new WeakMap,this.builtInGroups=new WeakSet,this.groupsWereSet=!1,this.peerLoadFailed=!1,this.accessibleLabel="",this.size="m",this.label="",this.hint="",this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.labelId=nextId("emoji-picker-label"),this.hintId=nextId("emoji-picker-hint"),this.errorId=nextId("emoji-picker-error"),this.loadGroups=loadEmojiDataCached,this.queryText="",this.activeIndex=0,this.virtualScrollTop=0,this.observedGridVirtualized=!1,this.liveGeometryReady=!1,this.ownerRealmGeneration=0,this.gridId=nextId("emoji-picker-grid"),this.haystacks=new WeakMap,this.onGeometryResize=()=>{const previous=this.geometryCache;if(this.geometryCache=void 0,!previous)return;const next=this.geometry();next.itemSize===previous.itemSize&&next.gap===previous.gap&&next.rowHeight===previous.rowHeight||this.requestUpdate()},this.onSearchInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.pendingGridFocus=void 0,this.queryText=event.target.value,this.activeIndex=0)},this.onSearchFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onLabelSlotChange=event=>{this.hasLabelSlot=event.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedElements({flatten:!0}).length>0},this.onNavigationKeyDown=event=>{if(this.liveDisabled||event.isComposing||event.keyCode===229)return;const items=this.flatItems;if(items.length===0)return;const inSearch=event.currentTarget===this.searchEl,forwardKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";let target;if(event.key===forwardKey)target=this.activeIndex+1;else if(event.key===backwardKey)target=this.activeIndex-1;else if(event.key==="ArrowDown")target=this.activeIndex+this.columnsPerRow();else if(event.key==="ArrowUp")target=this.activeIndex-this.columnsPerRow();else if(event.key==="Home"&&!inSearch)target=0;else if(event.key==="End"&&!inSearch)target=items.length-1;else if(event.key==="Enter"||event.key===" "&&!inSearch){event.preventDefault();const item=items[this.activeIndex];item&&this.pick(item);return}else return;event.preventDefault(),inSearch&&(this.pendingGridFocus=void 0),this.setActiveIndex(target,!inSearch)},this.onGridFocusIn=event=>{const button=event.target;if(button?.nodeType!==1||button.localName!=="button")return;const option=button,indexed=Number(option.dataset.index),index=Number.isInteger(indexed)?indexed:this.optionButtons().indexOf(option);this.pendingGridFocus||(this.focusedGridItem=this.flatItems[index],index>=0&&index!==this.activeIndex&&this.setActiveIndex(index,!1))},this.onEmojiPointerEnter=itemIndex=>{this.pendingGridFocus=void 0,this.setActiveIndex(itemIndex,!1)},this.onGridScroll=event=>{if(!this.isVirtualized)return;const grid=event.currentTarget;this.virtualScrollTop=grid.scrollTop;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||this.virtualScrollRaf!==void 0&&this.virtualScrollRafWindow===ownerWindow&&this.virtualScrollRafDocument===ownerDocument)return;this.cancelVirtualScrollFrame();const generation=this.ownerRealmGeneration;let handle=0;handle=ownerWindow.requestAnimationFrame(()=>{this.virtualScrollRaf!==handle||this.virtualScrollRafWindow!==ownerWindow||this.virtualScrollRafDocument!==ownerDocument||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.virtualScrollRaf=void 0,this.virtualScrollRafWindow=void 0,this.virtualScrollRafDocument=void 0,this.requestUpdate())}),this.virtualScrollRaf=handle,this.virtualScrollRafWindow=ownerWindow,this.virtualScrollRafDocument=ownerDocument}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,emojiPickerEmpty:LYRA_DEFAULT_emojiPickerEmpty,emojiPickerGridLabel:LYRA_DEFAULT_emojiPickerGridLabel,emojiPickerGroupActivities:LYRA_DEFAULT_emojiPickerGroupActivities,emojiPickerGroupAnimalsNature:LYRA_DEFAULT_emojiPickerGroupAnimalsNature,emojiPickerGroupComponent:LYRA_DEFAULT_emojiPickerGroupComponent,emojiPickerGroupFlags:LYRA_DEFAULT_emojiPickerGroupFlags,emojiPickerGroupFoodDrink:LYRA_DEFAULT_emojiPickerGroupFoodDrink,emojiPickerGroupObjects:LYRA_DEFAULT_emojiPickerGroupObjects,emojiPickerGroupPeopleBody:LYRA_DEFAULT_emojiPickerGroupPeopleBody,emojiPickerGroupSmileysEmotion:LYRA_DEFAULT_emojiPickerGroupSmileysEmotion,emojiPickerGroupSymbols:LYRA_DEFAULT_emojiPickerGroupSymbols,emojiPickerGroupTravelPlaces:LYRA_DEFAULT_emojiPickerGroupTravelPlaces,emojiPickerGroupUnknown:LYRA_DEFAULT_emojiPickerGroupUnknown,emojiPickerLoadError:LYRA_DEFAULT_emojiPickerLoadError,emojiPickerSearchLabel:LYRA_DEFAULT_emojiPickerSearchLabel,fieldRequired:LYRA_DEFAULT_fieldRequired,item:LYRA_DEFAULT_item,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get groups(){return this._groups}set groups(value){const old=this._groups,focused=activeElementIn(this.shadowRoot),focusedIndex=Number(focused?.dataset?.index);this.pendingGridFocus=typeof focused?.getAttribute=="function"&&focused.getAttribute("part")?.split(/\s+/).includes("emoji")&&Number.isInteger(focusedIndex)?{item:this.focusedGridItem??this.flatItems[focusedIndex],index:focusedIndex}:void 0,this.groupsWereSet=!0,this.peerLoadFailed=!1,this.builtInGroups=new WeakSet;const replacements=new Map;this._groups=snapshotEmojiGroups(value,this.itemSnapshots,replacements),this.pendingGridFocus?.item&&(this.pendingGridFocus.item=replacements.get(this.pendingGridFocus.item)??this.pendingGridFocus.item),this.requestUpdate("groups",old)}connectedCallback(){if(super.connectedCallback(),this.hasUpdated&&(this.syncGeometryProbe(),this.syncExternalDescription()),this.observeGeometryProbe(),this.syncGridObserver(),this.groupsWereSet)return;const ownerDocument=this.ownerDocument,generation=this.ownerRealmGeneration;this.loadGroups().then(loaded=>{if(!(this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.groupsWereSet)){if(!loaded){this.peerLoadFailed=!0,this.announcePeerLoadFailure();return}this.groups=loaded,this.builtInGroups=new WeakSet(this._groups)}})}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.searchEl?.focus(options)}blur(){const active=deepActiveElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.searchEl?.click()}syncExternalDescription(){if(!this.isConnected)return;const owner=this.renderRoot.querySelector('[part="grid"]');owner&&(this.externalDescriptionLease?this.externalDescriptionLease.update(owner):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,owner,"aria-describedby"))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}formResetCallback(){super.formResetCallback(),this.touched=!1}haystackFor(item){const locale=this.effectiveLocale;let cached=this.haystacks.get(item);return(cached===void 0||cached.locale!==locale)&&(cached={locale,value:[item.name,...item.shortcodes??[]].join(" ").toLocaleLowerCase(locale)},this.haystacks.set(item,cached)),cached.value}projection(){const locale=this.effectiveLocale,query2=this.queryText.trim().toLocaleLowerCase(locale),cached=this.projectionCache;if(cached?.source===this._groups&&cached.query===query2&&cached.locale===locale)return cached;const groups=query2?this._groups.map(group=>{const filtered={...group,emojis:group.emojis.filter(item=>this.haystackFor(item).includes(query2))};return this.builtInGroups.has(group)&&this.builtInGroups.add(filtered),filtered}).filter(group=>group.emojis.length>0):this._groups,next={source:this._groups,query:query2,locale,groups,items:groups.flatMap(group=>group.emojis)};return this.projectionCache=next,next}get filteredGroups(){return this.projection().groups}get flatItems(){return this.projection().items}get isVirtualized(){return this.flatItems.length>=VIRTUALIZE_AT}geometry(){if(this.geometryCache)return this.geometryCache;const probe=this.geometryProbe;return probe?(this.geometryCache={itemSize:probePixels(probe.item,ITEM_SIZE_FALLBACK),gap:probePixels(probe.gap,GAP_FALLBACK,!0),rowHeight:probePixels(probe.row,VIRTUAL_ROW_HEIGHT_FALLBACK)},this.geometryCache):{itemSize:ITEM_SIZE_FALLBACK,gap:GAP_FALLBACK,rowHeight:VIRTUAL_ROW_HEIGHT_FALLBACK}}syncGeometryProbe(){if(this.geometryProbe||!this.isVirtualized||!this.ownerDocument)return;const makeProbe=name=>{const probe=this.ownerDocument.createElement("div");return probe.dataset.probe=name,probe},root=makeProbe("root");root.setAttribute("aria-hidden","true");const item=makeProbe("item"),gap=makeProbe("gap"),row=makeProbe("row");root.append(item,gap,row),this.renderRoot.append(root),this.geometryProbe={root,item,gap,row},this.geometry(),root.remove(),this.geometryProbe=void 0}bindRenderedGeometryProbe(){const root=this.renderRoot?.querySelector('[data-probe="root"]'),item=root?.querySelector('[data-probe="item"]'),gap=root?.querySelector('[data-probe="gap"]'),row=root?.querySelector('[data-probe="row"]');if(!root||!item||!gap||!row)return;if(this.geometryProbe?.root===root){this.observeGeometryProbe();return}const prior=this.geometryCache??{itemSize:ITEM_SIZE_FALLBACK,gap:GAP_FALLBACK,rowHeight:VIRTUAL_ROW_HEIGHT_FALLBACK};this.geometryProbe={root,item,gap,row},this.geometryCache=void 0;const next=this.geometry();this.liveGeometryReady=!0,this.observeGeometryProbe(),(prior.itemSize!==next.itemSize||prior.gap!==next.gap||prior.rowHeight!==next.rowHeight)&&this.ownerDocument.defaultView?.requestAnimationFrame(()=>{this.isConnected&&this.geometryProbe?.root===root&&this.requestUpdate()})}observeGeometryProbe(){const probe=this.geometryProbe,ownerDocument=this.ownerDocument;if(!probe||!this.isConnected||this.geometryObserver&&this.geometryObserverDocument===ownerDocument&&this.geometryObserverRoot===probe.root)return;this.resetGeometryObserver();const ResizeObserverCtor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const generation=this.ownerRealmGeneration,observer=new ResizeObserverCtor(()=>{this.geometryObserver!==observer||this.geometryObserverDocument!==ownerDocument||this.geometryObserverRoot!==probe.root||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onGeometryResize()});this.geometryObserver=observer,this.geometryObserverDocument=ownerDocument,this.geometryObserverRoot=probe.root,observer.observe(probe.item),observer.observe(probe.gap),observer.observe(probe.row)}resetGeometryObserver(){this.geometryObserver?.disconnect(),this.geometryObserver=void 0,this.geometryObserverDocument=void 0,this.geometryObserverRoot=void 0}groupLabel(group){if(!this.builtInGroups.has(group))return group.label;const labelKey=BUILT_IN_GROUP_LABEL_KEYS[group.key];return labelKey?this.localize(labelKey):this.localize("emojiPickerGroupUnknown",void 0,{group:group.key})}virtualRows(){const projection=this.projection(),columns=this.columnsPerRow();if(this.rowCache?.projection===projection&&this.rowCache.columns===columns)return this.rowCache.rows;let index=0;const rows=[];for(const group of projection.groups)for(let offset=0;offset<group.emojis.length;offset+=columns)rows.push({group:offset===0?group:void 0,items:group.emojis.slice(offset,offset+columns).map(item=>({item,index:index++}))});return this.rowCache={projection,columns,rows},rows}optionButtons(){return[...this.renderRoot.querySelectorAll('[part="emoji"]')]}get selectedIndex(){return this.value?this.flatItems.findIndex(item=>item.emoji===this.value):-1}syncSelectedProjection(){const selectedIndex=this.selectedIndex;for(const button of this.optionButtons())button.setAttribute("aria-selected",Number(button.dataset.index)===selectedIndex?"true":"false")}columnsPerRow(){if(this.isVirtualized){const width=(this.liveGeometryReady?this.renderRoot?.querySelector('[part="grid"]'):void 0)?.clientWidth??0,{itemSize,gap}=this.geometry();return Math.min(MAX_VIRTUAL_COLUMNS,Math.max(1,Math.floor((Math.max(width,itemSize)+gap)/(itemSize+gap))))}const buttons=this.optionButtons();if(buttons.length===0)return 1;const firstTop=buttons[0].offsetTop;let columns=0;for(const button of buttons){if(button.offsetTop!==firstTop)break;columns+=1}return Math.max(1,columns)}setActiveIndex(next,focusTarget){const buttons=this.optionButtons();if(buttons.length===0&&!this.isVirtualized)return;this.activeIndex=Math.max(0,Math.min(next,this.flatItems.length-1)),focusTarget&&(this.pendingGridFocus={item:this.flatItems[this.activeIndex],index:this.activeIndex});const target=this.isVirtualized?this.renderRoot.querySelector(`[part="emoji"][data-index="${this.activeIndex}"]`):buttons[this.activeIndex],previous=this.renderRoot.querySelector('[part="emoji"][data-active]');if(previous&&previous!==target&&(previous.tabIndex=-1,previous.removeAttribute("data-active")),target)target.tabIndex=0,target.setAttribute("data-active",""),this.searchEl?.setAttribute("aria-activedescendant",target.id),target.scrollIntoView({block:"nearest"});else if(this.isVirtualized){this.searchEl?.setAttribute("aria-activedescendant",`${this.gridId}-item-${this.activeIndex}`);const rowIndex=this.virtualRows().findIndex(row=>row.items.some(({index})=>index===this.activeIndex)),grid=this.renderRoot.querySelector('[part="grid"]');rowIndex>=0&&grid&&(grid.scrollTop=rowIndex*this.geometry().rowHeight,this.virtualScrollTop=grid.scrollTop,this.requestUpdate())}focusTarget&&target&&(this.pendingGridFocus=void 0,target.focus())}pick(item){this.liveDisabled||(this.value=item.emoji,this.syncSelectedProjection(),dispatchNativeInputEvent(this),this.emit("lr-input",{value:item.emoji}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:item.emoji}))}cancelVirtualScrollFrame(){this.virtualScrollRaf!==void 0&&this.virtualScrollRafWindow?.cancelAnimationFrame(this.virtualScrollRaf),this.virtualScrollRaf=void 0,this.virtualScrollRafWindow=void 0,this.virtualScrollRafDocument=void 0}syncGridObserver(){const grid=this.renderRoot?.querySelector('[part="grid"]'),virtualized=this.isVirtualized,ownerDocument=this.ownerDocument;if(grid===this.observedGrid&&virtualized===this.observedGridVirtualized&&(!virtualized||this.gridResizeObserverDocument===ownerDocument)||(this.resetGridObserver(),!this.isConnected)||(this.observedGrid=grid??void 0,this.observedGridVirtualized=virtualized,!grid||!virtualized))return;grid.addEventListener("scroll",this.onGridScroll,{passive:!0});const ResizeObserverCtor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const generation=this.ownerRealmGeneration,observer=new ResizeObserverCtor(()=>{this.gridResizeObserver!==observer||this.gridResizeObserverDocument!==ownerDocument||this.observedGrid!==grid||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.requestUpdate()});this.gridResizeObserver=observer,this.gridResizeObserverDocument=ownerDocument,observer.observe(grid)}resetGridObserver(){this.observedGrid?.removeEventListener("scroll",this.onGridScroll),this.gridResizeObserver?.disconnect(),this.gridResizeObserver=void 0,this.gridResizeObserverDocument=void 0,this.observedGrid=void 0,this.observedGridVirtualized=!1,this.cancelVirtualScrollFrame()}willUpdate(changed){super.willUpdate(changed),this.isVirtualized&&this.geometryProbe&&(this.geometryCache=void 0),this.syncGeometryProbe(),this.hasUpdated||this.seedFirstRenderState(()=>{this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error")})}updated(changed){if(super.updated(changed),this.bindRenderedGeometryProbe(),this.syncGridObserver(),this.syncExternalDescription(),!changed.has("queryText")&&!changed.has("groups")){this.restorePendingGridFocus();return}const buttons=this.optionButtons();if(buttons.length===0){this.searchEl?.removeAttribute("aria-activedescendant"),this.pendingGridFocus&&(this.pendingGridFocus=void 0,this.searchEl?.focus());return}if(this.pendingGridFocus){const retainedIndex=this.pendingGridFocus.item?this.flatItems.indexOf(this.pendingGridFocus.item):-1;this.activeIndex=retainedIndex>=0?retainedIndex:Math.max(0,Math.min(this.pendingGridFocus.index,this.flatItems.length-1)),this.pendingGridFocus={item:this.flatItems[this.activeIndex],index:this.activeIndex}}else!this.isVirtualized&&this.activeIndex>=buttons.length&&(this.activeIndex=0);this.setActiveIndex(this.activeIndex,!1),this.syncSelectedProjection(),this.restorePendingGridFocus()}restorePendingGridFocus(){if(!this.pendingGridFocus)return;const target=this.renderRoot.querySelector(`[part="emoji"][data-index="${this.activeIndex}"]`);target&&(this.pendingGridFocus=void 0,target.focus())}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.releasePeerErrorAnnouncementSink(),this.resetOwnerRealmResources()}announcePeerLoadFailure(){this.isConnected&&(this.peerErrorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releasePeerErrorAnnouncementSink(),this.peerErrorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})),this.peerErrorAnnouncementSink?.announce(this.localize("emojiPickerLoadError")))}releasePeerErrorAnnouncementSink(){this.peerErrorAnnouncementSink?.release(),this.peerErrorAnnouncementSink=void 0}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.resetOwnerRealmResources(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription()}resetOwnerRealmResources(){this.ownerRealmGeneration+=1,this.pendingGridFocus=void 0,this.resetGridObserver(),this.resetGeometryObserver()}renderEmojiButton(item,itemIndex,total,selectedIndex){return html`<button
       type="button"
       part="emoji"
       id=${`${this.gridId}-item-${itemIndex}`}
@@ -18,14 +18,14 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       <div part="virtual-spacer" style=${`block-size: ${rows.length*rowHeight}px`}>
         ${rows.slice(start,end).map((row,offset)=>html`
             <div part="virtual-row" style=${`transform: translateY(${(start+offset)*rowHeight}px)`}>
-              ${row.label?html`<div part="group-label">${row.label}</div>`:html`<div part="virtual-label" aria-hidden="true"></div>`}
+              ${row.group?html`<div part="group-label">${this.groupLabel(row.group)}</div>`:html`<div part="virtual-label" aria-hidden="true"></div>`}
               <div part="virtual-items">
                 ${row.items.map(({item,index})=>this.renderEmojiButton(item,index,total,selectedIndex))}
               </div>
             </div>
           `)}
       </div>
-    `}render(){const items=this.flatItems,selectedIndex=this.selectedIndex;let index=-1;const hasLabel=this.hasLabelSlot||this.label.length>0,hasHint=this.hasHintSlot||this.hint.length>0,hasError=this.hasErrorSlot||this.errorText.length>0,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),invalid=this.touched&&!this.internals.validity.valid,gridLabel=hostAriaLabel(this);return html`
+    `}render(){const items=this.flatItems,selectedIndex=this.selectedIndex;let index=-1;const hasLabel=this.hasLabelSlot||(this.label??"").length>0,hasHint=this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),invalid=this.touched&&!this.internals.validity.valid,gridLabel=hostAriaLabel(this);return html`
       <div part="form-control">
         <div part="form-control-label" id=${this.labelId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>

package/dist/components/forms/emoji-picker/emoji-types.d.ts

@@ -5,6 +5,6 @@ readonly name:string;
 /** Additional searchable aliases (e.g. `['grinning']`). Matched the same way `name` is. */
 readonly shortcodes?:readonly string[];}export interface EmojiPickerGroup{readonly key:string;
 /** The heading text. Consumer-supplied content is rendered verbatim. Groups produced by the
-*  built-in data adapter are recognized privately by their canonical numeric key so their
-*  library-owned headings can be localized without exposing localization metadata here. */
+*  built-in data adapter retain private provenance through filtering so their library-owned
+*  headings follow live localization. A caller group with the same key keeps its literal label. */
 readonly label:string;readonly emojis:readonly EmojiPickerItem[];}

package/dist/components/forms/icon-button/icon-button.class.d.ts

@@ -12,6 +12,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 *
 * Host `aria-haspopup` and `aria-expanded` values are forwarded reactively to the shadow-internal
 * native button. Host `aria-describedby` IDREFs are resolved through `ariaDescribedByElements`.
+* Description targets follow same-ID replacement, removal, reinsertion, reconnection and document
+* adoption, including transitions between the native button and anchor.
 * When host `aria-controls` names elements in the host's own root, the controls relationship is
 * resolved onto that focused control through the reflected element-reference API so it remains
 * valid across this component's shadow boundary. Assigning that relationship intentionally clears
@@ -79,7 +81,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraIconButton extends LyraElement<LyraIconButtonEventMap>{static styles:import("lit").CSSResultGroup[];static properties:{disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};private _disabled;private hasSyncedDescribedByElements;get disabled():boolean;set disabled(next:boolean);
+export declare class LyraIconButton extends LyraElement<LyraIconButtonEventMap>{static styles:import("lit").CSSResultGroup[];static properties:{disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};private _disabled;private externalDescriptionLease?;get disabled():boolean;set disabled(next:boolean);
 /** Whether the action is disabled. */
 get effectiveDisabled():boolean;
 /** Canonical Lyra glyph name. Shoelace's `name` alias delegates to the same state. */
@@ -102,7 +104,7 @@ download?:string;private baseEl?;private slotEl?;private fallbackSvgEl?;
 *  `[part="fallback"]` SVG, which `updated()` then populates via `syncFallbackGeometry()`. */
 private hasBareGeometry;
 /** Activates the internal native action or link. */
-click():void;focus(options?:FocusOptions):void;blur():void;private onFocus;private onBlur;private onSlotChange;protected updated(changed:PropertyValues):void;private syncDescribedByElements;
+click():void;focus(options?:FocusOptions):void;blur():void;private onFocus;private onBlur;private onSlotChange;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;protected updated(changed:PropertyValues):void;private syncDescribedByElements;private releaseExternalDescription;
 /** Mirrors `<lr-icon>`'s own `syncCustomNodes()`: repopulates `[part="fallback"]` from scratch
 *  on every update so it never drifts from the currently-assigned bare-geometry elements. */
 private syncFallbackGeometry;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-icon-button':LyraIconButton;}}

package/dist/components/forms/icon-button/icon-button.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{syncAriaControlsElements,syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{styles}from"./icon-button.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{isUnsafeSvgCloneAttribute}from"../../../internal/safe-svg.js";import{LYRA_DEFAULT_iconButtonLabel}from"../../../internal/default-strings.generated.js";const BARE_SVG_GEOMETRY_TAGS=new Set(["path","circle","rect","line","polygon","polyline","ellipse","g","use"]),SVG_NAMESPACE="http://www.w3.org/2000/svg";function needsSvgNamespaceFallback(node){return BARE_SVG_GEOMETRY_TAGS.has(node.localName)&&node.namespaceURI!==SVG_NAMESPACE}function cloneToSvgNamespace(node){if(node.localName.includes("-"))return null;const copy=node.ownerDocument.createElementNS(SVG_NAMESPACE,node.localName);for(const attribute of node.attributes)isUnsafeSvgCloneAttribute(attribute.name)||copy.setAttribute(attribute.name,attribute.value);for(const child of node.childNodes)if(child.nodeType===3)copy.append(child.cloneNode(!0));else if(child.nodeType===1){const childCopy=cloneToSvgNamespace(child);childCopy&&copy.append(childCopy)}return copy}class LyraIconButton extends LyraElement{constructor(){super(...arguments),this._disabled=!1,this.hasSyncedDescribedByElements=!1,this.icon="",this.accessibleLabel="",this.triggerHasPopup=null,this.triggerExpanded=null,this.triggerControls=null,this.triggerDescribedBy=null,this.label="",this.hasBareGeometry=!1,this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{relayNativeEvent(this,event)},this.onSlotChange=()=>{const assigned=this.slotEl?.assignedElements({flatten:!0})??[];this.hasBareGeometry=assigned.some(el=>needsSvgNamespaceFallback(el))}}static{this.defaultStrings={...super.defaultStrings,iconButtonLabel:LYRA_DEFAULT_iconButtonLabel}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this._disabled}get name(){return this.icon}set name(next){this.icon=next??""}click(){this.effectiveDisabled||this.baseEl?.click()}focus(options){this.effectiveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}updated(changed){super.updated(changed),this.syncFallbackGeometry(),syncAriaControlsElements(this,this.baseEl,this.triggerControls),this.syncDescribedByElements()}syncDescribedByElements(){!this.triggerDescribedBy&&!this.hasSyncedDescribedByElements||(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.baseEl,this.triggerDescribedBy))}syncFallbackGeometry(){const svgEl=this.fallbackSvgEl;if(!svgEl)return;svgEl.replaceChildren();const assigned=this.slotEl?.assignedElements({flatten:!0})??[];for(const el of assigned){if(!needsSvgNamespaceFallback(el))continue;const copy=cloneToSvgNamespace(el);copy&&svgEl.append(copy)}}render(){const label=this.accessibleLabel||this.label||this.localize("iconButtonLabel"),content=html`${this.icon||this.src?html`<lr-icon
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{syncAriaControlsElements,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{styles}from"./icon-button.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{isUnsafeSvgCloneAttribute}from"../../../internal/safe-svg.js";import{LYRA_DEFAULT_iconButtonLabel}from"../../../internal/default-strings.generated.js";const BARE_SVG_GEOMETRY_TAGS=new Set(["path","circle","rect","line","polygon","polyline","ellipse","g","use"]),SVG_NAMESPACE="http://www.w3.org/2000/svg";function needsSvgNamespaceFallback(node){return BARE_SVG_GEOMETRY_TAGS.has(node.localName)&&node.namespaceURI!==SVG_NAMESPACE}function cloneToSvgNamespace(node){if(node.localName.includes("-"))return null;const copy=node.ownerDocument.createElementNS(SVG_NAMESPACE,node.localName);for(const attribute of node.attributes)isUnsafeSvgCloneAttribute(attribute.name)||copy.setAttribute(attribute.name,attribute.value);for(const child of node.childNodes)if(child.nodeType===3)copy.append(child.cloneNode(!0));else if(child.nodeType===1){const childCopy=cloneToSvgNamespace(child);childCopy&&copy.append(childCopy)}return copy}class LyraIconButton extends LyraElement{constructor(){super(...arguments),this._disabled=!1,this.icon="",this.accessibleLabel="",this.triggerHasPopup=null,this.triggerExpanded=null,this.triggerControls=null,this.triggerDescribedBy=null,this.label="",this.hasBareGeometry=!1,this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{relayNativeEvent(this,event)},this.onSlotChange=()=>{const assigned=this.slotEl?.assignedElements({flatten:!0})??[];this.hasBareGeometry=assigned.some(el=>needsSvgNamespaceFallback(el))}}static{this.defaultStrings={...super.defaultStrings,iconButtonLabel:LYRA_DEFAULT_iconButtonLabel}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this._disabled}get name(){return this.icon}set name(next){this.icon=next??""}click(){this.effectiveDisabled||this.baseEl?.click()}focus(options){this.effectiveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncDescribedByElements()}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncDescribedByElements()}updated(changed){super.updated(changed),this.syncFallbackGeometry(),syncAriaControlsElements(this,this.baseEl,this.triggerControls),this.syncDescribedByElements()}syncDescribedByElements(){const target=this.isConnected?this.baseEl:void 0;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}syncFallbackGeometry(){const svgEl=this.fallbackSvgEl;if(!svgEl)return;svgEl.replaceChildren();const assigned=this.slotEl?.assignedElements({flatten:!0})??[];for(const el of assigned){if(!needsSvgNamespaceFallback(el))continue;const copy=cloneToSvgNamespace(el);copy&&svgEl.append(copy)}}render(){const label=this.accessibleLabel||this.label||this.localize("iconButtonLabel"),content=html`${this.icon||this.src?html`<lr-icon
           name=${this.icon||nothing}
           library=${this.library||nothing}
           src=${this.src||nothing}

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

@@ -43,6 +43,9 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * shared `--lr-icon-button-size` hit target. The `l` and `xl` tiers retain their larger shared
 * control heights.
 *
+* Removing label, hint, help-text, or error-text safely omits the content while retaining
+* native null property readback. Explicit empty strings remain empty.
+*
 * @customElement lr-input
 * @event input - Native-style composed event fired on every user-driven edit.
 * @event change - Native-style composed event fired at the native `change` timing.
@@ -266,7 +269,8 @@ showPicker():void;
 /**
 * Increments the value by `steps` × the effective `step`, through the native `<input>`'s own
 * `stepUp()` — so `min`/`max` clamping and decimal handling stay the platform's, not a
-* hand-rolled reimplementation.
+* hand-rolled reimplementation. Pending `step`, `min`, `max`, and `value` property changes
+* apply synchronously, without waiting for a render.
 *
 * Silent, like the native method: it updates `value`, the submitted form value, and validity,
 * but emits no `input`/`change`. A stepper *button* is a user edit and emits them itself.

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{acquireAriaDescription,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const INPUT_TYPES=new Set(["text","password","email","number","time","search","date","datetime-local","tel","url"]),LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInput extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","type","pattern","min","max","step","minlength","maxlength")]}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??""}get type(){return this._type}set type(next){const old=this._type;this._type=INPUT_TYPES.has(next)?next:"text",old!==this._type&&this.requestUpdate("type",old)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}get inputId(){return this.id||"input"}constructor(){super(),this._type="text",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.placeholder="",this.clearable=!1,this.withClear=!1,this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.autocomplete="",this.title="",this.autofocus=!1,this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.inputMode="",this.enterKeyHint="",this.passwordToggle=!1,this.passwordVisible=!1,this.withoutSpinButtons=!1,this.noSpinButtons=!1,this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.onInput=event=>{this.inputEl&&(this.value=this.inputEl.value,relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}))},this.onChange=event=>{this.inputEl&&(this.value=this.inputEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.effectiveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onKeyDown=event=>{this.effectiveDisabled||this.readonly||submitOnEnter(this,event)},this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible},this.onClear=()=>{this.effectiveDisabled||this.readonly||this.value===""||(this.value="",this.inputEl&&(this.inputEl.value=""),dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),this.emit("lr-input",{value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}),this.emit("lr-clear"),this.inputEl?.focus())},this.addEventListener("invalid",()=>{this.touched=!0})}connectedCallback(){super.connectedCallback(),this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}disconnectedCallback(){this.releaseExternalDescription(),this.releaseRequiredDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.releaseRequiredDescription(),this.isConnected&&this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}syncExternalDescription(){const target=this.inputEl??null;if(!target){this.releaseExternalDescription();return}if(!this.externalDescriptionLease){this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby");return}this.externalDescriptionLease.update(target)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}syncRequiredDescription(){const target=this.inputEl??null,description=this.renderRoot.querySelector("#input-required");if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}formResetCallback(){super.formResetCallback(),this.touched=!1}get input(){return this.inputEl??null}click(){this.effectiveDisabled||this.inputEl?.click()}focus(options){this.effectiveDisabled||this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsDate):null}set valueAsDate(next){const native=this.inputEl;native&&(native.valueAsDate=next,this.value=native.value)}get valueAsNumber(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsNumber):Number.NaN}set valueAsNumber(next){const native=this.inputEl;native&&(native.valueAsNumber=next,this.value=native.value)}showPicker(){const native=this.inputEl;if(!(!native||this.effectiveDisabled||this.readonly)&&"showPicker"in HTMLInputElement.prototype)try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count!==0){try{direction==="up"?native.stepUp(count):native.stepDown(count)}catch{return}this.value!==native.value&&(this.value=native.value)}}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.value=input.value)}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){this.required&&this.value===""?this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired")):this[SET_ANCHORED_VALIDITY]({});return}native.value!==this.value&&(native.value=this.value);const sanitizedAway=this.value!==""&&native.value==="",v=native.validity,own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:!1,tooLong:!1},tooShort=v.tooShort||own.tooShort,tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:!0},this.localize("valueInvalid"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed),changed.has("value")&&(this.value===""?this.internals.states.add("blank"):this.internals.states.delete("blank")),(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("readonly"))&&this.updateValidity(),this.syncRequiredDescription(),this.syncExternalDescription()}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||this.hint.length>0||this.helpText.length>0||this.withHint,hasError=this.slotPresence.has("error")||this.errorText.length>0,hasLabel=this.slotPresence.has("label")||this.label.length>0||this.withLabel,describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" "),isPassword=this.type==="password",showPasswordToggle=isPassword&&this.passwordToggle,nativeType=isPassword&&this.passwordVisible?"text":this.type,canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{acquireAriaDescription,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const INPUT_TYPES=new Set(["text","password","email","number","time","search","date","datetime-local","tel","url"]),LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInput extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","type","pattern","min","max","step","minlength","maxlength")]}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??""}get type(){return this._type}set type(next){const old=this._type;this._type=INPUT_TYPES.has(next)?next:"text",old!==this._type&&this.requestUpdate("type",old)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}get inputId(){return this.id||"input"}constructor(){super(),this._type="text",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.placeholder="",this.clearable=!1,this.withClear=!1,this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.autocomplete="",this.title="",this.autofocus=!1,this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.inputMode="",this.enterKeyHint="",this.passwordToggle=!1,this.passwordVisible=!1,this.withoutSpinButtons=!1,this.noSpinButtons=!1,this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.onInput=event=>{this.inputEl&&(this.value=this.inputEl.value,relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}))},this.onChange=event=>{this.inputEl&&(this.value=this.inputEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.effectiveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onKeyDown=event=>{this.effectiveDisabled||this.readonly||submitOnEnter(this,event)},this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible},this.onClear=()=>{this.effectiveDisabled||this.readonly||this.value===""||(this.value="",this.inputEl&&(this.inputEl.value=""),dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),this.emit("lr-input",{value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}),this.emit("lr-clear"),this.inputEl?.focus())},this.addEventListener("invalid",()=>{this.touched=!0})}connectedCallback(){super.connectedCallback(),this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}disconnectedCallback(){this.releaseExternalDescription(),this.releaseRequiredDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.releaseRequiredDescription(),this.isConnected&&this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}syncExternalDescription(){const target=this.inputEl??null;if(!target){this.releaseExternalDescription();return}if(!this.externalDescriptionLease){this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby");return}this.externalDescriptionLease.update(target)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}syncRequiredDescription(){const target=this.inputEl??null,description=this.renderRoot.querySelector("#input-required");if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}formResetCallback(){super.formResetCallback(),this.touched=!1}get input(){return this.inputEl??null}click(){this.effectiveDisabled||this.inputEl?.click()}focus(options){this.effectiveDisabled||this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsDate):null}set valueAsDate(next){const native=this.inputEl;native&&(native.valueAsDate=next,this.value=native.value)}get valueAsNumber(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsNumber):Number.NaN}set valueAsNumber(next){const native=this.inputEl;native&&(native.valueAsNumber=next,this.value=native.value)}showPicker(){const native=this.inputEl;if(!(!native||this.effectiveDisabled||this.readonly)&&"showPicker"in HTMLInputElement.prototype)try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count!==0){native.type=this.type,native.min=this.min==null?"":String(this.min),native.max=this.max==null?"":String(this.max),native.step=this.step==null?"":String(this.step),native.value=this.value;try{direction==="up"?native.stepUp(count):native.stepDown(count)}catch{return}this.value!==native.value&&(this.value=native.value)}}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.value=input.value)}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){this.required&&this.value===""?this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired")):this[SET_ANCHORED_VALIDITY]({});return}native.value!==this.value&&(native.value=this.value);const sanitizedAway=this.value!==""&&native.value==="",v=native.validity,own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:!1,tooLong:!1},tooShort=v.tooShort||own.tooShort,tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:!0},this.localize("valueInvalid"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed),changed.has("value")&&(this.value===""?this.internals.states.add("blank"):this.internals.states.delete("blank")),(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("readonly"))&&this.updateValidity(),this.syncRequiredDescription(),this.syncExternalDescription()}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" "),isPassword=this.type==="password",showPasswordToggle=isPassword&&this.passwordToggle,nativeType=isPassword&&this.passwordVisible?"text":this.type,canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
       <div part="form-control">
         <label
           part="form-control-label"

package/dist/components/forms/input/native-time-input.class.d.ts

@@ -5,6 +5,9 @@ import{LyraInput}from'./input.class.js';import type{LyraAppearance}from'../../..
 * Use this control when the platform's own `input[type=time]` UI is preferred. The segmented,
 * locale-aware Web Awesome-compatible field is `<lr-time-input>`.
 *
+* Inherited stepUp/stepDown use pending value, step, min, and max properties synchronously
+* and remain event-silent. Removed label/hint/help-text/error-text content is safely omitted.
+*
 * @customElement lr-native-time-input
 * @csspart base - Compatibility name for the control row; use `time-input`.
 * @csspart time-input - The native time control row. It is the same node as `base` and the

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

@@ -25,6 +25,9 @@ export interface LyraNumberInputEventMap extends LyraInputEventMap{beforeinput:I
 * larger control heights. The mirrored `small`, `medium`, and `large` spellings render exactly as
 * canonical `s`, `m`, and `l`, including row height, padding, and native-input font size.
 *
+* Inherited stepUp/stepDown use pending value, step, min, and max properties synchronously
+* and remain event-silent. Removed label/hint/help-text/error-text content is safely omitted.
+*
 * @customElement lr-number-input
 * @event beforeinput - The internal native input's cancelable `InputEvent`, which bubbles and
 *   composes through the host. Calling `preventDefault()` on the host vetoes the edit.

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

@@ -28,6 +28,9 @@ import{type ComplexAttributeConverter,type PropertyValues,type TemplateResult}fr
 * Host `aria-labelledby` is deliberately not projected: the rendered visible label owns this
 * group's label relationship.
 *
+* Removing label or hint safely omits that content while retaining native null property
+* readback. Explicit empty strings remain empty.
+*
 * @customElement lr-time-input
 * @event input - Native `InputEvent` fired for user edits.
 * @event change - Native `Event` fired when a complete value is committed.

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

@@ -37,7 +37,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             >${this.columnText(name,value)}</button>
           `})}
       </div>
-    `}render(){const hasLabel=this.withLabel||this.label.length>0||this.hasLabelSlot,hasHint=this.withHint||this.hint.length>0||this.hasHintSlot,shownError=this.errorText||(this.touched?this.validationMessage:""),hasError=this.hasErrorSlot||shownError.length>0,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),invalid=hasError||this.touched&&!this.validity.valid,hostAccessibleName=this.getAttribute("aria-label"),accessibleName=hostAccessibleName??(this.label||this.localize("timeInputLabel")),showClear=this.withClear&&(this.value!==""||this.draftHasAny),nativeStep=this.step==="any"?"any":String(this.step);return html`
+    `}render(){const hasLabel=this.withLabel||(this.label??"").length>0||this.hasLabelSlot,hasHint=this.withHint||(this.hint??"").length>0||this.hasHintSlot,shownError=this.errorText||(this.touched?this.validationMessage:""),hasError=this.hasErrorSlot||shownError.length>0,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),invalid=hasError||this.touched&&!this.validity.valid,hostAccessibleName=this.getAttribute("aria-label"),accessibleName=hostAccessibleName??(this.label||this.localize("timeInputLabel")),showClear=this.withClear&&(this.value!==""||this.draftHasAny),nativeStep=this.step==="any"?"any":String(this.step);return html`
       <div part="form-control">
         <label id=${this.labelId} part="form-control-label label" ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.updateSlotState}></slot>

package/dist/components/forms/locale-picker/locale-picker.class.d.ts

@@ -70,6 +70,10 @@ export interface LyraLocaleChangeDetail{value:string;previousValue:string;direct
 * ancestor theme wrapper override the active size tier. A value set directly on the locale picker
 * still wins through normal custom-property inheritance.
 *
+* Host aria-describedby targets supplement local error/hint guidance on the trigger. The
+* relationships track target replacement, missing IDs, removal/reinsertion, reconnect, and adoption.
+* Removed label/hint/error-text content is safely omitted without changing null property readback.
+*
 * @customElement lr-locale-picker
 * @event lr-change - The selection changed. `detail: { value, previousValue, direction }`, where
 *   `direction` is the picked locale's `'ltr'`/`'rtl'` writing direction. Cancelable —
@@ -164,7 +168,7 @@ blur():void;
 /** Activates the internal trigger -- `HTMLElement.prototype.click()` on a custom element with
 *  no native click semantics is otherwise a silent no-op. Mirrors `<lr-select>`'s identical
 *  `click()`. */
-click():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;protected willUpdate(changed:PropertyValues):void;
+click():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;private localDescriptionIds;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;protected willUpdate(changed:PropertyValues):void;
 /** The current locale tag (empty string when nothing is committed). */
 get value():string;set value(next:string);
 /** Reflected current reset default; changing it never overwrites a dirty live `value`. */

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocaleDirection,getRegisteredLyraLocales,subscribeLyraLocaleRegistry,setLyraLocale}from"../../../internal/localization-runtime.js";import{localeNativeName}from"../../media/flag/language-map.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./locale-picker.styles.js";import{declaredDefaultConverter,trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired}from"../../../internal/default-strings.generated.js";const MAX_LOCALE_ENTRIES=512;function snapshotLocaleCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[];for(let index=0;index<Math.min(source.length,MAX_LOCALE_ENTRIES);index+=1)try{const raw=source[index];if(typeof raw=="string"){raw.length>0&&rows.push(raw);continue}if(raw===null||typeof raw!="object")continue;const candidate=raw,tag=candidate.tag,label=candidate.label,country=candidate.country;if(typeof tag!="string"||tag.length===0||label!==void 0&&typeof label!="string"||country!==void 0&&typeof country!="string")continue;rows.push(Object.freeze({tag,...label===void 0?{}:{label},...country===void 0?{}:{country}}))}catch{}return Object.freeze(rows)}class LyraLocalePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get locales(){return this._locales}set locales(next){const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this._open||(this.activeIndex=-1),this.requestUpdate("open",old)}constructor(){super(),this.showFlags=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.touched=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.registryTick=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this._value="",this._open=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this._defaultValue="",this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this.typeAheadBuffer="",this.typeAheadTimerGeneration=0,this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onKeyDown=e=>{if(this.liveDisabled)return;const rows=this.normalizedEntries;switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.min(rows.length-1,this.activeIndex+1));break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.max(0,this.activeIndex-1));break;case"Enter":case" ":if(this.open){e.preventDefault();const activeRow=rows[this.activeIndex];this.activeIndex>=0&&activeRow?this.commit(activeRow.tag):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.dismissFromEscape());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(0));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(rows.length-1));break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.target.closest('[part="option"]')&&e.preventDefault()},this.onListboxClick=e=>{if(this.liveDisabled)return;const tag=e.target.closest('[part="option"]')?.dataset.value;tag!==void 0&&this.commit(tag)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}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}connectedCallback(){super.connectedCallback(),this.syncLocaleAttributeForLocalization(),this.updateValidity(),this.stopRegistrySubscription=subscribeLyraLocaleRegistry(()=>{this.registryTick+=1}),this.hasUpdated&&this.open&&queueMicrotask(()=>this.syncPopup())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.clearTypeAheadTimer(),this.activeScrollGeneration+=1,this.typeAheadBuffer="",this.open=!1}adoptedCallback(){super.adoptedCallback(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlayHandle?.suspend(),this.clearTypeAheadTimer(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),this.open&&(changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.normalizedEntries.length-1),this.queueActiveScroll()),this.hasUpdated||(this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"))}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=next??"",this.internals.setFormValue(this._value),this.updateValidity(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next??"",this.reflectingDefaultValue=!0;try{this._defaultValue?this.setAttribute("value",this._defaultValue):this.removeAttribute("value")}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),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 effectiveDisabled(){return this.disabled||this._fieldsetDisabled}updateValidity(){this.localizedValidityLocale=this.effectiveMessageLocale;const valueMissing=this.hasMissingRequiredValue(),message=valueMissing?this.localize("localePickerRequired"):"";this.localizedIntrinsicMessage=message,valueMissing?this.validityController.setValidity({valueMissing:!0},message):this.validityController.setValidity({}),this.syncCustomStates()}refreshLocalizedIntrinsicValidity(changed){const locale=this.effectiveMessageLocale,message=this.hasMissingRequiredValue()?this.localize("localePickerRequired"):"";(changed.has("strings")||locale!==this.localizedValidityLocale||message!==this.localizedIntrinsicMessage)&&this.updateValidity()}hasMissingRequiredValue(){return!this.isBarred()&&this.required&&!this._value}syncLocaleAttributeForLocalization(){this.locale?this.getAttribute("locale")!==this.locale&&this.setAttribute("locale",this.locale):this.hasAttribute("locale")&&this.removeAttribute("locale")}isBarred(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.isBarred()})}formResetCallback(){this.touched=!1,this.restoreLiveValueFromDefault()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.requestUpdate()}get normalizedEntries(){const raw=this.locales;return raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label??localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}))}get previewTag(){return this._value||this.effectiveLocale}entryFor(tag){return this.normalizedEntries.find(e=>e.tag===tag)}labelFor(tag){return this.entryFor(tag)?.label??localeNativeName(tag)}show(){this.open||this.liveDisabled||(this.open=!0)}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){this.open&&(this.deactivatePopupOverlay(!0),this.hide())}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener),this.pointerListenerDocument=void 0,this.pointerListener=void 0}activatePopupOverlay(){if(this.overlayHandle?.isActive()){this.overlayHandle.resume();return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>this.dismissFromEscape(),onBackdrop:()=>this.hide(),restoreFocusTo:()=>this.renderRoot.querySelector('[part="trigger"]')})}deactivatePopupOverlay(restoreFocus){const overlay=this.overlayHandle;this.overlayHandle=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.bindDocumentPointer();const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.cleanup=place(anchor,listbox))}updated(changed){super.updated(changed),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")))&&this.syncPopup(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}commit(tag){const previousValue=this._value;this.value=tag,this.hide(),this.emit("lr-change",{value:tag,previousValue,direction:getLyraLocaleDirection(tag)},{cancelable:!0}).defaultPrevented||setLyraLocale(tag)}typeAhead(char){this.clearTypeAheadTimer(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale);const ownerWindow=this.ownerDocument.defaultView;if(this.isConnected&&ownerWindow){const generation=this.typeAheadTimerGeneration;this.typeAheadTimerWindow=ownerWindow,this.typeAheadTimer=ownerWindow.setTimeout(()=>{this.typeAheadTimerGeneration!==generation||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||(this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0,this.typeAheadBuffer="")},500)}const rows=this.normalizedEntries;if(!rows.length)return;const currentTag=this.open?rows[this.activeIndex]?.tag:this.previewTag,currentIndex=rows.findIndex(r=>r.tag===currentTag),n=rows.length;for(let step=1;step<=n;step++){const idx=(currentIndex+step+n)%n,row=rows[idx];if(row&&row.label.toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.open?this.setActiveIndex(idx):this.commit(row.tag);return}}}clearTypeAheadTimer(){this.typeAheadTimerGeneration+=1,this.typeAheadTimer!==void 0&&this.typeAheadTimerWindow?.clearTimeout(this.typeAheadTimer),this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0}setActiveIndex(index){const last=this.normalizedEntries.length-1,next=last<0||index<0?-1:Math.min(last,index);this.activeIndex=next,this.queueActiveScroll()}queueActiveScroll(){const generation=++this.activeScrollGeneration,index=this.activeIndex;index<0||!this.open||this.updateComplete.then(()=>{generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index||this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`)?.scrollIntoView({block:"nearest"})})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocaleDirection,getRegisteredLyraLocales,subscribeLyraLocaleRegistry,setLyraLocale}from"../../../internal/localization-runtime.js";import{localeNativeName}from"../../media/flag/language-map.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./locale-picker.styles.js";import{declaredDefaultConverter,trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired}from"../../../internal/default-strings.generated.js";const MAX_LOCALE_ENTRIES=512;function snapshotLocaleCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[];for(let index=0;index<Math.min(source.length,MAX_LOCALE_ENTRIES);index+=1)try{const raw=source[index];if(typeof raw=="string"){raw.length>0&&rows.push(raw);continue}if(raw===null||typeof raw!="object")continue;const candidate=raw,tag=candidate.tag,label=candidate.label,country=candidate.country;if(typeof tag!="string"||tag.length===0||label!==void 0&&typeof label!="string"||country!==void 0&&typeof country!="string")continue;rows.push(Object.freeze({tag,...label===void 0?{}:{label},...country===void 0?{}:{country}}))}catch{}return Object.freeze(rows)}class LyraLocalePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get locales(){return this._locales}set locales(next){const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this._open||(this.activeIndex=-1),this.requestUpdate("open",old)}constructor(){super(),this.showFlags=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.touched=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.registryTick=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this._value="",this._open=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this._defaultValue="",this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this.typeAheadBuffer="",this.typeAheadTimerGeneration=0,this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onKeyDown=e=>{if(this.liveDisabled)return;const rows=this.normalizedEntries;switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.min(rows.length-1,this.activeIndex+1));break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.max(0,this.activeIndex-1));break;case"Enter":case" ":if(this.open){e.preventDefault();const activeRow=rows[this.activeIndex];this.activeIndex>=0&&activeRow?this.commit(activeRow.tag):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.dismissFromEscape());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(0));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(rows.length-1));break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.target.closest('[part="option"]')&&e.preventDefault()},this.onListboxClick=e=>{if(this.liveDisabled)return;const tag=e.target.closest('[part="option"]')?.dataset.value;tag!==void 0&&this.commit(tag)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}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.triggerElement??null;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.syncLocaleAttributeForLocalization(),this.updateValidity(),this.stopRegistrySubscription=subscribeLyraLocaleRegistry(()=>{this.registryTick+=1}),this.hasUpdated&&this.open&&queueMicrotask(()=>this.syncPopup())}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.clearTypeAheadTimer(),this.activeScrollGeneration+=1,this.typeAheadBuffer="",this.open=!1}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlayHandle?.suspend(),this.clearTypeAheadTimer(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),this.open&&(changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.normalizedEntries.length-1),this.queueActiveScroll()),this.hasUpdated||(this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"))}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=next??"",this.internals.setFormValue(this._value),this.updateValidity(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next??"",this.reflectingDefaultValue=!0;try{this._defaultValue?this.setAttribute("value",this._defaultValue):this.removeAttribute("value")}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),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 effectiveDisabled(){return this.disabled||this._fieldsetDisabled}updateValidity(){this.localizedValidityLocale=this.effectiveMessageLocale;const valueMissing=this.hasMissingRequiredValue(),message=valueMissing?this.localize("localePickerRequired"):"";this.localizedIntrinsicMessage=message,valueMissing?this.validityController.setValidity({valueMissing:!0},message):this.validityController.setValidity({}),this.syncCustomStates()}refreshLocalizedIntrinsicValidity(changed){const locale=this.effectiveMessageLocale,message=this.hasMissingRequiredValue()?this.localize("localePickerRequired"):"";(changed.has("strings")||locale!==this.localizedValidityLocale||message!==this.localizedIntrinsicMessage)&&this.updateValidity()}hasMissingRequiredValue(){return!this.isBarred()&&this.required&&!this._value}syncLocaleAttributeForLocalization(){this.locale?this.getAttribute("locale")!==this.locale&&this.setAttribute("locale",this.locale):this.hasAttribute("locale")&&this.removeAttribute("locale")}isBarred(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.isBarred()})}formResetCallback(){this.touched=!1,this.restoreLiveValueFromDefault()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.requestUpdate()}get normalizedEntries(){const raw=this.locales;return raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label??localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}))}get previewTag(){return this._value||this.effectiveLocale}entryFor(tag){return this.normalizedEntries.find(e=>e.tag===tag)}labelFor(tag){return this.entryFor(tag)?.label??localeNativeName(tag)}show(){this.open||this.liveDisabled||(this.open=!0)}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){this.open&&(this.deactivatePopupOverlay(!0),this.hide())}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener),this.pointerListenerDocument=void 0,this.pointerListener=void 0}activatePopupOverlay(){if(this.overlayHandle?.isActive()){this.overlayHandle.resume();return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>this.dismissFromEscape(),onBackdrop:()=>this.hide(),restoreFocusTo:()=>this.renderRoot.querySelector('[part="trigger"]')})}deactivatePopupOverlay(restoreFocus){const overlay=this.overlayHandle;this.overlayHandle=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.bindDocumentPointer();const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.cleanup=place(anchor,listbox))}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")))&&this.syncPopup(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}commit(tag){const previousValue=this._value;this.value=tag,this.hide(),this.emit("lr-change",{value:tag,previousValue,direction:getLyraLocaleDirection(tag)},{cancelable:!0}).defaultPrevented||setLyraLocale(tag)}typeAhead(char){this.clearTypeAheadTimer(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale);const ownerWindow=this.ownerDocument.defaultView;if(this.isConnected&&ownerWindow){const generation=this.typeAheadTimerGeneration;this.typeAheadTimerWindow=ownerWindow,this.typeAheadTimer=ownerWindow.setTimeout(()=>{this.typeAheadTimerGeneration!==generation||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||(this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0,this.typeAheadBuffer="")},500)}const rows=this.normalizedEntries;if(!rows.length)return;const currentTag=this.open?rows[this.activeIndex]?.tag:this.previewTag,currentIndex=rows.findIndex(r=>r.tag===currentTag),n=rows.length;for(let step=1;step<=n;step++){const idx=(currentIndex+step+n)%n,row=rows[idx];if(row&&row.label.toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.open?this.setActiveIndex(idx):this.commit(row.tag);return}}}clearTypeAheadTimer(){this.typeAheadTimerGeneration+=1,this.typeAheadTimer!==void 0&&this.typeAheadTimerWindow?.clearTimeout(this.typeAheadTimer),this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0}setActiveIndex(index){const last=this.normalizedEntries.length-1,next=last<0||index<0?-1:Math.min(last,index);this.activeIndex=next,this.queueActiveScroll()}queueActiveScroll(){const generation=++this.activeScrollGeneration,index=this.activeIndex;index<0||!this.open||this.updateComplete.then(()=>{generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index||this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`)?.scrollIntoView({block:"nearest"})})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
         part="option"
         id=${id}
         role="option"
@@ -11,7 +11,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           <span>${entry.label}</span>
           <span part="option-tag">${entry.tag}</span>
         </span>
-      </div>`})}render(){const rows=this.normalizedEntries,activeId=this.activeIndex>=0&&rows[this.activeIndex]?`${this.listId}-opt-${this.activeIndex}`:"",previewTag=this.previewTag,previewEntry=this.entryFor(previewTag),hasLabel=this.hasLabelSlot||this.label.length>0,hasHint=this.hasHintSlot||this.hint.length>0,hasError=this.hasErrorSlot||this.errorText.length>0,describedBy=[hasError?"locale-picker-error":"",hasHint?"locale-picker-hint":""].filter(Boolean).join(" ");return html`
+      </div>`})}render(){const rows=this.normalizedEntries,activeId=this.activeIndex>=0&&rows[this.activeIndex]?`${this.listId}-opt-${this.activeIndex}`:"",previewTag=this.previewTag,previewEntry=this.entryFor(previewTag),hasLabel=this.hasLabelSlot||(this.label??"").length>0,hasHint=this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=this.localDescriptionIds=[hasError?"locale-picker-error":"",hasHint?"locale-picker-hint":""].filter(Boolean).join(" ");return html`
       <div part="form-control">
         <label part="form-control-label" for=${this.controlId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>

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

@@ -39,6 +39,10 @@ export type OtpInputAppearance=Extract<LyraAppearance,'outlined'|'filled'|'fille
 * ancestor theme wrapper override appearance fallbacks. A value set directly on the OTP input
 * still wins through normal custom-property inheritance.
 *
+* Host aria-describedby targets supplement local error/hint guidance on the native control
+* input. Relationships track missing IDs, target replacement, removal/reinsertion, reconnect,
+* and document adoption.
+*
 * @customElement lr-otp-input
 * @slot label - Rich label content used while the `label` attribute is empty.
 * @slot hint - Rich supporting text used while the `hint` attribute is empty.
@@ -211,7 +215,7 @@ select():void;
 /** Sets the selection on the compact code and maps its start back to the visual fixed cells. */
 setSelectionRange(start:number|null,end:number|null,direction?:OtpInputSelectionDirection):void;setRangeText(replacement:string):void;setRangeText(replacement:string,start:number,end:number,selectMode?:SelectionMode):void;
 /** Clears the live code, returns focus to the field, and emits `lr-clear` when a value changed. */
-clear():void;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;disconnectedCallback():void;reportValidity():boolean;protected firstUpdated(changed:PropertyValues):void;willUpdate(changed:PropertyValues<this>):void;private syncOtpStates;
+clear():void;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;disconnectedCallback():void;reportValidity():boolean;protected firstUpdated(changed:PropertyValues):void;adoptedCallback():void;protected updated(changed:PropertyValues):void;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;willUpdate(changed:PropertyValues<this>):void;private syncOtpStates;
 /**
 * Recomputes the OTP-specific constraints. Barred controls short-circuit first, through the same
 * `isBarredFromValidation()` predicate the base mixin uses — this override used to check

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{finiteInteger}from"../../../internal/numbers.js";import{setCustomState}from"../../../internal/custom-states.js";import{contextualSizes}from"../../../internal/contextual-vocabulary.styles.js";import{findImplicitSubmitter,isNativeSubmitter,submitOnEnter}from"../../../internal/submit-on-enter.js";import{styles}from"./otp-input.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{currentValidityValidator}from"../form-validator.js";import{declaredDefaultConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_otpInputIncomplete,LYRA_DEFAULT_otpInputLabel}from"../../../internal/default-strings.generated.js";const ACCEPTED={numeric:/[0-9]/,alpha:/[a-zA-Z]/,alphanumeric:/[a-zA-Z0-9]/},DEFAULT_LENGTH=6,MAX_LENGTH=32,MAX_FORMAT_SOURCE_LENGTH=4096,MAX_VALUE_SOURCE_LENGTH=4096;class LyraOtpInputBase extends LyraElement{static{this.styles=[LyraElement.styles,contextualSizes,styles]}}class LyraOtpInput extends FormAssociated(LyraOtpInputBase){constructor(){super(...arguments),this.label="",this.hint="",this.errorText="",this.appearance="outlined",this.autofocus=!1,this.autosubmit=!1,this.size="m",this.length=DEFAULT_LENGTH,this.format="",this.type="numeric",this.case="preserve",this.mask=!1,this.withMask=!1,this.readonly=!1,this.autocomplete="one-time-code",this.focused=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.labelId=nextId("otp-input-label"),this.hintId=nextId("otp-input-hint"),this.errorId=nextId("otp-input-error"),this.activeSegmentIndex=0,this.segmentValues=[],this.segmentEditPendingChange=!1,this.autosubmitToken=0,this.onInput=event=>{if(event.isComposing===!0){event.stopPropagation();return}const raw=event.target.value,next=this.sanitize(raw),previous=this.value,previousFilled=this.filledSegmentCount,layoutChanged=Array.from({length:this.renderedSegmentCount},(_,index)=>next[index]??"").some((value,index)=>value!==this.segmentValues[index]);if(this.control&&this.control.value!==next&&(this.control.value=next),next===this.value&&!layoutChanged){event.stopImmediatePropagation();return}this.touched=!0,this.value=next,relayNativeEvent(this,event),previous&&!next&&this.emit("lr-clear"),this.completeIfTransition(previousFilled)},this.onKeyDown=event=>{if(this.effectiveDisabled)return;if(event.key==="ArrowLeft"||event.key==="ArrowRight"){event.preventDefault();const physical=event.key==="ArrowRight"?1:-1,delta=this.effectiveDirection==="rtl"?-physical:physical;this.setActiveSegment(this.activeSegmentIndex+delta);return}if(event.key==="Enter"){this.readonly||submitOnEnter(this,event,{beforeSubmit:()=>this.flushPendingChange()});return}if(this.readonly||event.isComposing)return;const selection=this.selectedSegmentRange;if(event.key==="Backspace"||event.key==="Delete"){event.preventDefault();const values2=this.normalizedSegmentValues();if(selection){for(const index of selection.indices)values2[index]="";this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),this.setActiveSegment(selection.first);return}const changed=!!values2[this.activeSegmentIndex];values2[this.activeSegmentIndex]="",changed&&this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),event.key==="Backspace"&&this.setActiveSegment(this.activeSegmentIndex-1);return}if(event.ctrlKey||event.metaKey||event.altKey||event.key.length!==1)return;event.preventDefault();const accepted=this.sanitize(event.key).slice(0,1);if(!accepted)return;const values=this.normalizedSegmentValues(),targetIndex=selection?.first??this.activeSegmentIndex;if(selection)for(const index of selection.indices)values[index]="";values[targetIndex]=accepted,this.commitSegmentEdit(values,"insertText",accepted),this.setActiveSegment(targetIndex+1)},this.onPaste=event=>{if(this.effectiveDisabled||this.readonly)return;const pasted=this.sanitize(event.clipboardData?.getData("text")??"");if(event.preventDefault(),!pasted)return;const values=Array.from({length:this.renderedSegmentCount},(_,index)=>pasted[index]??"");this.commitSegmentEdit(values,"insertFromPaste",pasted),this.setActiveSegment(Math.min(pasted.length,this.renderedSegmentCount-1))},this.onChange=event=>{this.segmentEditPendingChange=!1,relayNativeEvent(this,event)},this.onFocus=event=>{this.focused=!0,relayNativeEvent(this,event)},this.onBlur=event=>{this.focused=!1,this.effectiveDisabled||(this.touched=!0),this.flushPendingChange(),relayNativeEvent(this,event)},this.onLabelSlotChange=event=>{this.hasLabelSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedNodes({flatten:!0}).length>0}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,otpInputIncomplete:LYRA_DEFAULT_otpInputIncomplete,otpInputLabel:LYRA_DEFAULT_otpInputLabel}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","length","pattern")]}get input(){return this.control??null}get validationTarget(){return this.control??null}get value(){return super.value}set value(next){this.autosubmitToken+=1;const normalized=this.sanitize(next??"");this.packSegmentValues(normalized),super.value=normalized}get defaultValue(){return super.defaultValue}set defaultValue(next){this.autosubmitToken+=1,super.defaultValue=next}get formattedCells(){if(this.parsedFormatSource===this.format)return this.parsedFormatCells??null;if(this.parsedFormatSource=this.format,!this.format)return this.parsedFormatCells=null,null;const cells=[];let segments=0,literal="";const flushLiteral=()=>{literal&&(cells.push({kind:"separator",text:literal}),literal="")};for(const char of this.format.slice(0,MAX_FORMAT_SOURCE_LENGTH)){if(char!=="#"){literal+=char;continue}if(segments>=MAX_LENGTH)break;flushLiteral(),cells.push({kind:"segment"}),segments+=1}return flushLiteral(),this.parsedFormatCells=segments>0?cells:null,this.parsedFormatCells}get renderedSegmentCount(){const formatted=this.formattedCells;return formatted?formatted.filter(cell=>cell.kind==="segment").length:Math.min(MAX_LENGTH,Math.max(1,finiteInteger(this.length,DEFAULT_LENGTH)))}get effectiveLength(){return this.renderedSegmentCount}get cells(){return this.formattedCells??Array.from({length:this.renderedSegmentCount},()=>({kind:"segment"}))}sanitize(raw){const accepted=ACCEPTED[this.type]??ACCEPTED.numeric,limit=this.renderedSegmentCount;let out="";for(const char of(raw??"").slice(0,MAX_VALUE_SOURCE_LENGTH))if(accepted.test(char)&&(out+=char),out.length>=limit)break;return this.case==="upper"?out=out.toUpperCase():this.case==="lower"&&(out=out.toLowerCase()),out.slice(0,limit)}packSegmentValues(value){const count=this.renderedSegmentCount;this.segmentValues=Array.from({length:count},(_,index)=>value[index]??""),this.activeSegmentIndex=Math.min(value.length,count-1)}get filledSegmentCount(){return Array.isArray(this.segmentValues)?this.segmentValues.reduce((count,value)=>count+(value?1:0),0):this.value.length}normalizedSegmentValues(values=this.segmentValues){return Array.from({length:this.renderedSegmentCount},(_,index)=>values[index]??"")}setActiveSegment(index){const next=Math.min(this.renderedSegmentCount-1,Math.max(0,index));this.activeSegmentIndex=next;const caret=this.normalizedSegmentValues().slice(0,next).filter(Boolean).length;this.control?.setSelectionRange(caret,caret),this.updateComplete.then(()=>{this.renderRoot.querySelectorAll('[part~="segment"]')[next]?.scrollIntoView({block:"nearest",inline:"nearest"})})}submitOwningForm(){const form=this.getForm();if(!form)return;const submitter=findImplicitSubmitter(form);submitter?isNativeSubmitter(submitter)?form.requestSubmit(submitter):submitter.click():form.requestSubmit()}completeIfTransition(previousFilled){if(previousFilled>=this.renderedSegmentCount||this.filledSegmentCount!==this.renderedSegmentCount)return;const completionValue=this.value,token=this.autosubmitToken,completeEvent=this.emit("lr-complete",{value:completionValue},{cancelable:!0});this.autosubmit&&setTimeout(()=>{token!==this.autosubmitToken||completeEvent.defaultPrevented||!this.isConnected||!this.autosubmit||this.value!==completionValue||this.filledSegmentCount!==this.renderedSegmentCount||this.submitOwningForm()})}commitSegmentEdit(values,inputType,data=null){this.autosubmitToken+=1;const previousValue=this.value,previousFilled=this.filledSegmentCount;this.segmentValues=this.normalizedSegmentValues(values);const nextValue=this.segmentValues.join("");super.value=nextValue,this.control&&(this.control.value=nextValue),this.touched=!0,dispatchNativeInputEvent(this,{data,inputType}),this.segmentEditPendingChange=!0,previousValue&&!nextValue&&this.emit("lr-clear"),this.completeIfTransition(previousFilled),this.requestUpdate()}get selectedSegmentRange(){const start=this.control?.selectionStart,end=this.control?.selectionEnd;if(start==null||end===void 0||end===null||start===end)return null;const indices=this.normalizedSegmentValues().map((value,index)=>value?index:-1).filter(index=>index>=0).slice(start,end),first=indices[0];return first===void 0?null:{indices,first}}segmentIndexAtCompactOffset(offset){const values=this.normalizedSegmentValues();let occupied=0;for(let index=0;index<values.length;index+=1){if(occupied>=offset)return index;values[index]&&(occupied+=1)}return Math.max(0,values.length-1)}syncActiveSegmentFromSelection(){const control=this.control;if(!control||control.selectionStart===null)return;const selected=this.selectedSegmentRange;this.activeSegmentIndex=selected?.first??this.segmentIndexAtCompactOffset(control.selectionStart)}get selectionStart(){return this.control?.selectionStart??null}set selectionStart(value){this.control&&(this.control.selectionStart=value,this.syncActiveSegmentFromSelection())}get selectionEnd(){return this.control?.selectionEnd??null}set selectionEnd(value){this.control&&(this.control.selectionEnd=value,this.syncActiveSegmentFromSelection())}get selectionDirection(){return this.control?.selectionDirection??null}set selectionDirection(value){this.control&&(this.control.selectionDirection=value)}focus(options){this.effectiveDisabled||this.control?.focus(options)}blur(){this.control?.blur()}click(){this.effectiveDisabled||this.control?.click()}select(){this.control?.select()}setSelectionRange(start,end,direction){this.control&&(this.control.setSelectionRange(start,end,direction),this.syncActiveSegmentFromSelection())}setRangeText(replacement,start,end,selectMode){const control=this.control;if(!control)return;const selectionPrefixLength=(value,offset)=>{if(offset===null)return null;const boundedOffset=Math.min(MAX_VALUE_SOURCE_LENGTH,Math.max(0,offset));return this.sanitize(value.slice(0,boundedOffset)).length},currentRaw=control.value,currentSelectionStart=selectionPrefixLength(currentRaw,control.selectionStart),currentSelectionEnd=selectionPrefixLength(currentRaw,control.selectionEnd),currentSelectionDirection=control.selectionDirection,boundedCurrent=this.sanitize(currentRaw);currentRaw!==boundedCurrent&&(control.value=boundedCurrent,currentSelectionStart!==null&&currentSelectionEnd!==null&&control.setSelectionRange(currentSelectionStart,currentSelectionEnd,currentSelectionDirection??void 0));const boundedReplacement=this.sanitize(replacement);start===void 0||end===void 0?control.setRangeText(boundedReplacement):control.setRangeText(boundedReplacement,start,end,selectMode);const raw=control.value,selectionStart=selectionPrefixLength(raw,control.selectionStart),selectionEnd=selectionPrefixLength(raw,control.selectionEnd),selectionDirection=control.selectionDirection,normalized=this.sanitize(raw);this.value=normalized,control.value=normalized,selectionStart!==null&&selectionEnd!==null&&control.setSelectionRange(selectionStart,selectionEnd,selectionDirection??void 0),this.syncActiveSegmentFromSelection()}clear(){const hadValue=this.value.length>0;this.value="",this.control&&(this.control.value=""),this.focus(),hadValue&&this.emit("lr-clear")}formResetCallback(){this.autosubmitToken+=1,super.formResetCallback(),this.touched=!1,this.segmentEditPendingChange=!1}formStateRestoreCallback(state2,reason){this.autosubmitToken+=1,super.formStateRestoreCallback(state2,reason)}disconnectedCallback(){super.disconnectedCallback(),this.autosubmitToken+=1}reportValidity(){return this.touched=!0,super.reportValidity()}firstUpdated(changed){super.firstUpdated(changed),this.autofocus&&this.scheduleAfterUpdate(()=>this.focus(),"otp-autofocus")}willUpdate(changed){if(super.willUpdate(changed),changed.has("type")||changed.has("case")||changed.has("length")||changed.has("format")){const next=this.sanitize(this.value);next!==this.value?this.value=next:this.packSegmentValues(next)}(changed.has("value")||changed.has("required")||changed.has("readonly")||changed.has("length")||changed.has("format"))&&this.updateValidity(),this.syncOtpStates()}syncOtpStates(){setCustomState(this.internals,"--blank",this.value.length===0),setCustomState(this.internals,"--filled",this.filledSegmentCount===this.renderedSegmentCount),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"readonly",this.readonly)}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const total=this.renderedSegmentCount,filled=this.filledSegmentCount,complete=filled===total;if(this.required&&filled===0){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}if(filled>0&&!complete){this[SET_ANCHORED_VALIDITY]({tooShort:!0},this.localize("otpInputIncomplete",void 0,{total}));return}this[SET_ANCHORED_VALIDITY]({})}flushPendingChange(){this.segmentEditPendingChange&&(this.segmentEditPendingChange=!1,dispatchNativeEvent(this,"change"))}renderSegment(index,invalid){const char=this.segmentValues[index]??"",filled=char!=="",active=this.focused&&!this.effectiveDisabled&&index===this.activeSegmentIndex,masked=filled&&this.mask,placeholderMask=!filled&&this.withMask,parts=["segment"];return active&&parts.push("active"),masked&&parts.push("masked"),placeholderMask&&parts.push("placeholder-mask"),invalid&&parts.push("invalid"),html`<div part=${parts.join(" ")} aria-hidden="true">${masked?nothing:placeholderMask?nothing:char}</div>`}render(){const hasLabel=!!this.label||this.hasLabelSlot,hasHint=!!this.hint||this.hasHintSlot,hasError=!!this.errorText||this.hasErrorSlot,intrinsicInvalid=this.touched&&!this.validity.valid,ariaInvalid=hasError||intrinsicInvalid,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),labelledBy=hasLabel&&!this.getAttribute("aria-label")?this.labelId:nothing;let segmentIndex=-1;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{finiteInteger}from"../../../internal/numbers.js";import{setCustomState}from"../../../internal/custom-states.js";import{contextualSizes}from"../../../internal/contextual-vocabulary.styles.js";import{findImplicitSubmitter,isNativeSubmitter,submitOnEnter}from"../../../internal/submit-on-enter.js";import{styles}from"./otp-input.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{currentValidityValidator}from"../form-validator.js";import{declaredDefaultConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_otpInputIncomplete,LYRA_DEFAULT_otpInputLabel}from"../../../internal/default-strings.generated.js";const ACCEPTED={numeric:/[0-9]/,alpha:/[a-zA-Z]/,alphanumeric:/[a-zA-Z0-9]/},DEFAULT_LENGTH=6,MAX_LENGTH=32,MAX_FORMAT_SOURCE_LENGTH=4096,MAX_VALUE_SOURCE_LENGTH=4096;class LyraOtpInputBase extends LyraElement{static{this.styles=[LyraElement.styles,contextualSizes,styles]}}class LyraOtpInput extends FormAssociated(LyraOtpInputBase){constructor(){super(...arguments),this.label="",this.hint="",this.errorText="",this.appearance="outlined",this.autofocus=!1,this.autosubmit=!1,this.size="m",this.length=DEFAULT_LENGTH,this.format="",this.type="numeric",this.case="preserve",this.mask=!1,this.withMask=!1,this.readonly=!1,this.autocomplete="one-time-code",this.focused=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.labelId=nextId("otp-input-label"),this.hintId=nextId("otp-input-hint"),this.errorId=nextId("otp-input-error"),this.activeSegmentIndex=0,this.segmentValues=[],this.segmentEditPendingChange=!1,this.autosubmitToken=0,this.onInput=event=>{if(event.isComposing===!0){event.stopPropagation();return}const raw=event.target.value,next=this.sanitize(raw),previous=this.value,previousFilled=this.filledSegmentCount,layoutChanged=Array.from({length:this.renderedSegmentCount},(_,index)=>next[index]??"").some((value,index)=>value!==this.segmentValues[index]);if(this.control&&this.control.value!==next&&(this.control.value=next),next===this.value&&!layoutChanged){event.stopImmediatePropagation();return}this.touched=!0,this.value=next,relayNativeEvent(this,event),previous&&!next&&this.emit("lr-clear"),this.completeIfTransition(previousFilled)},this.onKeyDown=event=>{if(this.effectiveDisabled)return;if(event.key==="ArrowLeft"||event.key==="ArrowRight"){event.preventDefault();const physical=event.key==="ArrowRight"?1:-1,delta=this.effectiveDirection==="rtl"?-physical:physical;this.setActiveSegment(this.activeSegmentIndex+delta);return}if(event.key==="Enter"){this.readonly||submitOnEnter(this,event,{beforeSubmit:()=>this.flushPendingChange()});return}if(this.readonly||event.isComposing)return;const selection=this.selectedSegmentRange;if(event.key==="Backspace"||event.key==="Delete"){event.preventDefault();const values2=this.normalizedSegmentValues();if(selection){for(const index of selection.indices)values2[index]="";this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),this.setActiveSegment(selection.first);return}const changed=!!values2[this.activeSegmentIndex];values2[this.activeSegmentIndex]="",changed&&this.commitSegmentEdit(values2,event.key==="Backspace"?"deleteContentBackward":"deleteContentForward"),event.key==="Backspace"&&this.setActiveSegment(this.activeSegmentIndex-1);return}if(event.ctrlKey||event.metaKey||event.altKey||event.key.length!==1)return;event.preventDefault();const accepted=this.sanitize(event.key).slice(0,1);if(!accepted)return;const values=this.normalizedSegmentValues(),targetIndex=selection?.first??this.activeSegmentIndex;if(selection)for(const index of selection.indices)values[index]="";values[targetIndex]=accepted,this.commitSegmentEdit(values,"insertText",accepted),this.setActiveSegment(targetIndex+1)},this.onPaste=event=>{if(this.effectiveDisabled||this.readonly)return;const pasted=this.sanitize(event.clipboardData?.getData("text")??"");if(event.preventDefault(),!pasted)return;const values=Array.from({length:this.renderedSegmentCount},(_,index)=>pasted[index]??"");this.commitSegmentEdit(values,"insertFromPaste",pasted),this.setActiveSegment(Math.min(pasted.length,this.renderedSegmentCount-1))},this.onChange=event=>{this.segmentEditPendingChange=!1,relayNativeEvent(this,event)},this.onFocus=event=>{this.focused=!0,relayNativeEvent(this,event)},this.onBlur=event=>{this.focused=!1,this.effectiveDisabled||(this.touched=!0),this.flushPendingChange(),relayNativeEvent(this,event)},this.onLabelSlotChange=event=>{this.hasLabelSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedNodes({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedNodes({flatten:!0}).length>0}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,otpInputIncomplete:LYRA_DEFAULT_otpInputIncomplete,otpInputLabel:LYRA_DEFAULT_otpInputLabel}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","length","pattern")]}get input(){return this.control??null}get validationTarget(){return this.control??null}get value(){return super.value}set value(next){this.autosubmitToken+=1;const normalized=this.sanitize(next??"");this.packSegmentValues(normalized),super.value=normalized}get defaultValue(){return super.defaultValue}set defaultValue(next){this.autosubmitToken+=1,super.defaultValue=next}get formattedCells(){if(this.parsedFormatSource===this.format)return this.parsedFormatCells??null;if(this.parsedFormatSource=this.format,!this.format)return this.parsedFormatCells=null,null;const cells=[];let segments=0,literal="";const flushLiteral=()=>{literal&&(cells.push({kind:"separator",text:literal}),literal="")};for(const char of this.format.slice(0,MAX_FORMAT_SOURCE_LENGTH)){if(char!=="#"){literal+=char;continue}if(segments>=MAX_LENGTH)break;flushLiteral(),cells.push({kind:"segment"}),segments+=1}return flushLiteral(),this.parsedFormatCells=segments>0?cells:null,this.parsedFormatCells}get renderedSegmentCount(){const formatted=this.formattedCells;return formatted?formatted.filter(cell=>cell.kind==="segment").length:Math.min(MAX_LENGTH,Math.max(1,finiteInteger(this.length,DEFAULT_LENGTH)))}get effectiveLength(){return this.renderedSegmentCount}get cells(){return this.formattedCells??Array.from({length:this.renderedSegmentCount},()=>({kind:"segment"}))}sanitize(raw){const accepted=ACCEPTED[this.type]??ACCEPTED.numeric,limit=this.renderedSegmentCount;let out="";for(const char of(raw??"").slice(0,MAX_VALUE_SOURCE_LENGTH))if(accepted.test(char)&&(out+=char),out.length>=limit)break;return this.case==="upper"?out=out.toUpperCase():this.case==="lower"&&(out=out.toLowerCase()),out.slice(0,limit)}packSegmentValues(value){const count=this.renderedSegmentCount;this.segmentValues=Array.from({length:count},(_,index)=>value[index]??""),this.activeSegmentIndex=Math.min(value.length,count-1)}get filledSegmentCount(){return Array.isArray(this.segmentValues)?this.segmentValues.reduce((count,value)=>count+(value?1:0),0):this.value.length}normalizedSegmentValues(values=this.segmentValues){return Array.from({length:this.renderedSegmentCount},(_,index)=>values[index]??"")}setActiveSegment(index){const next=Math.min(this.renderedSegmentCount-1,Math.max(0,index));this.activeSegmentIndex=next;const caret=this.normalizedSegmentValues().slice(0,next).filter(Boolean).length;this.control?.setSelectionRange(caret,caret),this.updateComplete.then(()=>{this.renderRoot.querySelectorAll('[part~="segment"]')[next]?.scrollIntoView({block:"nearest",inline:"nearest"})})}submitOwningForm(){const form=this.getForm();if(!form)return;const submitter=findImplicitSubmitter(form);submitter?isNativeSubmitter(submitter)?form.requestSubmit(submitter):submitter.click():form.requestSubmit()}completeIfTransition(previousFilled){if(previousFilled>=this.renderedSegmentCount||this.filledSegmentCount!==this.renderedSegmentCount)return;const completionValue=this.value,token=this.autosubmitToken,completeEvent=this.emit("lr-complete",{value:completionValue},{cancelable:!0});this.autosubmit&&setTimeout(()=>{token!==this.autosubmitToken||completeEvent.defaultPrevented||!this.isConnected||!this.autosubmit||this.value!==completionValue||this.filledSegmentCount!==this.renderedSegmentCount||this.submitOwningForm()})}commitSegmentEdit(values,inputType,data=null){this.autosubmitToken+=1;const previousValue=this.value,previousFilled=this.filledSegmentCount;this.segmentValues=this.normalizedSegmentValues(values);const nextValue=this.segmentValues.join("");super.value=nextValue,this.control&&(this.control.value=nextValue),this.touched=!0,dispatchNativeInputEvent(this,{data,inputType}),this.segmentEditPendingChange=!0,previousValue&&!nextValue&&this.emit("lr-clear"),this.completeIfTransition(previousFilled),this.requestUpdate()}get selectedSegmentRange(){const start=this.control?.selectionStart,end=this.control?.selectionEnd;if(start==null||end===void 0||end===null||start===end)return null;const indices=this.normalizedSegmentValues().map((value,index)=>value?index:-1).filter(index=>index>=0).slice(start,end),first=indices[0];return first===void 0?null:{indices,first}}segmentIndexAtCompactOffset(offset){const values=this.normalizedSegmentValues();let occupied=0;for(let index=0;index<values.length;index+=1){if(occupied>=offset)return index;values[index]&&(occupied+=1)}return Math.max(0,values.length-1)}syncActiveSegmentFromSelection(){const control=this.control;if(!control||control.selectionStart===null)return;const selected=this.selectedSegmentRange;this.activeSegmentIndex=selected?.first??this.segmentIndexAtCompactOffset(control.selectionStart)}get selectionStart(){return this.control?.selectionStart??null}set selectionStart(value){this.control&&(this.control.selectionStart=value,this.syncActiveSegmentFromSelection())}get selectionEnd(){return this.control?.selectionEnd??null}set selectionEnd(value){this.control&&(this.control.selectionEnd=value,this.syncActiveSegmentFromSelection())}get selectionDirection(){return this.control?.selectionDirection??null}set selectionDirection(value){this.control&&(this.control.selectionDirection=value)}focus(options){this.effectiveDisabled||this.control?.focus(options)}blur(){this.control?.blur()}click(){this.effectiveDisabled||this.control?.click()}select(){this.control?.select()}setSelectionRange(start,end,direction){this.control&&(this.control.setSelectionRange(start,end,direction),this.syncActiveSegmentFromSelection())}setRangeText(replacement,start,end,selectMode){const control=this.control;if(!control)return;const selectionPrefixLength=(value,offset)=>{if(offset===null)return null;const boundedOffset=Math.min(MAX_VALUE_SOURCE_LENGTH,Math.max(0,offset));return this.sanitize(value.slice(0,boundedOffset)).length},currentRaw=control.value,currentSelectionStart=selectionPrefixLength(currentRaw,control.selectionStart),currentSelectionEnd=selectionPrefixLength(currentRaw,control.selectionEnd),currentSelectionDirection=control.selectionDirection,boundedCurrent=this.sanitize(currentRaw);currentRaw!==boundedCurrent&&(control.value=boundedCurrent,currentSelectionStart!==null&&currentSelectionEnd!==null&&control.setSelectionRange(currentSelectionStart,currentSelectionEnd,currentSelectionDirection??void 0));const boundedReplacement=this.sanitize(replacement);start===void 0||end===void 0?control.setRangeText(boundedReplacement):control.setRangeText(boundedReplacement,start,end,selectMode);const raw=control.value,selectionStart=selectionPrefixLength(raw,control.selectionStart),selectionEnd=selectionPrefixLength(raw,control.selectionEnd),selectionDirection=control.selectionDirection,normalized=this.sanitize(raw);this.value=normalized,control.value=normalized,selectionStart!==null&&selectionEnd!==null&&control.setSelectionRange(selectionStart,selectionEnd,selectionDirection??void 0),this.syncActiveSegmentFromSelection()}clear(){const hadValue=this.value.length>0;this.value="",this.control&&(this.control.value=""),this.focus(),hadValue&&this.emit("lr-clear")}formResetCallback(){this.autosubmitToken+=1,super.formResetCallback(),this.touched=!1,this.segmentEditPendingChange=!1}formStateRestoreCallback(state2,reason){this.autosubmitToken+=1,super.formStateRestoreCallback(state2,reason)}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.autosubmitToken+=1}reportValidity(){return this.touched=!0,super.reportValidity()}firstUpdated(changed){super.firstUpdated(changed),this.autofocus&&this.scheduleAfterUpdate(()=>this.focus(),"otp-autofocus")}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}updated(changed){super.updated(changed),this.syncExternalDescription()}syncExternalDescription(){if(!this.isConnected)return;const target=this.control??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription()}willUpdate(changed){if(super.willUpdate(changed),changed.has("type")||changed.has("case")||changed.has("length")||changed.has("format")){const next=this.sanitize(this.value);next!==this.value?this.value=next:this.packSegmentValues(next)}(changed.has("value")||changed.has("required")||changed.has("readonly")||changed.has("length")||changed.has("format"))&&this.updateValidity(),this.syncOtpStates()}syncOtpStates(){setCustomState(this.internals,"--blank",this.value.length===0),setCustomState(this.internals,"--filled",this.filledSegmentCount===this.renderedSegmentCount),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"readonly",this.readonly)}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const total=this.renderedSegmentCount,filled=this.filledSegmentCount,complete=filled===total;if(this.required&&filled===0){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}if(filled>0&&!complete){this[SET_ANCHORED_VALIDITY]({tooShort:!0},this.localize("otpInputIncomplete",void 0,{total}));return}this[SET_ANCHORED_VALIDITY]({})}flushPendingChange(){this.segmentEditPendingChange&&(this.segmentEditPendingChange=!1,dispatchNativeEvent(this,"change"))}renderSegment(index,invalid){const char=this.segmentValues[index]??"",filled=char!=="",active=this.focused&&!this.effectiveDisabled&&index===this.activeSegmentIndex,masked=filled&&this.mask,placeholderMask=!filled&&this.withMask,parts=["segment"];return active&&parts.push("active"),masked&&parts.push("masked"),placeholderMask&&parts.push("placeholder-mask"),invalid&&parts.push("invalid"),html`<div part=${parts.join(" ")} aria-hidden="true">${masked?nothing:placeholderMask?nothing:char}</div>`}render(){const hasLabel=!!this.label||this.hasLabelSlot,hasHint=!!this.hint||this.hasHintSlot,hasError=!!this.errorText||this.hasErrorSlot,intrinsicInvalid=this.touched&&!this.validity.valid,ariaInvalid=hasError||intrinsicInvalid,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:""].filter(Boolean).join(" "),labelledBy=hasLabel&&!this.getAttribute("aria-label")?this.labelId:nothing;let segmentIndex=-1;return html`
       <div part="base form-control">
         <label part="label form-control-label" id=${this.labelId} for="control" ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" ?hidden=${!!this.label} @slotchange=${this.onLabelSlotChange}></slot>