@esri/calcite-components 5.1.1-next.3 → 5.1.1-next.5

package/dist/components/calcite-date-picker/customElement.js

@@ -30,7 +30,7 @@ class DatePicker extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], endAsDate: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], startAsDate: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], calendars: [11, {}, { type: Number, reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
+    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], calendars: [11, {}, { type: Number, reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
@@ -67,7 +67,7 @@ class DatePicker extends LitElement {
     if (changes.has("range") && this.range || changes.has("maxAsDate") || changes.has("minAsDate")) {
       this.setActiveStartAndEndDates();
     }
-    if (changes.has("activeDate")) {
+    if (changes.has("activeDate") && this.hasUpdated) {
       this.activeDateWatcher(this.activeDate);
     }
     if (changes.has("messages") && this.hasUpdated) {
@@ -78,13 +78,11 @@ class DatePicker extends LitElement {
     if (!this.range) {
       return;
     }
-    if (!this.rangeValueChangedByUser) {
-      if (newValue) {
-        this.activeStartDate = newValue;
-        this.activeEndDate = nextMonth(this.activeStartDate);
-      } else {
-        this.resetActiveDates();
-      }
+    if (newValue) {
+      this.activeStartDate = newValue;
+      this.activeEndDate = nextMonth(this.activeStartDate);
+    } else {
+      this.resetActiveDates();
     }
   }
   valueHandler(value) {
@@ -100,7 +98,7 @@ class DatePicker extends LitElement {
   valueAsDateWatcher(newValueAsDate) {
     if (this.range && Array.isArray(newValueAsDate) && !this.rangeValueChangedByUser) {
       this.setActiveStartAndEndDates();
-    } else if (newValueAsDate && newValueAsDate !== this.activeDate) {
+    } else if (!this.range && newValueAsDate && newValueAsDate !== this.activeDate) {
       this.activeDate = newValueAsDate;
     }
   }

package/dist/components/calcite-date-picker-day/customElement.js

@@ -36,7 +36,7 @@ class DatePickerDay extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeEdge: [3, {}, { reflect: true }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

package/dist/components/calcite-date-picker-month/customElement.js

@@ -11,10 +11,8 @@ const CSS = {
   calendarStart: "calendar--start",
   currentDay: "current-day",
   dayContainer: "day-container",
-  insideRangeHover: "inside-range--hover",
   month: "month",
   noncurrent: "noncurrent",
-  outsideRangeHover: "outside-range--hover",
   weekDays: "week-days",
   weekHeader: "week-header",
   weekHeaderContainer: "week-header-container"
@@ -246,15 +244,12 @@ class DatePickerMonth extends LitElement {
     let month = this.activeDate.getMonth();
     const nextMonth2 = month + 1;
     month = position === "end" ? nextMonth2 : month;
-    let dayInWeek = 0;
-    const getDayInWeek = () => dayInWeek++ % 7;
     const year = this.activeDate.getFullYear();
     const days = [
       ...prevMonthDays.map((day) => {
         return {
           active: false,
           day,
-          dayInWeek: getDayInWeek(),
           date: new Date(year, month - 1, day)
         };
       }),
@@ -267,7 +262,6 @@ class DatePickerMonth extends LitElement {
           currentMonth: true,
           currentDay: isCurrentDay,
           day,
-          dayInWeek: getDayInWeek(),
           date
         };
       }),
@@ -275,7 +269,6 @@ class DatePickerMonth extends LitElement {
         return {
           active: false,
           day,
-          dayInWeek: getDayInWeek(),
           date: new Date(year, nextMonth2, day)
         };
       })
@@ -326,14 +319,12 @@ class DatePickerMonth extends LitElement {
     const nextMonthDays = this.getDays(endCalendarPrevMonDays, endCalendarCurrMonDays, endCalendarNextMonDays, "end");
     return html`<div class=${safeClassMap({ [CSS.calendarContainer]: true })} role=grid>${this.renderCalendar(adjustedWeekDays, days)}${this.range && this.calendars === 2 && this.renderCalendar(adjustedWeekDays, nextMonthDays, true) || ""}</div>`;
   }
-  renderDateDay({ active, currentMonth, currentDay, date, day, dayInWeek }, key) {
+  renderDateDay({ active, currentMonth, currentDay, date, day }, key) {
     const isDateInRange = inRange(date, this.min, this.max);
     return keyed(key, html`<div class=${safeClassMap({ [CSS.dayContainer]: true })} role=gridcell><calcite-date-picker-day .active=${active} class=${safeClassMap({
       [CSS.currentDay]: currentDay,
-      [CSS.insideRangeHover]: this.isHoverInRange(),
-      [CSS.outsideRangeHover]: !this.isHoverInRange(),
       [CSS.noncurrent]: this.range && this.calendars === 2 && !currentMonth
-    })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeEdge=${dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : void 0} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
+    })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
   }
   renderCalendar(weekDays, days, isEndCalendar = false) {
     return html`<div class=${safeClassMap({

package/dist/components/calcite-flow/customElement.d.ts

@@ -11,9 +11,9 @@ export abstract class Flow extends LitElement {
   /**
    * Removes selection of the currently active `calcite-flow-item`.
    *
-   * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
+   * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement | undefined>
    */
-  back(): Promise<FlowItem | FlowItemLikeElement>;
+  back(): Promise<FlowItem | FlowItemLikeElement | undefined>;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-flow/customElement.js

@@ -122,7 +122,7 @@ class Flow extends LitElement {
   }
   findSelectedFlowItemIndex(items) {
     const selectedItem = items.slice(0).reverse().find((item) => !!item.selected);
-    return items.indexOf(selectedItem);
+    return selectedItem ? items.indexOf(selectedItem) : -1;
   }
   ensureSelectedFlowItemExists() {
     const { items } = this;

package/dist/components/calcite-flow-item/customElement.js

@@ -123,7 +123,7 @@ class FlowItem extends LitElement {
   }
   render() {
     const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapsed=${collapsed} .collapseDirection=${collapseDirection} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

package/dist/components/calcite-input/customElement.js

@@ -68,7 +68,8 @@ class Input extends LitElement {
     this.childNumberRef = createRef();
     this.direction = useDirection();
     this.formSupport = useForm({
-      inputType: "text"
+      inputType: "text",
+      getValue: () => this.type === "file" ? this.childRef.value?.files ?? null : this.value
     })(this);
     this.inputWrapperRef = createRef();
     this.previousValueOrigin = "initial";
@@ -511,14 +512,11 @@ class Input extends LitElement {
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    const localeNumberInput = this.type === "number" ? keyed("localized-input", html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`) : null;
+    const localeNumberInput = this.type === "number" ? keyed("localized-input", html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`) : null;
     const childEl = this.type !== "number" ? html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} class=${safeClassMap({
       [CSS.editingEnabled]: this.editingEnabled,
       [CSS.inlineChild]: !!this.inlineEditableEl
-    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required ? true : null} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(
-      this.childRef
-      /* using unknown to workaround Lumina dynamic ref type issue */
-    )}>` : null;
+    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(this.childRef)}>` : null;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",

package/dist/components/calcite-input-date-picker/customElement.js

@@ -276,7 +276,6 @@ class InputDatePicker extends LitElement {
   }
   valueAsDateWatcher(valueAsDate) {
     const newValue = Array.isArray(valueAsDate) ? [dateToISO(valueAsDate[0]), dateToISO(valueAsDate[1])] : dateToISO(valueAsDate);
-    this.datePickerActiveDate = Array.isArray(valueAsDate) ? valueAsDate[0] : valueAsDate;
     if (this.value !== newValue) {
       this.valueAsDateChangedExternally = true;
       this.value = newValue;

package/dist/components/calcite-input-text/customElement.js

@@ -246,7 +246,7 @@ class InputText extends LitElement {
     const childEl = html`<input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${this.el.autofocus} class=${safeClassMap({
       [CSS.editingEnabled]: this.editingEnabled,
       [CSS.inlineChild]: !!this.inlineEditableEl
-    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${this.name ?? nothing} @blur=${this.inputTextBlurHandler} @focus=${this.inputTextFocusHandler} @input=${this.inputTextInputHandler} @keydown=${this.inputTextKeyDownHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required ? true : null} spellcheck=${this.el.spellcheck ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=text .value=${live(this.value ?? "")} ${ref(this.childRef)}>`;
+    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${this.name ?? nothing} @blur=${this.inputTextBlurHandler} @focus=${this.inputTextFocusHandler} @input=${this.inputTextInputHandler} @keydown=${this.inputTextKeyDownHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=text .value=${live(this.value ?? "")} ${ref(this.childRef)}>`;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",

package/dist/components/calcite-list/customElement.d.ts

@@ -57,9 +57,9 @@ export abstract class List extends LitElement {
    */
   accessor filterEnabled: boolean;
   /** Specifies an accessible name for the filter input field. */
-  accessor filterLabel: string;
+  accessor filterLabel: string | undefined;
   /** Specifies placeholder text for the component's filter input field. */
-  accessor filterPlaceholder: string;
+  accessor filterPlaceholder: string | undefined;
   /**
    * Specifies a function to handle filtering.
    *
@@ -71,7 +71,7 @@ export abstract class List extends LitElement {
    */
   accessor filterPredicate: ((item: ListItem) => boolean) | undefined;
   /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`). */
-  accessor filterProps: string[];
+  accessor filterProps: string[] | undefined;
   /**
    * Text for the component's filter input field.
    *
@@ -116,7 +116,7 @@ export abstract class List extends LitElement {
       total?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * Specifies the size of the component.
    *

package/dist/components/calcite-list/customElement.js

@@ -111,13 +111,13 @@ class List extends LitElement {
     this.styles = styles;
   }
   get hasActiveFilter() {
-    return this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length;
+    return !!(this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length);
   }
   get showEmptyContentContainer() {
     return !this.hasContent && this.hasEmptyContent;
   }
   get showNoResultsContainer() {
-    return this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length;
+    return !!(this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length);
   }
   get effectiveFilterProps() {
     if (!this.filterProps) {
@@ -366,7 +366,7 @@ class List extends LitElement {
     this.calciteListOrderChange.emit(detail);
   }
   setParentList() {
-    this.parentListEl = this.el.parentElement?.closest(listSelector);
+    this.parentListEl = this.el.parentElement?.closest(listSelector) || void 0;
   }
   handleDefaultSlotChange(event) {
     if (this.parentListEl) {
@@ -493,8 +493,7 @@ class List extends LitElement {
     }));
   }
   getGroupHeading(item) {
-    const heading = this.listItemGroups.filter((group) => group.contains(item)).map((group) => group.heading);
-    return heading;
+    return this.listItemGroups.filter((group) => group.contains(item) && group.heading).map((group) => group.heading);
   }
   updateGroupItems() {
     const { el, group, scale } = this;

package/dist/components/calcite-list-item/customElement.d.ts

@@ -35,7 +35,7 @@ export abstract class ListItem extends LitElement {
    */
   accessor closed: boolean;
   /** Specifies a description for the component. Displays below the `label`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -55,13 +55,13 @@ export abstract class ListItem extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component, displays above the `description`. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       close?: string;
@@ -69,7 +69,7 @@ export abstract class ListItem extends LitElement {
       collapse?: string;
   };
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the item is open to show child components.
    *

package/dist/components/calcite-list-item/customElement.js

@@ -35,7 +35,6 @@ class ListItem extends LitElement {
     this.hasContentEnd = false;
     this.hasContentStart = false;
     this.hasCustomContent = false;
-    this.level = null;
     this.expandable = false;
     this.active = false;
     this.bordered = false;
@@ -47,13 +46,11 @@ class ListItem extends LitElement {
     this.dragHandle = false;
     this.expanded = false;
     this.filterHidden = false;
-    this.interactionMode = null;
     this.displayMode = "flat";
     this.addToItems = [];
     this.moveToItems = [];
     this.scale = "m";
     this.selected = false;
-    this.selectionMode = null;
     this.sortHandleOpen = false;
     this.unavailable = false;
     this.topLayerDisabled = false;
@@ -110,7 +107,7 @@ class ListItem extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     const { el } = this;
-    this.parentListEl = el.closest(listSelector);
+    this.parentListEl = el.closest(listSelector) || void 0;
     this.level = getDepth(el) + 1;
     this.setSelectionDefaults();
   }
@@ -151,7 +148,7 @@ class ListItem extends LitElement {
   }
   activeHandler(active) {
     if (!active) {
-      this.focusCell(null, false);
+      this.focusCell(void 0, false);
     }
   }
   handleClosedChange() {
@@ -289,7 +286,7 @@ class ListItem extends LitElement {
       this.actionsStartRef.value,
       this.contentRef.value,
       this.actionsEndRef.value
-    ].filter((el) => el && !el.hidden);
+    ].filter((el) => !!(el && !el.hidden));
   }
   handleItemKeyDown(event) {
     if (event.defaultPrevented) {
@@ -300,7 +297,7 @@ class ListItem extends LitElement {
     const { containerRef, actionsStartRef: { value: actionsStartEl }, actionsEndRef: { value: actionsEndEl }, expanded, expandable } = this;
     const cells = this.getGridCells();
     const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
-    if (key === "Enter" && !composedPath.includes(actionsStartEl) && !composedPath.includes(actionsEndEl)) {
+    if (key === "Enter" && actionsStartEl && !composedPath.includes(actionsStartEl) && actionsEndEl && !composedPath.includes(actionsEndEl)) {
       event.preventDefault();
       this.toggleSelected(event.shiftKey);
     } else if (key === "ArrowRight") {
@@ -309,7 +306,7 @@ class ListItem extends LitElement {
       if (currentIndex === -1) {
         if (!expanded && expandable) {
           this.toggle(true);
-          this.focusCell(null);
+          this.focusCell();
         } else if (cells[0]) {
           this.focusCell(cells[0]);
         }
@@ -320,27 +317,27 @@ class ListItem extends LitElement {
       event.preventDefault();
       const prevIndex = currentIndex - 1;
       if (currentIndex === -1) {
-        this.focusCell(null);
+        this.focusCell();
         if (expanded && expandable) {
           this.toggle(false);
         } else {
           this.calciteInternalFocusPreviousItem.emit();
         }
       } else if (currentIndex === 0) {
-        this.focusCell(null);
+        this.focusCell();
         containerRef.value.focus();
       } else if (cells[currentIndex] && cells[prevIndex]) {
         this.focusCell(cells[prevIndex]);
       }
     }
   }
-  focusCellNull() {
-    this.focusCell(null);
+  clearCellFocus() {
+    this.focusCell();
   }
   setFocusCell(focusEl, focusedEl, saveFocusIndex) {
     const { parentListEl } = this;
     if (saveFocusIndex) {
-      focusMap.set(parentListEl, null);
+      focusMap.set(parentListEl, void 0);
     }
     const gridCells = this.getGridCells();
     gridCells.forEach((tableCell) => {
@@ -459,14 +456,14 @@ class ListItem extends LitElement {
     const showSelectionBorder = selectionMode !== "none" && selectionAppearance === "border";
     const showSelectionHighlight = selectionMode !== "none" && selectionAppearance === "highlight";
     const containerInteractive = interactionMode === "interactive";
-    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : null} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : void 0} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
       [CSS.row]: true,
       [CSS.container]: true,
       [CSS.containerHover]: containerInteractive,
       [CSS.containerBorder]: showSelectionBorder,
       [CSS.containerBorderSelected]: showSelectionBorder && selected,
       [CSS.containerHighlightSelected]: showSelectionHighlight && selected
-    })} .hidden=${closed || filterHidden} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
+    })} .hidden=${closed || filterHidden} @focus=${this.clearCellFocus} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
       [CSS.contentContainerWrapper]: true,
       [CSS.contentContainerWrapperBordered]: contentContainerWrapperBordered
     })}>${this.renderActionsStart()}${this.renderContentContainer()}${this.renderActionsEnd()}</div></div>${this.renderContentBottom()}</div>${this.renderDefaultContainer()}` });

package/dist/components/calcite-list-item-group/customElement.d.ts

@@ -15,7 +15,7 @@ export abstract class ListItemGroup extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the heading text for the nested `calcite-list-item` rows. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /**
    * Specifies the size of the component.
    *

package/dist/components/calcite-loader/customElement.js

@@ -82,9 +82,9 @@ class Loader extends LitElement {
     const isDeterminate = type !== "indeterminate";
     const valueNow = Math.floor(value);
     this.el.ariaLabel = label;
-    this.el.ariaValueMax = isDeterminate ? "100" : void 0;
-    this.el.ariaValueMin = isDeterminate ? "0" : void 0;
-    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : void 0;
+    this.el.ariaValueMax = isDeterminate ? "100" : null;
+    this.el.ariaValueMin = isDeterminate ? "0" : null;
+    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : null;
     setAttribute(this.el, "id", id);
     this.el.role = "progressbar";
     return html`<div class=${safeClassMap(CSS.rings)}>${this.renderRing("track")}${this.renderRing("progress")}${!inline && isDeterminate && html`<div class=${safeClassMap(CSS.percentage)}>${this.formatValue()}</div>` || ""}</div>${!inline && text && html`<div class=${safeClassMap(CSS.text)}>${text}</div>` || ""}`;

package/dist/components/calcite-menu-item/customElement.d.ts

@@ -25,13 +25,13 @@ export abstract class MenuItem extends LitElement {
    */
   accessor breadcrumb: boolean;
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -54,15 +54,15 @@ export abstract class MenuItem extends LitElement {
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /** Specifies the text to display. */
-  accessor text: string;
+  accessor text: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-menu-item/customElement.js

@@ -45,9 +45,12 @@ class MenuItem extends LitElement {
     this.anchorRef = createRef();
     this.direction = useDirection();
     this.dropdownActionRef = createRef();
+    this.isFocused = false;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.hasSubmenu = false;
+    this.active = false;
+    this.breadcrumb = false;
     this.isTopLevelItem = false;
     this.open = false;
     this.calciteInternalMenuItemKeyEvent = createEvent();

package/dist/components/calcite-meter/customElement.d.ts

@@ -42,7 +42,7 @@ export abstract class Meter extends LitElement {
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -50,7 +50,7 @@ export abstract class Meter extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-  accessor high: number;
+  accessor high: number | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -58,7 +58,7 @@ export abstract class Meter extends LitElement {
    */
   accessor label: string;
   /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-  accessor low: number;
+  accessor low: number | undefined;
   /**
    * Specifies the component's highest allowed value.
    *
@@ -78,9 +78,9 @@ export abstract class Meter extends LitElement {
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, displays the values of `high`, `low`, `min`, and `max`.
    *
@@ -106,7 +106,7 @@ export abstract class Meter extends LitElement {
    */
   accessor unitLabel: string;
   /** Specifies the component's value. */
-  accessor value: number;
+  accessor value: number | undefined;
   /**
    * When `true`, displays the `value`.
    *

package/dist/components/calcite-meter/customElement.js

@@ -39,6 +39,11 @@ class Meter extends LitElement {
     this.minPercent = 0;
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     this.valueLabelRef = createRef();
+    this.currentPercent = 0;
+    this.highActive = false;
+    this.highPercent = 100;
+    this.lowActive = false;
+    this.lowPercent = 0;
     this.appearance = "outline-fill";
     this.disabled = false;
     this.fillType = "range";
@@ -88,12 +93,8 @@ class Meter extends LitElement {
     this.updateLabels();
   }
   updateLabels() {
-    if (this.valueLabelRef.value) {
-      this.determineValueLabelPosition();
-    }
-    if (this.rangeLabels) {
-      this.determineVisibleLabels();
-    }
+    this.determineValueLabelPosition();
+    this.determineVisibleLabels();
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
@@ -154,9 +155,12 @@ class Meter extends LitElement {
     }
   }
   intersects(el1, el2) {
-    return el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect());
+    return !!(el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect()));
   }
   determineVisibleLabels() {
+    if (!this.rangeLabels) {
+      return;
+    }
     const { minLabelRef: { value: minLabelEl }, lowLabelRef: { value: lowLabelEl }, highLabelRef: { value: highLabelEl }, maxLabelRef: { value: maxLabelEl } } = this;
     const highMaxOverlap = this.intersects(highLabelEl, maxLabelEl);
     const lowHighOverlap = this.intersects(lowLabelEl, highLabelEl);
@@ -189,6 +193,9 @@ class Meter extends LitElement {
   }
   determineValueLabelPosition() {
     const { valueLabelRef: { value: valueLabelEl }, meterContainerRef: { value: meterContainerEl }, currentPercent } = this;
+    if (!valueLabelEl || !meterContainerEl) {
+      return;
+    }
     const valuePosition = currentPercent > 100 ? 100 : currentPercent > 0 ? currentPercent : 0;
     const valueLabelWidth = valueLabelEl.getBoundingClientRect().width;
     const containerWidth = meterContainerEl.getBoundingClientRect().width;

package/dist/components/calcite-pagination/customElement.d.ts

@@ -26,7 +26,7 @@ export abstract class Pagination extends LitElement {
       last?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * Specifies the number of items per page.
    *

package/dist/components/calcite-pagination/customElement.js

@@ -42,7 +42,10 @@ class Pagination extends LitElement {
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.isXXSmall = false;
+    this.lastStartItem = 1;
     this.maxItems = maxItemBreakpoints.xxsmall;
+    this.totalPages = 1;
     this.groupSeparator = false;
     this.pageSize = 20;
     this.scale = "m";