@aceshooting/lyra-ui 19.0.0 → 20.0.0

package/dist/components/forms/date-picker/date-input.class.d.ts

@@ -74,6 +74,8 @@ observedAttributes?:string[];checkValidity:(input:never)=>LyraDateInputObjectVal
 * @csspart preset-button - One quick-range button, forwarded from `<lr-date-picker>`.
 * @csspart hint - The hint message.
 * @csspart error - The validation message.
+* @cssprop [--lr-date-input-text-color=inherit] - Trigger text color. Defaults to the inherited text
+*   color, and to `--lr-color-on-brand` under `appearance="accent"`.
 * @cssprop [--lr-date-input-padding-block=var(--lr-form-control-padding-block)] - Text input block padding, scaled by `size`.
 * @cssprop [--lr-date-input-padding-inline=var(--lr-form-control-padding-inline)] - Inline padding of the input row, scaled by `size`.
 * @cssprop [--lr-date-input-font-size=var(--lr-form-control-font-size)] - Font size of the text input, scaled by `size`.
@@ -137,7 +139,15 @@ observedAttributes?:string[];checkValidity:(input:never)=>LyraDateInputObjectVal
 * @status experimental
 * @since 4.0.0
 */
-export declare class LyraDateInput extends LyraDateInput_base{static styles:import("lit").CSSResultGroup[];static properties:{mode:{reflect:boolean;noAccessor:boolean;};min:{reflect:boolean;noAccessor:boolean;};max:{reflect:boolean;noAccessor:boolean;};readonly:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disablePast:{type:BooleanConstructor;attribute:string;reflect:boolean;noAccessor:boolean;};disableFuture:{type:BooleanConstructor;attribute:string;reflect:boolean;noAccessor:boolean;};};appearance:Extract<LyraAppearance,'filled'|'outlined'|'filled-outlined'>;
+export declare class LyraDateInput extends LyraDateInput_base{static styles:import("lit").CSSResultGroup[];static properties:{mode:{reflect:boolean;noAccessor:boolean;};min:{reflect:boolean;noAccessor:boolean;};max:{reflect:boolean;noAccessor:boolean;};readonly:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disablePast:{type:BooleanConstructor;attribute:string;reflect:boolean;noAccessor:boolean;};disableFuture:{type:BooleanConstructor;attribute:string;reflect:boolean;noAccessor:boolean;};};private _appearance;
+/**
+* Visual treatment shared with other Lyra form controls -- the full five-value `LyraAppearance`
+* vocabulary, matching `<lr-select>`'s trigger and `<lr-combobox>`'s own `appearance`. A raw
+* attribute/property write outside this set, including a typo, clamps to the `'outlined'`
+* default rather than silently rendering unstyled.
+* @default 'outlined'
+*/
+get appearance():LyraAppearance;set appearance(next:LyraAppearance);
 /** Whether the calendar popup is open. Disabled or readonly controls reject direct reopen
 * attempts, including the synchronous fieldset cascade before its callback runs. */
 get open():boolean;set open(next:boolean);withClear:boolean;withHint:boolean;withLabel:boolean;
@@ -241,7 +251,17 @@ private enterCommittedText;
 *  about to commit. Synthetic test/integration changes can arrive without a preceding input;
 *  those receive one generated InputEvent so every committed transition keeps the same public
 *  input/change sequence without duplicating real browser input events. */
-private inputRelayedSinceCommit;private cleanupFn?;private pointerListenerDocument?;private pointerListener?;private visibilityListenerDocument?;private visibilityListener?;private overlayHandle?;private restorePopupFocusOnClose;private transitionToken;private transitionWaiters;private interactionListeners;private validatorAttributeObserver?;private localDescriptionIds;private externalDescription?;private inputId;private popupId;private touched;static get observedAttributes():string[];constructor();private hasHintSlot;private hasErrorSlot;private hasLabelSlot;private hasStartSlot;private hasEndSlot;private validityRevision;private _mode;private _min;private _max;private _open;private _readonly;private _disablePast;private _disableFuture;private typedBadInput;
+private inputRelayedSinceCommit;private cleanupFn?;private pointerListenerDocument?;private pointerListener?;private visibilityListenerDocument?;private visibilityListener?;private overlayHandle?;private restorePopupFocusOnClose;
+/** Removes the settled-closed calendar popup from layout (`[hidden]{display:none}`) so its
+*  stale last-placed box stops contributing to an ancestor's scrollable overflow. Cleared
+*  synchronously in `willUpdate()` before `place()` measures the popup, so the first
+*  measurement still sees a real box; re-set once the close transition settles. */
+private popupHidden;
+/** Gates the popup's open-transition CSS separately from `popupHidden`: unhiding and becoming
+*  visible in the same render would skip the opacity/transform transition entirely (no prior
+*  painted frame to transition from), so this flips to `true` only once `place()` has actually
+*  positioned the popup, one render after `popupHidden` clears. */
+private popupPositioned;private transitionToken;private transitionWaiters;private interactionListeners;private validatorAttributeObserver?;private localDescriptionIds;private externalDescription?;private inputId;private popupId;private touched;static get observedAttributes():string[];constructor();private hasHintSlot;private hasErrorSlot;private hasLabelSlot;private hasStartSlot;private hasEndSlot;private validityRevision;private _mode;private _min;private _max;private _open;private _readonly;private _disablePast;private _disableFuture;private typedBadInput;
 /** Clock seam for temporal validity and deterministic day-boundary tests. */
 private now;get mode():'single'|'range';set mode(next:'single'|'range');get min():string;set min(next:string);get max():string;set max(next:string);get readonly():boolean;set readonly(next:boolean);get disabled():boolean;set disabled(next:boolean);get disablePast():boolean;set disablePast(next:boolean);get disableFuture():boolean;set disableFuture(next:boolean);
 /** The underlying date text input for platform-specific integrations. */

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{observeReactivePropertyWrites}from"../../../internal/reactive-property-writes.js";import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon,calendarIcon,chevronIcon}from"../../../internal/icons.js";import{activateNonmodalOverlay,composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{setCustomState}from"../../../internal/custom-states.js";import{finiteCount,finiteNumber}from"../../../internal/numbers.js";import{isDateObject}from"../../../internal/dom-guards.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dateTimeFormat,parseISO,formatISO,localDate,utcDate,normalizeCalendarMonths,normalizeWeekdayFormat}from"./calendar-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./date-input.styles.js";import"./date-picker.class.js";import"./date-picker.class.js";import{spellcheckFromAttributeConverter as spellcheckConverter}from"../../../internal/converters.js";import{isImplicitSubmission,submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_chooseDate,LYRA_DEFAULT_clear,LYRA_DEFAULT_date,LYRA_DEFAULT_dateInputFutureDisabled,LYRA_DEFAULT_dateInputInvalid,LYRA_DEFAULT_dateInputMaxMessage,LYRA_DEFAULT_dateInputMinMessage,LYRA_DEFAULT_dateInputPastDisabled,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_openCalendar}from"../../../internal/default-strings.generated.js";function localeDateOrder(locale){try{const order=dateTimeFormat(locale,{year:"numeric",month:"2-digit",day:"2-digit"}).formatToParts(new Date(2026,0,2)).filter(p=>p.type==="day"||p.type==="month"||p.type==="year").map(p=>p.type);return order.length===3?order:["month","day","year"]}catch{return["month","day","year"]}}const BIDI_FORMATTING_MARKS=/[\u061c\u200e\u200f\u202a-\u202e\u2066-\u2069]/g;function normalizeLocalizedDateText(raw,locale){let normalized=raw.replace(BIDI_FORMATTING_MARKS,"");try{const formatter=getNumberFormat(locale||void 0,{useGrouping:!1});for(let digit=0;digit<=9;digit++){const localized=formatter.format(digit).replace(BIDI_FORMATTING_MARKS,"");localized&&localized!==String(digit)&&(normalized=normalized.split(localized).join(String(digit)))}}catch{}return normalized.trim()}const monthsConverter={fromAttribute:normalizeCalendarMonths,toAttribute:normalizeCalendarMonths},weekdayFormatConverter={fromAttribute:normalizeWeekdayFormat,toAttribute:normalizeWeekdayFormat};function normalizeDateInputAppearance(value){return value==="filled"||value==="filled-outlined"?value:"outlined"}const appearanceConverter={fromAttribute:normalizeDateInputAppearance,toAttribute:normalizeDateInputAppearance},placements=new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]);function normalizeDateInputPlacement(value){return typeof value=="string"&&placements.has(value)?value:"bottom-start"}const placementConverter={fromAttribute:normalizeDateInputPlacement,toAttribute:normalizeDateInputPlacement};function normalizeDateInputPageBy(value){return value==="single"?"single":"months"}const pageByConverter={fromAttribute:normalizeDateInputPageBy,toAttribute:normalizeDateInputPageBy},VALIDITY_FLAG_KEYS=new Set(["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"]);function isValidityFlagKey(value){return typeof value=="string"&&VALIDITY_FLAG_KEYS.has(value)}class LyraDateInputBase extends LyraElement{}class LyraDateInput extends FormAssociated(LyraDateInputBase){static{this.defaultStrings={...super.defaultStrings,chooseDate:LYRA_DEFAULT_chooseDate,clear:LYRA_DEFAULT_clear,date:LYRA_DEFAULT_date,dateInputFutureDisabled:LYRA_DEFAULT_dateInputFutureDisabled,dateInputInvalid:LYRA_DEFAULT_dateInputInvalid,dateInputMaxMessage:LYRA_DEFAULT_dateInputMaxMessage,dateInputMinMessage:LYRA_DEFAULT_dateInputMinMessage,dateInputPastDisabled:LYRA_DEFAULT_dateInputPastDisabled,fieldRequired:LYRA_DEFAULT_fieldRequired,openCalendar:LYRA_DEFAULT_openCalendar}}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={mode:{reflect:!0,noAccessor:!0},min:{reflect:!0,noAccessor:!0},max:{reflect:!0,noAccessor:!0},readonly:{type:Boolean,reflect:!0,noAccessor:!0},disablePast:{type:Boolean,attribute:"disable-past",reflect:!0,noAccessor:!0},disableFuture:{type:Boolean,attribute:"disable-future",reflect:!0,noAccessor:!0}}}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!this.readonly&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this.requestUpdate("open",old)}get appliedPreset(){return this._appliedPreset}static get observedAttributes(){const attributes=super.observedAttributes;return observeReactivePropertyWrites(this.prototype,["clearLabel","openLabel","dialogLabel"],(instance,name,value)=>{const authored=value!=null;let ownershipChanged=!1;switch(name){case"clearLabel":if(instance.clearLabelAuthored===void 0)return;ownershipChanged=authored!==instance.clearLabelAuthored,instance.clearLabelAuthored=authored;break;case"openLabel":if(instance.openLabelAuthored===void 0)return;ownershipChanged=authored!==instance.openLabelAuthored,instance.openLabelAuthored=authored;break;case"dialogLabel":if(instance.dialogLabelAuthored===void 0)return;ownershipChanged=authored!==instance.dialogLabelAuthored,instance.dialogLabelAuthored=authored;break}ownershipChanged&&instance.requestUpdate()}),attributes}constructor(){super(),this.appearance="outlined",this.withClear=!1,this.withHint=!1,this.withLabel=!1,this.size="m",this.pill=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.accessibleLabel=null,this.locale="",this.months=1,this.firstDayOfWeek="auto",this.weekdayFormat="short",this.presets=Object.freeze([]),this.withOutsideDays=!1,this.withWeekNumbers=!1,this.disabledDates="",this.disabledDaysOfWeek="",this.minRange=0,this.maxRange=0,this.pageBy="months",this.today="",this.distance=0,this.placement="bottom-start",this.assumeInteractionOn=["input"],this.validators=[],this.clearLabel="",this.clearLabelAuthored=!1,this.openLabel="",this.openLabelAuthored=!1,this.dialogLabel="Choose date",this.dialogLabelAuthored=!1,this.enterCommittedText=null,this.inputRelayedSinceCommit=!1,this.restorePopupFocusOnClose=!1,this.transitionToken=0,this.transitionWaiters=new Map,this.interactionListeners=new Map,this.localDescriptionIds="",this.inputId=nextId("date-input"),this.popupId=nextId("date-popup"),this.touched=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.validityRevision=0,this._mode="single",this._min="",this._max="",this._open=!1,this._readonly=!1,this._disablePast=!1,this._disableFuture=!1,this.typedBadInput=!1,this.now=()=>new Date,this.onVisibilityChange=()=>{this.ownerDocument.visibilityState==="visible"&&(this.updateValidity(),this.validityRevision++)},this.onDocPointer=e=>{e.composedPath().includes(this)||this.hide(!1)},this.onInputChange=e=>{if(e.stopPropagation(),this.liveDisabled)return;const raw=e.target.value;if(this.enterCommittedText!==null&&(raw===this.enterCommittedText||raw===this.displayText))return;this.enterCommittedText=null,this.applyTypedText(raw)?(this.inputRelayedSinceCommit||dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.inputRelayedSinceCommit=!1,relayNativeEvent(this,e)):this.inputRelayedSinceCommit=!1},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.inputRelayedSinceCommit=!0,relayNativeEvent(this,event))},this.onInputKey=e=>{if(e.altKey&&e.key==="ArrowDown"){e.preventDefault(),this.show();return}if(this.liveDisabled||this.readonly||!isImplicitSubmission(e))return;const input=this.inputElement;if(input&&input.value!==this.displayText){const raw=input.value;this.applyTypedText(raw)?(this.inputRelayedSinceCommit||dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.inputRelayedSinceCommit=!1,dispatchNativeEvent(this,"change")):this.inputRelayedSinceCommit=!1,this.enterCommittedText=raw}submitOnEnter(this,e)},this.onInputBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onInputFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},this.onPickerInput=e=>{if(e.stopPropagation(),this.liveDisabled)return;const picker=e.target;this.value=picker.value,this._appliedPreset=picker.appliedPreset,this.inputRelayedSinceCommit=!1,relayNativeEvent(this,e)},this.onPickerChange=e=>{if(e.stopPropagation(),this.liveDisabled)return;const picker=e.target;this.value=picker.value,this._appliedPreset=picker.appliedPreset,relayNativeEvent(this,e),this.hide(!0)},this.addEventListener("invalid",()=>{this.touched=!0})}get mode(){return this._mode}set mode(next){const old=this._mode;this._mode=next==="range"?"range":"single",this.internals.setFormValue(this.isIncompleteRangeValue(this.value)?"":this.value),this.updateValidity(),this.syncCustomStates(),this.requestUpdate("mode",old)}get min(){return this._min}set min(next){const old=this._min;this._min=next??"",this.updateValidity(),this.requestUpdate("min",old)}get max(){return this._max}set max(next){const old=this._max;this._max=next??"",this.updateValidity(),this.requestUpdate("max",old)}get readonly(){return this._readonly}set readonly(next){const old=this._readonly;this._readonly=!!next,this.toggleAttribute("readonly",this._readonly),this._readonly&&this.hide(),this.updateValidity(),this.requestUpdate("readonly",old)}get disabled(){return super.disabled}set disabled(next){super.disabled=next,next&&this.hide(),this.syncCustomStates()}get disablePast(){return this._disablePast}set disablePast(next){const old=this._disablePast;this._disablePast=!!next,this.updateValidity(),this.requestUpdate("disablePast",old)}get disableFuture(){return this._disableFuture}set disableFuture(next){const old=this._disableFuture;this._disableFuture=!!next,this.updateValidity(),this.requestUpdate("disableFuture",old)}get input(){return this.inputElement}get selectionStart(){return this.inputElement?.selectionStart??null}set selectionStart(value){this.inputElement&&(this.inputElement.selectionStart=value??0)}get selectionEnd(){return this.inputElement?.selectionEnd??null}set selectionEnd(value){this.inputElement&&(this.inputElement.selectionEnd=value??0)}get selectionDirection(){return this.inputElement?.selectionDirection??null}set selectionDirection(value){this.inputElement&&(this.inputElement.selectionDirection=value??"none")}get value(){return super.value}set value(next){this.setTypedBadInput(!1);const normalized=this.normalizeCommittedValue(next??"");super.value=normalized,this.internals.setFormValue(this.isIncompleteRangeValue(normalized)?"":normalized),this.syncCustomStates()}get valueAsDate(){return this.mode==="single"?this.parseStrictISO(this.value):null}set valueAsDate(next){this.value=isDateObject(next)&&Number.isFinite(next.getTime())?formatISO(next):""}get valueAsRange(){if(this.mode!=="range")return{from:null,to:null};const[from="",to=""]=this.value.split("/");return{from:this.parseStrictISO(from),to:this.parseStrictISO(to)}}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 validationTarget(){return this.validationTargetOverride??this.inputElement}set validationTarget(next){const old=this.validationTarget;this.validationTargetOverride=next??void 0,this.requestUpdate("validationTarget",old)}[VALIDITY_ANCHOR](){return this.validationTarget}resetValidity(){this.setCustomValidity(""),this.updateValidity()}setTypedBadInput(next){const old=this.typedBadInput;this.typedBadInput=next,old!==next&&this.requestUpdate("typedBadInput",old)}parseStrictISO(value){return/^\d{4}-\d{2}-\d{2}$/.test(value)?parseISO(value):null}normalizeCommittedValue(value){if(value==="")return"";const parts=value.split("/");if(parts.length!==1&&parts.length!==2)return"";const dates=parts.map(part=>this.parseStrictISO(part));return dates.some(date=>date===null)?"":parts.length===2&&dates[0]>dates[1]?`${parts[1]}/${parts[0]}`:value}isIncompleteRangeValue(value){return this.mode==="range"&&value!==""&&!value.includes("/")}valueDates(value){const parts=value.split("/"),expectedParts=this.mode==="range"&&parts.length===2?2:1;if(parts.length!==expectedParts)return null;const dates=parts.map(part=>this.parseStrictISO(part));return dates.some(date=>date===null)?null:dates}configuredDisabledDateKeys(){const values=Array.isArray(this.disabledDates)?this.disabledDates:String(this.disabledDates||"").split(/[\s,]+/);return new Set(values.map(value=>isDateObject(value)?value:parseISO(String(value))).filter(value=>isDateObject(value)&&Number.isFinite(value.getTime())).map(value=>formatISO(value)))}configuredDisabledWeekdays(){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};return new Set(String(this.disabledDaysOfWeek||"").toLowerCase().split(/[\s,]+/).filter(Boolean).map(value=>names[value]??(/^[0-6]$/.test(value)?Number(value):-1)).filter(value=>value>=0))}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}validatorResult(){for(const validator of Array.isArray(this.validators)?this.validators:[]){let result;try{if(typeof validator=="object"&&validator!==null&&"checkValidity"in validator){const checked=validator.checkValidity(this);if(checked?.isValid===!0)continue;const flags={};for(const key of Array.isArray(checked?.invalidKeys)?checked.invalidKeys:[])isValidityFlagKey(key)&&(flags[key]=!0);Object.values(flags).some(Boolean)||(flags.customError=!0);let message=typeof checked?.message=="string"?checked.message:"";return!message&&typeof validator.message=="string"&&(message=validator.message),!message&&typeof validator.message=="function"&&(message=validator.message(this)),{flags,message:message||this.localize("dateInputInvalid")}}result=typeof validator=="function"?validator(this.value,this):validator?.validate(this.value,this)}catch{return{flags:{customError:!0},message:this.localize("dateInputInvalid")}}if(!(result===void 0||result===!0)){if(typeof result=="string")return{flags:{customError:!0},message:result};if(result===!1)return{flags:{customError:!0},message:this.localize("dateInputInvalid")};if(result&&typeof result=="object"&&Object.values(result).some(Boolean))return{flags:result,message:this.localize("dateInputInvalid")}}}return{}}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const flags={};let underflowMessage="",overflowMessage="";const incompleteRange=this.isIncompleteRangeValue(this.value);if(this.required&&(this.value===""||incompleteRange)&&(flags.valueMissing=!0),this.typedBadInput&&(flags.badInput=!0),this.value!==""){const dates=this.valueDates(this.value);if(!dates)flags.badInput=!0;else{const min=this.parseStrictISO(this.min),max=this.parseStrictISO(this.max),now=this.parseStrictISO(this.today)??this.now(),today=localDate(now.getFullYear(),now.getMonth(),now.getDate());min!==null&&dates.some(date=>date<min)&&(flags.rangeUnderflow=!0,underflowMessage=this.localize("dateInputMinMessage",void 0,{min:this.min})),this.disablePast&&dates.some(date=>date<today)&&(flags.rangeUnderflow=!0,underflowMessage||=this.localize("dateInputPastDisabled")),max!==null&&dates.some(date=>date>max)&&(flags.rangeOverflow=!0,overflowMessage=this.localize("dateInputMaxMessage",void 0,{max:this.max})),this.disableFuture&&dates.some(date=>date>today)&&(flags.rangeOverflow=!0,overflowMessage||=this.localize("dateInputFutureDisabled"));const disabledDates=this.configuredDisabledDateKeys(),disabledWeekdays=this.configuredDisabledWeekdays();let configuredDisabled=dates.some(date=>disabledDates.has(formatISO(date))||disabledWeekdays.has(date.getDay()));if(!configuredDisabled&&this.isDateDisabled)try{configuredDisabled=dates.some(date=>!!this.isDateDisabled?.(new Date(date.getTime())))}catch{configuredDisabled=!1}if(configuredDisabled&&(flags.customError=!0),this.mode==="range"&&dates.length===2){const length=this.rangeLength(dates[0],dates[1]),minimum=finiteCount(this.minRange,0),maximum=finiteCount(this.maxRange,0);minimum>0&&length<minimum&&(flags.rangeUnderflow=!0,underflowMessage||=this.localize("dateInputInvalid")),maximum>0&&length>maximum&&(flags.rangeOverflow=!0,overflowMessage||=this.localize("dateInputInvalid"))}}}const configured=this.validatorResult();configured.flags&&Object.assign(flags,configured.flags);let message="";configured.message?message=configured.message:flags.badInput||flags.customError?message=this.localize("dateInputInvalid"):flags.rangeUnderflow?message=underflowMessage:flags.rangeOverflow?message=overflowMessage:flags.valueMissing&&(message=this.localize("fieldRequired")),this[SET_ANCHORED_VALIDITY](flags,message)}checkValidity(){return this.updateValidity(),super.checkValidity()}reportValidity(){return this.updateValidity(),super.reportValidity()}bindVisibilityListener(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.visibilityListenerDocument===ownerDocument&&this.visibilityListener)return;this.unbindVisibilityListener();const listener=()=>{this.visibilityListener!==listener||this.visibilityListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onVisibilityChange()};this.visibilityListenerDocument=ownerDocument,this.visibilityListener=listener,ownerDocument.addEventListener("visibilitychange",listener)}unbindVisibilityListener(){this.visibilityListenerDocument&&this.visibilityListener&&this.visibilityListenerDocument.removeEventListener("visibilitychange",this.visibilityListener),this.visibilityListenerDocument=void 0,this.visibilityListener=void 0}get displayText(){const parts=this.value.split("/"),from=parseISO(parts[0]),to=parseISO(parts[1]??"");if(!from)return"";const formatter=dateTimeFormat(this.effectiveLocale,{year:"numeric",month:"numeric",day:"numeric"}),fmt=d=>formatter.format(d);if(this.mode!=="range"||!to)return fmt(from);try{return formatter.formatRange(from,to)}catch{return`${fmt(from)} – ${fmt(to)}`}}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end")),changed.has("open")&&(this.open&&this.isConnected?this.bindDocumentPointer():this.unbindDocumentPointer())}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}show(){if(this.open||this.liveDisabled||this.readonly||this.emit("lr-show",null,{cancelable:!0}).defaultPrevented)return Promise.resolve();this.resolveTransitionWaiters("lr-after-hide");const settled=this.waitForTransition("lr-after-show");return this.open=!0,this.settleTransition("lr-after-show"),settled}hide(restoreFocus=!1){if(!this.open||this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented)return Promise.resolve();this.resolveTransitionWaiters("lr-after-show");const settled=this.waitForTransition("lr-after-hide");return this.restorePopupFocusOnClose||=restoreFocus,this.open=!1,this.settleTransition("lr-after-hide"),settled}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener),this.pointerListenerDocument=void 0,this.pointerListener=void 0}reconnectOpenPopup(){if(!this.isConnected||!this.open)return;this.bindDocumentPointer(),this.cleanupFn?.();const anchor=this.renderRoot.querySelector('[part="input-wrapper"]'),popup=this.renderRoot.querySelector('[part="popup"]');!anchor||!popup||(this.cleanupFn=place(anchor,popup,{placement:normalizeDateInputPlacement(this.placement),offset:finiteNumber(this.distance,0),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")}),this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="popup"]'),onEscape:()=>{this.hide(!0)}}))}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(event==="lr-after-show"){const positioned=await waitForDeferredPlacement(()=>this.cleanupFn);if(this.transitionToken!==token||!this.open)return;if(!positioned){this.resolveTransitionWaiters("lr-after-show"),this.open=!1;return}if(await this.updateComplete,this.transitionToken!==token)return}if(this.isConnected){const view=this.ownerDocument.defaultView;if(view&&await new Promise(resolve=>view.requestAnimationFrame(()=>resolve())),this.transitionToken!==token)return;const animations=this.renderRoot.querySelector('[part="popup"]')?.getAnimations({subtree:!0})??[];if(await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return}this.emit(event),this.resolveTransitionWaiters(event)}}waitForTransition(event){return new Promise(resolve=>{const waiters=this.transitionWaiters.get(event)??new Set;waiters.add(resolve),this.transitionWaiters.set(event,waiters)})}resolveTransitionWaiters(event){const waiters=this.transitionWaiters.get(event);if(waiters){this.transitionWaiters.delete(event);for(const resolve of waiters)resolve()}}connectedCallback(){super.connectedCallback(),this.syncExternalDescription(),this.bindVisibilityListener(),this.syncInteractionListeners(),this.syncValidatorAttributeObserver(),this.syncCustomStates(),this.hasUpdated&&this.open&&queueMicrotask(()=>this.reconnectOpenPopup())}clear(){!this.value||this.liveDisabled||this.readonly||(this.touched=!0,this._appliedPreset=void 0,this.value="",this.emit("lr-clear"),this.inputRelayedSinceCommit=!1,dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),dispatchNativeEvent(this,"change"))}syncInteractionListeners(){const requested=new Set((Array.isArray(this.assumeInteractionOn)?this.assumeInteractionOn:[]).filter(name=>typeof name=="string"&&name.length>0));for(const[name,listener]of this.interactionListeners)requested.has(name)||(this.removeEventListener(name,listener),this.interactionListeners.delete(name));for(const name of requested){if(this.interactionListeners.has(name))continue;const listener=()=>{this.touched=!0,this.syncCustomStates()};this.addEventListener(name,listener),this.interactionListeners.set(name,listener)}}syncValidatorAttributeObserver(){this.disconnectValidatorAttributeObserver();const owner=this.ownerDocument.defaultView,MutationObserverCtor=owner?.MutationObserver;if(!this.isConnected||!owner||typeof MutationObserverCtor!="function")return;const attributes=new Set;for(const validator of Array.isArray(this.validators)?this.validators:[]){if(typeof validator!="object"||validator===null||!("checkValidity"in validator))continue;let observed;try{observed=validator.observedAttributes}catch{continue}if(Array.isArray(observed))for(const name of observed)typeof name=="string"&&name.length>0&&attributes.add(name)}if(attributes.size===0)return;const binding={},observer=new MutationObserverCtor(()=>{this.validatorAttributeObserver!==binding||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.updateValidity(),this.validityRevision++)});binding.observer=observer,binding.owner=owner;try{observer.observe(this,{attributes:!0,attributeFilter:[...attributes]}),this.validatorAttributeObserver=binding}catch{observer.disconnect()}}disconnectValidatorAttributeObserver(){const binding=this.validatorAttributeObserver;this.validatorAttributeObserver=void 0,binding?.observer.disconnect()}syncCustomStates(){setCustomState(this.internals,"blank",this.value===""),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"open",this.open),setCustomState(this.internals,"range",this.mode==="range")}disconnectedCallback(){this.externalDescription?.release(),this.externalDescription=void 0,this.transitionToken++,this.cleanupFn?.(),this.cleanupFn=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindVisibilityListener(),this.unbindDocumentPointer(),this.disconnectValidatorAttributeObserver(),this.restorePopupFocusOnClose=!1,this.resolveTransitionWaiters("lr-after-show"),this.resolveTransitionWaiters("lr-after-hide");for(const[name,listener]of this.interactionListeners)this.removeEventListener(name,listener);this.interactionListeners.clear(),this.enterCommittedText=null,this.inputRelayedSinceCommit=!1,this.open=!1,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.externalDescription?.release(),this.externalDescription=void 0,this.syncExternalDescription(),this.cleanupFn?.(),this.cleanupFn=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindVisibilityListener(),this.unbindDocumentPointer(),this.disconnectValidatorAttributeObserver()}syncExternalDescription(){if(!this.isConnected)return;const input=this.renderRoot?.querySelector("input")??null;this.externalDescription?this.externalDescription.update(input):this.externalDescription=acquireNativeControlDescription(this,input,()=>this.localDescriptionIds)}updated(changed){if(super.updated(changed),this.syncExternalDescription(),(changed.has("disabledDates")||changed.has("disabledDaysOfWeek")||changed.has("isDateDisabled")||changed.has("minRange")||changed.has("maxRange")||changed.has("today")||changed.has("validators"))&&this.updateValidity(),(changed.has("open")||this.open&&(changed.has("placement")||changed.has("distance")))&&(this.cleanupFn?.(),this.cleanupFn=void 0,this.open&&this.isConnected)){const anchor=this.renderRoot.querySelector('[part="input-wrapper"]'),popup=this.renderRoot.querySelector('[part="popup"]');anchor&&popup&&(this.cleanupFn=place(anchor,popup,{placement:normalizeDateInputPlacement(this.placement),offset:finiteNumber(this.distance,0),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")}))}if(changed.has("open")){if(this.open&&this.isConnected)this.renderRoot.querySelector('[part="popup"]')&&(this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="popup"]'),onEscape:()=>{this.hide(!0)}}));else if(!this.open){const popup=this.renderRoot.querySelector('[part="popup"]'),focusWasInsidePopup=popup!==null&&composedContains(popup,deepActiveElement(this.ownerDocument));this.overlayHandle?.deactivate({restoreFocus:this.restorePopupFocusOnClose||focusWasInsidePopup}),this.overlayHandle=void 0,this.restorePopupFocusOnClose=!1}}changed.has("assumeInteractionOn")&&this.syncInteractionListeners(),changed.has("validators")&&this.syncValidatorAttributeObserver(),this.syncCustomStates(),(changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("mode")||changed.has("min")||changed.has("max")||changed.has("readonly")||changed.has("disablePast")||changed.has("disableFuture")||changed.has("disabledDates")||changed.has("disabledDaysOfWeek")||changed.has("minRange")||changed.has("maxRange")||changed.has("validators")||changed.has("typedBadInput")||changed.has("validityRevision"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}applyTypedText(raw){this.enterCommittedText=null;const trimmed=raw.trim();if(!trimmed)return this.value!==""&&(this._appliedPreset=void 0),this.value="",!0;const parsed=this.mode==="range"?this.parseRangeText(trimmed):this.parseSingleText(trimmed);return parsed?(parsed!==this.value&&(this._appliedPreset=void 0),this.value=parsed,!0):(this.inputElement&&(this.inputElement.value=this.displayText),this.setTypedBadInput(!0),this.updateValidity(),!1)}parseOneDate(raw){if(raw=normalizeLocalizedDateText(raw,this.effectiveLocale),/^\d{4}-\d{2}-\d{2}$/.test(raw))return parseISO(raw);const ambiguous=/^(\d{1,4})[/.-](\d{1,4})[/.-](\d{1,4})$/.exec(raw);if(ambiguous){const[,g1,g2,g3]=ambiguous;if(g1.length===4)return parseISO(`${g1}-${g2.padStart(2,"0")}-${g3.padStart(2,"0")}`);const order=localeDateOrder(this.effectiveLocale),values=[Number(g1),Number(g2),Number(g3)],fields={};if(order.forEach((type,i)=>{fields[type]=values[i]}),fields.day!=null&&fields.month!=null&&fields.year!=null){const year=fields.year<100?2e3+fields.year:fields.year;return parseISO(`${String(year).padStart(4,"0")}-${String(fields.month).padStart(2,"0")}-${String(fields.day).padStart(2,"0")}`)}}const timestamp=Date.parse(raw);return Number.isNaN(timestamp)?null:new Date(timestamp)}parseSingleText(raw){const parsed=this.parseOneDate(raw);return parsed?formatISO(parsed):null}localizedRangeSeparator(){const formatter=dateTimeFormat(this.effectiveLocale,{year:"numeric",month:"numeric",day:"numeric"});try{const parts=formatter.formatRangeToParts(localDate(2026,0,2),localDate(2026,0,3)),firstEnd=parts.findIndex(part=>part.source==="endRange");let lastStart=-1;for(let index=0;index<firstEnd;index++)parts[index]?.source==="startRange"&&(lastStart=index);const separator=parts.slice(lastStart+1,firstEnd).map(part=>part.value).join("");return normalizeLocalizedDateText(separator,this.effectiveLocale)||"–"}catch{return"–"}}parseRangeText(raw){if(raw=normalizeLocalizedDateText(raw,this.effectiveLocale),raw===normalizeLocalizedDateText(this.displayText,this.effectiveLocale)&&this.value.includes("/"))return this.normalizeCommittedValue(this.value);if(/^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/.test(raw)){const[a,b]=raw.split("/"),from2=parseISO(a),to2=parseISO(b);return!from2||!to2?null:from2<=to2?raw:`${b}/${a}`}const separator=this.localizedRangeSeparator(),idx=raw.indexOf(separator);if(idx===-1)return null;const from=this.parseOneDate(raw.slice(0,idx).trim()),to=this.parseOneDate(raw.slice(idx+separator.length).trim());return!from||!to?null:from<=to?`${formatISO(from)}/${formatISO(to)}`:`${formatISO(to)}/${formatISO(from)}`}click(){this.liveDisabled||this.inputElement?.click()}focus(options){this.liveDisabled||this.inputElement?.focus(options)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(start,end,direction){this.inputElement?.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){const input=this.inputElement;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.applyTypedText(input.value))}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formResetCallback(){super.formResetCallback(),this.touched=!1,this._appliedPreset=void 0}formDisabledCallback(disabled){Object.getPrototypeOf(LyraDateInput.prototype).formDisabledCallback.call(this,disabled),disabled&&this.hide(),this.syncCustomStates()}render(){const hasValue=this.value.length>0,hasHint=this.withHint||this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,hasLabel=this.withLabel||this.hasLabelSlot||(this.label??"").length>0,invalid=hasError||this.touched&&!this.internals.validity.valid,describedBy=this.localDescriptionIds=[hasError?"date-input-error":"",hasHint?"date-input-hint":""].filter(Boolean).join(" "),dynamicDaySlots=[...new Set(Array.from(this.children??[]).map(child=>child.getAttribute("slot")??"").filter(name=>/^day-\d{4}-\d{2}-\d{2}$/.test(name)))];return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{observeReactivePropertyWrites}from"../../../internal/reactive-property-writes.js";import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon,calendarIcon,chevronIcon}from"../../../internal/icons.js";import{activateNonmodalOverlay,composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{setCustomState}from"../../../internal/custom-states.js";import{finiteCount,finiteNumber}from"../../../internal/numbers.js";import{isDateObject}from"../../../internal/dom-guards.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dateTimeFormat,parseISO,formatISO,localDate,utcDate,normalizeCalendarMonths,normalizeWeekdayFormat}from"./calendar-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./date-input.styles.js";import"./date-picker.class.js";import"./date-picker.class.js";import{literalSetConverter,spellcheckFromAttributeConverter as spellcheckConverter}from"../../../internal/converters.js";import{isImplicitSubmission,submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_chooseDate,LYRA_DEFAULT_clear,LYRA_DEFAULT_date,LYRA_DEFAULT_dateInputFutureDisabled,LYRA_DEFAULT_dateInputInvalid,LYRA_DEFAULT_dateInputMaxMessage,LYRA_DEFAULT_dateInputMinMessage,LYRA_DEFAULT_dateInputPastDisabled,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_openCalendar}from"../../../internal/default-strings.generated.js";function localeDateOrder(locale){try{const order=dateTimeFormat(locale,{year:"numeric",month:"2-digit",day:"2-digit"}).formatToParts(new Date(2026,0,2)).filter(p=>p.type==="day"||p.type==="month"||p.type==="year").map(p=>p.type);return order.length===3?order:["month","day","year"]}catch{return["month","day","year"]}}const BIDI_FORMATTING_MARKS=/[\u061c\u200e\u200f\u202a-\u202e\u2066-\u2069]/g;function normalizeLocalizedDateText(raw,locale){let normalized=raw.replace(BIDI_FORMATTING_MARKS,"");try{const formatter=getNumberFormat(locale||void 0,{useGrouping:!1});for(let digit=0;digit<=9;digit++){const localized=formatter.format(digit).replace(BIDI_FORMATTING_MARKS,"");localized&&localized!==String(digit)&&(normalized=normalized.split(localized).join(String(digit)))}}catch{}return normalized.trim()}const monthsConverter={fromAttribute:normalizeCalendarMonths,toAttribute:normalizeCalendarMonths},weekdayFormatConverter={fromAttribute:normalizeWeekdayFormat,toAttribute:normalizeWeekdayFormat},APPEARANCE=literalSetConverter(["accent","filled","outlined","filled-outlined","plain"],"outlined"),placements=new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]);function normalizeDateInputPlacement(value){return typeof value=="string"&&placements.has(value)?value:"bottom-start"}const placementConverter={fromAttribute:normalizeDateInputPlacement,toAttribute:normalizeDateInputPlacement};function normalizeDateInputPageBy(value){return value==="single"?"single":"months"}const pageByConverter={fromAttribute:normalizeDateInputPageBy,toAttribute:normalizeDateInputPageBy},VALIDITY_FLAG_KEYS=new Set(["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"]);function isValidityFlagKey(value){return typeof value=="string"&&VALIDITY_FLAG_KEYS.has(value)}class LyraDateInputBase extends LyraElement{}class LyraDateInput extends FormAssociated(LyraDateInputBase){static{this.defaultStrings={...super.defaultStrings,chooseDate:LYRA_DEFAULT_chooseDate,clear:LYRA_DEFAULT_clear,date:LYRA_DEFAULT_date,dateInputFutureDisabled:LYRA_DEFAULT_dateInputFutureDisabled,dateInputInvalid:LYRA_DEFAULT_dateInputInvalid,dateInputMaxMessage:LYRA_DEFAULT_dateInputMaxMessage,dateInputMinMessage:LYRA_DEFAULT_dateInputMinMessage,dateInputPastDisabled:LYRA_DEFAULT_dateInputPastDisabled,fieldRequired:LYRA_DEFAULT_fieldRequired,openCalendar:LYRA_DEFAULT_openCalendar}}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={mode:{reflect:!0,noAccessor:!0},min:{reflect:!0,noAccessor:!0},max:{reflect:!0,noAccessor:!0},readonly:{type:Boolean,reflect:!0,noAccessor:!0},disablePast:{type:Boolean,attribute:"disable-past",reflect:!0,noAccessor:!0},disableFuture:{type:Boolean,attribute:"disable-future",reflect:!0,noAccessor:!0}}}get appearance(){return this._appearance}set appearance(next){const normalized=APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;this._appearance=normalized,normalized!==old&&this.requestUpdate("appearance",old)}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!this.readonly&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this.requestUpdate("open",old)}get appliedPreset(){return this._appliedPreset}static get observedAttributes(){const attributes=super.observedAttributes;return observeReactivePropertyWrites(this.prototype,["clearLabel","openLabel","dialogLabel"],(instance,name,value)=>{const authored=value!=null;let ownershipChanged=!1;switch(name){case"clearLabel":if(instance.clearLabelAuthored===void 0)return;ownershipChanged=authored!==instance.clearLabelAuthored,instance.clearLabelAuthored=authored;break;case"openLabel":if(instance.openLabelAuthored===void 0)return;ownershipChanged=authored!==instance.openLabelAuthored,instance.openLabelAuthored=authored;break;case"dialogLabel":if(instance.dialogLabelAuthored===void 0)return;ownershipChanged=authored!==instance.dialogLabelAuthored,instance.dialogLabelAuthored=authored;break}ownershipChanged&&instance.requestUpdate()}),attributes}constructor(){super(),this._appearance="outlined",this.withClear=!1,this.withHint=!1,this.withLabel=!1,this.size="m",this.pill=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.accessibleLabel=null,this.locale="",this.months=1,this.firstDayOfWeek="auto",this.weekdayFormat="short",this.presets=Object.freeze([]),this.withOutsideDays=!1,this.withWeekNumbers=!1,this.disabledDates="",this.disabledDaysOfWeek="",this.minRange=0,this.maxRange=0,this.pageBy="months",this.today="",this.distance=0,this.placement="bottom-start",this.assumeInteractionOn=["input"],this.validators=[],this.clearLabel="",this.clearLabelAuthored=!1,this.openLabel="",this.openLabelAuthored=!1,this.dialogLabel="Choose date",this.dialogLabelAuthored=!1,this.enterCommittedText=null,this.inputRelayedSinceCommit=!1,this.restorePopupFocusOnClose=!1,this.popupHidden=!0,this.popupPositioned=!1,this.transitionToken=0,this.transitionWaiters=new Map,this.interactionListeners=new Map,this.localDescriptionIds="",this.inputId=nextId("date-input"),this.popupId=nextId("date-popup"),this.touched=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.validityRevision=0,this._mode="single",this._min="",this._max="",this._open=!1,this._readonly=!1,this._disablePast=!1,this._disableFuture=!1,this.typedBadInput=!1,this.now=()=>new Date,this.onVisibilityChange=()=>{this.ownerDocument.visibilityState==="visible"&&(this.updateValidity(),this.validityRevision++)},this.onDocPointer=e=>{e.composedPath().includes(this)||this.hide(!1)},this.onInputChange=e=>{if(e.stopPropagation(),this.liveDisabled)return;const raw=e.target.value;if(this.enterCommittedText!==null&&(raw===this.enterCommittedText||raw===this.displayText))return;this.enterCommittedText=null,this.applyTypedText(raw)?(this.inputRelayedSinceCommit||dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.inputRelayedSinceCommit=!1,relayNativeEvent(this,e)):this.inputRelayedSinceCommit=!1},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.inputRelayedSinceCommit=!0,relayNativeEvent(this,event))},this.onInputKey=e=>{if(e.altKey&&e.key==="ArrowDown"){e.preventDefault(),this.show();return}if(this.liveDisabled||this.readonly||!isImplicitSubmission(e))return;const input=this.inputElement;if(input&&input.value!==this.displayText){const raw=input.value;this.applyTypedText(raw)?(this.inputRelayedSinceCommit||dispatchNativeInputEvent(this,{inputType:"insertReplacementText"}),this.inputRelayedSinceCommit=!1,dispatchNativeEvent(this,"change")):this.inputRelayedSinceCommit=!1,this.enterCommittedText=raw}submitOnEnter(this,e)},this.onInputBlur=event=>{this.liveDisabled||(this.touched=!0),relayNativeEvent(this,event)},this.onInputFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},this.onPickerInput=e=>{if(e.stopPropagation(),this.liveDisabled)return;const picker=e.target;this.value=picker.value,this._appliedPreset=picker.appliedPreset,this.inputRelayedSinceCommit=!1,relayNativeEvent(this,e)},this.onPickerChange=e=>{if(e.stopPropagation(),this.liveDisabled)return;const picker=e.target;this.value=picker.value,this._appliedPreset=picker.appliedPreset,relayNativeEvent(this,e),this.hide(!0)},this.addEventListener("invalid",()=>{this.touched=!0})}get mode(){return this._mode}set mode(next){const old=this._mode;this._mode=next==="range"?"range":"single",this.internals.setFormValue(this.isIncompleteRangeValue(this.value)?"":this.value),this.updateValidity(),this.syncCustomStates(),this.requestUpdate("mode",old)}get min(){return this._min}set min(next){const old=this._min;this._min=next??"",this.updateValidity(),this.requestUpdate("min",old)}get max(){return this._max}set max(next){const old=this._max;this._max=next??"",this.updateValidity(),this.requestUpdate("max",old)}get readonly(){return this._readonly}set readonly(next){const old=this._readonly;this._readonly=!!next,this.toggleAttribute("readonly",this._readonly),this._readonly&&this.hide(),this.updateValidity(),this.requestUpdate("readonly",old)}get disabled(){return super.disabled}set disabled(next){super.disabled=next,next&&this.hide(),this.syncCustomStates()}get disablePast(){return this._disablePast}set disablePast(next){const old=this._disablePast;this._disablePast=!!next,this.updateValidity(),this.requestUpdate("disablePast",old)}get disableFuture(){return this._disableFuture}set disableFuture(next){const old=this._disableFuture;this._disableFuture=!!next,this.updateValidity(),this.requestUpdate("disableFuture",old)}get input(){return this.inputElement}get selectionStart(){return this.inputElement?.selectionStart??null}set selectionStart(value){this.inputElement&&(this.inputElement.selectionStart=value??0)}get selectionEnd(){return this.inputElement?.selectionEnd??null}set selectionEnd(value){this.inputElement&&(this.inputElement.selectionEnd=value??0)}get selectionDirection(){return this.inputElement?.selectionDirection??null}set selectionDirection(value){this.inputElement&&(this.inputElement.selectionDirection=value??"none")}get value(){return super.value}set value(next){this.setTypedBadInput(!1);const normalized=this.normalizeCommittedValue(next??"");super.value=normalized,this.internals.setFormValue(this.isIncompleteRangeValue(normalized)?"":normalized),this.syncCustomStates()}get valueAsDate(){return this.mode==="single"?this.parseStrictISO(this.value):null}set valueAsDate(next){this.value=isDateObject(next)&&Number.isFinite(next.getTime())?formatISO(next):""}get valueAsRange(){if(this.mode!=="range")return{from:null,to:null};const[from="",to=""]=this.value.split("/");return{from:this.parseStrictISO(from),to:this.parseStrictISO(to)}}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 validationTarget(){return this.validationTargetOverride??this.inputElement}set validationTarget(next){const old=this.validationTarget;this.validationTargetOverride=next??void 0,this.requestUpdate("validationTarget",old)}[VALIDITY_ANCHOR](){return this.validationTarget}resetValidity(){this.setCustomValidity(""),this.updateValidity()}setTypedBadInput(next){const old=this.typedBadInput;this.typedBadInput=next,old!==next&&this.requestUpdate("typedBadInput",old)}parseStrictISO(value){return/^\d{4}-\d{2}-\d{2}$/.test(value)?parseISO(value):null}normalizeCommittedValue(value){if(value==="")return"";const parts=value.split("/");if(parts.length!==1&&parts.length!==2)return"";const dates=parts.map(part=>this.parseStrictISO(part));return dates.some(date=>date===null)?"":parts.length===2&&dates[0]>dates[1]?`${parts[1]}/${parts[0]}`:value}isIncompleteRangeValue(value){return this.mode==="range"&&value!==""&&!value.includes("/")}valueDates(value){const parts=value.split("/"),expectedParts=this.mode==="range"&&parts.length===2?2:1;if(parts.length!==expectedParts)return null;const dates=parts.map(part=>this.parseStrictISO(part));return dates.some(date=>date===null)?null:dates}configuredDisabledDateKeys(){const values=Array.isArray(this.disabledDates)?this.disabledDates:String(this.disabledDates||"").split(/[\s,]+/);return new Set(values.map(value=>isDateObject(value)?value:parseISO(String(value))).filter(value=>isDateObject(value)&&Number.isFinite(value.getTime())).map(value=>formatISO(value)))}configuredDisabledWeekdays(){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};return new Set(String(this.disabledDaysOfWeek||"").toLowerCase().split(/[\s,]+/).filter(Boolean).map(value=>names[value]??(/^[0-6]$/.test(value)?Number(value):-1)).filter(value=>value>=0))}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}validatorResult(){for(const validator of Array.isArray(this.validators)?this.validators:[]){let result;try{if(typeof validator=="object"&&validator!==null&&"checkValidity"in validator){const checked=validator.checkValidity(this);if(checked?.isValid===!0)continue;const flags={};for(const key of Array.isArray(checked?.invalidKeys)?checked.invalidKeys:[])isValidityFlagKey(key)&&(flags[key]=!0);Object.values(flags).some(Boolean)||(flags.customError=!0);let message=typeof checked?.message=="string"?checked.message:"";return!message&&typeof validator.message=="string"&&(message=validator.message),!message&&typeof validator.message=="function"&&(message=validator.message(this)),{flags,message:message||this.localize("dateInputInvalid")}}result=typeof validator=="function"?validator(this.value,this):validator?.validate(this.value,this)}catch{return{flags:{customError:!0},message:this.localize("dateInputInvalid")}}if(!(result===void 0||result===!0)){if(typeof result=="string")return{flags:{customError:!0},message:result};if(result===!1)return{flags:{customError:!0},message:this.localize("dateInputInvalid")};if(result&&typeof result=="object"&&Object.values(result).some(Boolean))return{flags:result,message:this.localize("dateInputInvalid")}}}return{}}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}const flags={};let underflowMessage="",overflowMessage="";const incompleteRange=this.isIncompleteRangeValue(this.value);if(this.required&&(this.value===""||incompleteRange)&&(flags.valueMissing=!0),this.typedBadInput&&(flags.badInput=!0),this.value!==""){const dates=this.valueDates(this.value);if(!dates)flags.badInput=!0;else{const min=this.parseStrictISO(this.min),max=this.parseStrictISO(this.max),now=this.parseStrictISO(this.today)??this.now(),today=localDate(now.getFullYear(),now.getMonth(),now.getDate());min!==null&&dates.some(date=>date<min)&&(flags.rangeUnderflow=!0,underflowMessage=this.localize("dateInputMinMessage",void 0,{min:this.min})),this.disablePast&&dates.some(date=>date<today)&&(flags.rangeUnderflow=!0,underflowMessage||=this.localize("dateInputPastDisabled")),max!==null&&dates.some(date=>date>max)&&(flags.rangeOverflow=!0,overflowMessage=this.localize("dateInputMaxMessage",void 0,{max:this.max})),this.disableFuture&&dates.some(date=>date>today)&&(flags.rangeOverflow=!0,overflowMessage||=this.localize("dateInputFutureDisabled"));const disabledDates=this.configuredDisabledDateKeys(),disabledWeekdays=this.configuredDisabledWeekdays();let configuredDisabled=dates.some(date=>disabledDates.has(formatISO(date))||disabledWeekdays.has(date.getDay()));if(!configuredDisabled&&this.isDateDisabled)try{configuredDisabled=dates.some(date=>!!this.isDateDisabled?.(new Date(date.getTime())))}catch{configuredDisabled=!1}if(configuredDisabled&&(flags.customError=!0),this.mode==="range"&&dates.length===2){const length=this.rangeLength(dates[0],dates[1]),minimum=finiteCount(this.minRange,0),maximum=finiteCount(this.maxRange,0);minimum>0&&length<minimum&&(flags.rangeUnderflow=!0,underflowMessage||=this.localize("dateInputInvalid")),maximum>0&&length>maximum&&(flags.rangeOverflow=!0,overflowMessage||=this.localize("dateInputInvalid"))}}}const configured=this.validatorResult();configured.flags&&Object.assign(flags,configured.flags);let message="";configured.message?message=configured.message:flags.badInput||flags.customError?message=this.localize("dateInputInvalid"):flags.rangeUnderflow?message=underflowMessage:flags.rangeOverflow?message=overflowMessage:flags.valueMissing&&(message=this.localize("fieldRequired")),this[SET_ANCHORED_VALIDITY](flags,message)}checkValidity(){return this.updateValidity(),super.checkValidity()}reportValidity(){return this.updateValidity(),super.reportValidity()}bindVisibilityListener(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.visibilityListenerDocument===ownerDocument&&this.visibilityListener)return;this.unbindVisibilityListener();const listener=()=>{this.visibilityListener!==listener||this.visibilityListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onVisibilityChange()};this.visibilityListenerDocument=ownerDocument,this.visibilityListener=listener,ownerDocument.addEventListener("visibilitychange",listener)}unbindVisibilityListener(){this.visibilityListenerDocument&&this.visibilityListener&&this.visibilityListenerDocument.removeEventListener("visibilitychange",this.visibilityListener),this.visibilityListenerDocument=void 0,this.visibilityListener=void 0}get displayText(){const parts=this.value.split("/"),from=parseISO(parts[0]),to=parseISO(parts[1]??"");if(!from)return"";const formatter=dateTimeFormat(this.effectiveLocale,{year:"numeric",month:"numeric",day:"numeric"}),fmt=d=>formatter.format(d);if(this.mode!=="range"||!to)return fmt(from);try{return formatter.formatRange(from,to)}catch{return`${fmt(from)} – ${fmt(to)}`}}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end")),changed.has("open")&&(this.open&&this.isConnected?this.bindDocumentPointer():this.unbindDocumentPointer(),this.popupPositioned=!1),this.open&&(this.popupHidden=!1)}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}show(){if(this.open||this.liveDisabled||this.readonly||this.emit("lr-show",null,{cancelable:!0}).defaultPrevented)return Promise.resolve();this.resolveTransitionWaiters("lr-after-hide");const settled=this.waitForTransition("lr-after-show");return this.open=!0,this.settleTransition("lr-after-show"),settled}hide(restoreFocus=!1){if(!this.open||this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented)return Promise.resolve();this.resolveTransitionWaiters("lr-after-show");const settled=this.waitForTransition("lr-after-hide");return this.restorePopupFocusOnClose||=restoreFocus,this.open=!1,this.settleTransition("lr-after-hide"),settled}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener),this.pointerListenerDocument=void 0,this.pointerListener=void 0}reconnectOpenPopup(){if(!this.isConnected||!this.open)return;this.bindDocumentPointer(),this.cleanupFn?.();const anchor=this.renderRoot.querySelector('[part="input-wrapper"]'),popup=this.renderRoot.querySelector('[part="popup"]');if(!(!anchor||!popup)){this.cleanupFn=place(anchor,popup,{placement:normalizeDateInputPlacement(this.placement),offset:finiteNumber(this.distance,0),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});{const operation=this.cleanupFn;operation.ready.then(positioned=>{positioned&&this.cleanupFn===operation&&this.open&&this.isConnected&&(this.popupPositioned=!0)})}this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="popup"]'),onEscape:()=>{this.hide(!0)}})}}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(event==="lr-after-show"){const positioned=await waitForDeferredPlacement(()=>this.cleanupFn);if(this.transitionToken!==token||!this.open)return;if(!positioned){this.resolveTransitionWaiters("lr-after-show"),this.open=!1;return}if(await this.updateComplete,this.transitionToken!==token)return}if(this.isConnected){const view=this.ownerDocument.defaultView;if(view&&await new Promise(resolve=>view.requestAnimationFrame(()=>resolve())),this.transitionToken!==token)return;const animations=this.renderRoot.querySelector('[part="popup"]')?.getAnimations({subtree:!0})??[];if(await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return}event==="lr-after-hide"&&(this.popupHidden=!0,await this.updateComplete,this.transitionToken!==token)||(this.emit(event),this.resolveTransitionWaiters(event))}}waitForTransition(event){return new Promise(resolve=>{const waiters=this.transitionWaiters.get(event)??new Set;waiters.add(resolve),this.transitionWaiters.set(event,waiters)})}resolveTransitionWaiters(event){const waiters=this.transitionWaiters.get(event);if(waiters){this.transitionWaiters.delete(event);for(const resolve of waiters)resolve()}}connectedCallback(){super.connectedCallback(),this.syncExternalDescription(),this.bindVisibilityListener(),this.syncInteractionListeners(),this.syncValidatorAttributeObserver(),this.syncCustomStates(),this.hasUpdated&&this.open&&queueMicrotask(()=>this.reconnectOpenPopup())}clear(){!this.value||this.liveDisabled||this.readonly||(this.touched=!0,this._appliedPreset=void 0,this.value="",this.emit("lr-clear"),this.inputRelayedSinceCommit=!1,dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"}),dispatchNativeEvent(this,"change"))}syncInteractionListeners(){const requested=new Set((Array.isArray(this.assumeInteractionOn)?this.assumeInteractionOn:[]).filter(name=>typeof name=="string"&&name.length>0));for(const[name,listener]of this.interactionListeners)requested.has(name)||(this.removeEventListener(name,listener),this.interactionListeners.delete(name));for(const name of requested){if(this.interactionListeners.has(name))continue;const listener=()=>{this.touched=!0,this.syncCustomStates()};this.addEventListener(name,listener),this.interactionListeners.set(name,listener)}}syncValidatorAttributeObserver(){this.disconnectValidatorAttributeObserver();const owner=this.ownerDocument.defaultView,MutationObserverCtor=owner?.MutationObserver;if(!this.isConnected||!owner||typeof MutationObserverCtor!="function")return;const attributes=new Set;for(const validator of Array.isArray(this.validators)?this.validators:[]){if(typeof validator!="object"||validator===null||!("checkValidity"in validator))continue;let observed;try{observed=validator.observedAttributes}catch{continue}if(Array.isArray(observed))for(const name of observed)typeof name=="string"&&name.length>0&&attributes.add(name)}if(attributes.size===0)return;const binding={},observer=new MutationObserverCtor(()=>{this.validatorAttributeObserver!==binding||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.updateValidity(),this.validityRevision++)});binding.observer=observer,binding.owner=owner;try{observer.observe(this,{attributes:!0,attributeFilter:[...attributes]}),this.validatorAttributeObserver=binding}catch{observer.disconnect()}}disconnectValidatorAttributeObserver(){const binding=this.validatorAttributeObserver;this.validatorAttributeObserver=void 0,binding?.observer.disconnect()}syncCustomStates(){setCustomState(this.internals,"blank",this.value===""),setCustomState(this.internals,"disabled",this.effectiveDisabled),setCustomState(this.internals,"open",this.open),setCustomState(this.internals,"range",this.mode==="range")}disconnectedCallback(){this.popupHidden=!0,this.externalDescription?.release(),this.externalDescription=void 0,this.transitionToken++,this.cleanupFn?.(),this.cleanupFn=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindVisibilityListener(),this.unbindDocumentPointer(),this.disconnectValidatorAttributeObserver(),this.restorePopupFocusOnClose=!1,this.resolveTransitionWaiters("lr-after-show"),this.resolveTransitionWaiters("lr-after-hide");for(const[name,listener]of this.interactionListeners)this.removeEventListener(name,listener);this.interactionListeners.clear(),this.enterCommittedText=null,this.inputRelayedSinceCommit=!1,this.open=!1,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.externalDescription?.release(),this.externalDescription=void 0,this.syncExternalDescription(),this.cleanupFn?.(),this.cleanupFn=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindVisibilityListener(),this.unbindDocumentPointer(),this.disconnectValidatorAttributeObserver()}syncExternalDescription(){if(!this.isConnected)return;const input=this.renderRoot?.querySelector("input")??null;this.externalDescription?this.externalDescription.update(input):this.externalDescription=acquireNativeControlDescription(this,input,()=>this.localDescriptionIds)}updated(changed){if(super.updated(changed),this.syncExternalDescription(),(changed.has("disabledDates")||changed.has("disabledDaysOfWeek")||changed.has("isDateDisabled")||changed.has("minRange")||changed.has("maxRange")||changed.has("today")||changed.has("validators"))&&this.updateValidity(),(changed.has("open")||this.open&&(changed.has("placement")||changed.has("distance")))&&(this.cleanupFn?.(),this.cleanupFn=void 0,this.open&&this.isConnected)){const anchor=this.renderRoot.querySelector('[part="input-wrapper"]'),popup=this.renderRoot.querySelector('[part="popup"]');if(anchor&&popup){this.cleanupFn=place(anchor,popup,{placement:normalizeDateInputPlacement(this.placement),offset:finiteNumber(this.distance,0),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});const operation=this.cleanupFn;operation.ready.then(positioned=>{positioned&&this.cleanupFn===operation&&this.open&&this.isConnected&&(this.popupPositioned=!0)})}}if(changed.has("open")){if(this.open&&this.isConnected)this.renderRoot.querySelector('[part="popup"]')&&(this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="popup"]'),onEscape:()=>{this.hide(!0)}}));else if(!this.open){const popup=this.renderRoot.querySelector('[part="popup"]'),focusWasInsidePopup=popup!==null&&composedContains(popup,deepActiveElement(this.ownerDocument));this.overlayHandle?.deactivate({restoreFocus:this.restorePopupFocusOnClose||focusWasInsidePopup}),this.overlayHandle=void 0,this.restorePopupFocusOnClose=!1}}changed.has("assumeInteractionOn")&&this.syncInteractionListeners(),changed.has("validators")&&this.syncValidatorAttributeObserver(),this.syncCustomStates(),(changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("mode")||changed.has("min")||changed.has("max")||changed.has("readonly")||changed.has("disablePast")||changed.has("disableFuture")||changed.has("disabledDates")||changed.has("disabledDaysOfWeek")||changed.has("minRange")||changed.has("maxRange")||changed.has("validators")||changed.has("typedBadInput")||changed.has("validityRevision"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}applyTypedText(raw){this.enterCommittedText=null;const trimmed=raw.trim();if(!trimmed)return this.value!==""&&(this._appliedPreset=void 0),this.value="",!0;const parsed=this.mode==="range"?this.parseRangeText(trimmed):this.parseSingleText(trimmed);return parsed?(parsed!==this.value&&(this._appliedPreset=void 0),this.value=parsed,!0):(this.inputElement&&(this.inputElement.value=this.displayText),this.setTypedBadInput(!0),this.updateValidity(),!1)}parseOneDate(raw){if(raw=normalizeLocalizedDateText(raw,this.effectiveLocale),/^\d{4}-\d{2}-\d{2}$/.test(raw))return parseISO(raw);const ambiguous=/^(\d{1,4})[/.-](\d{1,4})[/.-](\d{1,4})$/.exec(raw);if(ambiguous){const[,g1,g2,g3]=ambiguous;if(g1.length===4)return parseISO(`${g1}-${g2.padStart(2,"0")}-${g3.padStart(2,"0")}`);const order=localeDateOrder(this.effectiveLocale),values=[Number(g1),Number(g2),Number(g3)],fields={};if(order.forEach((type,i)=>{fields[type]=values[i]}),fields.day!=null&&fields.month!=null&&fields.year!=null){const year=fields.year<100?2e3+fields.year:fields.year;return parseISO(`${String(year).padStart(4,"0")}-${String(fields.month).padStart(2,"0")}-${String(fields.day).padStart(2,"0")}`)}}const timestamp=Date.parse(raw);return Number.isNaN(timestamp)?null:new Date(timestamp)}parseSingleText(raw){const parsed=this.parseOneDate(raw);return parsed?formatISO(parsed):null}localizedRangeSeparator(){const formatter=dateTimeFormat(this.effectiveLocale,{year:"numeric",month:"numeric",day:"numeric"});try{const parts=formatter.formatRangeToParts(localDate(2026,0,2),localDate(2026,0,3)),firstEnd=parts.findIndex(part=>part.source==="endRange");let lastStart=-1;for(let index=0;index<firstEnd;index++)parts[index]?.source==="startRange"&&(lastStart=index);const separator=parts.slice(lastStart+1,firstEnd).map(part=>part.value).join("");return normalizeLocalizedDateText(separator,this.effectiveLocale)||"–"}catch{return"–"}}parseRangeText(raw){if(raw=normalizeLocalizedDateText(raw,this.effectiveLocale),raw===normalizeLocalizedDateText(this.displayText,this.effectiveLocale)&&this.value.includes("/"))return this.normalizeCommittedValue(this.value);if(/^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/.test(raw)){const[a,b]=raw.split("/"),from2=parseISO(a),to2=parseISO(b);return!from2||!to2?null:from2<=to2?raw:`${b}/${a}`}const separator=this.localizedRangeSeparator(),idx=raw.indexOf(separator);if(idx===-1)return null;const from=this.parseOneDate(raw.slice(0,idx).trim()),to=this.parseOneDate(raw.slice(idx+separator.length).trim());return!from||!to?null:from<=to?`${formatISO(from)}/${formatISO(to)}`:`${formatISO(to)}/${formatISO(from)}`}click(){this.liveDisabled||this.inputElement?.click()}focus(options){this.liveDisabled||this.inputElement?.focus(options)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(start,end,direction){this.inputElement?.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){const input=this.inputElement;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.applyTypedText(input.value))}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formResetCallback(){super.formResetCallback(),this.touched=!1,this._appliedPreset=void 0}formDisabledCallback(disabled){Object.getPrototypeOf(LyraDateInput.prototype).formDisabledCallback.call(this,disabled),disabled&&this.hide(),this.syncCustomStates()}render(){const hasValue=this.value.length>0,hasHint=this.withHint||this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,hasLabel=this.withLabel||this.hasLabelSlot||(this.label??"").length>0,invalid=hasError||this.touched&&!this.internals.validity.valid,describedBy=this.localDescriptionIds=[hasError?"date-input-error":"",hasHint?"date-input-hint":""].filter(Boolean).join(" "),dynamicDaySlots=[...new Set(Array.from(this.children??[]).map(child=>child.getAttribute("slot")??"").filter(name=>/^day-\d{4}-\d{2}-\d{2}$/.test(name)))];return html`
       <div part="date-input">
         <div part="base">
           <div part="form-control">
@@ -85,6 +85,8 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             <div
               id=${this.popupId}
               part="popup"
+              ?hidden=${this.popupHidden}
+              ?data-positioned=${this.popupPositioned}
               role="dialog"
               aria-hidden=${this.open?"false":"true"}
               aria-label=${this.dialogLabelAuthored?this.dialogLabel:this.localize("chooseDate")}
@@ -144,4 +146,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           </div>
         </div>
       </div>
-    `}}__decorate([property({converter:appearanceConverter,reflect:!0})],LyraDateInput.prototype,"appearance",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraDateInput.prototype,"open",null),__decorate([property({type:Boolean,attribute:"with-clear"})],LyraDateInput.prototype,"withClear",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraDateInput.prototype,"withHint",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraDateInput.prototype,"withLabel",void 0),__decorate([property({reflect:!0})],LyraDateInput.prototype,"size",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraDateInput.prototype,"pill",void 0),__decorate([property()],LyraDateInput.prototype,"label",void 0),__decorate([property()],LyraDateInput.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraDateInput.prototype,"errorText",void 0),__decorate([property()],LyraDateInput.prototype,"placeholder",void 0),__decorate([property({converter:spellcheckConverter})],LyraDateInput.prototype,"spellcheck",void 0),__decorate([property()],LyraDateInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraDateInput.prototype,"autoCorrect",void 0),__decorate([property()],LyraDateInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraDateInput.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraDateInput.prototype,"enterKeyHint",void 0),__decorate([property({attribute:"aria-label"})],LyraDateInput.prototype,"accessibleLabel",void 0),__decorate([property()],LyraDateInput.prototype,"locale",void 0),__decorate([property({converter:monthsConverter,reflect:!0})],LyraDateInput.prototype,"months",void 0),__decorate([property({attribute:"first-day-of-week",reflect:!0})],LyraDateInput.prototype,"firstDayOfWeek",void 0),__decorate([property({attribute:"weekday-format",converter:weekdayFormatConverter,reflect:!0})],LyraDateInput.prototype,"weekdayFormat",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"presets",void 0),__decorate([property({type:Boolean,attribute:"with-outside-days",reflect:!0})],LyraDateInput.prototype,"withOutsideDays",void 0),__decorate([property({type:Boolean,attribute:"with-week-numbers",reflect:!0})],LyraDateInput.prototype,"withWeekNumbers",void 0),__decorate([property({attribute:"disabled-dates"})],LyraDateInput.prototype,"disabledDates",void 0),__decorate([property({attribute:"disabled-days-of-week"})],LyraDateInput.prototype,"disabledDaysOfWeek",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"isDateDisabled",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"dayContent",void 0),__decorate([property({type:Number,attribute:"min-range",reflect:!0})],LyraDateInput.prototype,"minRange",void 0),__decorate([property({type:Number,attribute:"max-range",reflect:!0})],LyraDateInput.prototype,"maxRange",void 0),__decorate([property({converter:pageByConverter,attribute:"page-by",reflect:!0})],LyraDateInput.prototype,"pageBy",void 0),__decorate([property({reflect:!0})],LyraDateInput.prototype,"today",void 0),__decorate([property({type:Number,reflect:!0})],LyraDateInput.prototype,"distance",void 0),__decorate([property({converter:placementConverter,reflect:!0})],LyraDateInput.prototype,"placement",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"assumeInteractionOn",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"validators",void 0),__decorate([property({attribute:"clear-label"})],LyraDateInput.prototype,"clearLabel",void 0),__decorate([property({attribute:"open-label"})],LyraDateInput.prototype,"openLabel",void 0),__decorate([property({attribute:"dialog-label"})],LyraDateInput.prototype,"dialogLabel",void 0),__decorate([query('input[part="input"]')],LyraDateInput.prototype,"inputElement",void 0),__decorate([state()],LyraDateInput.prototype,"touched",void 0),__decorate([state()],LyraDateInput.prototype,"hasHintSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasStartSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasEndSlot",void 0),__decorate([state()],LyraDateInput.prototype,"validityRevision",void 0);export{LyraDateInput};
+    `}}__decorate([property({converter:APPEARANCE,reflect:!0})],LyraDateInput.prototype,"appearance",null),__decorate([property({type:Boolean,reflect:!0})],LyraDateInput.prototype,"open",null),__decorate([property({type:Boolean,attribute:"with-clear"})],LyraDateInput.prototype,"withClear",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraDateInput.prototype,"withHint",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraDateInput.prototype,"withLabel",void 0),__decorate([property({reflect:!0})],LyraDateInput.prototype,"size",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraDateInput.prototype,"pill",void 0),__decorate([property()],LyraDateInput.prototype,"label",void 0),__decorate([property()],LyraDateInput.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraDateInput.prototype,"errorText",void 0),__decorate([property()],LyraDateInput.prototype,"placeholder",void 0),__decorate([property({converter:spellcheckConverter})],LyraDateInput.prototype,"spellcheck",void 0),__decorate([property()],LyraDateInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"autocorrect"})],LyraDateInput.prototype,"autoCorrect",void 0),__decorate([property()],LyraDateInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraDateInput.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraDateInput.prototype,"enterKeyHint",void 0),__decorate([property({attribute:"aria-label"})],LyraDateInput.prototype,"accessibleLabel",void 0),__decorate([property()],LyraDateInput.prototype,"locale",void 0),__decorate([property({converter:monthsConverter,reflect:!0})],LyraDateInput.prototype,"months",void 0),__decorate([property({attribute:"first-day-of-week",reflect:!0})],LyraDateInput.prototype,"firstDayOfWeek",void 0),__decorate([property({attribute:"weekday-format",converter:weekdayFormatConverter,reflect:!0})],LyraDateInput.prototype,"weekdayFormat",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"presets",void 0),__decorate([property({type:Boolean,attribute:"with-outside-days",reflect:!0})],LyraDateInput.prototype,"withOutsideDays",void 0),__decorate([property({type:Boolean,attribute:"with-week-numbers",reflect:!0})],LyraDateInput.prototype,"withWeekNumbers",void 0),__decorate([property({attribute:"disabled-dates"})],LyraDateInput.prototype,"disabledDates",void 0),__decorate([property({attribute:"disabled-days-of-week"})],LyraDateInput.prototype,"disabledDaysOfWeek",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"isDateDisabled",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"dayContent",void 0),__decorate([property({type:Number,attribute:"min-range",reflect:!0})],LyraDateInput.prototype,"minRange",void 0),__decorate([property({type:Number,attribute:"max-range",reflect:!0})],LyraDateInput.prototype,"maxRange",void 0),__decorate([property({converter:pageByConverter,attribute:"page-by",reflect:!0})],LyraDateInput.prototype,"pageBy",void 0),__decorate([property({reflect:!0})],LyraDateInput.prototype,"today",void 0),__decorate([property({type:Number,reflect:!0})],LyraDateInput.prototype,"distance",void 0),__decorate([property({converter:placementConverter,reflect:!0})],LyraDateInput.prototype,"placement",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"assumeInteractionOn",void 0),__decorate([property({attribute:!1})],LyraDateInput.prototype,"validators",void 0),__decorate([property({attribute:"clear-label"})],LyraDateInput.prototype,"clearLabel",void 0),__decorate([property({attribute:"open-label"})],LyraDateInput.prototype,"openLabel",void 0),__decorate([property({attribute:"dialog-label"})],LyraDateInput.prototype,"dialogLabel",void 0),__decorate([query('input[part="input"]')],LyraDateInput.prototype,"inputElement",void 0),__decorate([state()],LyraDateInput.prototype,"popupHidden",void 0),__decorate([state()],LyraDateInput.prototype,"popupPositioned",void 0),__decorate([state()],LyraDateInput.prototype,"touched",void 0),__decorate([state()],LyraDateInput.prototype,"hasHintSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasStartSlot",void 0),__decorate([state()],LyraDateInput.prototype,"hasEndSlot",void 0),__decorate([state()],LyraDateInput.prototype,"validityRevision",void 0);export{LyraDateInput};

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-date-input-padding-block: var(--lr-form-control-padding-block); --_lr-date-input-padding-inline: var(--lr-form-control-padding-inline); --_lr-date-input-font-size: var(--lr-form-control-font-size); --_lr-date-input-gap: var(--lr-space-xs); --_lr-date-input-radius: var(--lr-form-control-radius); --_lr-date-input-fill: var(--lr-color-surface); --_lr-date-input-border-color: var(--lr-color-border); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); --_lr-date-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-date-input-radius: var(--lr-radius-pill); } [part="date-input"], [part="base"] { display: block; min-inline-size: 0; max-inline-size: 100%; } :host([appearance="filled"]) { --_lr-date-input-border-color: transparent; --_lr-date-input-fill: var(--lr-color-surface-raised); } :host([appearance="filled-outlined"]) { --_lr-date-input-fill: var(--lr-color-surface-raised); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; align-items: center; gap: var(--lr-date-input-gap, var(--_lr-date-input-gap)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; min-block-size: var( --lr-date-input-control-height, var( --lr-date-input-control-min-height, var(--_lr-date-input-control-min-height) ) ); block-size: var(--lr-date-input-control-height, auto); padding-inline: var(--lr-date-input-padding-inline, var(--_lr-date-input-padding-inline)); border: var(--lr-border-width-thin) solid var(--lr-date-input-border-color, var(--_lr-date-input-border-color)); border-radius: var(--lr-date-input-radius, var(--_lr-date-input-radius)); background: var(--lr-date-input-fill, var(--_lr-date-input-fill)); } [part="input-wrapper"]:focus-within { border-color: var( --lr-date-input-focus-border-color, var(--lr-color-brand) ); ${formControlFocusHalo} } :host(:disabled) [part="input-wrapper"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="input"] { flex: 1 1 auto; min-inline-size: 0; padding-block: var(--lr-date-input-padding-block, var(--_lr-date-input-padding-block)); border: none; outline: none; background: transparent; color: inherit; font: inherit; font-size: var(--lr-date-input-font-size, var(--_lr-date-input-font-size)); } [part="form-control-input"], [part="segment"] { display: contents; } [part="input"]::placeholder { color: var(--lr-date-input-placeholder-color, var(--lr-color-text-quiet)); } [part="start"], [part="end"] { flex: 0 1 40%; display: inline-flex; min-inline-size: 0; max-inline-size: 40%; align-items: center; color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="clear-button"], [part="expand-button"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); min-inline-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) - 2 * var(--lr-border-width-thin)))); min-block-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) - 2 * var(--lr-border-width-thin)))); line-height: var(--lr-line-height-none); font-size: var(--lr-font-size-m); } [part='expand-icon'], [part='clear-button'] > span { display: inline-flex; align-items: center; } [part="clear-button"]:hover:not(:disabled), [part="expand-button"]:hover:not(:disabled) { color: var(--lr-date-input-action-hover-color, var(--lr-color-text)); background: var(--lr-date-input-action-hover-bg, transparent); border-radius: var( --lr-date-input-action-hover-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:active:not(:disabled), [part="expand-button"]:active:not(:disabled) { color: var( --lr-date-input-action-active-color, var(--lr-date-input-action-hover-color, var(--lr-color-text)) ); background: var( --lr-date-input-action-active-bg, color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-radius: var( --lr-date-input-action-active-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:focus-visible, [part="expand-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="popup"] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition-property: opacity, transform, visibility; transition-duration: var(--hide-duration, var(--lr-transition-fast)); } :host([open]) [part="popup"] { visibility: visible; opacity: 1; transform: translateY(0); transition-duration: var(--show-duration, var(--lr-transition-fast)); } @media (prefers-reduced-motion: reduce) { [part="popup"] { transition: none !important; } } [part="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } [part="form-control"], [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-date-input-padding-block: var(--lr-form-control-padding-block); --_lr-date-input-padding-inline: var(--lr-form-control-padding-inline); --_lr-date-input-font-size: var(--lr-form-control-font-size); --_lr-date-input-gap: var(--lr-space-xs); --_lr-date-input-radius: var(--lr-form-control-radius); --_lr-date-input-fill: var(--lr-color-surface); --_lr-date-input-border-color: var(--lr-color-border); --_lr-date-input-text-color: inherit; --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); --_lr-date-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-date-input-radius: var(--lr-radius-pill); } [part="date-input"], [part="base"] { display: block; min-inline-size: 0; max-inline-size: 100%; } :host([appearance="filled"]) { --_lr-date-input-border-color: transparent; --_lr-date-input-fill: var(--lr-color-surface-raised); } :host([appearance="filled-outlined"]) { --_lr-date-input-fill: var(--lr-color-surface-raised); } :host([appearance="plain"]) { --_lr-date-input-border-color: transparent; --_lr-date-input-fill: transparent; } :host([appearance="accent"]) { --_lr-date-input-border-color: transparent; --_lr-date-input-fill: var(--lr-color-brand); --_lr-date-input-text-color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="start"], :host([appearance="accent"]) [part="end"], :host([appearance="accent"]) [part="clear-button"], :host([appearance="accent"]) [part="expand-button"], :host([appearance="accent"]) [part="input"]::placeholder { color: inherit; } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; align-items: center; gap: var(--lr-date-input-gap, var(--_lr-date-input-gap)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; min-block-size: var( --lr-date-input-control-height, var( --lr-date-input-control-min-height, var(--_lr-date-input-control-min-height) ) ); block-size: var(--lr-date-input-control-height, auto); padding-inline: var(--lr-date-input-padding-inline, var(--_lr-date-input-padding-inline)); border: var(--lr-border-width-thin) solid var(--lr-date-input-border-color, var(--_lr-date-input-border-color)); border-radius: var(--lr-date-input-radius, var(--_lr-date-input-radius)); background: var(--lr-date-input-fill, var(--_lr-date-input-fill)); color: var(--lr-date-input-text-color, var(--_lr-date-input-text-color)); } [part="input-wrapper"]:focus-within { border-color: var( --lr-date-input-focus-border-color, var(--lr-color-brand) ); ${formControlFocusHalo} } :host(:disabled) [part="input-wrapper"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="input"] { flex: 1 1 auto; min-inline-size: 0; padding-block: var(--lr-date-input-padding-block, var(--_lr-date-input-padding-block)); border: none; outline: none; background: transparent; color: inherit; font: inherit; font-size: var(--lr-date-input-font-size, var(--_lr-date-input-font-size)); } [part="form-control-input"], [part="segment"] { display: contents; } [part="input"]::placeholder { color: var(--lr-date-input-placeholder-color, var(--lr-color-text-quiet)); } [part="start"], [part="end"] { flex: 0 1 40%; display: inline-flex; min-inline-size: 0; max-inline-size: 40%; align-items: center; color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="clear-button"], [part="expand-button"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); min-inline-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) - 2 * var(--lr-border-width-thin)))); min-block-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) - 2 * var(--lr-border-width-thin)))); line-height: var(--lr-line-height-none); font-size: var(--lr-font-size-m); } [part='expand-icon'], [part='clear-button'] > span { display: inline-flex; align-items: center; } [part="clear-button"]:hover:not(:disabled), [part="expand-button"]:hover:not(:disabled) { color: var(--lr-date-input-action-hover-color, var(--lr-color-text)); background: var(--lr-date-input-action-hover-bg, transparent); border-radius: var( --lr-date-input-action-hover-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:active:not(:disabled), [part="expand-button"]:active:not(:disabled) { color: var( --lr-date-input-action-active-color, var(--lr-date-input-action-hover-color, var(--lr-color-text)) ); background: var( --lr-date-input-action-active-bg, color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-radius: var( --lr-date-input-action-active-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:focus-visible, [part="expand-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="popup"][hidden] { display: none; } [part="popup"] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition-property: opacity, transform, visibility; transition-duration: var(--hide-duration, var(--lr-transition-fast)); } :host([open]) [part="popup"][data-positioned] { visibility: visible; opacity: 1; transform: translateY(0); transition-duration: var(--show-duration, var(--lr-transition-fast)); } @media (prefers-reduced-motion: reduce) { [part="popup"] { transition: none !important; } } [part="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } [part="form-control"], [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

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

@@ -1,5 +1,12 @@
 import type{EmojiPickerGroup}from'./emoji-types.js';
 /**
+* Maps an effective locale tag (e.g. `'fr-CA'`, `'zh-Hant'`, `'pt-BR'`) to the closest
+* `emoji-picker-element-data` locale directory: an exact match (case-insensitive), then the bare
+* base language, else `'en'` -- the peer's own default and this loader's original, locale-blind
+* behavior for anything it doesn't recognize.
+*/
+export declare function resolveEmojiDataLocale(locale:string):string;
+/**
 * 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, the import
@@ -7,8 +14,15 @@ import type{EmojiPickerGroup}from'./emoji-types.js';
 * `{ 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`).
+*
+* `locale` selects which of the peer's shipped locale directories to load, resolved through
+* `resolveEmojiDataLocale()` (falling back to English for any locale the peer doesn't ship).
+* `importData` is an injectable seam for tests (see `emoji-data-loader.test.ts`), receiving the
+* already-resolved locale directory name rather than the raw `locale` argument.
 */
-export declare function loadEmojiData(importData?:()=>Promise<unknown>):Promise<EmojiPickerGroup[]|null>;
-/** Cached per page, mirroring `pdf-loader.ts`'s `loadPdfJs()` single-flight shape. */
-export declare function loadEmojiDataCached():Promise<EmojiPickerGroup[]|null>;
+export declare function loadEmojiData(locale?:string,importData?:(resolvedLocale:string)=>Promise<unknown>):Promise<EmojiPickerGroup[]|null>;
+/** Cached per page **and per resolved locale**, mirroring `pdf-loader.ts`'s `loadPdfJs()`
+*  single-flight shape: a concurrent or repeated call for the same resolved locale shares one
+*  in-flight/settled promise instead of re-fetching, while a different locale gets its own cache
+*  slot instead of reusing whichever locale happened to load first. */
+export declare function loadEmojiDataCached(locale?:string):Promise<EmojiPickerGroup[]|null>;

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(),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 — 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};
+const LOCALE_DATA_IMPORTERS=Object.freeze({en:()=>import("emoji-picker-element-data/en/emojibase/data.json"),"en-gb":()=>import("emoji-picker-element-data/en-gb/emojibase/data.json"),fr:()=>import("emoji-picker-element-data/fr/emojibase/data.json"),ja:()=>import("emoji-picker-element-data/ja/emojibase/data.json"),ru:()=>import("emoji-picker-element-data/ru/emojibase/data.json"),sv:()=>import("emoji-picker-element-data/sv/emojibase/data.json"),zh:()=>import("emoji-picker-element-data/zh/emojibase/data.json")}),importEnglishData=()=>import("emoji-picker-element-data/en/emojibase/data.json"),SUPPORTED_LOCALE_DIRECTORIES=new Set(Object.keys(LOCALE_DATA_IMPORTERS));function resolveEmojiDataLocale(locale){const lower=locale.toLowerCase();if(SUPPORTED_LOCALE_DIRECTORIES.has(lower))return lower;const base=lower.split("-")[0];return base&&SUPPORTED_LOCALE_DIRECTORIES.has(base)?base:"en"}const cached=new Map;async function loadEmojiData(locale="en",importData=resolvedLocale=>(LOCALE_DATA_IMPORTERS[resolvedLocale]??importEnglishData)()){try{const raw=await importData(resolveEmojiDataLocale(locale)),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 — install it with `pnpm add emoji-picker-element-data`, or supply `groups` directly:",error),null}}function loadEmojiDataCached(locale="en"){const key=resolveEmojiDataLocale(locale);let entry=cached.get(key);return entry||(entry=loadEmojiData(key),cached.set(key,entry)),entry}function clearEmojiDataCache(){cached.clear()}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,resolveEmojiDataLocale};

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

@@ -15,7 +15,11 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * the ordinary `[part="empty"]` message, so a skipped install is distinguishable at a glance from a
 * genuine zero-match search or a deliberate `groups = []` opt-out, and announces the same message
 * once through the document's shared assertive live region. Assigning `groups` afterwards clears
-* it.
+* it. The auto-loader also picks the `emoji-picker-element-data` locale directory closest to
+* `effectiveLocale` (falling back to English for any locale the peer doesn't ship), so both each
+* emoji's accessible name and the search index follow the page's locale, not just the group
+* headings; a later locale change reloads it. This only applies to the built-in dataset -- a
+* consumer-supplied `groups` is never re-fetched or re-localized by this component.
 *
 * Keyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji
 * is tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap
@@ -145,7 +149,7 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraEmojiPicker extends LyraEmojiPicker_base{static styles:import("lit").CSSResultGroup[];private _groups;private readonly itemSnapshots;private builtInGroups;private groupsWereSet;
+export declare class LyraEmojiPicker extends LyraEmojiPicker_base{static styles:import("lit").CSSResultGroup[];private _groups;private readonly itemSnapshots;private builtInGroups;private groupsWereSet;private applyingBuiltInGroups;private builtInGroupsLocale?;
 /** The third state `groups` alone cannot express: the optional `emoji-picker-element-data` peer
 *  was consulted and did not resolve, as opposed to "not loaded yet" or "loaded, and empty". */
 private peerLoadFailed;
@@ -175,8 +179,18 @@ hint:string;
 errorText:string;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private touched;private readonly labelId;private readonly hintId;private readonly errorId;
 /** Injectable loader seam -- overridden directly by tests with a synchronous fake instead of
 *  needing the real `emoji-picker-element-data` package to load in the test browser (mirrors
-*  `LyraPdfViewer`'s `loadLibrary` field / `LyraQrCode`'s `loadLibrary` field). */
-private loadGroups;connectedCallback():void;private queryText;private activeIndex;private focusedGridItem?;private pendingGridFocus?;
+*  `LyraPdfViewer`'s `loadLibrary` field / `LyraQrCode`'s `loadLibrary` field). Receives the
+*  picker's current `effectiveLocale` so the default (`loadEmojiDataCached`) can load the
+*  matching locale directory of the optional peer. */
+private loadGroups;connectedCallback():void;
+/** Auto-loads the built-in dataset for the current `effectiveLocale` -- only while the consumer
+*  hasn't already supplied `groups` directly (an explicit `groups`, even an empty array set
+*  intentionally, always wins, matching the "consumer-supplied data takes precedence over any
+*  built-in default" convention this library uses elsewhere, e.g. `<lr-lite-chart>`'s
+*  `pointText`), and only while it hasn't already loaded (or isn't already loading) that same
+*  locale, so this is safe to call from both `connectedCallback()` and every `updated()` cycle:
+*  a later `effectiveLocale` change re-triggers exactly one reload of the built-in data. */
+private loadBuiltInGroups;private queryText;private activeIndex;private focusedGridItem?;private pendingGridFocus?;
 /** The large-data path keeps only visible rows in the DOM. The regular path remains unchanged
 * for small sets so consumers keep the simple grouped light-DOM shape they already receive. */
 private virtualScrollTop;private virtualScrollRaf?;private virtualScrollRafWindow?;private virtualScrollRafDocument?;private observedGrid?;private observedGridVirtualized;private gridResizeObserver?;private gridResizeObserverDocument?;private geometryProbe?;private geometryCache?;private liveGeometryReady;private geometryObserver?;private geometryObserverDocument?;private geometryObserverRoot?;private ownerRealmGeneration;private searchEl?;

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

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

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; inline-size: 100%; --_lr-emoji-picker-item-size-default: var(--lr-icon-button-size); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-lg); --_lr-emoji-picker-gap-default: var(--lr-space-2xs); --_lr-emoji-picker-control-gap-default: var(--lr-space-xs); --_lr-emoji-picker-radius-default: var(--lr-radius); --_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)); } :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); } :host([size='xs']) { --_lr-emoji-picker-item-size-default: var(--lr-size-1-75rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-md-sm); } :host([size='s']), :host([size='small']) { --_lr-emoji-picker-item-size-default: var(--lr-size-2rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-m); } :host([size='l']), :host([size='large']) { --_lr-emoji-picker-item-size-default: var(--lr-size-3rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-xl); } :host([size='xl']) { --_lr-emoji-picker-item-size-default: var(--lr-size-3-5rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-2xl); } [part='form-control'] { display: flex; flex-direction: column; gap: var(--lr-emoji-picker-control-gap, var(--_lr-emoji-picker-control-gap-default)); } [part='form-control-label'] { color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); } [part='form-control-label'][hidden], [part='hint'][hidden], [part='error'][hidden] { display: none; } ${formControlRequiredMarker} [part='hint'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='error'] { color: var(--lr-color-danger); font-size: var(--lr-font-size-sm); } [part='base'] { display: flex; flex-direction: column; gap: var(--lr-emoji-picker-control-gap, var(--_lr-emoji-picker-control-gap-default)); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-emoji-picker-radius, var(--_lr-emoji-picker-radius-default)); padding: var(--lr-space-s); background: var(--lr-color-surface); } :host(:disabled) [part='base'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='search']:disabled, [part='emoji']:disabled { cursor: not-allowed; } [part='search-wrapper'] { display: flex; align-items: center; gap: var(--lr-emoji-picker-search-clear-gap, var(--lr-space-xs)); } [part='search'] { flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--lr-emoji-picker-search-min-height, auto); padding-block: var(--lr-emoji-picker-search-padding-block, var(--lr-space-xs)); padding-inline: var(--lr-emoji-picker-search-padding-inline, var(--lr-space-s)); border: var(--lr-border-width-thin) solid var(--lr-emoji-picker-search-border-color, var(--lr-color-border)); border-radius: var(--lr-emoji-picker-item-radius, var(--_lr-emoji-picker-item-radius-default)); background: var(--lr-emoji-picker-search-fill, var(--lr-color-surface)); color: var(--lr-color-text); font: inherit; font-size: var(--lr-emoji-picker-search-font-size, inherit); transition: border-color var(--lr-transition-fast); } [part='search']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='search']:hover:not(:disabled) { border-color: var(--lr-emoji-picker-search-hover-border-color, var(--lr-color-brand)); } [part='search']::-webkit-search-cancel-button, [part='search']::-webkit-search-decoration { appearance: none; } [part='search-clear'] { flex: 0 0 auto; 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); border: 0; border-radius: var(--lr-emoji-picker-item-radius, var(--_lr-emoji-picker-item-radius-default)); background: transparent; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } [part='search-clear']:not(:disabled):hover { color: var(--lr-color-text); } [part='search-clear']:not(:disabled):active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='search-clear']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part='search-clear']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='grid'] { display: flex; flex-wrap: wrap; gap: var(--lr-emoji-picker-gap, var(--_lr-emoji-picker-gap-default)); max-block-size: var(--lr-size-16rem); overflow-block: auto; overflow-inline: hidden; } [part='grid'] { scrollbar-gutter: var(--lr-theme-scrollbar-gutter, stable); scrollbar-width: var(--lr-theme-scrollbar-width, auto); } [data-probe='root'] { position: absolute; inset-block-start: 0; inset-inline-start: 0; visibility: hidden; pointer-events: none; } [data-probe='item'], [data-probe='gap'], [data-probe='row'] { block-size: 0; } [data-probe='item'] { inline-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); min-inline-size: var(--lr-icon-button-size); } [data-probe='gap'] { inline-size: var(--lr-emoji-picker-gap, var(--_lr-emoji-picker-gap-default)); } [data-probe='row'] { inline-size: var(--lr-emoji-picker-row-height, var(--_lr-emoji-picker-row-height-default)); } [part='virtual-spacer'] { position: relative; min-block-size: 100%; } [part='virtual-row'] { position: absolute; inset-inline: 0; inset-block-start: 0; min-block-size: var(--lr-emoji-picker-row-height, var(--_lr-emoji-picker-row-height-default)); } [part='virtual-items'] { display: flex; gap: var(--lr-emoji-picker-gap, var(--_lr-emoji-picker-gap-default)); min-block-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); } [part='virtual-label'] { block-size: var(--lr-space-l); } [part='group-label'] { flex-basis: 100%; padding-block: var(--lr-space-2xs); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-xs); font-weight: var(--lr-font-weight-semibold); } [part='emoji'] { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); block-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: none; border-radius: var(--lr-emoji-picker-item-radius, var(--_lr-emoji-picker-item-radius-default)); background: transparent; color: var(--lr-color-text); font-size: var(--lr-emoji-picker-glyph-size, var(--_lr-emoji-picker-glyph-size-default)); cursor: pointer; transition: background-color var(--lr-transition-fast); } [part='emoji']:hover:not(:disabled) { background: var( --lr-emoji-picker-hover-bg, var(--lr-emoji-picker-active-bg, var(--lr-color-brand-quiet)) ); } [part='emoji'][aria-selected='true'] { background: var(--lr-emoji-picker-selected-bg, var(--lr-color-brand-quiet)); color: var(--lr-emoji-picker-selected-color, var(--lr-color-text)); outline: var(--lr-border-width-thin) solid var(--lr-emoji-picker-selected-outline-color, var(--lr-color-brand)); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part='emoji'][data-active] { background: var( --lr-emoji-picker-keyboard-active-bg, var(--lr-emoji-picker-active-bg, var(--lr-color-brand-quiet)) ); outline: var(--lr-border-width-thin) dotted var(--lr-emoji-picker-keyboard-active-outline-color, var(--lr-color-brand)); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part='emoji']:active:not(:disabled) { background: var( --lr-emoji-picker-pressed-bg, color-mix( in oklab, var(--lr-emoji-picker-hover-bg, var(--lr-emoji-picker-active-bg, var(--lr-color-brand-quiet))), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); outline-color: var(--lr-emoji-picker-pressed-outline-color, var(--lr-color-brand)); outline-style: double; } [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); } [part='empty'], [part='load-error'] { flex-basis: 100%; padding: var(--lr-space-m); text-align: center; color: var(--lr-color-text-quiet); } [part='load-error'] { color: var(--lr-color-danger); } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } @media (forced-colors: active) { [part='emoji']:hover:not(:disabled) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [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; outline: var(--lr-border-width-medium) double Highlight; } } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; inline-size: 100%; --_lr-emoji-picker-item-size-default: var(--lr-icon-button-size); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-lg); --_lr-emoji-picker-gap-default: var(--lr-space-2xs); --_lr-emoji-picker-control-gap-default: var(--lr-space-xs); --_lr-emoji-picker-radius-default: var(--lr-radius); --_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)); } :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); } :host([size='xs']) { --_lr-emoji-picker-item-size-default: var(--lr-size-1-75rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-md-sm); } :host([size='s']), :host([size='small']) { --_lr-emoji-picker-item-size-default: var(--lr-size-2rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-m); } :host([size='l']), :host([size='large']) { --_lr-emoji-picker-item-size-default: var(--lr-size-3rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-xl); } :host([size='xl']) { --_lr-emoji-picker-item-size-default: var(--lr-size-3-5rem); --_lr-emoji-picker-glyph-size-default: var(--lr-font-size-2xl); } [part='form-control'] { display: flex; flex-direction: column; gap: var(--lr-emoji-picker-control-gap, var(--_lr-emoji-picker-control-gap-default)); } [part='form-control-label'] { color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); } [part='form-control-label'][hidden], [part='hint'][hidden], [part='error'][hidden] { display: none; } ${formControlRequiredMarker} [part='hint'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='error'] { color: var(--lr-color-danger); font-size: var(--lr-font-size-sm); } [part='base'] { display: flex; flex-direction: column; gap: var(--lr-emoji-picker-control-gap, var(--_lr-emoji-picker-control-gap-default)); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-emoji-picker-radius, var(--_lr-emoji-picker-radius-default)); padding: var(--lr-space-s); background: var(--lr-color-surface); } :host(:disabled) [part='base'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='search']:disabled, [part='emoji']:disabled { cursor: not-allowed; } [part='search-wrapper'] { display: flex; align-items: center; gap: var(--lr-emoji-picker-search-clear-gap, var(--lr-space-xs)); } [part='search'] { flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--lr-emoji-picker-search-min-height, auto); padding-block: var(--lr-emoji-picker-search-padding-block, var(--lr-space-xs)); padding-inline: var(--lr-emoji-picker-search-padding-inline, var(--lr-space-s)); border: var(--lr-border-width-thin) solid var(--lr-emoji-picker-search-border-color, var(--lr-color-border)); border-radius: var(--lr-emoji-picker-item-radius, var(--_lr-emoji-picker-item-radius-default)); background: var(--lr-emoji-picker-search-fill, var(--lr-color-surface)); color: var(--lr-color-text); font: inherit; font-size: var(--lr-emoji-picker-search-font-size, inherit); transition: border-color var(--lr-transition-fast); } [part='search']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='search']:hover:not(:disabled) { border-color: var(--lr-emoji-picker-search-hover-border-color, var(--lr-color-brand)); } [part='search']::-webkit-search-cancel-button, [part='search']::-webkit-search-decoration { appearance: none; } [part='search-clear'] { flex: 0 0 auto; 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); border: 0; border-radius: var(--lr-emoji-picker-item-radius, var(--_lr-emoji-picker-item-radius-default)); background: transparent; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); font: inherit; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } [part='search-clear']:not(:disabled):hover { color: var(--lr-color-text); } [part='search-clear']:not(:disabled):active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='search-clear']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part='search-clear']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='grid'] { display: flex; flex-wrap: wrap; gap: var(--lr-emoji-picker-gap, var(--_lr-emoji-picker-gap-default)); max-block-size: var(--lr-size-16rem); overflow-block: auto; overflow-inline: hidden; } [part='grid'] { scrollbar-gutter: var(--lr-theme-scrollbar-gutter, stable); scrollbar-width: var(--lr-theme-scrollbar-width, auto); } [data-probe='root'] { position: absolute; inset-block-start: 0; inset-inline-start: 0; visibility: hidden; pointer-events: none; } [data-probe='item'], [data-probe='gap'], [data-probe='row'] { block-size: 0; } [data-probe='item'] { inline-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); min-inline-size: var(--lr-icon-button-size); } [data-probe='gap'] { inline-size: var(--lr-emoji-picker-gap, var(--_lr-emoji-picker-gap-default)); } [data-probe='row'] { inline-size: var(--lr-emoji-picker-row-height, var(--_lr-emoji-picker-row-height-default)); } [part='virtual-spacer'] { position: relative; min-block-size: 100%; } [part='virtual-row'] { position: absolute; inset-inline: 0; inset-block-start: 0; min-block-size: var(--lr-emoji-picker-row-height, var(--_lr-emoji-picker-row-height-default)); } [part='virtual-items'] { display: flex; gap: var(--lr-emoji-picker-gap, var(--_lr-emoji-picker-gap-default)); min-block-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); } [part='virtual-label'] { block-size: var(--lr-space-l); } [part='group-label'] { flex-basis: 100%; padding-block: var(--lr-space-2xs); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-xs); font-weight: var(--lr-font-weight-semibold); } [part='emoji'] { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); block-size: var(--lr-emoji-picker-item-size, var(--_lr-emoji-picker-item-size-default)); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: none; border-radius: var(--lr-emoji-picker-item-radius, var(--_lr-emoji-picker-item-radius-default)); background: transparent; color: var(--lr-color-text); font-size: var(--lr-emoji-picker-glyph-size, var(--_lr-emoji-picker-glyph-size-default)); cursor: pointer; transition: background-color var(--lr-transition-fast); } [part='emoji']:hover:not(:disabled) { background: var( --lr-emoji-picker-hover-bg, var(--lr-emoji-picker-active-bg, var(--lr-color-brand-quiet)) ); } [part='emoji'][aria-selected='true'] { background: var(--lr-emoji-picker-selected-bg, var(--lr-color-brand-quiet)); color: var(--lr-emoji-picker-selected-color, var(--lr-color-text)); outline: var(--lr-border-width-thin) solid var(--lr-emoji-picker-selected-outline-color, var(--lr-color-brand)); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part='emoji'][data-active] { background: var( --lr-emoji-picker-keyboard-active-bg, var(--lr-emoji-picker-active-bg, var(--lr-color-brand-quiet)) ); outline: var(--lr-border-width-thin) dotted var(--lr-emoji-picker-keyboard-active-outline-color, var(--lr-color-brand)); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part='emoji']:active:not(:disabled) { background: var( --lr-emoji-picker-pressed-bg, color-mix( in oklab, var(--lr-emoji-picker-hover-bg, var(--lr-emoji-picker-active-bg, var(--lr-color-brand-quiet))), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); outline-color: var(--lr-emoji-picker-pressed-outline-color, var(--lr-color-brand)); outline-style: double; } [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); } [part='empty'], [part='load-error'] { flex-basis: 100%; padding: var(--lr-space-m); text-align: center; color: var(--lr-color-text-quiet); } [part='load-error'] { color: var(--lr-color-danger); } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } @media (forced-colors: active) { [part='emoji']:hover:not(:disabled) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [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; outline: var(--lr-border-width-medium) double Highlight; } } `;export{styles};

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

@@ -153,7 +153,7 @@ href?:string;
 /** Native anchor target. A non-empty target always derives a safe `rel`. */
 target?:string;
 /** Author relationship tokens for the rendered anchor, e.g. `nofollow me license` -- mirrors
-*  `wa-icon-button`/`sl-icon-button`'s own `rel`, so values a migrating consumer already relies
+*  `sl-icon-button`'s own `rel`, so values a migrating consumer already relies
 *  on survive a `wa-`/`sl-` -> `lr-` rename instead of being silently dropped. Two rules are
 *  enforced regardless of what an author writes: `opener` is always stripped (the one token that
 *  re-opens the reverse-tabnabbing vector), and `noopener noreferrer` is force-added whenever