@aceshooting/lyra-ui 26.0.0 → 28.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{loadEmojiDataOutcomeCached}from"./emoji-data-loader.js";import{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_emojiPickerPeerMissing,LYRA_DEFAULT_emojiPickerSearchLabel,LYRA_DEFAULT_emojiPickerSearchPlaceholder}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,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/shared.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.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=loadEmojiDataOutcomeCached,this.retryLoad=()=>{this.peerLoadFailure=void 0,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,emojiPickerPeerMissing:LYRA_DEFAULT_emojiPickerPeerMissing,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.peerLoadFailure=void 0,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(!Array.isArray(loaded)){this.peerLoadFailure=loaded?.reason??"failed",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()}peerLoadMessage(){return this.localize(this.peerLoadFailure==="missing"?"emojiPickerPeerMissing":"emojiPickerLoadError")}announcePeerLoadFailure(){this.isConnected&&this.peerErrorAnnouncements.announceAssertive(this.peerLoadMessage())}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}`}
@@ -69,12 +69,12 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,stat
             @keydown=${this.onNavigationKeyDown}
             @focusin=${this.onGridFocusIn}
           >
-            ${items.length===0?this.peerLoadFailed?html`<div
+            ${items.length===0?this.peerLoadFailure?html`<div
                     part="load-error"
                     role="option"
                     aria-selected="false"
                     aria-disabled="true"
-                  >${this.localize("emojiPickerLoadError")}</div>`:html`<div
+                  >${this.peerLoadMessage()}</div>`:html`<div
                     part="empty"
                     role="option"
                     aria-selected="false"
@@ -86,7 +86,7 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,stat
                     </div>
                   `)}
           </div>
-          ${this.peerLoadFailed&&items.length===0?html`<button part="load-retry" type="button" ?disabled=${this.effectiveDisabled} @click=${this.retryLoad}>${this.localize("retry")}</button>`:nothing}
+          ${this.peerLoadFailure==="failed"&&items.length===0?html`<button part="load-retry" type="button" ?disabled=${this.effectiveDisabled} @click=${this.retryLoad}>${this.localize("retry")}</button>`:nothing}
         </div>
         <div part="hint" id=${this.hintId} ?hidden=${!hasHint}>
           ${this.hint}<slot name="hint"></slot>
@@ -100,4 +100,4 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,stat
         <div data-probe="gap"></div>
         <div data-probe="row"></div>
       </div>
-    `}}__decorate([state()],LyraEmojiPicker.prototype,"peerLoadFailed",void 0),__decorate([property({attribute:!1})],LyraEmojiPicker.prototype,"groups",null),__decorate([property({attribute:"aria-label"})],LyraEmojiPicker.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"search-placeholder"})],LyraEmojiPicker.prototype,"searchPlaceholder",void 0),__decorate([property({reflect:!0})],LyraEmojiPicker.prototype,"size",void 0),__decorate([property()],LyraEmojiPicker.prototype,"label",void 0),__decorate([property()],LyraEmojiPicker.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraEmojiPicker.prototype,"errorText",void 0),__decorate([state()],LyraEmojiPicker.prototype,"touched",void 0),__decorate([state()],LyraEmojiPicker.prototype,"queryText",void 0),__decorate([query('[part="search"]')],LyraEmojiPicker.prototype,"searchEl",void 0);export{LyraEmojiPicker};
+    `}}__decorate([state()],LyraEmojiPicker.prototype,"peerLoadFailure",void 0),__decorate([property({attribute:!1})],LyraEmojiPicker.prototype,"groups",null),__decorate([property({attribute:"aria-label"})],LyraEmojiPicker.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"search-placeholder"})],LyraEmojiPicker.prototype,"searchPlaceholder",void 0),__decorate([property({reflect:!0})],LyraEmojiPicker.prototype,"size",void 0),__decorate([property()],LyraEmojiPicker.prototype,"label",void 0),__decorate([property()],LyraEmojiPicker.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraEmojiPicker.prototype,"errorText",void 0),__decorate([state()],LyraEmojiPicker.prototype,"touched",void 0),__decorate([state()],LyraEmojiPicker.prototype,"queryText",void 0),__decorate([query('[part="search"]')],LyraEmojiPicker.prototype,"searchEl",void 0);export{LyraEmojiPicker};

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

@@ -119,6 +119,10 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 *   application at once. Only the two ancestor levers keep the coarse-pointer hit-area floor;
 *   see `llms/shared.md`.
 * @cssprop [--lr-icon-button-radius=var(--lr-radius)] - Corner radius of the native button.
+* @cssprop [--lr-icon-button-padding-inline=0] - Logical inline padding of the native button, for
+*   a trigger that carries a short text label (a currency, unit or locale code) instead of a
+*   square glyph. The default keeps an icon-only button at exactly its `--lr-icon-button-size`
+*   floor; padding adds to the content, so a label grows the button and never shrinks the floor.
 * @cssprop [--lr-icon-button-bg=transparent] - Background fill of the native button.
 * @cssprop [--lr-icon-button-bg-hover=color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))] -
 *   Background fill on hover. Before 8.0.0 this fell back to `var(--lr-color-surface)` — the page

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{syncAriaControlsElements,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{styles}from"./icon-button.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{isUnsafeSvgCloneAttribute,isUnsafeSvgCloneElement}from"../../../internal/safe-svg.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LYRA_DEFAULT_iconButtonLabel}from"../../../internal/default-strings.generated.js";const BARE_SVG_GEOMETRY_TAGS=new Set(["path","circle","rect","line","polygon","polyline","ellipse","g","use"]),SVG_NAMESPACE="http://www.w3.org/2000/svg";function needsSvgNamespaceFallback(node){return BARE_SVG_GEOMETRY_TAGS.has(node.localName)&&node.namespaceURI!==SVG_NAMESPACE}function cloneToSvgNamespace(node){if(node.localName.includes("-")||isUnsafeSvgCloneElement(node.localName))return null;const copy=node.ownerDocument.createElementNS(SVG_NAMESPACE,node.localName);for(const attribute of node.attributes)isUnsafeSvgCloneAttribute(attribute.name,attribute.value,node.localName)||copy.setAttribute(attribute.name==="xlink:href"?"href":attribute.name,attribute.value);for(const child of node.childNodes)if(child.nodeType===3)copy.append(child.cloneNode(!0));else if(child.nodeType===1){const childCopy=cloneToSvgNamespace(child);childCopy&&copy.append(childCopy)}return copy}function namesControl(nodes){for(const node of nodes){if(node.nodeType===3){if(node.textContent?.trim())return!0;continue}const el=node;if(!(el.nodeType!==1||el.hasAttribute("hidden")||el.getAttribute("aria-hidden")==="true")&&(el.getAttribute("aria-label")?.trim()||el.getAttribute("alt")?.trim()||namesControl((el.shadowRoot??el).childNodes)))return!0}return!1}class LyraIconButton extends LyraElement{constructor(){super(...arguments),this._disabled=!1,this.toolbarAction=this.createToolbarAction(),this.icon="",this.accessibleLabel="",this.triggerHasPopup=null,this.triggerKeyShortcuts=null,this.triggerExpanded=null,this.triggerControls=null,this.triggerDescribedBy=null,this.triggerPressed=null,this.triggerCurrent=null,this.label="",this.hasBareGeometry=!1,this.contentNamed=!1,this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{relayNativeEvent(this,event)},this.onSlotChange=e=>{this.onSlotChangeFromSlot(e.target)}}static{this.defaultStrings={...super.defaultStrings,iconButtonLabel:LYRA_DEFAULT_iconButtonLabel}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this._disabled}get name(){return this.icon}set name(next){this.icon=next??""}get resolvedRel(){return resolveGuardedRel(this.rel,this.target)}get control(){return this.baseEl??null}click(){this.effectiveDisabled||this.baseEl?.click()}focus(options){this.effectiveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}onSlotChangeFromSlot(slot){const assigned=slot.assignedNodes({flatten:!0});this.hasBareGeometry=assigned.some(node=>node.nodeType===1&&needsSvgNamespaceFallback(node)),this.contentNamed=namesControl(assigned)}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncDescribedByElements()}firstUpdated(changed){super.firstUpdated(changed);const slot=this.slotEl;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.onSlotChangeFromSlot(s))})}disconnectedCallback(){this.toolbarAction.releaseTabIndex?.(),this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){this.toolbarAction.releaseTabIndex?.(),super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncDescribedByElements()}willUpdate(changed){super.willUpdate(changed),this.seedFirstRenderState(()=>{this.contentNamed=namesControl(this.childNodes)})}updated(changed){super.updated(changed),this.syncFallbackGeometry(),syncAriaControlsElements(this,this.baseEl,this.triggerControls),this.syncDescribedByElements()}syncDescribedByElements(){const target=this.isConnected?this.baseEl:void 0;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"),this.externalLabelLease?this.externalLabelLease.update(target):this.externalLabelLease=acquireResolvedAriaRelationship(this,target,"aria-labelledby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0,this.externalLabelLease?.release(),this.externalLabelLease=void 0}getToolbarActions(){return[this.toolbarAction]}createToolbarAction(){const host=this;let leasedTrigger,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1;const releaseTabIndex=()=>{const target=leasedTrigger;target&&target.getAttribute("tabindex")===lastManagedTabIndex&&(authoredTabIndex===null?target.removeAttribute("tabindex"):target.setAttribute("tabindex",authoredTabIndex)),leasedTrigger=void 0,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1};return{id:"icon-button",get disabled(){return host.effectiveDisabled||!host.baseEl},focus(options){host.focus(options)},setTabIndex(tabIndex){const trigger=host.baseEl;if(!trigger){releaseTabIndex();return}if(leasedTrigger!==trigger&&(releaseTabIndex(),leasedTrigger=trigger,authoredTabIndex=trigger.getAttribute("tabindex")),consumerOwnsTabIndex||lastManagedTabIndex!==null&&trigger.getAttribute("tabindex")!==lastManagedTabIndex){consumerOwnsTabIndex=!0;return}trigger.tabIndex=tabIndex,lastManagedTabIndex=trigger.getAttribute("tabindex")},releaseTabIndex,matchesEventPath(path){const control=host.baseEl;return path.includes(host)||control!=null&&path.includes(control)}}}syncFallbackGeometry(){const svgEl=this.fallbackSvgEl;if(!svgEl)return;svgEl.replaceChildren();const assigned=this.slotEl?.assignedElements({flatten:!0})??[];for(const el of assigned){if(!needsSvgNamespaceFallback(el))continue;const copy=cloneToSvgNamespace(el);copy&&svgEl.append(copy)}}render(){const pressed=["true","false","mixed"].includes(this.triggerPressed??"")?this.triggerPressed:nothing,current=["page","step","location","date","time","true","false"].includes(this.triggerCurrent??"")?this.triggerCurrent:nothing,label=hostAriaLabel(this)??(this.label||(this.contentNamed?nothing:this.localize("iconButtonLabel"))),content=html`${this.icon||this.src?html`<lr-icon
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{syncAriaControlsElements,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{styles}from"./icon-button.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{isUnsafeSvgCloneAttribute,isUnsafeSvgCloneElement}from"../../../internal/safe-svg.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LYRA_DEFAULT_iconButtonLabel}from"../../../internal/default-strings/forms.generated.js";const BARE_SVG_GEOMETRY_TAGS=new Set(["path","circle","rect","line","polygon","polyline","ellipse","g","use"]),SVG_NAMESPACE="http://www.w3.org/2000/svg";function needsSvgNamespaceFallback(node){return BARE_SVG_GEOMETRY_TAGS.has(node.localName)&&node.namespaceURI!==SVG_NAMESPACE}function cloneToSvgNamespace(node){if(node.localName.includes("-")||isUnsafeSvgCloneElement(node.localName))return null;const copy=node.ownerDocument.createElementNS(SVG_NAMESPACE,node.localName);for(const attribute of node.attributes)isUnsafeSvgCloneAttribute(attribute.name,attribute.value,node.localName)||copy.setAttribute(attribute.name==="xlink:href"?"href":attribute.name,attribute.value);for(const child of node.childNodes)if(child.nodeType===3)copy.append(child.cloneNode(!0));else if(child.nodeType===1){const childCopy=cloneToSvgNamespace(child);childCopy&&copy.append(childCopy)}return copy}function namesControl(nodes){for(const node of nodes){if(node.nodeType===3){if(node.textContent?.trim())return!0;continue}const el=node;if(!(el.nodeType!==1||el.hasAttribute("hidden")||el.getAttribute("aria-hidden")==="true")&&(el.getAttribute("aria-label")?.trim()||el.getAttribute("alt")?.trim()||namesControl((el.shadowRoot??el).childNodes)))return!0}return!1}class LyraIconButton extends LyraElement{constructor(){super(...arguments),this._disabled=!1,this.toolbarAction=this.createToolbarAction(),this.icon="",this.accessibleLabel="",this.triggerHasPopup=null,this.triggerKeyShortcuts=null,this.triggerExpanded=null,this.triggerControls=null,this.triggerDescribedBy=null,this.triggerPressed=null,this.triggerCurrent=null,this.label="",this.hasBareGeometry=!1,this.contentNamed=!1,this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{relayNativeEvent(this,event)},this.onSlotChange=e=>{this.onSlotChangeFromSlot(e.target)}}static{this.defaultStrings={...super.defaultStrings,iconButtonLabel:LYRA_DEFAULT_iconButtonLabel}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this._disabled}get name(){return this.icon}set name(next){this.icon=next??""}get resolvedRel(){return resolveGuardedRel(this.rel,this.target)}get control(){return this.baseEl??null}click(){this.effectiveDisabled||this.baseEl?.click()}focus(options){this.effectiveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}onSlotChangeFromSlot(slot){const assigned=slot.assignedNodes({flatten:!0});this.hasBareGeometry=assigned.some(node=>node.nodeType===1&&needsSvgNamespaceFallback(node)),this.contentNamed=namesControl(assigned)}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncDescribedByElements()}firstUpdated(changed){super.firstUpdated(changed);const slot=this.slotEl;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.onSlotChangeFromSlot(s))})}disconnectedCallback(){this.toolbarAction.releaseTabIndex?.(),this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){this.toolbarAction.releaseTabIndex?.(),super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncDescribedByElements()}willUpdate(changed){super.willUpdate(changed),this.seedFirstRenderState(()=>{this.contentNamed=namesControl(this.childNodes)})}updated(changed){super.updated(changed),this.syncFallbackGeometry(),syncAriaControlsElements(this,this.baseEl,this.triggerControls),this.syncDescribedByElements()}syncDescribedByElements(){const target=this.isConnected?this.baseEl:void 0;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"),this.externalLabelLease?this.externalLabelLease.update(target):this.externalLabelLease=acquireResolvedAriaRelationship(this,target,"aria-labelledby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0,this.externalLabelLease?.release(),this.externalLabelLease=void 0}getToolbarActions(){return[this.toolbarAction]}createToolbarAction(){const host=this;let leasedTrigger,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1;const releaseTabIndex=()=>{const target=leasedTrigger;target&&target.getAttribute("tabindex")===lastManagedTabIndex&&(authoredTabIndex===null?target.removeAttribute("tabindex"):target.setAttribute("tabindex",authoredTabIndex)),leasedTrigger=void 0,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1};return{id:"icon-button",get disabled(){return host.effectiveDisabled||!host.baseEl},focus(options){host.focus(options)},setTabIndex(tabIndex){const trigger=host.baseEl;if(!trigger){releaseTabIndex();return}if(leasedTrigger!==trigger&&(releaseTabIndex(),leasedTrigger=trigger,authoredTabIndex=trigger.getAttribute("tabindex")),consumerOwnsTabIndex||lastManagedTabIndex!==null&&trigger.getAttribute("tabindex")!==lastManagedTabIndex){consumerOwnsTabIndex=!0;return}trigger.tabIndex=tabIndex,lastManagedTabIndex=trigger.getAttribute("tabindex")},releaseTabIndex,matchesEventPath(path){const control=host.baseEl;return path.includes(host)||control!=null&&path.includes(control)}}}syncFallbackGeometry(){const svgEl=this.fallbackSvgEl;if(!svgEl)return;svgEl.replaceChildren();const assigned=this.slotEl?.assignedElements({flatten:!0})??[];for(const el of assigned){if(!needsSvgNamespaceFallback(el))continue;const copy=cloneToSvgNamespace(el);copy&&svgEl.append(copy)}}render(){const pressed=["true","false","mixed"].includes(this.triggerPressed??"")?this.triggerPressed:nothing,current=["page","step","location","date","time","true","false"].includes(this.triggerCurrent??"")?this.triggerCurrent:nothing,label=hostAriaLabel(this)??(this.label||(this.contentNamed?nothing:this.localize("iconButtonLabel"))),content=html`${this.icon||this.src?html`<lr-icon
           name=${this.icon||nothing}
           library=${this.library||nothing}
           src=${this.src||nothing}

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

@@ -1 +1 @@
-import{iconAction,iconActionHover,iconActionActive}from"../../../internal/icon-action.styles.js";import{iconHitTarget}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: inline-flex; --_lr-icon-button-radius-default: var(--lr-radius); } [part~='button'] { ${iconHitTarget} ${iconAction} } [part~='button']:not(:disabled):not([aria-disabled='true']):hover { ${iconActionHover} } [part~='button']:not(:disabled):not([aria-disabled='true']):active { ${iconActionActive} } [part~='button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='button']:disabled, [part~='button'][aria-disabled='true'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } lr-icon { inline-size: var(--lr-icon-size, var(--lr-size-1-25rem)); block-size: var(--lr-icon-size, var(--lr-size-1-25rem)); } [part='fallback'] { display: block; inline-size: var(--lr-icon-size, var(--lr-size-1-25rem)); block-size: var(--lr-icon-size, var(--lr-size-1-25rem)); color: inherit; } `;export{styles};
+import{iconAction,iconActionHover,iconActionActive}from"../../../internal/icon-action.styles.js";import{iconHitTarget}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: inline-flex; --_lr-icon-button-radius-default: var(--lr-radius); } [part~='button'] { ${iconHitTarget} ${iconAction} } [part~='button'] { padding-inline: var(--lr-icon-button-padding-inline, 0); } [part~='button']:not(:disabled):not([aria-disabled='true']):hover { ${iconActionHover} } [part~='button']:not(:disabled):not([aria-disabled='true']):active { ${iconActionActive} } [part~='button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='button']:disabled, [part~='button'][aria-disabled='true'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } lr-icon { inline-size: var(--lr-icon-size, var(--lr-size-1-25rem)); block-size: var(--lr-icon-size, var(--lr-size-1-25rem)); } [part='fallback'] { display: block; inline-size: var(--lr-icon-size, var(--lr-size-1-25rem)); block-size: var(--lr-icon-size, var(--lr-size-1-25rem)); color: inherit; } `;export{styles};

package/dist/components/forms/input/input-shared.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{setCustomState}from"../../../internal/custom-states.js";import{lengthLimitConverter,lengthViolations}from"../../../internal/length-constraints.js";import{MatchConstraintController}from"../../../internal/match-constraint.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{isDateObject}from"../../../internal/dom-guards.js";import{sizes}from"../../../internal/sizes.styles.js";import{srOnly}from"../../../internal/a11y.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_matchMismatch,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const boundConverter={fromAttribute:value=>value==null?null:/^\s*[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?\s*$/i.test(value)?Number(value):value};let temporalProbe;function temporalProbeFor(doc,type){if(!(type!=="date"&&type!=="time"&&type!=="datetime-local"))return temporalProbe??=doc.createElement("input"),temporalProbe.type=type,temporalProbe}const INPUT_TYPES=new Set(["text","password","email","number","time","search","date","datetime-local","tel","url"]),LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInputShared extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,matchMismatch:LYRA_DEFAULT_matchMismatch,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}get value(){return super.value}set value(next){const normalized=next??"";super.value=normalized,this.settlingValueFromInput||this.settledDebounce.cancelIfChanged(normalized)}get type(){return this._type}set type(next){const old=this._type;this._type=INPUT_TYPES.has(next)?next:"text",old!==this._type&&this.requestUpdate("type",old)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get hidesSpinButtons(){return this.withoutSpinButtons}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}get inputId(){return this.id||"input"}constructor(){super(),this._type="text",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.placeholder="",this.clearable=!1,this.withClear=!1,this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.autocomplete="",this.title="",this.autofocus=!1,this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.inputMode="",this.enterKeyHint="",this.passwordToggle=!1,this.passwordVisible=!1,this.withoutSpinButtons=!1,this.match=null,this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.settlingValueFromInput=!1,this.settledDebounce=new DebounceController(0,value=>{this.emit("lr-input-settled",{value})}),this.matchController=new MatchConstraintController(this,()=>this.match,()=>this.updateValidity()),this.hostDescription=new HostDescriptionController(this,()=>this.inputEl??null,()=>{const description=this.renderRoot.querySelector("#input-required");return this.required&&description?[description]:[]}),this.onInput=event=>{this.inputEl&&(this.settlingValueFromInput=!0,this.value=this.inputEl.value,this.settlingValueFromInput=!1,relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}),this.isDebounced()?(this.settledDebounce.delayMs=this.effectiveDebounceMs,this.settledDebounce.push(this.value)):this.settledDebounce.cancel())},this.onChange=event=>{this.inputEl&&(this.settledDebounce.flush(),this.value=this.inputEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.effectiveDisabled||(this.touched=!0),this.settledDebounce.flush(),relayNativeEvent(this,event)},this.onKeyDown=event=>{this.effectiveDisabled||this.readonly||(event.key==="Enter"&&this.settledDebounce.flush(),submitOnEnter(this,event))},this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible},this.onClear=()=>{this.effectiveDisabled||this.readonly||this.value===""||(this.value="",this.inputEl&&(this.inputEl.value=""),dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),this.emit("lr-input",{value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}),this.emit("lr-clear"),this.inputEl?.focus())},this.addEventListener("invalid",()=>{this.touched=!0})}disconnectedCallback(){this.settledDebounce.cancel(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}formResetCallback(){super.formResetCallback(),this.touched=!1}get input(){return this.inputEl??null}click(){this.effectiveDisabled||this.inputEl?.click()}focus(options){this.effectiveDisabled||this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsDate):null}set valueAsDate(next){const native=this.inputEl;native&&(native.valueAsDate=next,this.value=native.value)}get valueAsLocalDate(){const utc=this.valueAsUTCDate;if(!utc)return null;const local=new Date;return this.type!=="time"&&local.setFullYear(utc.getUTCFullYear(),utc.getUTCMonth(),utc.getUTCDate()),local.setHours(utc.getUTCHours(),utc.getUTCMinutes(),utc.getUTCSeconds(),utc.getUTCMilliseconds()),local}set valueAsLocalDate(next){this.valueAsUTCDate=isDateObject(next)?new Date(next.getTime()-next.getTimezoneOffset()*6e4):null}get valueAsUTCDate(){const probe=temporalProbeFor(this.ownerDocument,this.type);return probe?(probe.value=this.value,Number.isNaN(probe.valueAsNumber)?null:new Date(probe.valueAsNumber)):null}set valueAsUTCDate(next){const probe=temporalProbeFor(this.ownerDocument,this.type);if(!probe)return;const ms=isDateObject(next)?next.getTime():NaN;probe.value="",Number.isNaN(ms)||(probe.valueAsNumber=this.type==="time"?(ms%864e5+864e5)%864e5:ms),this.value=probe.value}get valueAsNumber(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsNumber):Number.NaN}set valueAsNumber(next){const native=this.inputEl;native&&(native.valueAsNumber=next,this.value=native.value)}showPicker(){const native=this.inputEl;if(!(!native||this.effectiveDisabled||this.readonly)&&"showPicker"in HTMLInputElement.prototype)try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count!==0){native.type=this.type,native.min=this.min==null?"":String(this.min),native.max=this.max==null?"":String(this.max),native.step=this.step==null?"":String(this.step),native.value=this.value;try{direction==="up"?native.stepUp(count):native.stepDown(count)}catch{return}this.value!==native.value&&(this.value=native.value)}}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.value=input.value)}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){this.required&&this.value===""?this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired")):this.matchMismatches()?this[SET_ANCHORED_VALIDITY]({customError:!0},this.localize("matchMismatch")):this[SET_ANCHORED_VALIDITY]({});return}native.value!==this.value&&(native.value=this.value);const sanitizedAway=this.value!==""&&native.value==="",v=native.validity,own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:!1,tooLong:!1},tooShort=v.tooShort||own.tooShort,tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:!0},this.localize("valueInvalid"));return}if(this.matchMismatches()){this[SET_ANCHORED_VALIDITY]({customError:!0},this.localize("matchMismatch"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}matchMismatches(){if(!this.match)return!1;const targetValue=this.matchController.targetValue;return targetValue!==null&&targetValue!==this.value}updated(changed){super.updated(changed),changed.has("value")&&setCustomState(this.internals,"blank",this.value===""),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("match")||changed.has("readonly"))&&this.updateValidity()}get effectiveDebounceMs(){return finiteDuration(this.debounce??0,0)}isDebounced(){return this.effectiveDebounceMs>0}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" "),isPassword=this.type==="password",showPasswordToggle=isPassword&&this.passwordToggle,nativeType=isPassword&&this.passwordVisible?"text":this.type,canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{setCustomState}from"../../../internal/custom-states.js";import{lengthLimitConverter,lengthViolations}from"../../../internal/length-constraints.js";import{MatchConstraintController}from"../../../internal/match-constraint.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{isDateObject}from"../../../internal/dom-guards.js";import{sizes}from"../../../internal/sizes.styles.js";import{srOnly}from"../../../internal/a11y.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_matchMismatch,LYRA_DEFAULT_showPassword}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings/shared.generated.js";const boundConverter={fromAttribute:value=>value==null?null:/^\s*[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?\s*$/i.test(value)?Number(value):value};let temporalProbe;function temporalProbeFor(doc,type){if(!(type!=="date"&&type!=="time"&&type!=="datetime-local"))return temporalProbe??=doc.createElement("input"),temporalProbe.type=type,temporalProbe}const INPUT_TYPES=new Set(["text","password","email","number","time","search","date","datetime-local","tel","url"]),LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInputShared extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,matchMismatch:LYRA_DEFAULT_matchMismatch,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}get value(){return super.value}set value(next){const normalized=next??"";super.value=normalized,this.settlingValueFromInput||this.settledDebounce.cancelIfChanged(normalized)}get type(){return this._type}set type(next){const old=this._type;this._type=INPUT_TYPES.has(next)?next:"text",old!==this._type&&this.requestUpdate("type",old)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get hidesSpinButtons(){return this.withoutSpinButtons}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}get inputId(){return this.id||"input"}constructor(){super(),this._type="text",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.placeholder="",this.clearable=!1,this.withClear=!1,this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.autocomplete="",this.title="",this.autofocus=!1,this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.inputMode="",this.enterKeyHint="",this.passwordToggle=!1,this.passwordVisible=!1,this.withoutSpinButtons=!1,this.match=null,this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.settlingValueFromInput=!1,this.settledDebounce=new DebounceController(0,value=>{this.emit("lr-input-settled",{value})}),this.matchController=new MatchConstraintController(this,()=>this.match,()=>this.updateValidity()),this.hostDescription=new HostDescriptionController(this,()=>this.inputEl??null,()=>{const description=this.renderRoot.querySelector("#input-required");return this.required&&description?[description]:[]}),this.onInput=event=>{this.inputEl&&(this.settlingValueFromInput=!0,this.value=this.inputEl.value,this.settlingValueFromInput=!1,relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}),this.isDebounced()?(this.settledDebounce.delayMs=this.effectiveDebounceMs,this.settledDebounce.push(this.value)):this.settledDebounce.cancel())},this.onChange=event=>{this.inputEl&&(this.settledDebounce.flush(),this.value=this.inputEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.effectiveDisabled||(this.touched=!0),this.settledDebounce.flush(),relayNativeEvent(this,event)},this.onKeyDown=event=>{this.effectiveDisabled||this.readonly||(event.key==="Enter"&&this.settledDebounce.flush(),submitOnEnter(this,event))},this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible},this.onClear=()=>{this.effectiveDisabled||this.readonly||this.value===""||(this.value="",this.inputEl&&(this.inputEl.value=""),dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),this.emit("lr-input",{value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value}),this.emit("lr-clear"),this.inputEl?.focus())},this.addEventListener("invalid",()=>{this.touched=!0})}disconnectedCallback(){this.settledDebounce.cancel(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}formResetCallback(){super.formResetCallback(),this.touched=!1}get input(){return this.inputEl??null}click(){this.effectiveDisabled||this.inputEl?.click()}focus(options){this.effectiveDisabled||this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsDate):null}set valueAsDate(next){const native=this.inputEl;native&&(native.valueAsDate=next,this.value=native.value)}get valueAsLocalDate(){const utc=this.valueAsUTCDate;if(!utc)return null;const local=new Date;return this.type!=="time"&&local.setFullYear(utc.getUTCFullYear(),utc.getUTCMonth(),utc.getUTCDate()),local.setHours(utc.getUTCHours(),utc.getUTCMinutes(),utc.getUTCSeconds(),utc.getUTCMilliseconds()),local}set valueAsLocalDate(next){this.valueAsUTCDate=isDateObject(next)?new Date(next.getTime()-next.getTimezoneOffset()*6e4):null}get valueAsUTCDate(){const probe=temporalProbeFor(this.ownerDocument,this.type);return probe?(probe.value=this.value,Number.isNaN(probe.valueAsNumber)?null:new Date(probe.valueAsNumber)):null}set valueAsUTCDate(next){const probe=temporalProbeFor(this.ownerDocument,this.type);if(!probe)return;const ms=isDateObject(next)?next.getTime():NaN;probe.value="",Number.isNaN(ms)||(probe.valueAsNumber=this.type==="time"?(ms%864e5+864e5)%864e5:ms),this.value=probe.value}get valueAsNumber(){const native=this.inputEl;return native?(native.value!==this.value&&(native.value=this.value),native.valueAsNumber):Number.NaN}set valueAsNumber(next){const native=this.inputEl;native&&(native.valueAsNumber=next,this.value=native.value)}showPicker(){const native=this.inputEl;if(!(!native||this.effectiveDisabled||this.readonly)&&"showPicker"in HTMLInputElement.prototype)try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count!==0){native.type=this.type,native.min=this.min==null?"":String(this.min),native.max=this.max==null?"":String(this.max),native.step=this.step==null?"":String(this.step),native.value=this.value;try{direction==="up"?native.stepUp(count):native.stepDown(count)}catch{return}this.value!==native.value&&(this.value=native.value)}}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.value=input.value)}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){this.required&&this.value===""?this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired")):this.matchMismatches()?this[SET_ANCHORED_VALIDITY]({customError:!0},this.localize("matchMismatch")):this[SET_ANCHORED_VALIDITY]({});return}native.value!==this.value&&(native.value=this.value);const sanitizedAway=this.value!==""&&native.value==="",v=native.validity,own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:!1,tooLong:!1},tooShort=v.tooShort||own.tooShort,tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:!0},this.localize("valueInvalid"));return}if(this.matchMismatches()){this[SET_ANCHORED_VALIDITY]({customError:!0},this.localize("matchMismatch"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}matchMismatches(){if(!this.match)return!1;const targetValue=this.matchController.targetValue;return targetValue!==null&&targetValue!==this.value}updated(changed){super.updated(changed),changed.has("value")&&setCustomState(this.internals,"blank",this.value===""),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("match")||changed.has("readonly"))&&this.updateValidity()}get effectiveDebounceMs(){return finiteDuration(this.debounce??0,0)}isDebounced(){return this.effectiveDebounceMs>0}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" "),isPassword=this.type==="password",showPasswordToggle=isPassword&&this.passwordToggle,nativeType=isPassword&&this.passwordVisible?"text":this.type,canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
       <div part="form-control">
         <label
           part="form-control-label"

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

@@ -1 +1 @@
-import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraInputShared,createInputValidators}from"./input-shared.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";class LyraInput extends LyraInputShared{constructor(){super(...arguments),this.noSpinButtons=!1}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired}}get hidesSpinButtons(){return this.withoutSpinButtons||this.noSpinButtons}static get validators(){return createInputValidators()}}__decorate([property({type:Boolean,attribute:"no-spin-buttons"})],LyraInput.prototype,"noSpinButtons",void 0);export{LyraInput};
+import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraInputShared,createInputValidators}from"./input-shared.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";class LyraInput extends LyraInputShared{constructor(){super(...arguments),this.noSpinButtons=!1}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired}}get hidesSpinButtons(){return this.withoutSpinButtons||this.noSpinButtons}static get validators(){return createInputValidators()}}__decorate([property({type:Boolean,attribute:"no-spin-buttons"})],LyraInput.prototype,"noSpinButtons",void 0);export{LyraInput};

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/native-time-input.class.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraInputShared,createInputValidators}from"./input-shared.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const timeBoundConverter={fromAttribute:value=>value??void 0};class LyraNativeTimeInput extends LyraInputShared{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return createInputValidators()}get inputWrapperParts(){return`${super.inputWrapperParts} time-input`}constructor(){super(),this.appearance="filled-outlined",this.type="time"}connectedCallback(){super.connectedCallback(),this.type="time"}}__decorate([property({reflect:!0})],LyraNativeTimeInput.prototype,"appearance",void 0),__decorate([property({converter:timeBoundConverter})],LyraNativeTimeInput.prototype,"min",void 0),__decorate([property({converter:timeBoundConverter})],LyraNativeTimeInput.prototype,"max",void 0);export{LyraNativeTimeInput};
+import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraInputShared,createInputValidators}from"./input-shared.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";const timeBoundConverter={fromAttribute:value=>value??void 0};class LyraNativeTimeInput extends LyraInputShared{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return createInputValidators()}get inputWrapperParts(){return`${super.inputWrapperParts} time-input`}constructor(){super(),this.appearance="filled-outlined",this.type="time"}connectedCallback(){super.connectedCallback(),this.type="time"}}__decorate([property({reflect:!0})],LyraNativeTimeInput.prototype,"appearance",void 0),__decorate([property({converter:timeBoundConverter})],LyraNativeTimeInput.prototype,"min",void 0),__decorate([property({converter:timeBoundConverter})],LyraNativeTimeInput.prototype,"max",void 0);export{LyraNativeTimeInput};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{chevronIcon}from"../../../internal/icons.js";import{presenceTrueDefaultBooleanConverter}from"../../../internal/converters.js";import{LyraInput}from"./input.class.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{setCustomState}from"../../../internal/custom-states.js";import{styles as numberInputStyles}from"./number-input.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_numberInputDecrease,LYRA_DEFAULT_numberInputIncrease}from"../../../internal/default-strings.generated.js";class LyraNumberInput extends LyraInput{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,numberInputDecrease:LYRA_DEFAULT_numberInputDecrease,numberInputIncrease:LYRA_DEFAULT_numberInputIncrease}}static get validators(){return super.validators}static{this.styles=[...LyraInput.styles,numberInputStyles]}get inputWrapperParts(){return`${super.inputWrapperParts} number-input`}constructor(){super(),this.withoutSteppers=!1,this.appearance="outlined",this.inputMode="numeric",this.step=1,this.withoutSpinButtons=!0,this.onFocusWithin=()=>{setCustomState(this.internals,"focused",!0)},this.onBlurWithin=()=>{setCustomState(this.internals,"focused",!1)},this.onStepUp=()=>{this.stepFromButton("up")},this.onStepDown=()=>{this.stepFromButton("down")},this.type="number",this.addEventListener("focusin",this.onFocusWithin),this.addEventListener("focusout",this.onBlurWithin)}connectedCallback(){super.connectedCallback(),this.type="number",this.syncMappedStates()}syncMappedStates(){setCustomState(this.internals,"blank",this.value==="")}stepFromButton(direction){if(this.effectiveDisabled||this.readonly)return;const before=this.value;direction==="up"?this.stepUp():this.stepDown(),this.value!==before&&(dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.emit("lr-input",{value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})),this.input?.focus()}renderControls(){if(this.withoutSteppers)return nothing;const inert=this.effectiveDisabled||this.readonly;return html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{chevronIcon}from"../../../internal/icons.js";import{presenceTrueDefaultBooleanConverter}from"../../../internal/converters.js";import{LyraInput}from"./input.class.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{setCustomState}from"../../../internal/custom-states.js";import{styles as numberInputStyles}from"./number-input.styles.js";import{LYRA_DEFAULT_numberInputDecrease,LYRA_DEFAULT_numberInputIncrease}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";class LyraNumberInput extends LyraInput{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,numberInputDecrease:LYRA_DEFAULT_numberInputDecrease,numberInputIncrease:LYRA_DEFAULT_numberInputIncrease}}static get validators(){return super.validators}static{this.styles=[...LyraInput.styles,numberInputStyles]}get inputWrapperParts(){return`${super.inputWrapperParts} number-input`}constructor(){super(),this.withoutSteppers=!1,this.appearance="outlined",this.inputMode="numeric",this.step=1,this.withoutSpinButtons=!0,this.onFocusWithin=()=>{setCustomState(this.internals,"focused",!0)},this.onBlurWithin=()=>{setCustomState(this.internals,"focused",!1)},this.onStepUp=()=>{this.stepFromButton("up")},this.onStepDown=()=>{this.stepFromButton("down")},this.type="number",this.addEventListener("focusin",this.onFocusWithin),this.addEventListener("focusout",this.onBlurWithin)}connectedCallback(){super.connectedCallback(),this.type="number",this.syncMappedStates()}syncMappedStates(){setCustomState(this.internals,"blank",this.value==="")}stepFromButton(direction){if(this.effectiveDisabled||this.readonly)return;const before=this.value;direction==="up"?this.stepUp():this.stepDown(),this.value!==before&&(dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.emit("lr-input",{value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})),this.input?.focus()}renderControls(){if(this.withoutSteppers)return nothing;const inert=this.effectiveDisabled||this.readonly;return html`
       <button
         part="stepper stepper-decrement stepper-down"
         type="button"

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_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/forms.generated.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.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};