@aceshooting/lyra-ui 9.1.1 → 10.0.1

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon}from"../../../internal/icons.js";import{nextId}from"../../../internal/a11y.js";import{isRtl}from"../../../internal/rtl.js";import{attachInternalsSafely}from"../../../internal/form-associated.js";import{setCustomState}from"../../../internal/custom-states.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{isDateObject}from"../../../internal/dom-guards.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{styles}from"./date-picker.styles.js";import{monthMatrix,weekdayLabels,monthTitle,formatISO,parseISO,isSameDay,addMonths,addMonthsClampingDay,clampDate,dateTimeFormat,localDate,utcDate,normalizeCalendarMode,normalizeCalendarMonths,normalizeWeekdayFormat,resolveFirstDayOfWeek}from"./calendar-core.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_nextMonth,LYRA_DEFAULT_previousMonth}from"../../../internal/default-strings.generated.js";const MAX_VIEW_PERIOD_DAYS=366*10,modeConverter={fromAttribute:normalizeCalendarMode,toAttribute:normalizeCalendarMode},monthsConverter={fromAttribute:normalizeCalendarMonths,toAttribute:normalizeCalendarMonths},weekdayFormatConverter={fromAttribute:normalizeWeekdayFormat,toAttribute:normalizeWeekdayFormat};function normalizePageBy(value){return value==="single"?"single":"months"}function normalizeView(value){return value==="months"||value==="years"||value==="decades"?value:"days"}const pageByConverter={fromAttribute:normalizePageBy,toAttribute:normalizePageBy},viewConverter={fromAttribute:normalizeView,toAttribute:normalizeView};class LyraDatePicker extends LyraElement{constructor(){super(...arguments),this.value="",this.mode="single",this.min="",this.max="",this.disabled=!1,this.readonly=!1,this.months=1,this.size="m",this.locale="",this.firstDayOfWeek="auto",this.weekdayFormat="short",this.disablePast=!1,this.disableFuture=!1,this.withOutsideDays=!1,this.withWeekNumbers=!1,this.disabledDates="",this.disabledDaysOfWeek="",this.minRange=0,this.maxRange=0,this.pageBy="months",this.today="",this.focusedDate="",this.view="days",this.previousLabel="Previous month",this.nextLabel="Next month",this.viewDate=localDate(new Date().getFullYear(),new Date().getMonth(),1),this.rangePreview=null,this.focusedViewStart="",this.focusPending=!1,this.viewFocusPending=!1,this.restoringViewFocus=!1,this.internals=attachInternalsSafely(this),this.disabledDatesCache=new Set,this.disabledWeekdaysCache=new Set,this.viewPeriodAvailabilityCache=new Map,this.titleIds=[nextId("date-picker-title"),nextId("date-picker-title")],this.suppressViewSync=!1,this.onViewGridKey=event=>{const view=this.effectiveView;if(view==="days")return;const periods=this.viewPeriods(view),source=event.composedPath().find(node=>node instanceof HTMLElement&&node.hasAttribute("data-view-start")),currentSource=parseISO(source?.getAttribute("data-view-start")??"")??this.resolveViewFocus(periods);if(!currentSource)return;const current=this.viewPeriodStart(currentSource,view),span=this.viewPeriodMonths(view),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let next=null;switch(event.key){case backwardKey:next=this.firstEnabledViewPeriod(addMonths(current,-span),-1);break;case forwardKey:next=this.firstEnabledViewPeriod(addMonths(current,span),1);break;case"ArrowUp":next=this.firstEnabledViewPeriod(addMonths(current,-4*span),-1);break;case"ArrowDown":next=this.firstEnabledViewPeriod(addMonths(current,4*span),1);break;case"Home":next=periods.find(period=>!this.viewPeriodDisabled(period.start,period.end))?.start??null;break;case"End":next=[...periods].reverse().find(period=>!this.viewPeriodDisabled(period.start,period.end))?.start??null;break;case"Enter":case" ":event.preventDefault(),this.pickViewItem(current);return;default:return}event.preventDefault(),next&&(this.viewDate=localDate(next.getFullYear(),next.getMonth(),1),this.focusViewPeriod(next,view))},this.onGridKey=e=>{const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday(),current=this.focusedDateValue??this.selection.from??this.firstEnabledDate(min,max,today)??localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1),step=(base,days)=>localDate(base.getFullYear(),base.getMonth(),base.getDate()+days),firstEnabledFrom=(base,dayStep)=>{let d=base;for(let i=0;i<366;i++){if(!this.isDisabled(d,min,max,today))return d;d=step(d,dayStep)}return null},rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let next=null;switch(e.key){case backwardKey:next=firstEnabledFrom(step(current,-1),-1);break;case forwardKey:next=firstEnabledFrom(step(current,1),1);break;case"ArrowUp":next=firstEnabledFrom(step(current,-7),-1);break;case"ArrowDown":next=firstEnabledFrom(step(current,7),1);break;case"PageUp":next=firstEnabledFrom(addMonthsClampingDay(current,-1),1);break;case"PageDown":next=firstEnabledFrom(addMonthsClampingDay(current,1),1);break;case"Home":next=firstEnabledFrom(localDate(current.getFullYear(),current.getMonth(),1),1);break;case"End":next=firstEnabledFrom(localDate(current.getFullYear(),current.getMonth()+1,0),-1);break;case"Enter":case" ":e.preventDefault(),this.selectDate(current);return;default:return}e.preventDefault(),next&&(this.setFocusedDate(next),this.viewDate=this.viewDateForFocus(next),this.focusPending=!0)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,nextMonth:LYRA_DEFAULT_nextMonth,previousMonth:LYRA_DEFAULT_previousMonth}}static{this.styles=[LyraElement.styles,styles]}get effectiveMode(){return normalizeCalendarMode(this.mode)}get visibleMonths(){return normalizeCalendarMonths(this.months)}get effectiveWeekdayFormat(){return normalizeWeekdayFormat(this.weekdayFormat)}get effectiveView(){return normalizeView(this.view)}get selection(){const parts=this.value.split("/");return{from:parseISO(parts[0]??""),to:parseISO(parts[1]??"")}}get valueAsDate(){return this.effectiveMode==="single"?this.selection.from:null}set valueAsDate(next){if(!isDateObject(next)||!Number.isFinite(next.getTime())){this.value="";return}this.value=formatISO(next)}get valueAsRange(){return this.effectiveMode==="range"?this.selection:{from:null,to:null}}set valueAsRange(next){let from=isDateObject(next?.from)&&Number.isFinite(next.from.getTime())?next.from:null,to=isDateObject(next?.to)&&Number.isFinite(next.to.getTime())?next.to:null;from&&to&&to<from&&([from,to]=[to,from]),this.value=from?to?`${formatISO(from)}/${formatISO(to)}`:formatISO(from):""}get focusedDateValue(){return parseISO(this.focusedDate)}setFocusedDate(date){this.focusedDate=date?formatISO(date):""}resolvedToday(){const today=parseISO(this.today)??new Date;return localDate(today.getFullYear(),today.getMonth(),today.getDate())}syncCustomStates(){setCustomState(this.internals,"disabled",this.disabled),setCustomState(this.internals,"range",this.effectiveMode==="range"),setCustomState(this.internals,"readonly",this.readonly)}willUpdate(changed){super.willUpdate(changed),this.viewPeriodAvailabilityCache.clear();const activeElement=this.renderRoot?.activeElement??null,activeViewStart=activeElement?.matches('[part~="view-item"]')?parseISO(activeElement.getAttribute("data-view-start")??""):null;if(changed.has("value")){const external=!this.suppressViewSync;if(this.suppressViewSync=!1,external&&this.value){const from=this.selection.from;from&&(this.viewDate=localDate(from.getFullYear(),from.getMonth(),1))}}if(changed.has("focusedDate")){const focused=this.focusedDateValue;focused&&!this.isVisibleDate(focused)&&(this.viewDate=this.viewDateForFocus(focused))}const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday();if(this.normalizeFocusedDate(min,max,today),this.clampViewDateToEnabledPeriod(),this.syncCustomStates(),activeViewStart&&this.effectiveView!=="days"){const next=this.resolveViewFocus(this.viewPeriods());next&&!isSameDay(activeViewStart,next)&&(this.setFocusedViewStart(next),this.viewFocusPending=!0)}}get fdow(){return resolveFirstDayOfWeek(this.firstDayOfWeek,this.effectiveLocale)}get disabledDateKeys(){if(this.disabledDatesCacheSource===this.disabledDates)return this.disabledDatesCache;this.disabledDatesCacheSource=this.disabledDates;const values=Array.isArray(this.disabledDates)?this.disabledDates:String(this.disabledDates||"").split(/[\s,]+/);return this.disabledDatesCache=new Set(values.map(value=>isDateObject(value)?value:parseISO(String(value))).filter(value=>isDateObject(value)&&Number.isFinite(value.getTime())).map(value=>formatISO(value))),this.disabledDatesCache}get disabledWeekdays(){if(this.disabledWeekdaysCacheSource===this.disabledDaysOfWeek)return this.disabledWeekdaysCache;this.disabledWeekdaysCacheSource=this.disabledDaysOfWeek;const names={sun:0,sunday:0,mon:1,monday:1,tue:2,tues:2,tuesday:2,wed:3,wednesday:3,thu:4,thur:4,thurs:4,thursday:4,fri:5,friday:5,sat:6,saturday:6},parsed=String(this.disabledDaysOfWeek||"").toLowerCase().split(/[\s,]+/).filter(Boolean).map(value=>names[value]??(/^[0-6]$/.test(value)?Number(value):-1)).filter(value=>value>=0);return this.disabledWeekdaysCache=new Set(parsed),this.disabledWeekdaysCache}rangeLength(from,to){const fromUtc=utcDate(from.getFullYear(),from.getMonth(),from.getDate()).getTime(),toUtc=utcDate(to.getFullYear(),to.getMonth(),to.getDate()).getTime();return Math.round(Math.abs(toUtc-fromUtc)/864e5)+1}isDisabled(d,min,max,today){if(this.disabled||this.readonly||min&&d<min||max&&d>max||this.disablePast&&d<today||this.disableFuture&&d>today||this.disabledDateKeys.has(formatISO(d))||this.disabledWeekdays.has(d.getDay()))return!0;try{if(this.isDateDisabled?.(new Date(d.getTime())))return!0}catch{}if(this.effectiveMode==="range"){const{from,to}=this.selection;if(from&&!to&&!isSameDay(from,d)){const length=this.rangeLength(from,d),minimum=finiteCount(this.minRange,0),maximum=finiteCount(this.maxRange,0);if(minimum>0&&length<minimum||maximum>0&&length>maximum)return!0}}return!1}nearestEnabledDate(anchor,min,max,today){if(!this.isDisabled(anchor,min,max,today))return new Date(anchor.getTime());for(let distance=1;distance<=732;distance++){const before=localDate(anchor.getFullYear(),anchor.getMonth(),anchor.getDate()-distance);if(!this.isDisabled(before,min,max,today))return before;const after=localDate(anchor.getFullYear(),anchor.getMonth(),anchor.getDate()+distance);if(!this.isDisabled(after,min,max,today))return after}return null}isVisibleDate(date){const start=localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1),end=addMonths(start,this.visibleMonths);return date>=start&&date<end}normalizeFocusedDate(min,max,today){const anchor=this.focusedDateValue??this.selection.from;if(!anchor)return;const disabled=this.isDisabled(anchor,min,max,today);if(!disabled&&this.isVisibleDate(anchor))return;const next=disabled?this.nearestEnabledDate(anchor,min,max,today):this.firstEnabledDate(min,max,today);if(!next){this.setFocusedDate(null),this.focusPending=!1;return}this.setFocusedDate(next),this.viewDate=this.viewDateForFocus(next),disabled&&(this.focusPending=!0)}firstEnabledDate(min,max,today){let d=localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1);const lastVisibleMonth=addMonths(d,this.visibleMonths-1),boundEnd=localDate(lastVisibleMonth.getFullYear(),lastVisibleMonth.getMonth()+1,0);for(let i=0;i<732&&d<=boundEnd;i++){if(!this.isDisabled(d,min,max,today))return d;d=localDate(d.getFullYear(),d.getMonth(),d.getDate()+1)}return null}commit(from,to,fire){const next=this.effectiveMode==="range"?from&&to?`${formatISO(from)}/${formatISO(to)}`:from?formatISO(from):"":from?formatISO(from):"";next!==this.value&&(this.suppressViewSync=!0),this.value=next,dispatchNativeInputEvent(this),fire&&dispatchNativeEvent(this,"change")}selectDate(date){const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday();if(!this.isDisabled(date,min,max,today))if(this.setFocusedDate(date),this.effectiveMode==="range"){const{from,to}=this.selection;if(!from||from&&to)this.commit(date,null,!1);else{let a=from,b=date;b<a&&([a,b]=[b,a]),this.commit(a,b,!0)}}else this.commit(date,null,!0)}clear(){this.commit(null,null,!0)}goToToday(){this.goToDate(this.resolvedToday())}goToDate(date){const d=typeof date=="string"?parseISO(date):date;if(!d||!Number.isFinite(d.getTime()))return;const midnight=localDate(d.getFullYear(),d.getMonth(),d.getDate()),clamped=clampDate(midnight,parseISO(this.min),parseISO(this.max));this.viewDate=localDate(clamped.getFullYear(),clamped.getMonth(),1),this.setFocusedDate(clamped),this.focusPending=!0}nav(delta){const page=this.pageBy==="single"?1:this.visibleMonths;this.viewDate=addMonths(this.viewDate,delta*page)}focus(options){this.renderRoot?.querySelector('[part~="day"][tabindex="0"], [part~="view-item"][tabindex="0"]:not(:disabled)')?.focus(options)}viewPeriodMonths(view=this.effectiveView){return view==="years"?12:view==="decades"?120:1}viewPeriodStart(date,view=this.effectiveView){return view==="years"?localDate(date.getFullYear(),0,1):view==="decades"?localDate(Math.floor(date.getFullYear()/10)*10,0,1):localDate(date.getFullYear(),date.getMonth(),1)}viewPageStart(view=this.effectiveView){const year=this.viewDate.getFullYear();return view==="months"?localDate(year,0,1):view==="years"?localDate(Math.floor(year/12)*12,0,1):localDate(Math.floor(year/120)*120,0,1)}viewPeriods(view=this.effectiveView){const pageStart=this.viewPageStart(view),span=this.viewPeriodMonths(view);return Array.from({length:12},(_,index)=>{const start=addMonths(pageStart,index*span);return{start,end:localDate(start.getFullYear(),start.getMonth()+span,0)}})}clampViewDateToEnabledPeriod(view=this.effectiveView){if(view==="days")return null;const periods=this.viewPeriods(view);if(this.disabled||this.readonly||periods.some(period=>!this.viewPeriodDisabled(period.start,period.end)))return null;const first=periods[0],last=periods[periods.length-1],span=this.viewPeriodMonths(view),min=parseISO(this.min),max=parseISO(this.max),forward=min&&last.end<min,backward=max&&first.start>max,next=forward?this.firstEnabledViewPeriod(addMonths(last.start,span),1):backward?this.firstEnabledViewPeriod(addMonths(first.start,-span),-1):this.firstEnabledViewPeriod(addMonths(last.start,span),1)??this.firstEnabledViewPeriod(addMonths(first.start,-span),-1);return next?(this.viewDate=localDate(next.getFullYear(),next.getMonth(),1),next):null}resolveViewFocus(periods){const inView=candidate=>{if(!candidate)return null;const start=this.viewPeriodStart(candidate),period=periods.find(item=>isSameDay(item.start,start));return period&&!this.viewPeriodDisabled(period.start,period.end)?period.start:null},fallback=periods.find(period=>!this.viewPeriodDisabled(period.start,period.end));return inView(parseISO(this.focusedViewStart))??inView(this.selection.from)??inView(this.viewDate)??fallback?.start??null}setFocusedViewStart(date,view=this.effectiveView,requestUpdate=!1){const next=formatISO(this.viewPeriodStart(date,view));this.focusedViewStart!==next&&(this.focusedViewStart=next,requestUpdate&&this.requestUpdate())}onViewItemFocus(start){this.restoringViewFocus||this.setFocusedViewStart(start,this.effectiveView,!0)}firstEnabledViewPeriod(start,direction){const span=this.viewPeriodMonths();let candidate=this.viewPeriodStart(start);for(let index=0;index<366;index++){const end=localDate(candidate.getFullYear(),candidate.getMonth()+span,0);if(!this.viewPeriodDisabled(candidate,end))return candidate;candidate=addMonths(candidate,direction*span)}return null}focusViewPeriod(date,view=this.effectiveView){this.setFocusedViewStart(date,view),this.viewFocusPending=!0}setView(next,date=this.viewDate){next!==this.view&&(this.view=next,this.emit("lr-view-change",{view:next,date:new Date(date.getTime())}))}advanceView(){const next={days:"months",months:"years",years:"decades",decades:"decades"},current=this.effectiveView,nextView=next[current];if(nextView===current)return;const focused=current==="days"?this.focusedDateValue??this.selection.from??this.viewDate:this.resolveViewFocus(this.viewPeriods(current))??this.viewDate;this.focusViewPeriod(focused,nextView),this.setView(nextView)}onDayFocus(date){this.setFocusedDate(date),this.emit("lr-focus-day",{date:new Date(date.getTime())})}viewDateForFocus(next){const firstMonth=localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1),nextMonth=localDate(next.getFullYear(),next.getMonth(),1),lastMonth=addMonths(firstMonth,this.visibleMonths-1);return nextMonth<firstMonth?nextMonth:nextMonth>lastMonth?addMonths(nextMonth,-(this.visibleMonths-1)):firstMonth}updated(changed){super.updated(changed);const focusedDate=this.focusedDateValue;if(this.focusPending&&focusedDate){this.focusPending=!1;const iso=formatISO(focusedDate);this.renderRoot.querySelector(`[data-date="${iso}"][tabindex="0"]`)?.focus()}if(this.viewFocusPending){this.viewFocusPending=!1;const item=this.renderRoot.querySelector('[part~="view-item"][tabindex="0"]:not(:disabled)');if(item){this.restoringViewFocus=!0;try{item.focus()}finally{this.restoringViewFocus=!1}}}}renderDay(date,shownMonth,selection,min,max,today,rowHasVisibleDay,fallbackFocusDate,dayLabelFmt){const outside=date.getMonth()!==shownMonth;if(outside&&!this.withOutsideDays)return html`<span
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon}from"../../../internal/icons.js";import{nextId}from"../../../internal/a11y.js";import{isRtl}from"../../../internal/rtl.js";import{attachInternalsSafely}from"../../../internal/form-associated.js";import{setCustomState}from"../../../internal/custom-states.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{isDateObject}from"../../../internal/dom-guards.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{styles}from"./date-picker.styles.js";import{monthMatrix,weekdayLabels,monthTitle,formatISO,parseISO,isSameDay,addMonths,addMonthsClampingDay,clampDate,dateTimeFormat,localDate,utcDate,normalizeCalendarMode,normalizeCalendarMonths,normalizeWeekdayFormat,resolveFirstDayOfWeek}from"./calendar-core.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_nextMonth,LYRA_DEFAULT_previousMonth}from"../../../internal/default-strings.generated.js";const MAX_VIEW_PERIOD_DAYS=366*10,modeConverter={fromAttribute:normalizeCalendarMode,toAttribute:normalizeCalendarMode},monthsConverter={fromAttribute:normalizeCalendarMonths,toAttribute:normalizeCalendarMonths},weekdayFormatConverter={fromAttribute:normalizeWeekdayFormat,toAttribute:normalizeWeekdayFormat};function normalizePageBy(value){return value==="single"?"single":"months"}function normalizeView(value){return value==="months"||value==="years"||value==="decades"?value:"days"}const pageByConverter={fromAttribute:normalizePageBy,toAttribute:normalizePageBy},viewConverter={fromAttribute:normalizeView,toAttribute:normalizeView};class LyraDatePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,nextMonth:LYRA_DEFAULT_nextMonth,previousMonth:LYRA_DEFAULT_previousMonth}}static{this.styles=[LyraElement.styles,styles]}constructor(){super(),this.value="",this.mode="single",this.min="",this.max="",this.disabled=!1,this.readonly=!1,this.months=1,this.size="m",this.locale="",this.firstDayOfWeek="auto",this.weekdayFormat="short",this.disablePast=!1,this.disableFuture=!1,this.withOutsideDays=!1,this.withWeekNumbers=!1,this.disabledDates="",this.disabledDaysOfWeek="",this.minRange=0,this.maxRange=0,this.pageBy="months",this.today="",this.focusedDate="",this.view="days",this.previousLabel="Previous month",this.nextLabel="Next month",this.viewDate=localDate(new Date().getFullYear(),new Date().getMonth(),1),this.rangePreview=null,this.focusedViewStart="",this.focusPending=!1,this.viewFocusPending=!1,this.restoringViewFocus=!1,this.internals=attachInternalsSafely(this),this.disabledDatesCache=new Set,this.disabledWeekdaysCache=new Set,this.viewPeriodAvailabilityCache=new Map,this.titleIds=[nextId("date-picker-title"),nextId("date-picker-title")],this.suppressViewSync=!1,this.onViewGridKey=event=>{const view=this.effectiveView;if(view==="days")return;const periods=this.viewPeriods(view),source=event.composedPath().find(node=>node instanceof HTMLElement&&node.hasAttribute("data-view-start")),currentSource=parseISO(source?.getAttribute("data-view-start")??"")??this.resolveViewFocus(periods);if(!currentSource)return;const current=this.viewPeriodStart(currentSource,view),span=this.viewPeriodMonths(view),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let next=null;switch(event.key){case backwardKey:next=this.firstEnabledViewPeriod(addMonths(current,-span),-1);break;case forwardKey:next=this.firstEnabledViewPeriod(addMonths(current,span),1);break;case"ArrowUp":next=this.firstEnabledViewPeriod(addMonths(current,-4*span),-1);break;case"ArrowDown":next=this.firstEnabledViewPeriod(addMonths(current,4*span),1);break;case"Home":next=periods.find(period=>!this.viewPeriodDisabled(period.start,period.end))?.start??null;break;case"End":next=[...periods].reverse().find(period=>!this.viewPeriodDisabled(period.start,period.end))?.start??null;break;case"Enter":case" ":event.preventDefault(),this.pickViewItem(current);return;default:return}event.preventDefault(),next&&(this.viewDate=localDate(next.getFullYear(),next.getMonth(),1),this.focusViewPeriod(next,view))},this.onGridKey=e=>{const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday(),current=this.focusedDateValue??this.selection.from??this.firstEnabledDate(min,max,today)??localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1),step=(base,days)=>localDate(base.getFullYear(),base.getMonth(),base.getDate()+days),firstEnabledFrom=(base,dayStep)=>{let d=base;for(let i=0;i<366;i++){if(!this.isDisabled(d,min,max,today))return d;d=step(d,dayStep)}return null},rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let next=null;switch(e.key){case backwardKey:next=firstEnabledFrom(step(current,-1),-1);break;case forwardKey:next=firstEnabledFrom(step(current,1),1);break;case"ArrowUp":next=firstEnabledFrom(step(current,-7),-1);break;case"ArrowDown":next=firstEnabledFrom(step(current,7),1);break;case"PageUp":next=firstEnabledFrom(addMonthsClampingDay(current,-1),1);break;case"PageDown":next=firstEnabledFrom(addMonthsClampingDay(current,1),1);break;case"Home":next=firstEnabledFrom(localDate(current.getFullYear(),current.getMonth(),1),1);break;case"End":next=firstEnabledFrom(localDate(current.getFullYear(),current.getMonth()+1,0),-1);break;case"Enter":case" ":e.preventDefault(),this.selectDate(current);return;default:return}e.preventDefault(),next&&(this.setFocusedDate(next),this.viewDate=this.viewDateForFocus(next),this.focusPending=!0)},observeScrollOverflow(this,()=>this.renderRoot.querySelectorAll(".calendar-scroll")[0]),observeScrollOverflow(this,()=>this.renderRoot.querySelectorAll(".calendar-scroll")[1])}get effectiveMode(){return normalizeCalendarMode(this.mode)}get visibleMonths(){return normalizeCalendarMonths(this.months)}get effectiveWeekdayFormat(){return normalizeWeekdayFormat(this.weekdayFormat)}get effectiveView(){return normalizeView(this.view)}get selection(){const parts=this.value.split("/");return{from:parseISO(parts[0]??""),to:parseISO(parts[1]??"")}}get valueAsDate(){return this.effectiveMode==="single"?this.selection.from:null}set valueAsDate(next){if(!isDateObject(next)||!Number.isFinite(next.getTime())){this.value="";return}this.value=formatISO(next)}get valueAsRange(){return this.effectiveMode==="range"?this.selection:{from:null,to:null}}set valueAsRange(next){let from=isDateObject(next?.from)&&Number.isFinite(next.from.getTime())?next.from:null,to=isDateObject(next?.to)&&Number.isFinite(next.to.getTime())?next.to:null;from&&to&&to<from&&([from,to]=[to,from]),this.value=from?to?`${formatISO(from)}/${formatISO(to)}`:formatISO(from):""}get focusedDateValue(){return parseISO(this.focusedDate)}setFocusedDate(date){this.focusedDate=date?formatISO(date):""}resolvedToday(){const today=parseISO(this.today)??new Date;return localDate(today.getFullYear(),today.getMonth(),today.getDate())}syncCustomStates(){setCustomState(this.internals,"disabled",this.disabled),setCustomState(this.internals,"range",this.effectiveMode==="range"),setCustomState(this.internals,"readonly",this.readonly)}willUpdate(changed){super.willUpdate(changed),this.viewPeriodAvailabilityCache.clear();const activeElement=this.renderRoot?.activeElement??null,activeViewStart=activeElement?.matches('[part~="view-item"]')?parseISO(activeElement.getAttribute("data-view-start")??""):null;if(changed.has("value")){const external=!this.suppressViewSync;if(this.suppressViewSync=!1,external&&this.value){const from=this.selection.from;from&&(this.viewDate=localDate(from.getFullYear(),from.getMonth(),1))}}if(changed.has("focusedDate")){const focused=this.focusedDateValue;focused&&!this.isVisibleDate(focused)&&(this.viewDate=this.viewDateForFocus(focused))}const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday();if(this.normalizeFocusedDate(min,max,today),this.clampViewDateToEnabledPeriod(),this.syncCustomStates(),activeViewStart&&this.effectiveView!=="days"){const next=this.resolveViewFocus(this.viewPeriods());next&&!isSameDay(activeViewStart,next)&&(this.setFocusedViewStart(next),this.viewFocusPending=!0)}}get fdow(){return resolveFirstDayOfWeek(this.firstDayOfWeek,this.effectiveLocale)}get disabledDateKeys(){if(this.disabledDatesCacheSource===this.disabledDates)return this.disabledDatesCache;this.disabledDatesCacheSource=this.disabledDates;const values=Array.isArray(this.disabledDates)?this.disabledDates:String(this.disabledDates||"").split(/[\s,]+/);return this.disabledDatesCache=new Set(values.map(value=>isDateObject(value)?value:parseISO(String(value))).filter(value=>isDateObject(value)&&Number.isFinite(value.getTime())).map(value=>formatISO(value))),this.disabledDatesCache}get disabledWeekdays(){if(this.disabledWeekdaysCacheSource===this.disabledDaysOfWeek)return this.disabledWeekdaysCache;this.disabledWeekdaysCacheSource=this.disabledDaysOfWeek;const names={sun:0,sunday:0,mon:1,monday:1,tue:2,tues:2,tuesday:2,wed:3,wednesday:3,thu:4,thur:4,thurs:4,thursday:4,fri:5,friday:5,sat:6,saturday:6},parsed=String(this.disabledDaysOfWeek||"").toLowerCase().split(/[\s,]+/).filter(Boolean).map(value=>names[value]??(/^[0-6]$/.test(value)?Number(value):-1)).filter(value=>value>=0);return this.disabledWeekdaysCache=new Set(parsed),this.disabledWeekdaysCache}rangeLength(from,to){const fromUtc=utcDate(from.getFullYear(),from.getMonth(),from.getDate()).getTime(),toUtc=utcDate(to.getFullYear(),to.getMonth(),to.getDate()).getTime();return Math.round(Math.abs(toUtc-fromUtc)/864e5)+1}isDisabled(d,min,max,today){if(this.disabled||this.readonly||min&&d<min||max&&d>max||this.disablePast&&d<today||this.disableFuture&&d>today||this.disabledDateKeys.has(formatISO(d))||this.disabledWeekdays.has(d.getDay()))return!0;try{if(this.isDateDisabled?.(new Date(d.getTime())))return!0}catch{}if(this.effectiveMode==="range"){const{from,to}=this.selection;if(from&&!to&&!isSameDay(from,d)){const length=this.rangeLength(from,d),minimum=finiteCount(this.minRange,0),maximum=finiteCount(this.maxRange,0);if(minimum>0&&length<minimum||maximum>0&&length>maximum)return!0}}return!1}nearestEnabledDate(anchor,min,max,today){if(!this.isDisabled(anchor,min,max,today))return new Date(anchor.getTime());for(let distance=1;distance<=732;distance++){const before=localDate(anchor.getFullYear(),anchor.getMonth(),anchor.getDate()-distance);if(!this.isDisabled(before,min,max,today))return before;const after=localDate(anchor.getFullYear(),anchor.getMonth(),anchor.getDate()+distance);if(!this.isDisabled(after,min,max,today))return after}return null}isVisibleDate(date){const start=localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1),end=addMonths(start,this.visibleMonths);return date>=start&&date<end}normalizeFocusedDate(min,max,today){const anchor=this.focusedDateValue??this.selection.from;if(!anchor)return;const disabled=this.isDisabled(anchor,min,max,today);if(!disabled&&this.isVisibleDate(anchor))return;const next=disabled?this.nearestEnabledDate(anchor,min,max,today):this.firstEnabledDate(min,max,today);if(!next){this.setFocusedDate(null),this.focusPending=!1;return}this.setFocusedDate(next),this.viewDate=this.viewDateForFocus(next),disabled&&(this.focusPending=!0)}firstEnabledDate(min,max,today){let d=localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1);const lastVisibleMonth=addMonths(d,this.visibleMonths-1),boundEnd=localDate(lastVisibleMonth.getFullYear(),lastVisibleMonth.getMonth()+1,0);for(let i=0;i<732&&d<=boundEnd;i++){if(!this.isDisabled(d,min,max,today))return d;d=localDate(d.getFullYear(),d.getMonth(),d.getDate()+1)}return null}commit(from,to,fire){const next=this.effectiveMode==="range"?from&&to?`${formatISO(from)}/${formatISO(to)}`:from?formatISO(from):"":from?formatISO(from):"";next!==this.value&&(this.suppressViewSync=!0),this.value=next,dispatchNativeInputEvent(this),fire&&dispatchNativeEvent(this,"change")}selectDate(date){const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday();if(!this.isDisabled(date,min,max,today))if(this.setFocusedDate(date),this.effectiveMode==="range"){const{from,to}=this.selection;if(!from||from&&to)this.commit(date,null,!1);else{let a=from,b=date;b<a&&([a,b]=[b,a]),this.commit(a,b,!0)}}else this.commit(date,null,!0)}clear(){this.commit(null,null,!0)}goToToday(){this.goToDate(this.resolvedToday())}goToDate(date){const d=typeof date=="string"?parseISO(date):date;if(!d||!Number.isFinite(d.getTime()))return;const midnight=localDate(d.getFullYear(),d.getMonth(),d.getDate()),clamped=clampDate(midnight,parseISO(this.min),parseISO(this.max));this.viewDate=localDate(clamped.getFullYear(),clamped.getMonth(),1),this.setFocusedDate(clamped),this.focusPending=!0}nav(delta){const page=this.pageBy==="single"?1:this.visibleMonths;this.viewDate=addMonths(this.viewDate,delta*page)}focus(options){this.renderRoot?.querySelector('[part~="day"][tabindex="0"], [part~="view-item"][tabindex="0"]:not(:disabled)')?.focus(options)}viewPeriodMonths(view=this.effectiveView){return view==="years"?12:view==="decades"?120:1}viewPeriodStart(date,view=this.effectiveView){return view==="years"?localDate(date.getFullYear(),0,1):view==="decades"?localDate(Math.floor(date.getFullYear()/10)*10,0,1):localDate(date.getFullYear(),date.getMonth(),1)}viewPageStart(view=this.effectiveView){const year=this.viewDate.getFullYear();return view==="months"?localDate(year,0,1):view==="years"?localDate(Math.floor(year/12)*12,0,1):localDate(Math.floor(year/120)*120,0,1)}viewPeriods(view=this.effectiveView){const pageStart=this.viewPageStart(view),span=this.viewPeriodMonths(view);return Array.from({length:12},(_,index)=>{const start=addMonths(pageStart,index*span);return{start,end:localDate(start.getFullYear(),start.getMonth()+span,0)}})}clampViewDateToEnabledPeriod(view=this.effectiveView){if(view==="days")return null;const periods=this.viewPeriods(view);if(this.disabled||this.readonly||periods.some(period=>!this.viewPeriodDisabled(period.start,period.end)))return null;const first=periods[0],last=periods[periods.length-1],span=this.viewPeriodMonths(view),min=parseISO(this.min),max=parseISO(this.max),forward=min&&last.end<min,backward=max&&first.start>max,next=forward?this.firstEnabledViewPeriod(addMonths(last.start,span),1):backward?this.firstEnabledViewPeriod(addMonths(first.start,-span),-1):this.firstEnabledViewPeriod(addMonths(last.start,span),1)??this.firstEnabledViewPeriod(addMonths(first.start,-span),-1);return next?(this.viewDate=localDate(next.getFullYear(),next.getMonth(),1),next):null}resolveViewFocus(periods){const inView=candidate=>{if(!candidate)return null;const start=this.viewPeriodStart(candidate),period=periods.find(item=>isSameDay(item.start,start));return period&&!this.viewPeriodDisabled(period.start,period.end)?period.start:null},fallback=periods.find(period=>!this.viewPeriodDisabled(period.start,period.end));return inView(parseISO(this.focusedViewStart))??inView(this.selection.from)??inView(this.viewDate)??fallback?.start??null}setFocusedViewStart(date,view=this.effectiveView,requestUpdate=!1){const next=formatISO(this.viewPeriodStart(date,view));this.focusedViewStart!==next&&(this.focusedViewStart=next,requestUpdate&&this.requestUpdate())}onViewItemFocus(start){this.restoringViewFocus||this.setFocusedViewStart(start,this.effectiveView,!0)}firstEnabledViewPeriod(start,direction){const span=this.viewPeriodMonths();let candidate=this.viewPeriodStart(start);for(let index=0;index<366;index++){const end=localDate(candidate.getFullYear(),candidate.getMonth()+span,0);if(!this.viewPeriodDisabled(candidate,end))return candidate;candidate=addMonths(candidate,direction*span)}return null}focusViewPeriod(date,view=this.effectiveView){this.setFocusedViewStart(date,view),this.viewFocusPending=!0}setView(next,date=this.viewDate){next!==this.view&&(this.view=next,this.emit("lr-view-change",{view:next,date:new Date(date.getTime())}))}advanceView(){const next={days:"months",months:"years",years:"decades",decades:"decades"},current=this.effectiveView,nextView=next[current];if(nextView===current)return;const focused=current==="days"?this.focusedDateValue??this.selection.from??this.viewDate:this.resolveViewFocus(this.viewPeriods(current))??this.viewDate;this.focusViewPeriod(focused,nextView),this.setView(nextView)}onDayFocus(date){this.setFocusedDate(date),this.emit("lr-focus-day",{date:new Date(date.getTime())})}viewDateForFocus(next){const firstMonth=localDate(this.viewDate.getFullYear(),this.viewDate.getMonth(),1),nextMonth=localDate(next.getFullYear(),next.getMonth(),1),lastMonth=addMonths(firstMonth,this.visibleMonths-1);return nextMonth<firstMonth?nextMonth:nextMonth>lastMonth?addMonths(nextMonth,-(this.visibleMonths-1)):firstMonth}updated(changed){super.updated(changed);const focusedDate=this.focusedDateValue;if(this.focusPending&&focusedDate){this.focusPending=!1;const iso=formatISO(focusedDate);this.renderRoot.querySelector(`[data-date="${iso}"][tabindex="0"]`)?.focus()}if(this.viewFocusPending){this.viewFocusPending=!1;const item=this.renderRoot.querySelector('[part~="view-item"][tabindex="0"]:not(:disabled)');if(item){this.restoringViewFocus=!0;try{item.focus()}finally{this.restoringViewFocus=!1}}}}renderDay(date,shownMonth,selection,min,max,today,rowHasVisibleDay,fallbackFocusDate,dayLabelFmt){const outside=date.getMonth()!==shownMonth;if(outside&&!this.withOutsideDays)return html`<span
         part="day-placeholder"
         role="gridcell"
         aria-hidden=${rowHasVisibleDay?"true":nothing}
@@ -55,24 +55,26 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           </div>
         </slot>
       </div>
-      <div part="weekdays">
-        ${labels.map(l=>html`<span part="weekday">${l}</span>`)}
-      </div>
-      <div class="calendar-body">
-        ${this.withWeekNumbers?html`<div part="weeknumbers" aria-hidden="true">
-              ${matrix.map(week=>html`<span part="weeknumber"
-                    >${getNumberFormat(this.effectiveLocale).format(weekNumber(week[0]))}</span
-                  >`)}
-            </div>`:nothing}
-        <div
-          part="grid"
-          role="grid"
-          aria-labelledby=${titleId}
-          @keydown=${this.onGridKey}
-        >
-          ${matrix.map(week=>{const rowHasVisibleDay=week.some(d=>d.getMonth()===month);return html`<div part="week" role="row">
-              ${week.map(d=>this.renderDay(d,month,selection,min,max,today,rowHasVisibleDay,fallbackFocusDate,dayLabelFmt))}
-            </div>`})}
+      <div class="calendar-scroll">
+        <div part="weekdays">
+          ${labels.map(l=>html`<span part="weekday">${l}</span>`)}
+        </div>
+        <div class="calendar-body">
+          ${this.withWeekNumbers?html`<div part="weeknumbers" aria-hidden="true">
+                ${matrix.map(week=>html`<span part="weeknumber"
+                      >${getNumberFormat(this.effectiveLocale).format(weekNumber(week[0]))}</span
+                    >`)}
+              </div>`:nothing}
+          <div
+            part="grid"
+            role="grid"
+            aria-labelledby=${titleId}
+            @keydown=${this.onGridKey}
+          >
+            ${matrix.map(week=>{const rowHasVisibleDay=week.some(d=>d.getMonth()===month);return html`<div part="week" role="row">
+                ${week.map(d=>this.renderDay(d,month,selection,min,max,today,rowHasVisibleDay,fallbackFocusDate,dayLabelFmt))}
+              </div>`})}
+          </div>
         </div>
       </div>
     </div>`}viewPeriodHasEnabledDate(start,end){if(this.disabled||this.readonly)return!1;const key=`${formatISO(start)}/${formatISO(end)}`,cached=this.viewPeriodAvailabilityCache.get(key);if(cached!==void 0)return cached;const min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday(),first=min&&min>start?min:start,last=max&&max<end?max:end;if(first>last)return this.viewPeriodAvailabilityCache.set(key,!1),!1;let date=localDate(first.getFullYear(),first.getMonth(),first.getDate());const lastTime=localDate(last.getFullYear(),last.getMonth(),last.getDate()).getTime();for(let days=0;days<MAX_VIEW_PERIOD_DAYS&&date.getTime()<=lastTime;days++){if(!this.isDisabled(date,min,max,today))return this.viewPeriodAvailabilityCache.set(key,!0),!0;date=localDate(date.getFullYear(),date.getMonth(),date.getDate()+1)}return this.viewPeriodAvailabilityCache.set(key,!1),!1}viewPeriodDisabled(start,end){return!this.viewPeriodHasEnabledDate(start,end)}renderViewItem(start,end,label,today,selected,focused){const disabled=this.viewPeriodDisabled(start,end),isToday=today>=start&&today<=end,isSelected=selected!=null&&selected>=start&&selected<=end,parts=["view-item"];return disabled&&parts.push("view-item-disabled"),isToday&&parts.push("view-item-today"),isSelected&&parts.push("view-item-selected"),html`<div
@@ -139,7 +141,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           </div>`)}
       </div>
     `}render(){const selection=this.selection,min=parseISO(this.min),max=parseISO(this.max),today=this.resolvedToday(),fdow=this.fdow,labels=weekdayLabels(fdow,this.effectiveWeekdayFormat,this.effectiveLocale),dayLabelFmt=dateTimeFormat(this.effectiveLocale,{weekday:"long",year:"numeric",month:"long",day:"numeric"}),fallbackFocusDate=this.focusedDateValue||selection.from?null:this.firstEnabledDate(min,max,today),monthEls=[];if(this.effectiveView==="days")for(let i=0;i<this.visibleMonths;i++)monthEls.push(this.renderMonth(i,selection,min,max,today,fdow,labels,fallbackFocusDate,dayLabelFmt));return html`<div part="base date-picker">
-      <div>
+      <div class="content">
         ${this.effectiveView==="days"?html`<div part="months">${monthEls}</div>`:this.renderView(today)}
         <div part="footer"><slot name="footer"></slot></div>
       </div>

package/dist/components/forms/date-picker/date-picker.styles.js

@@ -6,10 +6,6 @@ import{css}from"lit";const styles=css`
     --_lr-date-picker-header-gap: var(--lr-space-s);
     --_lr-date-picker-radius: var(--lr-radius);
   }
-  /* A calendar day cell is a square in a 7-column grid, not a form-control row, so this is the
-     component's own ladder rather than the shared --lr-form-control-height one (whose 2xs/xs steps
-     would put a tappable cell under 24px). It still matches both spellings of every tier, the same
-     way internal/sizes.styles.ts does, so size="small" is honoured here too. */
   :host([size="2xs"]) {
     --_lr-cell-size: var(--lr-size-1-5rem);
   }
@@ -33,10 +29,6 @@ import{css}from"lit";const styles=css`
   }
   [part~="base"] {
     display: flex;
-    /* months="2" renders two fixed-width month grids side by side (~520px
-       total) -- in a panel/dialog/viewport narrower than that, wrapping the
-       second month onto its own line keeps every day cell reachable instead
-       of the row overflowing its allocation. */
     flex-wrap: wrap;
     gap: var(--lr-date-picker-month-gap, var(--_lr-date-picker-month-gap));
     padding: var(--lr-space-s);
@@ -48,11 +40,21 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
   }
+  .content {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
   [part="months"] {
     display: flex;
     flex-wrap: wrap;
+    min-inline-size: 0;
+    max-inline-size: 100%;
     gap: var(--lr-date-picker-month-gap, var(--_lr-date-picker-month-gap));
   }
+  [part="month"] {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
   [part="header"] {
     display: flex;
     align-items: center;
@@ -111,18 +113,10 @@ import{css}from"lit";const styles=css`
     padding: var(--lr-space-xs);
     border-radius: var(--lr-date-picker-radius, var(--_lr-date-picker-radius));
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself,
-     mirroring lr-pagination's/lr-table's low-specificity rule for this exact selector shape --
-     a consumer's own ::part(previous):hover/::part(next):hover can win without !important. The
-     background routes through a scoped cssprop so a consumer can retint just this hover state
-     without hijacking the shared --lr-color-brand-quiet token used everywhere else. */
   :where([part="previous"]):hover:not(:disabled),
   :where([part="next"]):hover:not(:disabled) {
     background: var(--lr-date-picker-nav-hover-bg, var(--lr-color-brand-quiet));
   }
-  /* Pressed mixes the hover tint one shared step further toward the text colour -- month paging
-     repeats, so "the click landed" has to be legible without waiting for the grid to redraw.
-     Wrapped in :where() for the same specificity reason as the hover rule above. */
   :where([part="previous"]):active:not(:disabled),
   :where([part="next"]):active:not(:disabled) {
     background: var(
@@ -139,24 +133,37 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Rotate the wrapping part element, not the svg -- internal/icons.ts's
-     documented contract ("callers ... rotate the wrapping part element via
-     CSS transform: rotate(...), not the svg"). This previously rotated the
-     inner <svg> directly. */
   [part="previous"] {
     transform: rotate(180deg);
   }
-  /* Under RTL the header's flexbox auto-mirrors (see date-picker.class.ts's
-     ArrowLeft/ArrowRight comment), moving 'previous' to the physical right
-     side and 'next' to the physical left -- so the chevrons must swap
-     rotation in lockstep to keep pointing outward from the month title,
-     matching the unrotated 'next' chevron's LTR orientation. */
   :host(:dir(rtl)) [part="previous"] {
     transform: rotate(0deg);
   }
   :host(:dir(rtl)) [part="next"] {
     transform: rotate(180deg);
   }
+  .calendar-scroll {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .calendar-scroll[data-scroll-overflow] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
   [part="weekdays"] {
     display: grid;
     grid-template-columns: repeat(7, var(--lr-cell-size, var(--_lr-cell-size)));
@@ -223,10 +230,6 @@ import{css}from"lit";const styles=css`
   [part~="day-outside"] {
     color: var(--lr-date-picker-day-outside-color, var(--lr-color-text-quiet));
   }
-  /* no-pressed-state: this is not a hover treatment. The :hover half only restates the resting
-     text colour so an adjacent-month day inside the selected range keeps full contrast once
-     [part~='day']:hover repaints its background; the pressed feedback for these cells is that same
-     [part~='day']:active rule above, which they match too. */
   [part~="day-outside"][part~="day-range-inner"],
   [part~="day-outside"][part~="day-range-inner"]:hover:not(:disabled) {
     color: var(--lr-date-picker-range-color, var(--lr-color-text));
@@ -322,6 +325,10 @@ import{css}from"lit";const styles=css`
     );
   }
   @media (forced-colors: active) {
+    .calendar-scroll[data-scroll-overflow] {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
     :where(
         [part="previous"],
         [part="next"],

package/dist/components/forms/emoji-picker/emoji-data-loader.d.ts

@@ -3,9 +3,12 @@ export type EmojiDataApi = unknown;
 /**
  * Loads the optional peer dependency `emoji-picker-element-data` and adapts its JSON export into
  * this component's own `EmojiPickerGroup[]` shape via `adaptEmojiPickerElementData()` below. Never
- * throws — resolves `null` (with a one-time `console.warn`) if the peer isn't installed or the
- * import otherwise fails, mirroring `pdf-loader.ts`'s `loadPdfJsDeps()` exact shape. `importData` is
- * an injectable seam for tests (see `emoji-data-loader.test.ts`).
+ * throws — resolves `null` (with a one-time `console.warn`) if the peer isn't installed, the import
+ * otherwise fails, or the resolved module matches neither the expected bare-array nor
+ * `{ default: [...] }` namespace shape (a broken or spoofed peer) — that last case fails closed
+ * rather than silently folding into `[]`, which would be indistinguishable from a well-formed peer
+ * that legitimately produced zero groups. Mirrors `pdf-loader.ts`'s `loadPdfJsDeps()` exact shape.
+ * `importData` is an injectable seam for tests (see `emoji-data-loader.test.ts`).
  */
 export declare function loadEmojiData(importData?: () => Promise<unknown>): Promise<EmojiPickerGroup[] | null>;
 /** Cached per page, mirroring `pdf-loader.ts`'s `loadPdfJs()` single-flight shape. */

package/dist/components/forms/emoji-picker/emoji-data-loader.js

@@ -1 +1 @@
-let cached;async function loadEmojiData(importData=()=>import("emoji-picker-element-data/en/emojibase/data.json")){try{const raw=await importData();return adaptEmojiPickerElementData(raw)}catch(error){return console.warn("<lr-emoji-picker> needs the optional peer dependency `emoji-picker-element-data` to show a default emoji set \u2014 install it with `pnpm add emoji-picker-element-data`, or supply `groups` directly:",error),null}}function loadEmojiDataCached(){return cached||(cached=loadEmojiData()),cached}function clearEmojiDataCache(){cached=void 0}const GROUP_LABELS={0:"Smileys & Emotion",1:"People & Body",2:"Component",3:"Animals & Nature",4:"Food & Drink",5:"Travel & Places",6:"Activities",7:"Objects",8:"Symbols",9:"Flags"};function adaptEmojiPickerElementData(raw){const candidate=raw?.default,entries=Array.isArray(raw)?raw:Array.isArray(candidate)?candidate:[],byGroup=new Map;for(const entry of entries){if(!entry.emoji||!entry.annotation||entry.group===void 0)continue;let bucket=byGroup.get(entry.group);bucket||(bucket={key:String(entry.group),label:GROUP_LABELS[entry.group]??`Group ${entry.group}`,emojis:[]},byGroup.set(entry.group,bucket)),bucket.emojis.push({emoji:entry.emoji,name:entry.annotation,shortcodes:entry.shortcodes})}return[...byGroup.entries()].sort(([a],[b])=>a-b).map(([,group])=>group)}export{clearEmojiDataCache,loadEmojiData,loadEmojiDataCached};
+let cached;async function loadEmojiData(importData=()=>import("emoji-picker-element-data/en/emojibase/data.json")){try{const raw=await importData(),adapted=adaptEmojiPickerElementData(raw);if(adapted===null)throw new TypeError("The emoji-picker-element-data peer does not expose the expected array (or { default: array }) shape.");return adapted}catch(error){return console.warn("<lr-emoji-picker> needs the optional peer dependency `emoji-picker-element-data` to show a default emoji set \u2014 install it with `pnpm add emoji-picker-element-data`, or supply `groups` directly:",error),null}}function loadEmojiDataCached(){return cached||(cached=loadEmojiData()),cached}function clearEmojiDataCache(){cached=void 0}const GROUP_LABELS={0:"Smileys & Emotion",1:"People & Body",2:"Component",3:"Animals & Nature",4:"Food & Drink",5:"Travel & Places",6:"Activities",7:"Objects",8:"Symbols",9:"Flags"};function adaptEmojiPickerElementData(raw){const candidate=raw?.default,entries=Array.isArray(raw)?raw:Array.isArray(candidate)?candidate:null;if(entries===null)return null;const byGroup=new Map;for(const entry of entries){if(!entry.emoji||!entry.annotation||entry.group===void 0)continue;let bucket=byGroup.get(entry.group);bucket||(bucket={key:String(entry.group),label:GROUP_LABELS[entry.group]??String(entry.group),emojis:[]},byGroup.set(entry.group,bucket)),bucket.emojis.push({emoji:entry.emoji,name:entry.annotation,shortcodes:entry.shortcodes})}return[...byGroup.entries()].sort(([a],[b])=>a-b).map(([,group])=>group)}export{clearEmojiDataCache,loadEmojiData,loadEmojiDataCached};

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

@@ -248,7 +248,14 @@ export declare class LyraEmojiPicker extends LyraEmojiPicker_base {
     private observeGeometryProbe;
     private resetGeometryObserver;
     private onGeometryResize;
-    /** Localizes only groups whose object identity came from the built-in loader. */
+    /**
+     * Localizes only groups whose object identity came from the built-in loader. A built-in group
+     * whose numeric id isn't in `BUILT_IN_GROUP_LABEL_KEYS` (none exist in the emojibase dataset
+     * shipped today, ids 0-9 are all mapped -- but a future dataset update could add one) still gets
+     * a localized heading via the generic `emojiPickerGroupUnknown` key rather than the loader's own
+     * `group.label`, which is a plain, unlocalized placeholder meant only for a caller who consumes
+     * `loadEmojiData()` directly without going through this component's rendering.
+     */
     private groupLabel;
     private virtualRows;
     private optionButtons;

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

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

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

@@ -10,11 +10,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     --_lr-emoji-picker-item-radius-default: var(--lr-radius-xs);
     --_lr-emoji-picker-row-height-default: calc(max(var(--lr-icon-button-size), var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default))) + var(--lr-space-l));
   }
-  /* An emoji cell is a square tap target in a dense grid, not a form-control row, so this is the
-     component's own ladder rather than the shared --lr-form-control-height one: the two agree from
-     m upwards, but the shared 2xs/xs/s steps (20/24/30px) would take a cell in a grid of hundreds
-     under a comfortable tap target. It still matches both spellings of every tier, the same way
-     internal/sizes.styles.ts does, so size="small" is honoured here too. */
   :host([size='2xs']) {
     --_lr-emoji-picker-item-size-default: var(--lr-size-1-5rem);
     --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-sm);
@@ -46,9 +41,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     color: var(--lr-color-text);
     font-size: var(--lr-font-size-md-sm);
   }
-  /* [part]:empty never matches -- the part always contains a literal <slot> child element
-     regardless of assigned content -- so real emptiness is tracked in JS (hasLabelSlot/
-     hasHintSlot/hasErrorSlot) and reflected via the hidden attribute instead. */
   [part='form-control-label'][hidden],
   [part='hint'][hidden],
   [part='error'][hidden] {
@@ -72,11 +64,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     padding: var(--lr-space-s);
     background: var(--lr-color-surface);
   }
-  /* :host(:disabled), not :host([disabled]) -- this is a form-associated custom element
-     (FormAssociated mixin -> static formAssociated = true), so the UA computes its disabled
-     state (and therefore :disabled/:enabled matching) the same way it does for a native form
-     control: from its own disabled content attribute *or* an ancestor <fieldset disabled>'s
-     cascade. */
   :host(:disabled) [part='base'] {
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
@@ -97,9 +84,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* no-pressed-state: pressing a search field places a caret, it does not activate a target --
-     there is no "did my click register?" gap to fill, and the engaged state it leads to is already
-     drawn by the :focus-visible rule above. Native text inputs have no pressed treatment either. */
   [part='search']:hover:not(:disabled) {
     border-color: var(--lr-emoji-picker-search-hover-border-color, var(--lr-color-brand));
   }
@@ -118,12 +102,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part='grid'] {
     scrollbar-gutter: stable;
   }
-  /* Off-flow geometry probes (not parts -- never exposed to consumers). A custom property's
-     computed value is an unresolved token stream ('2.5rem', 'calc(2.5rem + 1rem)'), never a pixel
-     length, so the windowed layout resolves each geometry token by assigning it to one of these
-     boxes and reading that box's used inline size back. Absolutely positioned and hidden, so they
-     take part in layout (a box is what makes a used size exist) without painting or affecting the
-     grid. */
   [data-probe='root'] {
     position: absolute;
     inset-block-start: 0;
@@ -137,8 +115,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     block-size: 0;
   }
   [data-probe='item'] {
-    /* Mirrors [part='emoji']'s inline box, shared minimum included, so the resolved item size is
-       the size actually painted. */
     inline-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default));
     min-inline-size: var(--lr-icon-button-size);
   }
@@ -174,10 +150,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-weight: var(--lr-font-weight-semibold);
   }
   [part='emoji'] {
-    /* The item box and its glyph both scale with --lr-emoji-picker-item-size/-glyph-size (unlike
-       a small icon in a padded button, the glyph fills most of the box, so it has to track the
-       box or it clips/looks lost). Keep the complete interactive target at the shared icon-button
-       floor even when a consumer selects a smaller visual size. */
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -192,9 +164,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-emoji-picker-glyph-size, var(--_lr-emoji-picker-glyph-size-default));
     cursor: pointer;
   }
-  /* State hooks are inline fallbacks rather than :host declarations, so an ancestor theme can
-     customize one state without being shadowed. The former active-bg hook remains a compatibility
-     fallback for hover and roving-active; committed selection and pointer press are independent. */
   [part='emoji']:hover:not(:disabled) {
     background: var(
       --lr-emoji-picker-hover-bg,
@@ -229,10 +198,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline-color: var(--lr-emoji-picker-pressed-outline-color, var(--lr-color-brand));
     outline-style: double;
   }
-  /* Negative offset (matches [part='textarea']:focus-visible in code-editor.styles.ts), not the
-     usual positive one -- the grid's own gap is only --lr-emoji-picker-gap-default (2px), the same
-     as --lr-focus-ring-offset, so a positive offset would let the ring bleed into the neighboring
-     cell instead of staying legible around the focused one. */
   [part='emoji']:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(var(--lr-focus-ring-offset) * -1);
@@ -244,9 +209,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     text-align: center;
     color: var(--lr-color-text-quiet);
   }
-  /* The load-error surface says something went wrong rather than "nothing matched", so it carries
-     the danger foreground the rest of the library uses for a failed operation -- the two states
-     are otherwise the same box in the same place, and would be indistinguishable at a glance. */
   [part='load-error'] {
     color: var(--lr-color-danger);
   }
@@ -263,14 +225,14 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       outline: var(--lr-border-width-thin) dashed Highlight;
       outline-offset: calc(var(--lr-focus-ring-offset) * -1);
     }
-    [part='emoji'][data-active] {
-      outline: var(--lr-border-width-thin) dotted Highlight;
-    }
     [part='emoji'][aria-selected='true'] {
       color: HighlightText;
       background: Highlight;
       outline: var(--lr-border-width-medium) solid Highlight;
     }
+    [part='emoji'][data-active] {
+      outline: var(--lr-border-width-thin) dotted Highlight;
+    }
     [part='emoji']:active:not(:disabled) {
       color: HighlightText;
       background: Highlight;

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

@@ -13,7 +13,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         aria-expanded=${this.triggerExpanded??nothing}
         aria-controls=${this.triggerControls||nothing}
         aria-describedby=${this.triggerDescribedBy||nothing}
-        aria-disabled=${disabled?"true":nothing}
+        aria-disabled=${disabled?"true":"false"}
         tabindex=${disabled?"-1":nothing}
         @focus=${this.onFocus}
         @blur=${this.onBlur}

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

@@ -1,27 +1,11 @@
 import{css}from"lit";const styles=css`
   :host { display: inline-flex; --_lr-icon-button-radius-default: var(--lr-radius); }
-  /* --lr-icon-button-size is a minimum tappable box, not a fixed one: floor both axes so a small
-     glyph still pads out to a full target, while slotted content larger than it grows the button
-     and keeps its own aspect ratio instead of being squashed to 1:1. */
   [part~='button'] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: 0; border: var(--lr-icon-button-border, 0); border-radius: var(--lr-icon-button-radius, var(--_lr-icon-button-radius-default)); background: var(--lr-icon-button-background, transparent); color: var(--lr-icon-button-color, inherit); cursor: pointer; text-decoration: none; }
-  /* The hover fallback used to be var(--lr-color-surface) -- the PAGE background -- so hovering an
-     icon button on a default page changed nothing at all. It mixes the page surface toward
-     --lr-color-mix-partner (which follows the text colour) instead, which always moves, and always
-     in the direction the surface needs: darker on a light page, lighter on a dark one. The press
-     fallback is the same mix at the stronger --lr-color-mix-active share, so the pressed state
-     reads as more than the hover rather than as a repeat of it. */
   [part~='button']:not(:disabled):not([aria-disabled='true']):hover { border: var(--lr-icon-button-border-hover, var(--lr-icon-button-border, 0)); background: var(--lr-icon-button-background-hover, color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))); color: var(--lr-icon-button-color-hover, var(--lr-icon-button-color, inherit)); }
   [part~='button']:not(:disabled):not([aria-disabled='true']):active { border: var(--lr-icon-button-border-active, var(--lr-icon-button-border-hover, var(--lr-icon-button-border, 0))); background: var(--lr-icon-button-background-active, color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))); color: var(--lr-icon-button-color-active, var(--lr-icon-button-color-hover, var(--lr-icon-button-color, inherit))); }
   [part~='button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); }
   :host(:disabled) [part~='button'],
   [part~='button'][aria-disabled='true'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; }
-  /* The standalone icon canvas is intentionally font-relative. An icon button has its own
-     established 1.25rem visual-glyph contract, independent of the button label font-size that
-     the nested component inherits. Size the integration boundary with the existing rem token;
-     a consumer's inherited --lr-icon-size still wins through the first var() branch. */
   lr-icon { inline-size: var(--lr-icon-size, var(--lr-size-1-25rem)); block-size: var(--lr-icon-size, var(--lr-size-1-25rem)); }
-  /* Mirrors lr-icon's own default box so the bare-geometry SVG fallback sizes the same as a
-     named icon glyph would. Only ever mounted (see icon-button.class.ts's hasBareGeometry) when
-     there is fallback content to show. */
   [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};