@aceshooting/lyra-ui 26.0.0 → 27.0.0

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";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{AnnouncementSinkController}from"../../../internal/announcer.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{closeIcon}from"../../../internal/icons.js";import{revealRange,revealRow}from"../../../internal/reveal-row.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./emoji-picker.styles.js";import{loadEmojiDataCached}from"./emoji-data-loader.js";import{LYRA_DEFAULT_clear,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_emojiPickerSearchPlaceholder,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_item,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_progress,LYRA_DEFAULT_restore,LYRA_DEFAULT_retry,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.applyingBuiltInGroups=!1,this.peerLoadFailed=!1,this.peerErrorAnnouncements=new AnnouncementSinkController(this),this.accessibleLabel="",this.size="m",this.label="",this.hint="",this.errorText="",this.slotPresence=new SlotPresenceController(this),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.retryLoad=()=>{this.peerLoadFailed=!1,this.builtInGroupsLocale=void 0,this.loadBuiltInGroups()},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.onClearSearch=()=>{this.liveDisabled||this.queryText===""||(this.pendingGridFocus=void 0,this.queryText="",this.activeIndex=0,this.searchEl?.focus())},this.onSearchFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},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.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,clear:LYRA_DEFAULT_clear,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,emojiPickerSearchPlaceholder:LYRA_DEFAULT_emojiPickerSearchPlaceholder,fieldRequired:LYRA_DEFAULT_fieldRequired,item:LYRA_DEFAULT_item,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,progress:LYRA_DEFAULT_progress,restore:LYRA_DEFAULT_restore,retry:LYRA_DEFAULT_retry,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.applyingBuiltInGroups||(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(){super.connectedCallback(),this.hasUpdated&&(this.syncGeometryProbe(),this.syncExternalDescription()),this.observeGeometryProbe(),this.syncGridObserver(),this.loadBuiltInGroups()}loadBuiltInGroups(){if(this.groupsWereSet)return;const locale=this.effectiveLocale;if(this.builtInGroupsLocale===locale)return;this.builtInGroupsLocale=locale;const ownerDocument=this.ownerDocument,generation=this.ownerRealmGeneration;this.loadGroups(locale).then(loaded=>{if(!(this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.groupsWereSet||this.builtInGroupsLocale!==locale)){if(!loaded){this.peerLoadFailed=!0,this.announcePeerLoadFailure(),this.emit("lr-load-error");return}this.applyingBuiltInGroups=!0;try{this.groups=loaded}finally{this.applyingBuiltInGroups=!1}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({heading:group,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]');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)):this.isVirtualized&&this.searchEl?.setAttribute("aria-activedescendant",`${this.gridId}-item-${this.activeIndex}`);const grid=this.renderRoot.querySelector('[part="grid"]');if(grid&&this.isVirtualized){const rowIndex=this.virtualRows().findIndex(row=>row.items.some(({index})=>index===this.activeIndex));if(rowIndex>=0){const{rowHeight}=this.geometry(),before=grid.scrollTop;revealRange(grid,rowIndex*rowHeight,rowHeight),grid.scrollTop!==before&&(this.virtualScrollTop=grid.scrollTop,this.requestUpdate())}}else grid&&target&&revealRow(grid,target);focusTarget&&target&&(this.pendingGridFocus=void 0,target.focus())}pick(item){if(this.liveDisabled)return;const detail={value:item.emoji,previousValue:this.value};this.value=item.emoji,this.syncSelectedProjection(),dispatchNativeInputEvent(this),this.emit("lr-input",detail),dispatchNativeEvent(this,"change"),this.emit("lr-change",detail)}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()}updated(changed){if(super.updated(changed),this.bindRenderedGeometryProbe(),this.syncGridObserver(),this.syncExternalDescription(),this.loadBuiltInGroups(),!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.resetOwnerRealmResources()}announcePeerLoadFailure(){this.isConnected&&this.peerErrorAnnouncements.announceAssertive(this.localize("emojiPickerLoadError"))}adoptedCallback(){super.adoptedCallback(),this.peerErrorAnnouncements.adopted(),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
+import{__decorate}from"tslib";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{deepActiveElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{closeIcon}from"../../../internal/icons.js";import{revealRange,revealRow}from"../../../internal/reveal-row.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./emoji-picker.styles.js";import{loadEmojiDataCached}from"./emoji-data-loader.js";import{LYRA_DEFAULT_clear,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_emojiPickerSearchPlaceholder,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_item,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_progress,LYRA_DEFAULT_restore,LYRA_DEFAULT_retry,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.applyingBuiltInGroups=!1,this.peerLoadFailed=!1,this.peerErrorAnnouncements=new AnnouncementSinkController(this),this.accessibleLabel="",this.size="m",this.label="",this.hint="",this.errorText="",this.slotPresence=new SlotPresenceController(this),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.retryLoad=()=>{this.peerLoadFailed=!1,this.builtInGroupsLocale=void 0,this.loadBuiltInGroups()},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.onClearSearch=()=>{this.liveDisabled||this.queryText===""||(this.pendingGridFocus=void 0,this.queryText="",this.activeIndex=0,this.searchEl?.focus())},this.onSearchFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},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.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,clear:LYRA_DEFAULT_clear,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,emojiPickerSearchPlaceholder:LYRA_DEFAULT_emojiPickerSearchPlaceholder,fieldRequired:LYRA_DEFAULT_fieldRequired,item:LYRA_DEFAULT_item,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,progress:LYRA_DEFAULT_progress,restore:LYRA_DEFAULT_restore,retry:LYRA_DEFAULT_retry,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=shadowFocusTarget(this),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.applyingBuiltInGroups||(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(){super.connectedCallback(),this.hasUpdated&&(this.syncGeometryProbe(),this.syncExternalDescription()),this.observeGeometryProbe(),this.syncGridObserver(),this.loadBuiltInGroups()}loadBuiltInGroups(){if(this.groupsWereSet)return;const locale=this.effectiveLocale;if(this.builtInGroupsLocale===locale)return;this.builtInGroupsLocale=locale;const ownerDocument=this.ownerDocument,generation=this.ownerRealmGeneration;this.loadGroups(locale).then(loaded=>{if(!(this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.groupsWereSet||this.builtInGroupsLocale!==locale)){if(!loaded){this.peerLoadFailed=!0,this.announcePeerLoadFailure(),this.emit("lr-load-error");return}this.applyingBuiltInGroups=!0;try{this.groups=loaded}finally{this.applyingBuiltInGroups=!1}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.isConnected?this.shadowRoot:null);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({heading:group,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]');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)):this.isVirtualized&&this.searchEl?.setAttribute("aria-activedescendant",`${this.gridId}-item-${this.activeIndex}`);const grid=this.renderRoot.querySelector('[part="grid"]');if(grid&&this.isVirtualized){const rowIndex=this.virtualRows().findIndex(row=>row.items.some(({index})=>index===this.activeIndex));if(rowIndex>=0){const{rowHeight}=this.geometry(),before=grid.scrollTop;revealRange(grid,rowIndex*rowHeight,rowHeight),grid.scrollTop!==before&&(this.virtualScrollTop=grid.scrollTop,this.requestUpdate())}}else grid&&target&&revealRow(grid,target);focusTarget&&target&&(this.pendingGridFocus=void 0,target.focus())}pick(item){if(this.liveDisabled)return;const detail={value:item.emoji,previousValue:this.value};this.value=item.emoji,this.syncSelectedProjection(),dispatchNativeInputEvent(this),this.emit("lr-input",detail),dispatchNativeEvent(this,"change"),this.emit("lr-change",detail)}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()}updated(changed){if(super.updated(changed),this.bindRenderedGeometryProbe(),this.syncGridObserver(),this.syncExternalDescription(),this.loadBuiltInGroups(),!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.resetOwnerRealmResources()}announcePeerLoadFailure(){this.isConnected&&this.peerErrorAnnouncements.announceAssertive(this.localize("emojiPickerLoadError"))}adoptedCallback(){super.adoptedCallback(),this.peerErrorAnnouncements.adopted(),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}`}

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

@@ -1 +1 @@
-import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{formControlTextWrap,formControlChrome,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-input-padding-block-default: var(--lr-form-control-padding-block); --_lr-input-padding-inline-default: var(--lr-form-control-padding-inline); --_lr-input-font-size-default: var(--lr-form-control-font-size); --_lr-input-control-min-height-default: var(--lr-form-control-height); --_lr-input-gap-default: var(--lr-space-xs); --_lr-input-radius-default: var(--lr-form-control-radius); --_lr-input-fill-default: var(--lr-color-surface); --_lr-input-border-color-default: var(--lr-color-border); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([appearance='filled-outlined']) { --_lr-input-fill-default: var(--lr-color-surface-raised); --_lr-input-border-color-default: var(--lr-color-border); } :host([appearance='outlined']) { --_lr-input-fill-default: var(--lr-color-surface); --_lr-input-border-color-default: var(--lr-color-border); } :host([appearance='filled']) { --_lr-input-fill-default: var(--lr-color-surface-raised); --_lr-input-border-color-default: transparent; } :host([filled]) { --_lr-input-fill-default: var(--lr-color-surface-raised); --_lr-input-border-color-default: transparent; } :host([appearance='plain']) { --_lr-input-fill-default: transparent; --_lr-input-border-color-default: transparent; } :host([appearance='accent']) { --_lr-input-fill-default: var(--lr-color-brand-quiet); --_lr-input-border-color-default: var(--lr-color-brand); } :host([pill]) { --_lr-input-radius-default: var(--lr-radius-pill); } ${formControlChrome} ${formControlRequiredMarker} [part~='input-wrapper'] { display: flex; align-items: center; gap: var(--lr-input-gap, var(--_lr-input-gap-default)); inline-size: 100%; box-sizing: border-box; min-block-size: var(--lr-input-control-height, var(--lr-input-control-min-height, var(--_lr-input-control-min-height-default))); block-size: var(--lr-input-control-height, auto); padding-inline: var(--lr-input-padding-inline, var(--_lr-input-padding-inline-default)); border: var(--lr-border-width-thin) solid var(--lr-input-border-color, var(--_lr-input-border-color-default)); border-radius: var(--lr-input-radius, var(--_lr-input-radius-default)); background: var(--lr-input-fill, var(--_lr-input-fill-default)); } [part~='input-wrapper']:focus-within { border-color: var(--lr-input-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part~='input-wrapper'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='input'] { flex: 1 1 var(--lr-size-4ch); min-inline-size: 0; box-sizing: border-box; padding-block: var(--lr-input-padding-block, var(--_lr-input-padding-block-default)); border: none; outline: none; background: transparent; color: var(--lr-color-text); font: inherit; font-size: var(--lr-input-font-size, var(--_lr-input-font-size-default)); } [part='input']::placeholder { color: var(--lr-input-placeholder-color, var(--lr-input-action-color, var(--lr-color-text-quiet))); } :where([part~='input-wrapper']:has(> [part='start']:not([hidden]), > [part='end']:not([hidden]))) > [part='input'] { min-inline-size: min(var(--lr-size-4ch), 100%); } [part='input'][type='search']::-webkit-search-cancel-button, [part='input'][type='search']::-webkit-search-decoration { appearance: none; } [part='input'][type='number'][data-without-spin-buttons] { appearance: textfield; } [part='input'][type='number'][data-without-spin-buttons]::-webkit-outer-spin-button, [part='input'][type='number'][data-without-spin-buttons]::-webkit-inner-spin-button { appearance: none; margin: 0; } [part='input'][type='time']::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: var(--lr-radius-xs); background-color: transparent; outline: var(--lr-focus-ring-width) solid transparent; outline-offset: var(--lr-focus-ring-offset); transition: background-color var(--lr-transition-fast); } [part='input'][type='time']:not(:disabled):hover::-webkit-calendar-picker-indicator { background-color: var(--lr-input-time-picker-hover-bg, var(--lr-color-brand-quiet)); } [part='input'][type='time']:not(:disabled):active::-webkit-calendar-picker-indicator { background-color: var(--lr-input-time-picker-active-bg, var(--lr-color-brand)); } [part='input'][type='time']:not(:disabled):focus-visible::-webkit-calendar-picker-indicator { background-color: var(--lr-input-time-picker-focus-bg, var(--lr-color-brand-quiet)); outline-color: var(--lr-input-time-picker-focus-ring, var(--lr-focus-ring-color)); } [part='start'], [part='end'] { flex: 0 1 auto; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 50%; overflow: hidden; color: var(--lr-color-text-quiet); } [part='start'] slot, [part='end'] slot, [part='start'] slot::slotted(*), [part='end'] slot::slotted(*) { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='start'][hidden], [part='end'][hidden] { display: none; } [part='password-toggle'], [part='clear-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--lr-radius); background: none; cursor: pointer; color: var(--lr-input-action-color, var(--lr-color-text-quiet)); padding: var(--lr-space-xs); min-inline-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), var(--lr-form-control-height))); min-block-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), var(--lr-form-control-height))); line-height: var(--lr-line-height-none); font-size: var(--lr-font-size-m); transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } [part='password-toggle']:not(:disabled):hover { color: var(--lr-input-action-hover-color, var(--lr-color-text)); } [part='clear-button']:not(:disabled):hover { color: var(--lr-input-action-hover-color, var(--lr-color-text)); } [part='password-toggle']:not(:disabled):active, [part='clear-button']:not(:disabled):active { color: var(--lr-input-action-active-color, var(--lr-input-action-hover-color, var(--lr-color-text))); background: var( --lr-input-action-active-bg, color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part='password-toggle']:focus-visible { ${focusRing} } [part='clear-button']:focus-visible { ${focusRing} } [part='form-control'], [part='form-control-label'], [part~='hint'], [part='error'] { ${formControlTextWrap} } `;export{styles};
+import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{formControlTextWrap,formControlChrome,formControlAppearance,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-input-padding-block-default: var(--lr-form-control-padding-block); --_lr-input-padding-inline-default: var(--lr-form-control-padding-inline); --_lr-input-font-size-default: var(--lr-form-control-font-size); --_lr-input-control-min-height-default: var(--lr-form-control-height); --_lr-input-gap-default: var(--lr-space-xs); --_lr-input-radius-default: var(--lr-form-control-radius); --_lr-input-fill-default: var(--_lr-form-control-fill); --_lr-input-border-color-default: var(--_lr-form-control-border-color); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } ${formControlAppearance} :host([pill]) { --_lr-input-radius-default: var(--lr-radius-pill); } ${formControlChrome} ${formControlRequiredMarker} [part~='input-wrapper'] { display: flex; align-items: center; gap: var(--lr-input-gap, var(--_lr-input-gap-default)); inline-size: 100%; box-sizing: border-box; min-block-size: var(--lr-input-control-height, var(--lr-input-control-min-height, var(--_lr-input-control-min-height-default))); block-size: var(--lr-input-control-height, auto); padding-inline: var(--lr-input-padding-inline, var(--_lr-input-padding-inline-default)); border: var(--lr-border-width-thin) solid var(--lr-input-border-color, var(--_lr-input-border-color-default)); border-radius: var(--lr-input-radius, var(--_lr-input-radius-default)); background: var(--lr-input-fill, var(--_lr-input-fill-default)); } [part~='input-wrapper']:focus-within { border-color: var(--lr-input-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part~='input-wrapper'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='input'] { flex: 1 1 var(--lr-size-4ch); min-inline-size: 0; box-sizing: border-box; padding-block: var(--lr-input-padding-block, var(--_lr-input-padding-block-default)); border: none; outline: none; background: transparent; color: var(--lr-color-text); font: inherit; font-size: var(--lr-input-font-size, var(--_lr-input-font-size-default)); } [part='input']::placeholder { color: var(--lr-input-placeholder-color, var(--lr-input-action-color, var(--lr-color-text-quiet))); } :where([part~='input-wrapper']:has(> [part='start']:not([hidden]), > [part='end']:not([hidden]))) > [part='input'] { min-inline-size: min(var(--lr-size-4ch), 100%); } [part='input'][type='search']::-webkit-search-cancel-button, [part='input'][type='search']::-webkit-search-decoration { appearance: none; } [part='input'][type='number'][data-without-spin-buttons] { appearance: textfield; } [part='input'][type='number'][data-without-spin-buttons]::-webkit-outer-spin-button, [part='input'][type='number'][data-without-spin-buttons]::-webkit-inner-spin-button { appearance: none; margin: 0; } [part='input'][type='time']::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: var(--lr-radius-xs); background-color: transparent; outline: var(--lr-focus-ring-width) solid transparent; outline-offset: var(--lr-focus-ring-offset); transition: background-color var(--lr-transition-fast); } [part='input'][type='time']:not(:disabled):hover::-webkit-calendar-picker-indicator { background-color: var(--lr-input-time-picker-hover-bg, var(--lr-color-brand-quiet)); } [part='input'][type='time']:not(:disabled):active::-webkit-calendar-picker-indicator { background-color: var(--lr-input-time-picker-active-bg, var(--lr-color-brand)); } [part='input'][type='time']:not(:disabled):focus-visible::-webkit-calendar-picker-indicator { background-color: var(--lr-input-time-picker-focus-bg, var(--lr-color-brand-quiet)); outline-color: var(--lr-input-time-picker-focus-ring, var(--lr-focus-ring-color)); } [part='start'], [part='end'] { flex: 0 1 auto; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 50%; overflow: hidden; color: var(--lr-color-text-quiet); } [part='start'] slot, [part='end'] slot, [part='start'] slot::slotted(*), [part='end'] slot::slotted(*) { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='start'][hidden], [part='end'][hidden] { display: none; } [part='password-toggle'], [part='clear-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--lr-radius); background: none; cursor: pointer; color: var(--lr-input-action-color, var(--lr-color-text-quiet)); padding: var(--lr-space-xs); min-inline-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), var(--lr-form-control-height))); min-block-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), var(--lr-form-control-height))); line-height: var(--lr-line-height-none); font-size: var(--lr-font-size-m); transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } [part='password-toggle']:not(:disabled):hover { color: var(--lr-input-action-hover-color, var(--lr-color-text)); } [part='clear-button']:not(:disabled):hover { color: var(--lr-input-action-hover-color, var(--lr-color-text)); } [part='password-toggle']:not(:disabled):active, [part='clear-button']:not(:disabled):active { color: var(--lr-input-action-active-color, var(--lr-input-action-hover-color, var(--lr-color-text))); background: var( --lr-input-action-active-bg, color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part='password-toggle']:focus-visible { ${focusRing} } [part='clear-button']:focus-visible { ${focusRing} } [part='form-control'], [part='form-control-label'], [part~='hint'], [part='error'] { ${formControlTextWrap} } `;export{styles};

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

@@ -160,7 +160,7 @@ static get validators():LyraFormValidator<LyraTimeInput>[];static styles:import(
 /** Shows the clear action while there is a value; same as `withClear`. */
 clearable:boolean;
 /** Alias of {@link clearable}. */
-withClear:boolean;withHint:boolean;withLabel:boolean;withNow:boolean;errorText:string;private activeSegment;private touched;private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasErrorSlot();private get hasStartSlot();private get hasEndSlot();private get hasFooterSlot();private popupHidden;private popupPositioned;private _open;private _readonly;private _step;private draft;private partial;private secondsVisible;private genuineValue;private digitBuffer;private digitSegment?;private inputDigitLocale;private inputDigitMap?;private pendingSegmentFocus?;private restoringSegmentFocus;private cleanupPositioner?;private overlayHandle?;private lightDismissDocument?;private restoreFocusOnClose;private transitionToken;private visibilityPromise;private segmentOrderKey;private segmentModelCache?;private pickerGridKey;private pickerGridMilliseconds;private inputId;private labelId;private hintId;private errorId;private requiredDescriptionId;private popupId;private readonly hostDescription;private now;constructor();
+withClear:boolean;withHint:boolean;withLabel:boolean;withNow:boolean;errorText:string;private activeSegment;private touched;private readonly slotPresence;private get hasLabelSlot();private get hasHintSlot();private get hasErrorSlot();private get hasStartSlot();private get hasEndSlot();private get hasFooterSlot();private popupHidden;private popupPositioned;private _open;private _readonly;private _step;private draft;private partial;private secondsVisible;private genuineValue;private digitBuffer;private digitSegment?;private inputDigitLocale;private inputDigitMap?;private pendingSegmentFocus?;private restoringSegmentFocus;private cleanupPositioner?;private overlayHandle?;private restoreFocusOnClose;private readonly popupController;private visibilityPromise;private segmentOrderKey;private segmentModelCache?;private pickerGridKey;private pickerGridMilliseconds;private inputId;private labelId;private hintId;private errorId;private requiredDescriptionId;private popupId;private readonly hostDescription;private now;constructor();
 /** Whether the column picker is open.
 * @default false */
 get open():boolean;set open(next:boolean);

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{closeIcon,chevronIcon}from"../../../internal/icons.js";import{finiteNumber}from"../../../internal/numbers.js";import{activeElementIn}from"../../../internal/active-element.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{setCustomState}from"../../../internal/custom-states.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dayPeriodLabels,hasTimeStepMismatch,isTimeInRange,localeTimePattern,normalizeTimeValue,parseTimeValue,timeValueFromMilliseconds,timeStepBaseMilliseconds,to24Hour,wrapTimeMilliseconds}from"./time-input-shared.js";import{styles}from"./time-input.styles.js";import{isDateObject}from"../../../internal/dom-guards.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_timeInputDayPeriod,LYRA_DEFAULT_timeInputEmptySegment,LYRA_DEFAULT_timeInputHour,LYRA_DEFAULT_timeInputInvalid,LYRA_DEFAULT_timeInputLabel,LYRA_DEFAULT_timeInputMaxMessage,LYRA_DEFAULT_timeInputMinMessage,LYRA_DEFAULT_timeInputMinute,LYRA_DEFAULT_timeInputNow,LYRA_DEFAULT_timeInputOpen,LYRA_DEFAULT_timeInputPopup,LYRA_DEFAULT_timeInputRangeMessage,LYRA_DEFAULT_timeInputSecond,LYRA_DEFAULT_timeInputStepMessage}from"../../../internal/default-strings.generated.js";class LyraTimeInputBase extends LyraElement{}const stepConverter={fromAttribute(value){if(value==="any")return"any";const parsed=Number(value);return Number.isFinite(parsed)&&parsed>0?parsed:60},toAttribute(value){return String(value)}},hourFormatConverter={fromAttribute(value){return value==="12"||value==="24"?value:"auto"},toAttribute(value){return value}},PLACEMENTS=new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]),placementConverter={fromAttribute(value){return PLACEMENTS.has(value)?value:"bottom-start"},toAttribute(value){return value}},blankDraft=()=>({hour:null,minute:null,second:null,dayPeriod:null}),pad=value=>String(value).padStart(2,"0");function isElementNode(value){if(value===null||typeof value!="object")return!1;const candidate=value;return candidate.nodeType===1&&typeof candidate.getRootNode=="function"&&typeof candidate.contains=="function"}function containsElement(container,value){if(!container||!isElementNode(value))return!1;try{return container.contains(value)}catch{return!1}}class LyraTimeInput extends FormAssociated(LyraTimeInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,timeInputDayPeriod:LYRA_DEFAULT_timeInputDayPeriod,timeInputEmptySegment:LYRA_DEFAULT_timeInputEmptySegment,timeInputHour:LYRA_DEFAULT_timeInputHour,timeInputInvalid:LYRA_DEFAULT_timeInputInvalid,timeInputLabel:LYRA_DEFAULT_timeInputLabel,timeInputMaxMessage:LYRA_DEFAULT_timeInputMaxMessage,timeInputMinMessage:LYRA_DEFAULT_timeInputMinMessage,timeInputMinute:LYRA_DEFAULT_timeInputMinute,timeInputNow:LYRA_DEFAULT_timeInputNow,timeInputOpen:LYRA_DEFAULT_timeInputOpen,timeInputPopup:LYRA_DEFAULT_timeInputPopup,timeInputRangeMessage:LYRA_DEFAULT_timeInputRangeMessage,timeInputSecond:LYRA_DEFAULT_timeInputSecond,timeInputStepMessage:LYRA_DEFAULT_timeInputStepMessage}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","min","max","step")]}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={open:{type:Boolean,reflect:!0,noAccessor:!0},readonly:{type:Boolean,reflect:!0,noAccessor:!0},step:{converter:stepConverter,reflect:!0,noAccessor:!0}}}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasErrorSlot(){return this.slotPresence.has("error")}get hasStartSlot(){return this.slotPresence.has("start")}get hasEndSlot(){return this.slotPresence.has("end")}get hasFooterSlot(){return this.slotPresence.has("footer")}constructor(){super(),this.appearance="outlined",this.autocomplete="",this.distance=0,this.hint="",this.hourFormat="auto",this.label="",this.min="",this.max="",this.pill=!1,this.placement="bottom-start",this.size="m",this.clearable=!1,this.withClear=!1,this.withHint=!1,this.withLabel=!1,this.withNow=!1,this.errorText="",this.activeSegment="hour",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.popupHidden=!0,this.popupPositioned=!1,this._open=!1,this._readonly=!1,this._step=60,this.draft=blankDraft(),this.partial=!1,this.secondsVisible=!1,this.genuineValue="",this.digitBuffer="",this.inputDigitLocale="",this.restoringSegmentFocus=!1,this.restoreFocusOnClose=!0,this.transitionToken=0,this.visibilityPromise=Promise.resolve(),this.segmentOrderKey="",this.pickerGridKey="",this.pickerGridMilliseconds=[],this.inputId=nextId("time-input"),this.labelId=nextId("time-input-label"),this.hintId=nextId("time-input-hint"),this.errorId=nextId("time-input-error"),this.requiredDescriptionId=nextId("time-input-required"),this.popupId=nextId("time-input-popup"),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector('[part~="input"]'),()=>{const description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);return this.required&&description?[description]:[]}),this.now=()=>new Date,this.onSegmentKeyDown=event=>{const name=event.currentTarget.dataset.segment;if(this.liveDisabled)return;if(event.altKey&&event.key==="ArrowDown"){event.preventDefault(),this.show();return}const digit=this.inputDigit(event.key);if(digit!==void 0&&!event.ctrlKey&&!event.metaKey&&!event.altKey&&!this.readonly){event.preventDefault(),this.acceptDigit(name,digit);return}if(name==="dayPeriod"&&!this.readonly&&(event.key.toLowerCase()==="a"||event.key.toLowerCase()==="p")){event.preventDefault(),this.setDraftSegment(name,event.key.toLowerCase()==="a"?"am":"pm");return}if(event.key==="ArrowLeft"||event.key==="ArrowRight"){event.preventDefault();const physical=event.key==="ArrowRight"?1:-1;this.resetDigitBuffer(),this.moveSegment(name,this.effectiveDirection==="rtl"?-physical:physical);return}if((event.key==="ArrowUp"||event.key==="ArrowDown")&&!this.readonly){event.preventDefault(),this.resetDigitBuffer(),this.stepSegment(name,event.key==="ArrowUp"?1:-1);return}if((event.key==="Home"||event.key==="End")&&!this.readonly){event.preventDefault();const bounds=this.segmentBounds(name),next=event.key==="Home"?bounds.min:bounds.max;this.setDraftSegment(name,name==="dayPeriod"?next===0?"am":"pm":next);return}if((event.key==="Backspace"||event.key==="Delete")&&!this.readonly){event.preventDefault(),this.resetDigitBuffer(),this.setDraftSegment(name,null);return}event.key==="Enter"&&(this.open?this.hide():this.readonly||submitOnEnter(this,event))},this.onSegmentPaste=event=>{if(this.liveDisabled||this.readonly)return;const pasted=normalizeTimeValue(event.clipboardData?.getData("text").trim()??"");pasted&&(event.preventDefault(),this.resetDigitBuffer(),this.commitUserValue(pasted,"insertFromPaste",!0))},this.onSegmentFocus=event=>{if(event.stopPropagation(),this.liveDisabled)return;const focusedSegment=event.target.dataset.segment??this.activeSegment;if(this.restoringSegmentFocus){queueMicrotask(()=>{this.isConnected&&this.segmentOrder.includes(focusedSegment)&&(this.activeSegment=focusedSegment)});return}else this.activeSegment=focusedSegment;const related=event.relatedTarget;containsElement(this.renderRoot.querySelector('[part="input"]'),related)||relayNativeEvent(this,event)},this.onSegmentBlur=event=>{if(event.stopPropagation(),this.pendingSegmentFocus){this.resetDigitBuffer();return}const related=event.relatedTarget;containsElement(this.renderRoot.querySelector('[part="input"]'),related)||(this.liveDisabled||(this.touched=!0),this.resetDigitBuffer(),relayNativeEvent(this,event))},this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];isElementNode(target)&&composedContains(this,target)||this.requestVisibility(!1,!0,!1)},this.onExpand=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onClear=()=>{this.liveDisabled||this.readonly||!this.draftHasAny&&this.value===""||(this.touched=!0,this.commitUserValue("","deleteContentBackward",!0),this.emit("lr-clear"),this.focus())},this.onNow=()=>{if(this.liveDisabled||this.readonly)return;const now=this.now();let value=`${pad(now.getHours())}:${pad(now.getMinutes())}`;this.includeSeconds&&(value+=`:${pad(now.getSeconds())}`),this.commitUserValue(value)},this.onPopupPointerDown=event=>{event.preventDefault()},this.onAutofillInput=event=>{event.stopPropagation();const input=event.currentTarget,normalized=normalizeTimeValue(input.value),intentionalClear=input.value===""&&(event.isTrusted||event.inputType.startsWith("delete")||event.inputType==="insertReplacementText");if(input.value===""&&this.value!==""&&!intentionalClear){input.value=this.value;return}input.value!==""&&!normalized||this.readonly||this.liveDisabled||(this.value=normalized,dispatchNativeInputEvent(this,{data:event.data,inputType:event.inputType||"insertReplacementText"}),this.emit("lr-input",{value:this.value}))},this.onAutofillChange=event=>{event.stopPropagation();const input=event.currentTarget,normalized=normalizeTimeValue(input.value);input.value!==""&&!normalized||this.readonly||this.liveDisabled||(this.value=normalized,dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}))},this.onColumnKeyDown=event=>{if(this.liveDisabled||!["ArrowUp","ArrowDown","Home","End"].includes(event.key))return;const current=event.currentTarget,column=current.closest('[role="listbox"]'),options=Array.from(column?.querySelectorAll('[role="option"]')??[]).filter(option=>!option.disabled);if(options.length===0)return;event.preventDefault();const index=Math.max(0,options.indexOf(current)),nextIndex=event.key==="Home"?0:event.key==="End"?options.length-1:(index+(event.key==="ArrowDown"?1:-1)+options.length)%options.length;for(const option of options)option.tabIndex=option===options[nextIndex]?0:-1;options[nextIndex].focus(),options[nextIndex].scrollIntoView({block:"nearest"})},new GlassScrollLayer(this,'[part="popup"]',()=>this.open),this.addEventListener("invalid",()=>{this.touched=!0})}get open(){return this._open}set open(next){this.requestVisibility(!!next,this.isConnected&&this.hasUpdated,!0)}get readonly(){return this._readonly}set readonly(next){const old=this._readonly;this._readonly=!!next,this.toggleAttribute("readonly",this._readonly),this._readonly&&this.forceClose(!1),this.updateValidity(),this.requestUpdate("readonly",old)}get step(){return this._step}set step(next){const old=this._step;if(next==="any")this._step=next;else{const numeric=finiteNumber(Number(next),60);this._step=numeric>0?numeric:60}const genuinePrecision=parseTimeValue(this.genuineValue)?.precision;this.secondsVisible=this.numericStep<60||genuinePrecision!==void 0&&genuinePrecision!=="minute";const committed=this.committedValue;committed!==this.value&&(super.value=committed),this.updateValidity(),this.requestUpdate("step",old)}get disabled(){return super.disabled}set disabled(next){super.disabled=next,next&&this.forceClose(!1),this.syncComponentStates()}get value(){return super.value}set value(next){this.genuineValue=normalizeTimeValue(next);const normalized=this.committedValue;this.partial=!1,this.resetDigitBuffer(),this.syncDraft(normalized),super.value=normalized,this.syncComponentStates()}get valueAsNumber(){return parseTimeValue(this.value)?.milliseconds??Number.NaN}set valueAsNumber(next){this.value=timeValueFromMilliseconds(next)}get valueAsDate(){const parsed=parseTimeValue(this.value);if(!parsed)return null;const result=this.now();return result.setHours(parsed.hour,parsed.minute,parsed.second,parsed.millisecond),result}set valueAsDate(next){this.value=normalizeTimeValue(next)}get valueAsLocalDate(){return this.valueAsDate}set valueAsLocalDate(next){this.valueAsDate=next}get valueAsUTCDate(){const parsed=parseTimeValue(this.value);return parsed?new Date(parsed.milliseconds):null}set valueAsUTCDate(next){this.value=timeValueFromMilliseconds(wrapTimeMilliseconds(isDateObject(next)?next.getTime():NaN))}get numericStep(){return this.step==="any"?60:finiteNumber(this.step,60)}padToStepPrecision(value){return value&&this.numericStep<60&&parseTimeValue(value)?.precision==="minute"?`${value}:00`:value}get committedValue(){return this.padToStepPrecision(this.genuineValue)}get includeSeconds(){return this.numericStep<60||this.secondsVisible}get segmentModel(){const locale=this.effectiveLocale,key=`${locale}|${this.hourFormat}|${this.includeSeconds}`;if(this.segmentModelCache?.key!==key){const pattern=localeTimePattern(locale,this.hourFormat,this.includeSeconds),order=pattern.filter(part=>part.type!=="literal").map(part=>part.type);this.segmentModelCache={key,pattern,order,twelveHour:order.includes("dayPeriod")}}return this.segmentModelCache}get pattern(){return this.segmentModel.pattern}get segmentOrder(){return this.segmentModel.order}get periodLabels(){const model=this.segmentModel;return model.labels??=dayPeriodLabels(this.effectiveLocale)}get liveDisabled(){const matches=this.matches;return this.effectiveDisabled||typeof matches=="function"&&matches.call(this,":disabled")}activeSegmentFor(order=this.segmentOrder){return order.includes(this.activeSegment)?this.activeSegment:order[0]??"hour"}get usesTwelveHour(){return this.segmentModel.twelveHour}get draftComplete(){return this.draft.hour!==null&&this.draft.minute!==null&&(!this.includeSeconds||this.draft.second!==null)&&(!this.usesTwelveHour||this.draft.dayPeriod!==null)}get draftHasAny(){return Object.values(this.draft).some(value=>value!==null)}syncDraft(value){const parsed=parseTimeValue(value);if(!parsed){this.draft=blankDraft(),this.secondsVisible=this.numericStep<60;return}this.draft={hour:parsed.hour,minute:parsed.minute,second:parsed.second,dayPeriod:parsed.hour>=12?"pm":"am"};const genuinePrecision=parseTimeValue(this.genuineValue)?.precision;this.secondsVisible=this.numericStep<60||genuinePrecision!==void 0&&genuinePrecision!=="minute"}canonicalDraftValue(){if(!this.draftComplete)return"";const value=`${pad(this.draft.hour)}:${pad(this.draft.minute)}`;return this.includeSeconds?`${value}:${pad(this.draft.second)}`:value}syncComponentStates(){setCustomState(this.internals,"blank",this.value===""),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"open",this.open)}formattedNumber(value,minimumIntegerDigits){return this.numberFormatter(minimumIntegerDigits)(value)}numberFormatter(minimumIntegerDigits){try{const formatter=getNumberFormat(this.effectiveLocale,{minimumIntegerDigits,useGrouping:!1});return value=>formatter.format(value)}catch{return value=>String(value).padStart(minimumIntegerDigits,"0")}}inputDigit(key){if(/^[0-9]$/.test(key))return key;const locale=this.effectiveLocale;if(this.inputDigitMap&&this.inputDigitLocale===locale)return this.inputDigitMap.get(key);const digits=new Map;try{const formatter=getNumberFormat(locale,{useGrouping:!1});for(let value=0;value<=9;value++){const integer=formatter.formatToParts(value).find(part=>part.type==="integer")?.value;integer!==void 0&&!digits.has(integer)&&digits.set(integer,String(value))}this.inputDigitLocale=locale,this.inputDigitMap=digits}catch{}return digits.get(key)}displayTime(value){const parsed=parseTimeValue(value);if(!parsed)return value;const includeSeconds=parsed.precision!=="minute",labels=this.periodLabels;return localeTimePattern(this.effectiveLocale,this.hourFormat,includeSeconds).map(part=>{if(part.type==="literal")return part.value;if(part.type==="hour"){const hour=this.usesTwelveHour?parsed.hour%12||12:parsed.hour;return this.formattedNumber(hour,this.usesTwelveHour?1:2)}return part.type==="minute"?this.formattedNumber(parsed.minute,2):part.type==="second"?this.formattedNumber(parsed.second,2):parsed.hour>=12?labels.pm:labels.am}).join("")}segmentNumericValue(name){return name==="hour"?this.draft.hour===null?null:this.usesTwelveHour?this.draft.hour%12||12:this.draft.hour:name==="minute"?this.draft.minute:name==="second"?this.draft.second:this.draft.dayPeriod==="am"?0:this.draft.dayPeriod==="pm"?1:null}segmentText(name){if(this.digitSegment===name&&this.digitBuffer)return this.formattedNumber(Number(this.digitBuffer),this.digitBuffer.length);if(name==="dayPeriod")return this.draft.dayPeriod?this.periodLabels[this.draft.dayPeriod]:"--";const value=this.segmentNumericValue(name);if(value===null)return"--";const minimumDigits=name==="hour"&&this.usesTwelveHour?1:2;return this.formattedNumber(value,minimumDigits)}segmentLabel(name){const keys={hour:"timeInputHour",minute:"timeInputMinute",second:"timeInputSecond",dayPeriod:"timeInputDayPeriod"};return this.localize(keys[name])}segmentBounds(name){return name==="hour"?this.usesTwelveHour?{min:1,max:12}:{min:0,max:23}:name==="dayPeriod"?{min:0,max:1}:{min:0,max:59}}setDraftSegment(name,value,user=!0){if(!(this.liveDisabled||user&&this.readonly)){if(name==="hour")if(value===null)this.draft.hour=null;else{const numeric=Number(value);this.draft.hour=this.usesTwelveHour?to24Hour(numeric,this.draft.dayPeriod??"am"):numeric}else if(name==="dayPeriod"){const period=value==="pm"?"pm":value==="am"?"am":null;if(period&&this.draft.hour!==null){const displayHour=this.draft.hour%12||12;this.draft.hour=to24Hour(displayHour,period)}this.draft.dayPeriod=period}else this.draft[name]=value===null?null:Number(value);if(!user){this.requestUpdate();return}this.publishDraftEdit()}}publishDraftEdit(){const before=super.value,next=this.canonicalDraftValue();this.partial=this.draftHasAny&&!this.draftComplete,this.genuineValue=next,super.value=next,this.syncComponentStates(),dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.emit("lr-input",{value:this.value}),next!==""&&next!==before&&(dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})),this.requestUpdate()}commitUserValue(value,inputType="insertReplacementText",forceChange=!1){const before=this.value;this.value=value,dispatchNativeInputEvent(this,{inputType}),this.emit("lr-input",{value:this.value}),(forceChange||this.value!==before)&&(dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}))}resetDigitBuffer(){this.digitBuffer="",this.digitSegment=void 0}moveSegment(from,direction){const order=this.segmentOrder,current=Math.max(0,order.indexOf(from)),next=Math.min(order.length-1,Math.max(0,current+direction));this.activeSegment=order[next]??"hour",this.segmentElement(this.activeSegment)?.focus()}acceptDigit(name,digit){if(name==="dayPeriod")return;this.digitSegment!==name&&(this.digitSegment=name,this.digitBuffer="");const bounds=this.segmentBounds(name);let candidateText=`${this.digitBuffer}${digit}`.slice(-2),candidate=Number(candidateText);(candidate>bounds.max||candidateText.length===2&&candidate<bounds.min)&&(candidateText=digit,candidate=Number(digit)),this.digitBuffer=candidateText,candidate>=bounds.min&&candidate<=bounds.max?this.setDraftSegment(name,candidate):this.requestUpdate();const cannotAcceptAnother=candidate*10>bounds.max;(candidateText.length===2||cannotAcceptAnother)&&(this.resetDigitBuffer(),this.moveSegment(name,1))}stepSegment(name,delta){const bounds=this.segmentBounds(name),current=this.segmentNumericValue(name),next=current===null?bounds.min:(current-bounds.min+delta+(bounds.max-bounds.min+1))%(bounds.max-bounds.min+1)+bounds.min;name==="dayPeriod"?this.setDraftSegment(name,next===0?"am":"pm"):this.setDraftSegment(name,next)}segmentElement(name){return this.renderRoot?.querySelector(`[data-segment="${name}"]`)}focus(options){if(this.liveDisabled)return;const order=this.segmentOrder,activeSegment=this.activeSegmentFor(order);activeSegment!==this.activeSegment&&(this.activeSegment=activeSegment),this.segmentElement(activeSegment)?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.focus()}setOpen(next){if(this._open===next)return;const old=this._open;this._open=next,this.syncComponentStates(),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}requestVisibility(next,announce,restoreFocus){return this._open===next?this.visibilityPromise:next&&(this.liveDisabled||this.readonly)?(this.syncOpenAttribute(),Promise.resolve()):announce&&this.emit(next?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented?(this.syncOpenAttribute(),Promise.resolve()):(this.restoreFocusOnClose=restoreFocus,this.setOpen(next),this.visibilityPromise=announce?this.settleTransition(next?"lr-after-show":"lr-after-hide"):Promise.resolve(),this.visibilityPromise)}show(){return this.requestVisibility(!0,!0,!0)}hide(){return this.requestVisibility(!1,!0,!0)}forceClose(restoreFocus){this._open&&(this.restoreFocusOnClose=restoreFocus,this.setOpen(!1))}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(event==="lr-after-show"){const positioned=await waitForDeferredPlacement(()=>this.cleanupPositioner);if(this.transitionToken!==token||!this.open)return;if(!positioned){this.forceClose(!1);return}if(this.popupPositioned=!0,await this.updateComplete,this.transitionToken!==token)return}if(this.isConnected){const view=this.ownerDocument.defaultView;if(view&&await new Promise(resolve=>view.requestAnimationFrame(()=>resolve())),this.transitionToken!==token)return;const animations=this.renderRoot.querySelector('[part="popup"]')?.getAnimations({subtree:!0})??[];if(await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return}event==="lr-after-hide"&&(this.popupHidden=!0,await this.updateComplete,this.transitionToken!==token)||this.emit(event)}}positionPopup(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.renderRoot.querySelector('[part~="time-input"]'),popup=this.renderRoot.querySelector('[part="popup"]');if(!anchor||!popup)return;this.cleanupPositioner=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),offset:finiteNumber(this.distance,0),sync:"width",strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});const operation=this.cleanupPositioner;operation.ready.then(positioned=>{positioned&&this.cleanupPositioner===operation&&this.open&&this.isConnected&&(this.popupPositioned=!0)})}activatePopup(){this.isConnected&&(this.positionPopup(),this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="popup"]'),onEscape:()=>{this.hide()},restoreFocusTo:this.segmentElement(this.activeSegment)}),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0),this.updateComplete.then(()=>{const option=this.renderRoot.querySelector('[part~="column-item-selected"]'),column=option?.closest('[part="column"]');if(!option||!column)return;const offset=option.getBoundingClientRect().top-column.getBoundingClientRect().top;column.scrollTop+=offset-(column.clientHeight-option.offsetHeight)/2}))}teardownPopup(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus:this.restoreFocusOnClose}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}onColumnSelect(name,value){this.readonly||this.liveDisabled||(this.resetDigitBuffer(),this.setDraftSegment(name,value),this.activeSegment=name,this.updateComplete.then(()=>this.segmentElement(name)?.focus()))}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const flags={};let message="";this.required&&this.value===""&&(flags.valueMissing=!0),this.partial&&(flags.badInput=!0);const parsed=parseTimeValue(this.value);if(this.value!==""&&!parsed&&(flags.badInput=!0),parsed&&!isTimeInRange(this.value,this.min,this.max)){const parsedMin=parseTimeValue(this.min),parsedMax=parseTimeValue(this.max);parsedMin&&parsedMax&&parsedMin.milliseconds>parsedMax.milliseconds?(flags.rangeUnderflow=!0,message=this.localize("timeInputRangeMessage",void 0,{min:this.displayTime(this.min),max:this.displayTime(this.max)})):parsedMin&&parsed.milliseconds<parsedMin.milliseconds?(flags.rangeUnderflow=!0,message=this.localize("timeInputMinMessage",void 0,{min:this.displayTime(this.min)})):(flags.rangeOverflow=!0,message=this.localize("timeInputMaxMessage",void 0,{max:this.displayTime(this.max)}))}parsed&&hasTimeStepMismatch(this.value,this.step,this.min,this.defaultValue)&&(flags.stepMismatch=!0,message||=this.localize("timeInputStepMessage")),flags.badInput?message=this.localize("timeInputInvalid"):flags.valueMissing&&(message=this.localize("fieldRequired")),this[SET_ANCHORED_VALIDITY](flags,message)}checkValidity(){return this.updateValidity(),super.checkValidity()}reportValidity(){return this.touched=!0,this.updateValidity(),super.reportValidity()}[VALIDITY_ANCHOR](){return this.segmentElement(this.activeSegmentFor())}formResetCallback(){super.formResetCallback(),this.touched=!1,this.partial=!1,this.resetDigitBuffer()}formStateRestoreCallback(state2,reason="restore"){super.formStateRestoreCallback(state2,reason)}willUpdate(changed){super.willUpdate(changed),this.open&&this.effectiveDisabled&&this.forceClose(!1);const order=this.segmentOrder,orderKey=order.join("|"),focused=orderKey!==this.segmentOrderKey?activeElementIn(this.shadowRoot):null,focusedSegment=typeof focused?.getAttribute=="function"?focused.getAttribute("data-segment"):null,nextActiveSegment=focusedSegment&&order.includes(focusedSegment)?focusedSegment:this.activeSegmentFor(order);focusedSegment&&(this.pendingSegmentFocus=order.includes(focusedSegment)?focusedSegment:nextActiveSegment),this.segmentOrderKey=orderKey,changed.has("open")&&(this.popupPositioned=!1),this.open&&(this.popupHidden=!1)}updated(changed){super.updated(changed),changed.has("open")?this.open?this.activatePopup():this.teardownPopup():this.open&&(changed.has("placement")||changed.has("distance"))&&this.positionPopup(),(changed.has("value")||changed.has("required")||changed.has("readonly")||changed.has("min")||changed.has("max")||changed.has("step"))&&this.updateValidity(),this.syncComponentStates(),this.toggleAttribute("data-invalid",this.touched&&!this.validity.valid);const pendingSegmentFocus=this.pendingSegmentFocus;if(this.pendingSegmentFocus=void 0,pendingSegmentFocus&&!this.effectiveDisabled){this.restoringSegmentFocus=!0;try{this.segmentElement(pendingSegmentFocus)?.focus()}finally{this.restoringSegmentFocus=!1}}}disconnectedCallback(){this.popupHidden=!0,this.transitionToken++,this.forceClose(!1),this.teardownPopup(),this.syncOpenAttribute(),this.pendingSegmentFocus=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}renderSegment(name,invalid){const value=this.segmentNumericValue(name),bounds=this.segmentBounds(name),empty=value===null;return html`
+import{__decorate}from"tslib";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{closeIcon,chevronIcon}from"../../../internal/icons.js";import{finiteNumber}from"../../../internal/numbers.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{PopupController,emitPopupEvent}from"../../../internal/popup-controller.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{setCustomState}from"../../../internal/custom-states.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dayPeriodLabels,hasTimeStepMismatch,isTimeInRange,localeTimePattern,normalizeTimeValue,parseTimeValue,timeValueFromMilliseconds,timeStepBaseMilliseconds,to24Hour,wrapTimeMilliseconds}from"./time-input-shared.js";import{styles}from"./time-input.styles.js";import{isDateObject}from"../../../internal/dom-guards.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_timeInputDayPeriod,LYRA_DEFAULT_timeInputEmptySegment,LYRA_DEFAULT_timeInputHour,LYRA_DEFAULT_timeInputInvalid,LYRA_DEFAULT_timeInputLabel,LYRA_DEFAULT_timeInputMaxMessage,LYRA_DEFAULT_timeInputMinMessage,LYRA_DEFAULT_timeInputMinute,LYRA_DEFAULT_timeInputNow,LYRA_DEFAULT_timeInputOpen,LYRA_DEFAULT_timeInputPopup,LYRA_DEFAULT_timeInputRangeMessage,LYRA_DEFAULT_timeInputSecond,LYRA_DEFAULT_timeInputStepMessage}from"../../../internal/default-strings.generated.js";class LyraTimeInputBase extends LyraElement{}const stepConverter={fromAttribute(value){if(value==="any")return"any";const parsed=Number(value);return Number.isFinite(parsed)&&parsed>0?parsed:60},toAttribute(value){return String(value)}},hourFormatConverter={fromAttribute(value){return value==="12"||value==="24"?value:"auto"},toAttribute(value){return value}},PLACEMENTS=new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]),placementConverter={fromAttribute(value){return PLACEMENTS.has(value)?value:"bottom-start"},toAttribute(value){return value}},blankDraft=()=>({hour:null,minute:null,second:null,dayPeriod:null}),pad=value=>String(value).padStart(2,"0");function isElementNode(value){if(value===null||typeof value!="object")return!1;const candidate=value;return candidate.nodeType===1&&typeof candidate.getRootNode=="function"&&typeof candidate.contains=="function"}function containsElement(container,value){if(!container||!isElementNode(value))return!1;try{return container.contains(value)}catch{return!1}}class LyraTimeInput extends FormAssociated(LyraTimeInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,timeInputDayPeriod:LYRA_DEFAULT_timeInputDayPeriod,timeInputEmptySegment:LYRA_DEFAULT_timeInputEmptySegment,timeInputHour:LYRA_DEFAULT_timeInputHour,timeInputInvalid:LYRA_DEFAULT_timeInputInvalid,timeInputLabel:LYRA_DEFAULT_timeInputLabel,timeInputMaxMessage:LYRA_DEFAULT_timeInputMaxMessage,timeInputMinMessage:LYRA_DEFAULT_timeInputMinMessage,timeInputMinute:LYRA_DEFAULT_timeInputMinute,timeInputNow:LYRA_DEFAULT_timeInputNow,timeInputOpen:LYRA_DEFAULT_timeInputOpen,timeInputPopup:LYRA_DEFAULT_timeInputPopup,timeInputRangeMessage:LYRA_DEFAULT_timeInputRangeMessage,timeInputSecond:LYRA_DEFAULT_timeInputSecond,timeInputStepMessage:LYRA_DEFAULT_timeInputStepMessage}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","min","max","step")]}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={open:{type:Boolean,reflect:!0,noAccessor:!0},readonly:{type:Boolean,reflect:!0,noAccessor:!0},step:{converter:stepConverter,reflect:!0,noAccessor:!0}}}get hasLabelSlot(){return this.slotPresence.has("label")}get hasHintSlot(){return this.slotPresence.has("hint")}get hasErrorSlot(){return this.slotPresence.has("error")}get hasStartSlot(){return this.slotPresence.has("start")}get hasEndSlot(){return this.slotPresence.has("end")}get hasFooterSlot(){return this.slotPresence.has("footer")}constructor(){super(),this.appearance="outlined",this.autocomplete="",this.distance=0,this.hint="",this.hourFormat="auto",this.label="",this.min="",this.max="",this.pill=!1,this.placement="bottom-start",this.size="m",this.clearable=!1,this.withClear=!1,this.withHint=!1,this.withLabel=!1,this.withNow=!1,this.errorText="",this.activeSegment="hour",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.popupHidden=!0,this.popupPositioned=!1,this._open=!1,this._readonly=!1,this._step=60,this.draft=blankDraft(),this.partial=!1,this.secondsVisible=!1,this.genuineValue="",this.digitBuffer="",this.inputDigitLocale="",this.restoringSegmentFocus=!1,this.restoreFocusOnClose=!0,this.popupController=new PopupController({host:this,popup:()=>this.renderRoot.querySelector('[part="popup"]'),emit:(name,cancelable)=>emitPopupEvent(this,name,cancelable),onPointer:event=>this.onDocumentPointerDown(event)}),this.visibilityPromise=Promise.resolve(),this.segmentOrderKey="",this.pickerGridKey="",this.pickerGridMilliseconds=[],this.inputId=nextId("time-input"),this.labelId=nextId("time-input-label"),this.hintId=nextId("time-input-hint"),this.errorId=nextId("time-input-error"),this.requiredDescriptionId=nextId("time-input-required"),this.popupId=nextId("time-input-popup"),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector('[part~="input"]'),()=>{const description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);return this.required&&description?[description]:[]}),this.now=()=>new Date,this.onSegmentKeyDown=event=>{const name=event.currentTarget.dataset.segment;if(this.liveDisabled)return;if(event.altKey&&event.key==="ArrowDown"){event.preventDefault(),this.show();return}const digit=this.inputDigit(event.key);if(digit!==void 0&&!event.ctrlKey&&!event.metaKey&&!event.altKey&&!this.readonly){event.preventDefault(),this.acceptDigit(name,digit);return}if(name==="dayPeriod"&&!this.readonly&&(event.key.toLowerCase()==="a"||event.key.toLowerCase()==="p")){event.preventDefault(),this.setDraftSegment(name,event.key.toLowerCase()==="a"?"am":"pm");return}if(event.key==="ArrowLeft"||event.key==="ArrowRight"){event.preventDefault();const physical=event.key==="ArrowRight"?1:-1;this.resetDigitBuffer(),this.moveSegment(name,this.effectiveDirection==="rtl"?-physical:physical);return}if((event.key==="ArrowUp"||event.key==="ArrowDown")&&!this.readonly){event.preventDefault(),this.resetDigitBuffer(),this.stepSegment(name,event.key==="ArrowUp"?1:-1);return}if((event.key==="Home"||event.key==="End")&&!this.readonly){event.preventDefault();const bounds=this.segmentBounds(name),next=event.key==="Home"?bounds.min:bounds.max;this.setDraftSegment(name,name==="dayPeriod"?next===0?"am":"pm":next);return}if((event.key==="Backspace"||event.key==="Delete")&&!this.readonly){event.preventDefault(),this.resetDigitBuffer(),this.setDraftSegment(name,null);return}event.key==="Enter"&&(this.open?this.hide():this.readonly||submitOnEnter(this,event))},this.onSegmentPaste=event=>{if(this.liveDisabled||this.readonly)return;const pasted=normalizeTimeValue(event.clipboardData?.getData("text").trim()??"");pasted&&(event.preventDefault(),this.resetDigitBuffer(),this.commitUserValue(pasted,"insertFromPaste",!0))},this.onSegmentFocus=event=>{if(event.stopPropagation(),this.liveDisabled)return;const focusedSegment=event.target.dataset.segment??this.activeSegment;if(this.restoringSegmentFocus){queueMicrotask(()=>{this.isConnected&&this.segmentOrder.includes(focusedSegment)&&(this.activeSegment=focusedSegment)});return}else this.activeSegment=focusedSegment;const related=event.relatedTarget;containsElement(this.renderRoot.querySelector('[part="input"]'),related)||relayNativeEvent(this,event)},this.onSegmentBlur=event=>{if(event.stopPropagation(),this.pendingSegmentFocus){this.resetDigitBuffer();return}const related=event.relatedTarget;containsElement(this.renderRoot.querySelector('[part="input"]'),related)||(this.liveDisabled||(this.touched=!0),this.resetDigitBuffer(),relayNativeEvent(this,event))},this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];isElementNode(target)&&composedContains(this,target)||this.requestVisibility(!1,!0,!1)},this.onExpand=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onClear=()=>{this.liveDisabled||this.readonly||!this.draftHasAny&&this.value===""||(this.touched=!0,this.commitUserValue("","deleteContentBackward",!0),this.emit("lr-clear"),this.focus())},this.onNow=()=>{if(this.liveDisabled||this.readonly)return;const now=this.now();let value=`${pad(now.getHours())}:${pad(now.getMinutes())}`;this.includeSeconds&&(value+=`:${pad(now.getSeconds())}`),this.commitUserValue(value)},this.onPopupPointerDown=event=>{event.preventDefault()},this.onAutofillInput=event=>{event.stopPropagation();const input=event.currentTarget,normalized=normalizeTimeValue(input.value),intentionalClear=input.value===""&&(event.isTrusted||event.inputType.startsWith("delete")||event.inputType==="insertReplacementText");if(input.value===""&&this.value!==""&&!intentionalClear){input.value=this.value;return}input.value!==""&&!normalized||this.readonly||this.liveDisabled||(this.value=normalized,dispatchNativeInputEvent(this,{data:event.data,inputType:event.inputType||"insertReplacementText"}),this.emit("lr-input",{value:this.value}))},this.onAutofillChange=event=>{event.stopPropagation();const input=event.currentTarget,normalized=normalizeTimeValue(input.value);input.value!==""&&!normalized||this.readonly||this.liveDisabled||(this.value=normalized,dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}))},this.onColumnKeyDown=event=>{if(this.liveDisabled||!["ArrowUp","ArrowDown","Home","End"].includes(event.key))return;const current=event.currentTarget,column=current.closest('[role="listbox"]'),options=Array.from(column?.querySelectorAll('[role="option"]')??[]).filter(option=>!option.disabled);if(options.length===0)return;event.preventDefault();const index=Math.max(0,options.indexOf(current)),nextIndex=event.key==="Home"?0:event.key==="End"?options.length-1:(index+(event.key==="ArrowDown"?1:-1)+options.length)%options.length;for(const option of options)option.tabIndex=option===options[nextIndex]?0:-1;options[nextIndex].focus(),options[nextIndex].scrollIntoView({block:"nearest"})},new GlassScrollLayer(this,'[part="popup"]',()=>this.open),this.addEventListener("invalid",()=>{this.touched=!0})}get open(){return this._open}set open(next){this.requestVisibility(!!next,this.isConnected&&this.hasUpdated,!0)}get readonly(){return this._readonly}set readonly(next){const old=this._readonly;this._readonly=!!next,this.toggleAttribute("readonly",this._readonly),this._readonly&&this.forceClose(!1),this.updateValidity(),this.requestUpdate("readonly",old)}get step(){return this._step}set step(next){const old=this._step;if(next==="any")this._step=next;else{const numeric=finiteNumber(Number(next),60);this._step=numeric>0?numeric:60}const genuinePrecision=parseTimeValue(this.genuineValue)?.precision;this.secondsVisible=this.numericStep<60||genuinePrecision!==void 0&&genuinePrecision!=="minute";const committed=this.committedValue;committed!==this.value&&(super.value=committed),this.updateValidity(),this.requestUpdate("step",old)}get disabled(){return super.disabled}set disabled(next){super.disabled=next,next&&this.forceClose(!1),this.syncComponentStates()}get value(){return super.value}set value(next){this.genuineValue=normalizeTimeValue(next);const normalized=this.committedValue;this.partial=!1,this.resetDigitBuffer(),this.syncDraft(normalized),super.value=normalized,this.syncComponentStates()}get valueAsNumber(){return parseTimeValue(this.value)?.milliseconds??Number.NaN}set valueAsNumber(next){this.value=timeValueFromMilliseconds(next)}get valueAsDate(){const parsed=parseTimeValue(this.value);if(!parsed)return null;const result=this.now();return result.setHours(parsed.hour,parsed.minute,parsed.second,parsed.millisecond),result}set valueAsDate(next){this.value=normalizeTimeValue(next)}get valueAsLocalDate(){return this.valueAsDate}set valueAsLocalDate(next){this.valueAsDate=next}get valueAsUTCDate(){const parsed=parseTimeValue(this.value);return parsed?new Date(parsed.milliseconds):null}set valueAsUTCDate(next){this.value=timeValueFromMilliseconds(wrapTimeMilliseconds(isDateObject(next)?next.getTime():NaN))}get numericStep(){return this.step==="any"?60:finiteNumber(this.step,60)}padToStepPrecision(value){return value&&this.numericStep<60&&parseTimeValue(value)?.precision==="minute"?`${value}:00`:value}get committedValue(){return this.padToStepPrecision(this.genuineValue)}get includeSeconds(){return this.numericStep<60||this.secondsVisible}get segmentModel(){const locale=this.effectiveLocale,key=`${locale}|${this.hourFormat}|${this.includeSeconds}`;if(this.segmentModelCache?.key!==key){const pattern=localeTimePattern(locale,this.hourFormat,this.includeSeconds),order=pattern.filter(part=>part.type!=="literal").map(part=>part.type);this.segmentModelCache={key,pattern,order,twelveHour:order.includes("dayPeriod")}}return this.segmentModelCache}get pattern(){return this.segmentModel.pattern}get segmentOrder(){return this.segmentModel.order}get periodLabels(){const model=this.segmentModel;return model.labels??=dayPeriodLabels(this.effectiveLocale)}get liveDisabled(){const matches=this.matches;return this.effectiveDisabled||typeof matches=="function"&&matches.call(this,":disabled")}activeSegmentFor(order=this.segmentOrder){return order.includes(this.activeSegment)?this.activeSegment:order[0]??"hour"}get usesTwelveHour(){return this.segmentModel.twelveHour}get draftComplete(){return this.draft.hour!==null&&this.draft.minute!==null&&(!this.includeSeconds||this.draft.second!==null)&&(!this.usesTwelveHour||this.draft.dayPeriod!==null)}get draftHasAny(){return Object.values(this.draft).some(value=>value!==null)}syncDraft(value){const parsed=parseTimeValue(value);if(!parsed){this.draft=blankDraft(),this.secondsVisible=this.numericStep<60;return}this.draft={hour:parsed.hour,minute:parsed.minute,second:parsed.second,dayPeriod:parsed.hour>=12?"pm":"am"};const genuinePrecision=parseTimeValue(this.genuineValue)?.precision;this.secondsVisible=this.numericStep<60||genuinePrecision!==void 0&&genuinePrecision!=="minute"}canonicalDraftValue(){if(!this.draftComplete)return"";const value=`${pad(this.draft.hour)}:${pad(this.draft.minute)}`;return this.includeSeconds?`${value}:${pad(this.draft.second)}`:value}syncComponentStates(){setCustomState(this.internals,"blank",this.value===""),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"open",this.open)}formattedNumber(value,minimumIntegerDigits){return this.numberFormatter(minimumIntegerDigits)(value)}numberFormatter(minimumIntegerDigits){try{const formatter=getNumberFormat(this.effectiveLocale,{minimumIntegerDigits,useGrouping:!1});return value=>formatter.format(value)}catch{return value=>String(value).padStart(minimumIntegerDigits,"0")}}inputDigit(key){if(/^[0-9]$/.test(key))return key;const locale=this.effectiveLocale;if(this.inputDigitMap&&this.inputDigitLocale===locale)return this.inputDigitMap.get(key);const digits=new Map;try{const formatter=getNumberFormat(locale,{useGrouping:!1});for(let value=0;value<=9;value++){const integer=formatter.formatToParts(value).find(part=>part.type==="integer")?.value;integer!==void 0&&!digits.has(integer)&&digits.set(integer,String(value))}this.inputDigitLocale=locale,this.inputDigitMap=digits}catch{}return digits.get(key)}displayTime(value){const parsed=parseTimeValue(value);if(!parsed)return value;const includeSeconds=parsed.precision!=="minute",labels=this.periodLabels;return localeTimePattern(this.effectiveLocale,this.hourFormat,includeSeconds).map(part=>{if(part.type==="literal")return part.value;if(part.type==="hour"){const hour=this.usesTwelveHour?parsed.hour%12||12:parsed.hour;return this.formattedNumber(hour,this.usesTwelveHour?1:2)}return part.type==="minute"?this.formattedNumber(parsed.minute,2):part.type==="second"?this.formattedNumber(parsed.second,2):parsed.hour>=12?labels.pm:labels.am}).join("")}segmentNumericValue(name){return name==="hour"?this.draft.hour===null?null:this.usesTwelveHour?this.draft.hour%12||12:this.draft.hour:name==="minute"?this.draft.minute:name==="second"?this.draft.second:this.draft.dayPeriod==="am"?0:this.draft.dayPeriod==="pm"?1:null}segmentText(name){if(this.digitSegment===name&&this.digitBuffer)return this.formattedNumber(Number(this.digitBuffer),this.digitBuffer.length);if(name==="dayPeriod")return this.draft.dayPeriod?this.periodLabels[this.draft.dayPeriod]:"--";const value=this.segmentNumericValue(name);if(value===null)return"--";const minimumDigits=name==="hour"&&this.usesTwelveHour?1:2;return this.formattedNumber(value,minimumDigits)}segmentLabel(name){const keys={hour:"timeInputHour",minute:"timeInputMinute",second:"timeInputSecond",dayPeriod:"timeInputDayPeriod"};return this.localize(keys[name])}segmentBounds(name){return name==="hour"?this.usesTwelveHour?{min:1,max:12}:{min:0,max:23}:name==="dayPeriod"?{min:0,max:1}:{min:0,max:59}}setDraftSegment(name,value,user=!0){if(!(this.liveDisabled||user&&this.readonly)){if(name==="hour")if(value===null)this.draft.hour=null;else{const numeric=Number(value);this.draft.hour=this.usesTwelveHour?to24Hour(numeric,this.draft.dayPeriod??"am"):numeric}else if(name==="dayPeriod"){const period=value==="pm"?"pm":value==="am"?"am":null;if(period&&this.draft.hour!==null){const displayHour=this.draft.hour%12||12;this.draft.hour=to24Hour(displayHour,period)}this.draft.dayPeriod=period}else this.draft[name]=value===null?null:Number(value);if(!user){this.requestUpdate();return}this.publishDraftEdit()}}publishDraftEdit(){const before=super.value,next=this.canonicalDraftValue();this.partial=this.draftHasAny&&!this.draftComplete,this.genuineValue=next,super.value=next,this.syncComponentStates(),dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.emit("lr-input",{value:this.value}),next!==""&&next!==before&&(dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})),this.requestUpdate()}commitUserValue(value,inputType="insertReplacementText",forceChange=!1){const before=this.value;this.value=value,dispatchNativeInputEvent(this,{inputType}),this.emit("lr-input",{value:this.value}),(forceChange||this.value!==before)&&(dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}))}resetDigitBuffer(){this.digitBuffer="",this.digitSegment=void 0}moveSegment(from,direction){const order=this.segmentOrder,current=Math.max(0,order.indexOf(from)),next=Math.min(order.length-1,Math.max(0,current+direction));this.activeSegment=order[next]??"hour",this.segmentElement(this.activeSegment)?.focus()}acceptDigit(name,digit){if(name==="dayPeriod")return;this.digitSegment!==name&&(this.digitSegment=name,this.digitBuffer="");const bounds=this.segmentBounds(name);let candidateText=`${this.digitBuffer}${digit}`.slice(-2),candidate=Number(candidateText);(candidate>bounds.max||candidateText.length===2&&candidate<bounds.min)&&(candidateText=digit,candidate=Number(digit)),this.digitBuffer=candidateText,candidate>=bounds.min&&candidate<=bounds.max?this.setDraftSegment(name,candidate):this.requestUpdate();const cannotAcceptAnother=candidate*10>bounds.max;(candidateText.length===2||cannotAcceptAnother)&&(this.resetDigitBuffer(),this.moveSegment(name,1))}stepSegment(name,delta){const bounds=this.segmentBounds(name),current=this.segmentNumericValue(name),next=current===null?bounds.min:(current-bounds.min+delta+(bounds.max-bounds.min+1))%(bounds.max-bounds.min+1)+bounds.min;name==="dayPeriod"?this.setDraftSegment(name,next===0?"am":"pm"):this.setDraftSegment(name,next)}segmentElement(name){return this.renderRoot?.querySelector(`[data-segment="${name}"]`)}focus(options){if(this.liveDisabled)return;const order=this.segmentOrder,activeSegment=this.activeSegmentFor(order);activeSegment!==this.activeSegment&&(this.activeSegment=activeSegment),this.segmentElement(activeSegment)?.focus(options)}blur(){const active=shadowFocusTarget(this);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.focus()}setOpen(next){if(this._open===next)return;const old=this._open;this._open=next,this.syncComponentStates(),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}requestVisibility(next,announce,restoreFocus){return this._open===next?this.visibilityPromise:next&&(this.liveDisabled||this.readonly)?(this.syncOpenAttribute(),Promise.resolve()):announce&&this.emit(next?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented?(this.syncOpenAttribute(),Promise.resolve()):(this.restoreFocusOnClose=restoreFocus,this.setOpen(next),this.visibilityPromise=announce?this.settleTransition(next?"lr-after-show":"lr-after-hide"):Promise.resolve(),this.visibilityPromise)}show(){return this.requestVisibility(!0,!0,!0)}hide(){return this.requestVisibility(!1,!0,!0)}forceClose(restoreFocus){this._open&&(this.restoreFocusOnClose=restoreFocus,this.setOpen(!1))}settleTransition(event){return this.popupController.settle(event,{waitForPosition:async stale=>{const positioned=await waitForDeferredPlacement(()=>this.cleanupPositioner);return stale()||!this.open?!1:positioned?(this.popupPositioned=!0,!0):(this.forceClose(!1),!1)},conceal:()=>{this.popupHidden=!0}})}positionPopup(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.renderRoot.querySelector('[part~="time-input"]'),popup=this.renderRoot.querySelector('[part="popup"]');if(!anchor||!popup)return;this.cleanupPositioner=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),offset:finiteNumber(this.distance,0),sync:"width",strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});const operation=this.cleanupPositioner;operation.ready.then(positioned=>{positioned&&this.cleanupPositioner===operation&&this.open&&this.isConnected&&(this.popupPositioned=!0)})}activatePopup(){this.isConnected&&(this.positionPopup(),this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="popup"]'),onEscape:()=>{this.hide()},restoreFocusTo:this.segmentElement(this.activeSegment)}),this.popupController.bindPointer(),this.updateComplete.then(()=>{const option=this.renderRoot.querySelector('[part~="column-item-selected"]'),column=option?.closest('[part="column"]');if(!option||!column)return;const offset=option.getBoundingClientRect().top-column.getBoundingClientRect().top;column.scrollTop+=offset-(column.clientHeight-option.offsetHeight)/2}))}teardownPopup(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus:this.restoreFocusOnClose}),this.overlayHandle=void 0,this.popupController.unbindPointer(),this.restoreFocusOnClose=!0}onColumnSelect(name,value){this.readonly||this.liveDisabled||(this.resetDigitBuffer(),this.setDraftSegment(name,value),this.activeSegment=name,this.updateComplete.then(()=>this.segmentElement(name)?.focus()))}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const flags={};let message="";this.required&&this.value===""&&(flags.valueMissing=!0),this.partial&&(flags.badInput=!0);const parsed=parseTimeValue(this.value);if(this.value!==""&&!parsed&&(flags.badInput=!0),parsed&&!isTimeInRange(this.value,this.min,this.max)){const parsedMin=parseTimeValue(this.min),parsedMax=parseTimeValue(this.max);parsedMin&&parsedMax&&parsedMin.milliseconds>parsedMax.milliseconds?(flags.rangeUnderflow=!0,message=this.localize("timeInputRangeMessage",void 0,{min:this.displayTime(this.min),max:this.displayTime(this.max)})):parsedMin&&parsed.milliseconds<parsedMin.milliseconds?(flags.rangeUnderflow=!0,message=this.localize("timeInputMinMessage",void 0,{min:this.displayTime(this.min)})):(flags.rangeOverflow=!0,message=this.localize("timeInputMaxMessage",void 0,{max:this.displayTime(this.max)}))}parsed&&hasTimeStepMismatch(this.value,this.step,this.min,this.defaultValue)&&(flags.stepMismatch=!0,message||=this.localize("timeInputStepMessage")),flags.badInput?message=this.localize("timeInputInvalid"):flags.valueMissing&&(message=this.localize("fieldRequired")),this[SET_ANCHORED_VALIDITY](flags,message)}checkValidity(){return this.updateValidity(),super.checkValidity()}reportValidity(){return this.touched=!0,this.updateValidity(),super.reportValidity()}[VALIDITY_ANCHOR](){return this.segmentElement(this.activeSegmentFor())}formResetCallback(){super.formResetCallback(),this.touched=!1,this.partial=!1,this.resetDigitBuffer()}formStateRestoreCallback(state2,reason="restore"){super.formStateRestoreCallback(state2,reason)}willUpdate(changed){super.willUpdate(changed),this.open&&this.effectiveDisabled&&this.forceClose(!1);const order=this.segmentOrder,orderKey=order.join("|"),focused=orderKey!==this.segmentOrderKey?shadowFocusTarget(this):null,focusedSegment=typeof focused?.getAttribute=="function"?focused.getAttribute("data-segment"):null,nextActiveSegment=focusedSegment&&order.includes(focusedSegment)?focusedSegment:this.activeSegmentFor(order);focusedSegment&&(this.pendingSegmentFocus=order.includes(focusedSegment)?focusedSegment:nextActiveSegment),this.segmentOrderKey=orderKey,changed.has("open")&&(this.popupPositioned=!1),this.open&&(this.popupHidden=!1)}updated(changed){super.updated(changed),changed.has("open")?this.open?this.activatePopup():this.teardownPopup():this.open&&(changed.has("placement")||changed.has("distance"))&&this.positionPopup(),(changed.has("value")||changed.has("required")||changed.has("readonly")||changed.has("min")||changed.has("max")||changed.has("step"))&&this.updateValidity(),this.syncComponentStates(),this.toggleAttribute("data-invalid",this.touched&&!this.validity.valid);const pendingSegmentFocus=this.pendingSegmentFocus;if(this.pendingSegmentFocus=void 0,pendingSegmentFocus&&!this.effectiveDisabled){this.restoringSegmentFocus=!0;try{this.segmentElement(pendingSegmentFocus)?.focus()}finally{this.restoringSegmentFocus=!1}}}disconnectedCallback(){this.popupHidden=!0,this.popupController.cancel(),this.forceClose(!1),this.teardownPopup(),this.syncOpenAttribute(),this.pendingSegmentFocus=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}renderSegment(name,invalid){const value=this.segmentNumericValue(name),bounds=this.segmentBounds(name),empty=value===null;return html`
       <span
         part="segment"
         role="spinbutton"

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

@@ -1 +1 @@
-import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{compactContainerQuery}from"../../../internal/container-breakpoints.styles.js";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-12rem); --_lr-time-input-border-color-default: var(--lr-color-border); --_lr-time-input-fill-default: var(--lr-color-surface); --_lr-time-input-color-default: var(--lr-color-text); --_lr-time-input-control-min-height-default: var(--lr-form-control-height); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } [part~='form-control-label'] { display: block; min-inline-size: 0; max-inline-size: 100%; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); overflow-wrap: anywhere; } [part~='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} [part~='time-input'] { display: flex; align-items: center; box-sizing: border-box; inline-size: 100%; min-block-size: var( --lr-time-input-control-height, var( --lr-time-input-control-min-height, var(--_lr-time-input-control-min-height-default) ) ); block-size: var(--lr-time-input-control-height, auto); gap: var(--lr-time-input-gap, var(--lr-form-control-gap)); padding-inline: var(--lr-form-control-padding-inline); border: var(--lr-border-width-thin) solid var(--lr-time-input-border-color, var(--_lr-time-input-border-color-default)); border-radius: var(--lr-time-input-radius, var(--lr-form-control-radius)); background: var(--lr-time-input-fill, var(--_lr-time-input-fill-default)); color: var(--lr-time-input-color, var(--_lr-time-input-color-default)); font: inherit; font-size: var(--lr-form-control-font-size); } :host([appearance='filled']) { --_lr-time-input-border-color-default: transparent; --_lr-time-input-fill-default: var(--lr-color-surface-raised); } :host([appearance='filled-outlined']) { --_lr-time-input-fill-default: var(--lr-color-surface-raised); } :host([appearance='plain']) { --_lr-time-input-border-color-default: transparent; --_lr-time-input-fill-default: transparent; } :host([appearance='accent']) { --_lr-time-input-border-color-default: var(--lr-color-brand); --_lr-time-input-fill-default: var(--lr-color-brand-quiet); } :host([pill]) [part~='time-input'] { border-radius: var(--lr-time-input-radius, var(--lr-radius-pill)); } :host([open]) [part~='time-input'], [part~='time-input']:focus-within { border-color: var(--lr-time-input-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part~='time-input'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='start'], [part='end'] { flex: 0 1 auto; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 50%; overflow: hidden; color: var(--lr-color-text-quiet); } [part='start'] slot, [part='end'] slot, [part='start'] slot::slotted(*), [part='end'] slot::slotted(*) { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='start'][hidden], [part='end'][hidden] { display: none; } [part='input'] { flex: 1 1 auto; display: inline-flex; align-items: baseline; min-inline-size: 0; outline: none; } [part='segment'] { display: inline-flex; justify-content: center; min-inline-size: var(--lr-size-2-5ch); padding-block: var(--lr-space-2xs); padding-inline: var(--lr-space-2xs); border-radius: var(--lr-radius-xs); color: inherit; cursor: text; font-variant-numeric: tabular-nums; user-select: none; } :host(:not(:disabled)) [part='segment']:hover { background: var(--lr-time-input-segment-hover-bg, var(--lr-color-brand-quiet)); } :host(:not(:disabled)) [part='segment']:active { background: var( --lr-time-input-segment-active-bg, color-mix( in oklab, var(--lr-time-input-segment-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='segment']:focus-visible { ${focusRing} background: var(--lr-time-input-segment-focus-bg, var(--lr-time-input-segment-hover-bg, var(--lr-color-brand-quiet))); } [part='segment'][data-empty] { color: var(--lr-time-input-placeholder-color, var(--lr-time-input-action-color, var(--lr-color-text-quiet))); } :host(:disabled) [part='segment'] { cursor: not-allowed; } [part='segment-literal'] { color: var(--lr-color-text-quiet); user-select: none; } [part='clear-button'], [part='expand-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; ${iconHitTarget} padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-form-control-radius); background: transparent; color: var(--lr-time-input-action-color, var(--lr-color-text-quiet)); cursor: pointer; font: inherit; line-height: var(--lr-line-height-none); } [part='clear-button']:not(:disabled):hover, [part='expand-button']:not(:disabled):hover { color: var(--lr-time-input-action-hover-color, var(--lr-color-text)); background: var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)); } [part='clear-button']:not(:disabled):active, [part='expand-button']:not(:disabled):active { background: var( --lr-time-input-action-active-bg, color-mix( in oklab, var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='clear-button']:focus-visible, [part='expand-button']:focus-visible { ${focusRing} } [part='clear-button']:disabled, [part='expand-button']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='expand-icon'] { display: inline-flex; transform: rotate(90deg); transition: transform var(--lr-transition-fast); } :host([open]) [part='expand-icon'] { transform: rotate(-90deg); } [part='popup'][hidden] { display: none; } [part='popup'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-positioner-available-block-size); overflow: auto; padding: var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-overlay-border, var(--lr-color-border)); border-radius: var(--lr-overlay-radius, var(--lr-radius)); background: var(--lr-overlay-surface, var(--lr-color-surface-raised)); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); color: var(--lr-color-text); opacity: 1; transform: translateY(0); visibility: visible; transition-property: opacity, transform, visibility; transition-duration: var(--_lr-motion-duration, var(--show-duration, var(--lr-duration-fast))); transition-timing-function: var(--lr-easing-standard); } [part='popup'][data-hidden] { opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); visibility: hidden; pointer-events: none; transition-duration: var(--_lr-motion-duration, var(--hide-duration, var(--lr-duration-fast))); } [part='columns'] { display: flex; align-items: stretch; gap: var(--lr-space-xs); } [part='column'] { display: flex; flex-direction: column; inline-size: var(--column-width, calc(var(--lr-size-1em) * 3)); max-block-size: calc(var(--column-item-height, calc(var(--lr-size-1em) * 2.25)) * 6); overflow-block: auto; overflow-inline: hidden; overscroll-behavior: contain; scrollbar-width: var(--lr-theme-scrollbar-width, thin); scrollbar-gutter: var(--lr-theme-scrollbar-gutter, auto); } [part~='column-item'] { flex: 0 0 var(--column-item-height, calc(var(--lr-size-1em) * 2.25)); display: flex; align-items: center; justify-content: center; box-sizing: border-box; ${iconHitTarget} padding-inline: var(--lr-space-xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; } :where([part~='column-item']):hover { background: var(--lr-time-input-column-hover-bg, var(--lr-color-brand-quiet)); } :where([part~='column-item']):active { background: var( --lr-time-input-column-active-bg, color-mix( in oklab, var(--lr-time-input-column-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :where([part~='column-item']):focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset)))); } [part~='column-item-selected'] { background: var(--lr-time-input-column-selected-bg, var(--lr-color-brand)); color: var(--lr-time-input-column-selected-color, var(--lr-color-on-brand)); font-weight: var(--lr-time-input-column-selected-font-weight, var(--lr-font-weight-semibold)); } :where([part~='column-item-selected']):hover { background: var( --lr-time-input-column-selected-hover-bg, color-mix( in oklab, var(--lr-time-input-column-selected-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); } :where([part~='column-item-selected']):active { background: var( --lr-time-input-column-selected-active-bg, color-mix( in oklab, var(--lr-time-input-column-selected-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='now-button'] { inline-size: 100%; min-block-size: var(--lr-icon-button-size); margin-block-start: var(--lr-space-s); padding-block: var(--lr-space-xs); padding-inline: var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: transparent; color: inherit; cursor: pointer; font: inherit; } [part='now-button']:hover { background: var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)); } [part='now-button']:active { background: var( --lr-time-input-action-active-bg, color-mix( in oklab, var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='now-button']:focus-visible { ${focusRing} } [part='hint'], [part='error'] { margin-block-start: var(--lr-space-xs); min-inline-size: 0; max-inline-size: 100%; font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='hint'] { color: var(--lr-color-text-quiet); } [part='error'] { color: var(--lr-color-danger); } [part='hint'][hidden], [part='error'][hidden] { display: none; } @container ${compactContainerQuery} { [part='popup'] { max-inline-size: var(--lr-positioner-available-inline-size); } [part='columns'] { gap: var(--lr-space-2xs); } } @media (prefers-reduced-motion: reduce) { [part='popup'], [part='expand-icon'] { transition-duration: var(--_lr-motion-duration, var(--lr-duration-fast)); } } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="popup"]',css`var(--lr-overlay-surface, var(--lr-color-surface-raised))`,void 0,!0)} `;export{styles};
+import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{compactContainerQuery}from"../../../internal/container-breakpoints.styles.js";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlAppearance,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-12rem); --_lr-time-input-border-color-default: var(--_lr-form-control-border-color); --_lr-time-input-fill-default: var(--_lr-form-control-fill); --_lr-time-input-color-default: var(--lr-color-text); --_lr-time-input-control-min-height-default: var(--lr-form-control-height); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } [part~='form-control-label'] { display: block; min-inline-size: 0; max-inline-size: 100%; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); overflow-wrap: anywhere; } [part~='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} [part~='time-input'] { display: flex; align-items: center; box-sizing: border-box; inline-size: 100%; min-block-size: var( --lr-time-input-control-height, var( --lr-time-input-control-min-height, var(--_lr-time-input-control-min-height-default) ) ); block-size: var(--lr-time-input-control-height, auto); gap: var(--lr-time-input-gap, var(--lr-form-control-gap)); padding-inline: var(--lr-form-control-padding-inline); border: var(--lr-border-width-thin) solid var(--lr-time-input-border-color, var(--_lr-time-input-border-color-default)); border-radius: var(--lr-time-input-radius, var(--lr-form-control-radius)); background: var(--lr-time-input-fill, var(--_lr-time-input-fill-default)); color: var(--lr-time-input-color, var(--_lr-time-input-color-default)); font: inherit; font-size: var(--lr-form-control-font-size); } ${formControlAppearance} :host([pill]) [part~='time-input'] { border-radius: var(--lr-time-input-radius, var(--lr-radius-pill)); } :host([open]) [part~='time-input'], [part~='time-input']:focus-within { border-color: var(--lr-time-input-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part~='time-input'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='start'], [part='end'] { flex: 0 1 auto; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 50%; overflow: hidden; color: var(--lr-color-text-quiet); } [part='start'] slot, [part='end'] slot, [part='start'] slot::slotted(*), [part='end'] slot::slotted(*) { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='start'][hidden], [part='end'][hidden] { display: none; } [part='input'] { flex: 1 1 auto; display: inline-flex; align-items: baseline; min-inline-size: 0; outline: none; } [part='segment'] { display: inline-flex; justify-content: center; min-inline-size: var(--lr-size-2-5ch); padding-block: var(--lr-space-2xs); padding-inline: var(--lr-space-2xs); border-radius: var(--lr-radius-xs); color: inherit; cursor: text; font-variant-numeric: tabular-nums; user-select: none; } :host(:not(:disabled)) [part='segment']:hover { background: var(--lr-time-input-segment-hover-bg, var(--lr-color-brand-quiet)); } :host(:not(:disabled)) [part='segment']:active { background: var( --lr-time-input-segment-active-bg, color-mix( in oklab, var(--lr-time-input-segment-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='segment']:focus-visible { ${focusRing} background: var(--lr-time-input-segment-focus-bg, var(--lr-time-input-segment-hover-bg, var(--lr-color-brand-quiet))); } [part='segment'][data-empty] { color: var(--lr-time-input-placeholder-color, var(--lr-time-input-action-color, var(--lr-color-text-quiet))); } :host(:disabled) [part='segment'] { cursor: not-allowed; } [part='segment-literal'] { color: var(--lr-color-text-quiet); user-select: none; } [part='clear-button'], [part='expand-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; ${iconHitTarget} padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-form-control-radius); background: transparent; color: var(--lr-time-input-action-color, var(--lr-color-text-quiet)); cursor: pointer; font: inherit; line-height: var(--lr-line-height-none); } [part='clear-button']:not(:disabled):hover, [part='expand-button']:not(:disabled):hover { color: var(--lr-time-input-action-hover-color, var(--lr-color-text)); background: var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)); } [part='clear-button']:not(:disabled):active, [part='expand-button']:not(:disabled):active { background: var( --lr-time-input-action-active-bg, color-mix( in oklab, var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='clear-button']:focus-visible, [part='expand-button']:focus-visible { ${focusRing} } [part='clear-button']:disabled, [part='expand-button']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='expand-icon'] { display: inline-flex; transform: rotate(90deg); transition: transform var(--lr-transition-fast); } :host([open]) [part='expand-icon'] { transform: rotate(-90deg); } [part='popup'][hidden] { display: none; } [part='popup'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-positioner-available-block-size); overflow: auto; padding: var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-overlay-border, var(--lr-color-border)); border-radius: var(--lr-overlay-radius, var(--lr-radius)); background: var(--lr-overlay-surface, var(--lr-color-surface-raised)); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); color: var(--lr-color-text); opacity: 1; transform: translateY(0); visibility: visible; transition-property: opacity, transform, visibility; transition-duration: var(--_lr-motion-duration, var(--show-duration, var(--lr-duration-fast))); transition-timing-function: var(--lr-easing-standard); } [part='popup'][data-hidden] { opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); visibility: hidden; pointer-events: none; transition-duration: var(--_lr-motion-duration, var(--hide-duration, var(--lr-duration-fast))); } [part='columns'] { display: flex; align-items: stretch; gap: var(--lr-space-xs); } [part='column'] { display: flex; flex-direction: column; inline-size: var(--column-width, calc(var(--lr-size-1em) * 3)); max-block-size: calc(var(--column-item-height, calc(var(--lr-size-1em) * 2.25)) * 6); overflow-block: auto; overflow-inline: hidden; overscroll-behavior: contain; scrollbar-width: var(--lr-theme-scrollbar-width, thin); scrollbar-gutter: var(--lr-theme-scrollbar-gutter, auto); } [part~='column-item'] { flex: 0 0 var(--column-item-height, calc(var(--lr-size-1em) * 2.25)); display: flex; align-items: center; justify-content: center; box-sizing: border-box; ${iconHitTarget} padding-inline: var(--lr-space-xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; } :where([part~='column-item']):hover { background: var(--lr-time-input-column-hover-bg, var(--lr-color-brand-quiet)); } :where([part~='column-item']):active { background: var( --lr-time-input-column-active-bg, color-mix( in oklab, var(--lr-time-input-column-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :where([part~='column-item']):focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset)))); } [part~='column-item-selected'] { background: var(--lr-time-input-column-selected-bg, var(--lr-color-brand)); color: var(--lr-time-input-column-selected-color, var(--lr-color-on-brand)); font-weight: var(--lr-time-input-column-selected-font-weight, var(--lr-font-weight-semibold)); } :where([part~='column-item-selected']):hover { background: var( --lr-time-input-column-selected-hover-bg, color-mix( in oklab, var(--lr-time-input-column-selected-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); } :where([part~='column-item-selected']):active { background: var( --lr-time-input-column-selected-active-bg, color-mix( in oklab, var(--lr-time-input-column-selected-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='now-button'] { inline-size: 100%; min-block-size: var(--lr-icon-button-size); margin-block-start: var(--lr-space-s); padding-block: var(--lr-space-xs); padding-inline: var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: transparent; color: inherit; cursor: pointer; font: inherit; } [part='now-button']:hover { background: var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)); } [part='now-button']:active { background: var( --lr-time-input-action-active-bg, color-mix( in oklab, var(--lr-time-input-action-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='now-button']:focus-visible { ${focusRing} } [part='hint'], [part='error'] { margin-block-start: var(--lr-space-xs); min-inline-size: 0; max-inline-size: 100%; font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='hint'] { color: var(--lr-color-text-quiet); } [part='error'] { color: var(--lr-color-danger); } [part='hint'][hidden], [part='error'][hidden] { display: none; } @container ${compactContainerQuery} { [part='popup'] { max-inline-size: var(--lr-positioner-available-inline-size); } [part='columns'] { gap: var(--lr-space-2xs); } } @media (prefers-reduced-motion: reduce) { [part='popup'], [part='expand-icon'] { transition-duration: var(--_lr-motion-duration, var(--lr-duration-fast)); } } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="popup"]',css`var(--lr-overlay-surface, var(--lr-color-surface-raised))`,void 0,!0)} `;export{styles};

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

@@ -1,4 +1,4 @@
-import type{LyraLocaleLoader}from'../../../internal/locale-loader.js';import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraLocaleDirection}from'../../../internal/localization.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';
+import type{LyraLocaleLoader}from'../../../internal/locale-loader.js';import{type TemplateResult,type PropertyValues}from'lit';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import type{LyraLocaleDirection}from'../../../internal/localization.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';
 /** One offered locale row. `label` overrides the derived `localeNativeName(tag)` endonym when
 *  given -- e.g. offering a locale before its strings are registered ("Français (bientôt)").
 *  `country` overrides the row's derived flag country when given -- e.g. showing Lebanon's flag
@@ -172,7 +172,7 @@ export interface LyraLocaleChangeDetail{value:string;previousValue:string;direct
 * @status stable
 * @since 6.0.0
 */
-export declare class LyraLocalePicker extends LyraElement<LyraLocalePickerEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};};private _localeLoader?;
+export declare class LyraLocalePicker extends LyraFormControlElement<LyraLocalePickerEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};};private _localeLoader?;
 /** Optional catalog loader. Selection waits for it before changing the value or page locale.
 * Import loadLyraLocale from the optional locale-loader.js entry to load built-in catalogs.
 * Unset preserves synchronous selection. Failures keep the previous value and offer retry;
@@ -238,7 +238,7 @@ get open():boolean;set open(next:boolean);
 *  tag rename with no attribute rewrite. */
 size:LyraSize;private activeIndex;private searchQuery;private touched;private readonly slotPresence;private registryTick;private triggerElement?;private searchElement?;private searchAnnouncements?;private searchFocusGeneration;private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
-customError:string|null;private listId;private controlId;private cleanup?;private placedTopLayer?;private listboxHidden;private closeSettleToken;private overlayHandle?;private readonly pointer;private stopRegistrySubscription?;private _value;private _open;private _fieldsetDisabled;private _name;private _disabled;private _required;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private readonly typeBuffer;private activeScrollGeneration;private localizedValidityLocale;private localizedIntrinsicMessage;constructor();private get liveDisabled();
+customError:string|null;private listId;private controlId;private cleanup?;private placedTopLayer?;private listboxHidden;private closeSettleToken;private overlayHandle?;private readonly popupController;private stopRegistrySubscription?;private _value;private _open;private _fieldsetDisabled;private _name;private _disabled;private _required;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private readonly typeBuffer;private activeScrollGeneration;private localizedValidityLocale;private localizedIntrinsicMessage;constructor();private get liveDisabled();
 /** Focus the internal trigger unless the form control is effectively disabled. */
 focus(options?:FocusOptions):void;
 /** Blur the internal trigger or the optional focused search input. */
@@ -250,7 +250,7 @@ click():void;
 /** Native filter input when searchable, otherwise null. After editing its value directly,
 * dispatch a native input event to update filtering; this never changes the committed locale.
 * The field remains disabled while the popup is closed. */
-get input():HTMLInputElement|null;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;
+get input():HTMLInputElement|null;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);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`. */
@@ -272,4 +272,4 @@ get effectiveDisabled():boolean;private updateValidity;private refreshLocalizedI
 *
 * The message is caller-supplied content, so it is used verbatim and never localized here.
 */
-setCustomValidity(message:string):void;private get normalizedEntries();private entriesCache?;private visibleCache?;private normalizeSearch;private get visibleEntries();private clearSearch;private queueSearchFocus;private get previewTag();private entryFor;private labelFor;private show;private hide;private dismissFromEscape;private onDocPointer;private bindDocumentPointer;private unbindDocumentPointer;private activatePopupOverlay;private deactivatePopupOverlay;private syncPopup;private settleClosedLayout;protected updated(changed:PropertyValues):void;private commitDispatching;private valueWriteVersion;private loadGeneration;private loadAnnouncements?;private loadingTag?;private loadFailureTag?;private cancelLocaleLoad;private announceLoad;private commit;private retryLocaleLoad;private onTriggerClick;private onTriggerBlur;private onTriggerFocus;private isSearchFocusTransfer;private onSearchInput;private onSearchChange;private onSearchKeyDown;private typeAhead;private setActiveIndex;private queueActiveScroll;private onKeyDown;private onListboxMouseDown;private onListboxClick;private renderRows;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-locale-picker':LyraLocalePicker;}}
+setCustomValidity(message:string):void;private get normalizedEntries();private entriesCache?;private visibleCache?;private normalizeSearch;private get visibleEntries();private clearSearch;private queueSearchFocus;private get previewTag();private entryFor;private labelFor;private show;private hide;private dismissFromEscape;private onDocPointer;private activatePopupOverlay;private deactivatePopupOverlay;private syncPopup;private settleClosedLayout;protected updated(changed:PropertyValues):void;private commitDispatching;private valueWriteVersion;private loadGeneration;private loadAnnouncements?;private loadingTag?;private loadFailureTag?;private cancelLocaleLoad;private announceLoad;private commit;private retryLocaleLoad;private onTriggerClick;private onTriggerBlur;private onTriggerFocus;private isSearchFocusTransfer;private onSearchInput;private onSearchChange;private onSearchKeyDown;private typeAhead;private setActiveIndex;private queueActiveScroll;private onKeyDown;private onListboxMouseDown;private onListboxClick;private renderRows;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-locale-picker':LyraLocalePicker;}}

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";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{deferredPlace as place,awaitPopupAnimations,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{TypeAheadBuffer}from"../../../internal/type-ahead-buffer.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{getDisplayNames,resolveIntlLocale}from"../../../internal/intl-cache.js";import{activeElementIn}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocale,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{autocorrectConverter,declaredDefaultConverter,spellcheckConverter}from"../../../internal/converters.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{DocumentPointerListener}from"../../../internal/document-pointer.js";import{revealRow}from"../../../internal/reveal-row.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_loading,LYRA_DEFAULT_localePickerEmpty,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired,LYRA_DEFAULT_localePickerSearchLabel,LYRA_DEFAULT_retry,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();const MAX_LOCALE_ENTRIES=512,localeSpellcheckConverter={...spellcheckConverter,fromAttribute:(value,type)=>value===null?void 0:spellcheckConverter.fromAttribute?.(value,type)};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,loading:LYRA_DEFAULT_loading,localePickerEmpty:LYRA_DEFAULT_localePickerEmpty,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired,localePickerSearchLabel:LYRA_DEFAULT_localePickerSearchLabel,retry:LYRA_DEFAULT_retry,statusError:LYRA_DEFAULT_statusError}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,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 localeLoader(){return this._localeLoader}set localeLoader(next){const previous=this._localeLoader;previous!==next&&(this.cancelLocaleLoad(),this._localeLoader=next,this.requestUpdate("localeLoader",previous))}get locales(){return this._locales}set locales(next){this.cancelLocaleLoad();const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=!!next,this.requestUpdate()}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.clearSearch()),this.requestUpdate("open",old)}constructor(){super(),this.withoutFlags=!1,this.topLayer=!1,this.triggerDisplay="flag-label",this.optionDisplay="label-tag",this.searchable=!1,this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.spellcheck=!1,this.autocapitalize="",this.autocorrectValue=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.searchQuery="",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.registryTick=0,this.searchFocusGeneration=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this.listboxHidden=!0,this.closeSettleToken=0,this.pointer=new DocumentPointerListener(this,event=>this.onDocPointer(event)),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.typeBuffer=new TypeAheadBuffer(this),this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncCustomStates())},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.commitDispatching=!1,this.valueWriteVersion=0,this.loadGeneration=0,this.retryLocaleLoad=()=>{const restoreFocus=activeElementIn(this.shadowRoot)?.getAttribute("part")==="load-retry";this.loadFailureTag!==void 0&&this.commit(this.loadFailureTag),restoreFocus&&this.loadFailureTag===void 0&&this.isConnected&&activeElementIn(this.shadowRoot)?.getAttribute("part")==="load-retry"&&this.focus()},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchInput=event=>{event.stopPropagation(),!(!this.searchable||!this.open||this.liveDisabled)&&(this.searchQuery=event.currentTarget.value,this.setActiveIndex(this.visibleEntries.length?0:-1))},this.onSearchChange=event=>{event.stopPropagation()},this.onSearchKeyDown=event=>{if(this.liveDisabled||!this.open||event.isComposing||event.keyCode===229)return;const rows=this.visibleEntries;if(event.key==="ArrowDown"||event.key==="ArrowUp")event.preventDefault(),this.setActiveIndex(event.key==="ArrowDown"?Math.min(rows.length-1,this.activeIndex+1):Math.max(0,this.activeIndex-1));else if(event.key==="Enter"){event.preventDefault();const row=rows[this.activeIndex];row&&this.commit(row.tag)}else event.key==="Escape"&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(event.preventDefault(),this.dismissFromEscape())},this.onKeyDown=e=>{if(this.liveDisabled||e.isComposing||e.keyCode===229)return;const rows=this.visibleEntries,move=()=>resolveListMove(e,{count:rows.length,current:this.activeIndex,orientation:"vertical",wrap:!1,clamp:!0,backwardFromMissing:"first"});switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();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(move()??-1));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1));break;default:this.typeBuffer.accepts(e)&&(this.searchable?(e.preventDefault(),this.show(),this.searchQuery+=e.key,this.setActiveIndex(this.visibleEntries.length?0:-1),this.queueSearchFocus()):this.typeAhead(e.key));break}},this.onListboxMouseDown=e=>{e.composedPath()[0]!==this.searchElement&&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.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.searchElement&&activeElementIn(this.shadowRoot)===this.searchElement?this.searchElement.blur():this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}get input(){return this.searchable?this.searchElement??null:null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[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.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.closeSettleToken++,this.listboxHidden=!0,this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.typeBuffer.clear(),this.activeScrollGeneration+=1,this.open=!1}adoptedCallback(){this.closeSettleToken++,this.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlayHandle?.suspend(),this.typeBuffer.clear(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),changed.has("searchable")&&!this.searchable&&(this.clearSearch(),this.searchElement&&activeElementIn(this.shadowRoot)===this.searchElement&&this.focus()),changed.has("open")&&this.open&&this.setActiveIndex(this.visibleEntries.findIndex(row=>row.tag===this._value)),this.open&&(this.searchable||changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.visibleEntries.length-1),this.queueActiveScroll()),this.open&&(this.listboxHidden=!1)}get value(){return this._value}set value(next){this.cancelLocaleLoad(),this.valueWriteVersion++;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??"",reflectFormName(this,this._name),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){next&&this.cancelLocaleLoad();const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,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.clearSearch(),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.validityController?.reflectingDisabled||(disabled&&this.cancelLocaleLoad(),this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),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,cached=this.entriesCache;if(cached&&cached.raw===raw&&cached.tick===this.registryTick)return cached.rows;const rows=raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label!==void 0&&entry.label.trim().length>0?entry.label:localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}));return this.entriesCache={raw,tick:this.registryTick,rows},rows}normalizeSearch(text,locale=this.effectiveLocale){return text.toLocaleLowerCase(resolveIntlLocale(locale)).normalize("NFKD").replace(/\p{M}/gu,"").trim()}get visibleEntries(){const rows=this.normalizedEntries,query2=this.searchable?this.normalizeSearch(this.searchQuery):"";if(!query2)return rows;const cached=this.visibleCache;if(cached&&cached.rows===rows&&cached.query===this.searchQuery&&cached.locale===this.effectiveLocale)return cached.result;let names;try{names=getDisplayNames(this.effectiveLocale,{type:"language"})}catch{}let englishNames;try{englishNames=getDisplayNames("en",{type:"language"})}catch{}const invariantQuery=this.normalizeSearch(this.searchQuery,"en"),result=rows.filter(row=>{let localizedName="";try{localizedName=names?.of(row.tag)??""}catch{}let englishName="";try{englishName=englishNames?.of(row.tag)??""}catch{}return[row.label,localeNativeName(row.tag),localizedName].some(text=>this.normalizeSearch(text).includes(query2))||[row.tag,englishName].some(text=>this.normalizeSearch(text,"en").includes(invariantQuery))});return this.visibleCache={rows,query:this.searchQuery,locale:this.effectiveLocale,result},result}clearSearch(){this.searchQuery="",this.searchFocusGeneration++,this.searchAnnouncements?.release(),this.searchAnnouncements=void 0}queueSearchFocus(){if(!this.searchable||!this.open||this.liveDisabled)return;const generation=++this.searchFocusGeneration,ownerDocument=this.ownerDocument,outerFocus=activeElementIn(ownerDocument),innerFocus=activeElementIn(this.shadowRoot);this.updateComplete.then(()=>{generation!==this.searchFocusGeneration||!this.isConnected||!this.open||!this.searchable||this.liveDisabled||this.ownerDocument!==ownerDocument||activeElementIn(ownerDocument)!==outerFocus||activeElementIn(this.shadowRoot)!==innerFocus||this.searchElement?.focus()})}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,this.queueSearchFocus())}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){if(this.open){if(this.searchable&&this.searchQuery.length){this.clearSearch(),this.setActiveIndex(this.visibleEntries.length?0:-1);return}this.deactivatePopupOverlay(!0),this.hide()}}bindDocumentPointer(){this.isConnected&&this.pointer.bind()}unbindDocumentPointer(){this.pointer.unbind()}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(this.loadFailureTag!==void 0?'[part="form-control"]':'[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.placedTopLayer=syncTopLayerRelease(listbox,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,listbox,topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed"))))}async settleClosedLayout(){const token=++this.closeSettleToken;await awaitPopupAnimations(this,()=>this.renderRoot.querySelector('[part="listbox"]'),()=>this.closeSettleToken===token)&&(this.listboxHidden=!0)}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")||changed.has("searchQuery")||changed.has("searchable")||changed.has("loadFailureTag")||changed.has("topLayer")))&&this.syncPopup(),changed.has("open")&&(this.open?this.closeSettleToken++:this.settleClosedLayout()),this.open&&this.searchable&&changed.has("searchQuery")&&this.searchQuery.trim()&&this.visibleEntries.length===0&&(this.searchAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.searchAnnouncements.announce(this.localize("localePickerEmpty"))),changed.has("searchable")&&this.searchable&&activeElementIn(this.shadowRoot)===this.triggerElement&&this.queueSearchFocus(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}cancelLocaleLoad(){this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.loadGeneration++,this.loadingTag=void 0,this.loadFailureTag=void 0}announceLoad(key){this.loadAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.loadAnnouncements.announce(key==="loading"?this.localize("loading"):this.localize("statusError"))}commit(tag){if(!(this.commitDispatching||this.liveDisabled||!this.entryFor(tag))){if(tag===this._value&&tag===getLyraLocale()){this.hide();return}this.commitDispatching=!0;try{const previousValue=this._value,version=this.valueWriteVersion,loader=this.localeLoader,generation=this.loadGeneration,detail=Object.freeze({value:tag,previousValue,direction:getLyraLocaleDirection(tag)});if(this.emit("lr-change-request",detail,{cancelable:!0}).defaultPrevented||this.liveDisabled||this.valueWriteVersion!==version||this.loadGeneration!==generation||this.localeLoader!==loader||!this.entryFor(tag))return;const commitValue=()=>{const searchFocus=this.searchElement&&activeElementIn(this.shadowRoot)===this.searchElement?this.searchElement:void 0;this.value=tag,this.hide(),setLyraLocale(tag);const committed=Object.freeze({...detail,direction:getLyraLocaleDirection(tag)});emitValueEvents(this,"input",committed,detail2=>this.emit("lr-input",detail2)),emitValueEvents(this,"change",committed,detail2=>this.emit("lr-change",detail2)),searchFocus&&this.isConnected&&this.searchable&&activeElementIn(this.shadowRoot)===searchFocus&&this.focus()};if(loader===void 0){commitValue();return}this.cancelLocaleLoad();const operation=this.loadGeneration,ownerDocument=this.ownerDocument;this.loadingTag=tag,this.announceLoad("loading");const ownsSelection=()=>this.isConnected&&this.ownerDocument===ownerDocument&&this.loadGeneration===operation&&this.valueWriteVersion===version&&this.localeLoader===loader&&!this.liveDisabled&&this.entryFor(tag)!==void 0;Promise.resolve().then(()=>{if(ownsSelection())return loader(tag)}).then(()=>{ownsSelection()&&commitValue()},()=>{ownsSelection()&&(this.loadingTag=void 0,this.loadFailureTag=tag,this.announceLoad("statusError"))})}finally{this.commitDispatching=!1}}}isSearchFocusTransfer(event){const related=event.relatedTarget;return(this.searchable||event.currentTarget===this.searchElement||related===this.searchElement)&&related!==null&&"nodeType"in related&&this.renderRoot.contains(related)}typeAhead(char){this.typeBuffer.add(char,this.effectiveLocale);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),match=this.typeBuffer.match(rows,currentIndex,row=>row.label,this.effectiveLocale);match!==null&&(this.open?this.setActiveIndex(match):this.commit(rows[match].tag))}setActiveIndex(index){const last=this.visibleEntries.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(()=>{if(generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index)return;const row=this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`),popup=this.renderRoot.querySelector('[part="listbox"]');row&&popup&&revealRow(popup,row,this.searchElement?.offsetHeight)})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
+import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";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{LyraFormControlElement}from"../../../internal/form-control-element.js";import{deferredPlace as place,awaitPopupAnimations,syncTopLayerRelease,topLayerPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{TypeAheadBuffer}from"../../../internal/type-ahead-buffer.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{getDisplayNames,resolveIntlLocale}from"../../../internal/intl-cache.js";import{activeElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocale,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{autocorrectConverter,declaredDefaultConverter,spellcheckConverter}from"../../../internal/converters.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{PopupController,emitPopupEvent}from"../../../internal/popup-controller.js";import{revealRow}from"../../../internal/reveal-row.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_loading,LYRA_DEFAULT_localePickerEmpty,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired,LYRA_DEFAULT_localePickerSearchLabel,LYRA_DEFAULT_retry,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();const MAX_LOCALE_ENTRIES=512,localeSpellcheckConverter={...spellcheckConverter,fromAttribute:(value,type)=>value===null?void 0:spellcheckConverter.fromAttribute?.(value,type)};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 LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,loading:LYRA_DEFAULT_loading,localePickerEmpty:LYRA_DEFAULT_localePickerEmpty,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired,localePickerSearchLabel:LYRA_DEFAULT_localePickerSearchLabel,retry:LYRA_DEFAULT_retry,statusError:LYRA_DEFAULT_statusError}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,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 localeLoader(){return this._localeLoader}set localeLoader(next){const previous=this._localeLoader;previous!==next&&(this.cancelLocaleLoad(),this._localeLoader=next,this.requestUpdate("localeLoader",previous))}get locales(){return this._locales}set locales(next){this.cancelLocaleLoad();const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=!!next,this.requestUpdate()}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.clearSearch()),this.requestUpdate("open",old)}constructor(){super(),this.withoutFlags=!1,this.topLayer=!1,this.triggerDisplay="flag-label",this.optionDisplay="label-tag",this.searchable=!1,this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.spellcheck=!1,this.autocapitalize="",this.autocorrectValue=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.searchQuery="",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.registryTick=0,this.searchFocusGeneration=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this.listboxHidden=!0,this.closeSettleToken=0,this.popupController=new PopupController({host:this,popup:()=>this.renderRoot.querySelector('[part="listbox"]'),emit:(name,cancelable)=>emitPopupEvent(this,name,cancelable),onPointer:event=>this.onDocPointer(event)}),this._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.typeBuffer=new TypeAheadBuffer(this),this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.markInteracted=()=>{this.touched||(this.touched=!0,this.syncCustomStates())},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.commitDispatching=!1,this.valueWriteVersion=0,this.loadGeneration=0,this.retryLocaleLoad=()=>{const restoreFocus=shadowFocusTarget(this)?.getAttribute("part")==="load-retry";this.loadFailureTag!==void 0&&this.commit(this.loadFailureTag),restoreFocus&&this.loadFailureTag===void 0&&this.isConnected&&shadowFocusTarget(this)?.getAttribute("part")==="load-retry"&&this.focus()},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.isSearchFocusTransfer(event)){event.stopPropagation();return}if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onSearchInput=event=>{event.stopPropagation(),!(!this.searchable||!this.open||this.liveDisabled)&&(this.searchQuery=event.currentTarget.value,this.setActiveIndex(this.visibleEntries.length?0:-1))},this.onSearchChange=event=>{event.stopPropagation()},this.onSearchKeyDown=event=>{if(this.liveDisabled||!this.open||event.isComposing||event.keyCode===229)return;const rows=this.visibleEntries;if(event.key==="ArrowDown"||event.key==="ArrowUp")event.preventDefault(),this.setActiveIndex(event.key==="ArrowDown"?Math.min(rows.length-1,this.activeIndex+1):Math.max(0,this.activeIndex-1));else if(event.key==="Enter"){event.preventDefault();const row=rows[this.activeIndex];row&&this.commit(row.tag)}else event.key==="Escape"&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(event.preventDefault(),this.dismissFromEscape())},this.onKeyDown=e=>{if(this.liveDisabled||e.isComposing||e.keyCode===229)return;const rows=this.visibleEntries,move=()=>resolveListMove(e,{count:rows.length,current:this.activeIndex,orientation:"vertical",wrap:!1,clamp:!0,backwardFromMissing:"first"});switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(move()??-1),this.queueSearchFocus();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(move()??-1));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(move()??-1));break;default:this.typeBuffer.accepts(e)&&(this.searchable?(e.preventDefault(),this.show(),this.searchQuery+=e.key,this.setActiveIndex(this.visibleEntries.length?0:-1),this.queueSearchFocus()):this.typeAhead(e.key));break}},this.onListboxMouseDown=e=>{e.composedPath()[0]!==this.searchElement&&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.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.searchElement&&shadowFocusTarget(this)===this.searchElement?this.searchElement.blur():this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}get input(){return this.searchable?this.searchElement??null:null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.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.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.closeSettleToken++,this.listboxHidden=!0,this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.typeBuffer.clear(),this.activeScrollGeneration+=1,this.open=!1}adoptedCallback(){this.closeSettleToken++,this.clearSearch(),this.cancelLocaleLoad(),this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.popupController.unbindPointer(),this.overlayHandle?.suspend(),this.typeBuffer.clear(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),changed.has("searchable")&&!this.searchable&&(this.clearSearch(),this.searchElement&&shadowFocusTarget(this)===this.searchElement&&this.focus()),changed.has("open")&&this.open&&this.setActiveIndex(this.visibleEntries.findIndex(row=>row.tag===this._value)),this.open&&(this.searchable||changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.visibleEntries.length-1),this.queueActiveScroll()),this.open&&(this.listboxHidden=!1)}get value(){return this._value}set value(next){this.cancelLocaleLoad(),this.valueWriteVersion++;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??"",reflectFormName(this,this._name),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){next&&this.cancelLocaleLoad();const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,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.clearSearch(),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.validityController?.reflectingDisabled||(disabled&&this.cancelLocaleLoad(),this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),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,cached=this.entriesCache;if(cached&&cached.raw===raw&&cached.tick===this.registryTick)return cached.rows;const rows=raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label!==void 0&&entry.label.trim().length>0?entry.label:localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}));return this.entriesCache={raw,tick:this.registryTick,rows},rows}normalizeSearch(text,locale=this.effectiveLocale){return text.toLocaleLowerCase(resolveIntlLocale(locale)).normalize("NFKD").replace(/\p{M}/gu,"").trim()}get visibleEntries(){const rows=this.normalizedEntries,query2=this.searchable?this.normalizeSearch(this.searchQuery):"";if(!query2)return rows;const cached=this.visibleCache;if(cached&&cached.rows===rows&&cached.query===this.searchQuery&&cached.locale===this.effectiveLocale)return cached.result;let names;try{names=getDisplayNames(this.effectiveLocale,{type:"language"})}catch{}let englishNames;try{englishNames=getDisplayNames("en",{type:"language"})}catch{}const invariantQuery=this.normalizeSearch(this.searchQuery,"en"),result=rows.filter(row=>{let localizedName="";try{localizedName=names?.of(row.tag)??""}catch{}let englishName="";try{englishName=englishNames?.of(row.tag)??""}catch{}return[row.label,localeNativeName(row.tag),localizedName].some(text=>this.normalizeSearch(text).includes(query2))||[row.tag,englishName].some(text=>this.normalizeSearch(text,"en").includes(invariantQuery))});return this.visibleCache={rows,query:this.searchQuery,locale:this.effectiveLocale,result},result}clearSearch(){this.searchQuery="",this.searchFocusGeneration++,this.searchAnnouncements?.release(),this.searchAnnouncements=void 0}queueSearchFocus(){if(!this.searchable||!this.open||this.liveDisabled)return;const generation=++this.searchFocusGeneration,ownerDocument=this.ownerDocument,outerFocus=activeElementIn(ownerDocument),innerFocus=shadowFocusTarget(this);this.updateComplete.then(()=>{generation!==this.searchFocusGeneration||!this.isConnected||!this.open||!this.searchable||this.liveDisabled||this.ownerDocument!==ownerDocument||activeElementIn(ownerDocument)!==outerFocus||shadowFocusTarget(this)!==innerFocus||this.searchElement?.focus()})}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,this.queueSearchFocus())}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){if(this.open){if(this.searchable&&this.searchQuery.length){this.clearSearch(),this.setActiveIndex(this.visibleEntries.length?0:-1);return}this.deactivatePopupOverlay(!0),this.hide()}}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.popupController.unbindPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.popupController.bindPointer();const anchor=this.renderRoot.querySelector(this.loadFailureTag!==void 0?'[part="form-control"]':'[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.placedTopLayer=syncTopLayerRelease(listbox,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,listbox,topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed"))))}async settleClosedLayout(){const token=++this.closeSettleToken;await awaitPopupAnimations(this,()=>this.renderRoot.querySelector('[part="listbox"]'),()=>this.closeSettleToken===token)&&(this.listboxHidden=!0)}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")||changed.has("searchQuery")||changed.has("searchable")||changed.has("loadFailureTag")||changed.has("topLayer")))&&this.syncPopup(),changed.has("open")&&(this.open?this.closeSettleToken++:this.settleClosedLayout()),this.open&&this.searchable&&changed.has("searchQuery")&&this.searchQuery.trim()&&this.visibleEntries.length===0&&(this.searchAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.searchAnnouncements.announce(this.localize("localePickerEmpty"))),changed.has("searchable")&&this.searchable&&shadowFocusTarget(this)===this.triggerElement&&this.queueSearchFocus(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}cancelLocaleLoad(){this.loadAnnouncements?.release(),this.loadAnnouncements=void 0,this.loadGeneration++,this.loadingTag=void 0,this.loadFailureTag=void 0}announceLoad(key){this.loadAnnouncements??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.loadAnnouncements.announce(key==="loading"?this.localize("loading"):this.localize("statusError"))}commit(tag){if(!(this.commitDispatching||this.liveDisabled||!this.entryFor(tag))){if(tag===this._value&&tag===getLyraLocale()){this.hide();return}this.commitDispatching=!0;try{const previousValue=this._value,version=this.valueWriteVersion,loader=this.localeLoader,generation=this.loadGeneration,detail=Object.freeze({value:tag,previousValue,direction:getLyraLocaleDirection(tag)});if(this.emit("lr-change-request",detail,{cancelable:!0}).defaultPrevented||this.liveDisabled||this.valueWriteVersion!==version||this.loadGeneration!==generation||this.localeLoader!==loader||!this.entryFor(tag))return;const commitValue=()=>{const searchFocus=this.searchElement&&shadowFocusTarget(this)===this.searchElement?this.searchElement:void 0;this.value=tag,this.hide(),setLyraLocale(tag);const committed=Object.freeze({...detail,direction:getLyraLocaleDirection(tag)});emitValueEvents(this,"input",committed,detail2=>this.emit("lr-input",detail2)),emitValueEvents(this,"change",committed,detail2=>this.emit("lr-change",detail2)),searchFocus&&this.isConnected&&this.searchable&&shadowFocusTarget(this)===searchFocus&&this.focus()};if(loader===void 0){commitValue();return}this.cancelLocaleLoad();const operation=this.loadGeneration,ownerDocument=this.ownerDocument;this.loadingTag=tag,this.announceLoad("loading");const ownsSelection=()=>this.isConnected&&this.ownerDocument===ownerDocument&&this.loadGeneration===operation&&this.valueWriteVersion===version&&this.localeLoader===loader&&!this.liveDisabled&&this.entryFor(tag)!==void 0;Promise.resolve().then(()=>{if(ownsSelection())return loader(tag)}).then(()=>{ownsSelection()&&commitValue()},()=>{ownsSelection()&&(this.loadingTag=void 0,this.loadFailureTag=tag,this.announceLoad("statusError"))})}finally{this.commitDispatching=!1}}}isSearchFocusTransfer(event){const related=event.relatedTarget;return(this.searchable||event.currentTarget===this.searchElement||related===this.searchElement)&&related!==null&&"nodeType"in related&&this.renderRoot.contains(related)}typeAhead(char){this.typeBuffer.add(char,this.effectiveLocale);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),match=this.typeBuffer.match(rows,currentIndex,row=>row.label,this.effectiveLocale);match!==null&&(this.open?this.setActiveIndex(match):this.commit(rows[match].tag))}setActiveIndex(index){const last=this.visibleEntries.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(()=>{if(generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index)return;const row=this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`),popup=this.renderRoot.querySelector('[part="listbox"]');row&&popup&&revealRow(popup,row,this.searchElement?.offsetHeight)})}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"

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

@@ -8,6 +8,7 @@ import{__decorate}from"tslib";import{setNativeRangeText}from"../../../internal/n
           <input
             part="control"
             id="control"
+            name=${this.name||nothing}
             type="text"
             .value=${this.value}
             maxlength=${this.renderedSegmentCount}