@esri/calcite-components 5.1.1-next.4 → 5.1.1-next.6

package/dist/chunks/runtime.js

@@ -60,9 +60,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.1.1-next.4";
-const buildDate = "2026-06-04";
-const revision = "09ee56df3";
+const version = "5.1.1-next.6";
+const buildDate = "2026-06-08";
+const revision = "ffb6800bd";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -85,7 +85,7 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.1-next.4/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.1-next.6/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/useForm.js

@@ -97,8 +97,12 @@ function validate({
   };
 }
 function validateValue(inputDelegate, valueToValidate) {
-  inputDelegate.value = // file will throw if non-empty string is provided
-  inputDelegate.type === "file" || valueToValidate == null ? "" : String(valueToValidate);
+  if (inputDelegate.type === "file") {
+    inputDelegate.value = "";
+    const isMissingValue = !valueToValidate || valueToValidate instanceof FileList && valueToValidate.length === 0;
+    return !inputDelegate.required || !isMissingValue;
+  }
+  inputDelegate.value = valueToValidate == null ? "" : String(valueToValidate);
   return inputDelegate.validity.valid;
 }
 function getValidityFlags(validityState) {
@@ -304,9 +308,11 @@ const useForm = (options) => {
     }
     function getFormValue() {
       const value = getComponentValue();
-      if (Array.isArray(value)) {
+      if (Array.isArray(value) || value instanceof FileList) {
         const formData = new FormData();
-        value.forEach((value2) => formData.append(component.name, value2));
+        for (const item of value) {
+          formData.append(component.name, item);
+        }
         return formData;
       }
       if (isCheckable(component)) {

package/dist/chunks/useTime.js

@@ -128,23 +128,28 @@ function getLocalizedTimePart(part, parts, locale = "en") {
     return null;
   }
   if (part === "hourSuffix") {
-    const hourIndex = parts.indexOf(parts.find(({ type }) => type === "hour"));
-    const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
+    const hourPart = parts.find(({ type }) => type === "hour");
+    const minutePart = parts.find(({ type }) => type === "minute");
+    const hourIndex = hourPart ? parts.indexOf(hourPart) : -1;
+    const minuteIndex = minutePart ? parts.indexOf(minutePart) : -1;
     const hourSuffix = parts[hourIndex + 1];
     return hourSuffix?.type === "literal" && minuteIndex - hourIndex === 2 ? hourSuffix.value || null : null;
   }
   if (part === "minuteSuffix") {
-    const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
+    const minutePart = parts.find(({ type }) => type === "minute");
+    const minuteIndex = minutePart ? parts.indexOf(minutePart) : -1;
     const minuteSuffix = parts[minuteIndex + 1];
     return minuteSuffix?.type === "literal" ? minuteSuffix.value || null : null;
   }
   if (part === "secondSuffix") {
     let secondSuffixPart;
-    const fractionalSecondIndex = parts.indexOf(parts.find(({ type }) => type === "fractionalSecond"));
+    const fractionalSecondPart = parts.find(({ type }) => type === "fractionalSecond");
+    const fractionalSecondIndex = fractionalSecondPart ? parts.indexOf(fractionalSecondPart) : -1;
     if (fractionalSecondIndex !== -1) {
       secondSuffixPart = parts[fractionalSecondIndex + 1];
     } else {
-      const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
+      const secondPart = parts.find(({ type }) => type === "second");
+      const secondIndex = secondPart ? parts.indexOf(secondPart) : -1;
       secondSuffixPart = parts[secondIndex + 1];
     }
     return secondSuffixPart?.type === "literal" && secondSuffixPart.value || null;
@@ -152,7 +157,7 @@ function getLocalizedTimePart(part, parts, locale = "en") {
   if (part === "meridiem") {
     const meridiemFromBrowser = parts.find(({ type }) => type === "dayPeriod")?.value || null;
     if (meridiemFromBrowser) {
-      return getLocalizedMeridiem({ locale, parts });
+      return getLocalizedMeridiem({ locale, parts }) ?? null;
     }
   }
   return parts.find(({ type }) => type === part)?.value || null;
@@ -192,14 +197,11 @@ function isValidTime(value) {
   }
   const hourAsNumber = parseInt(hour);
   const minuteAsNumber = parseInt(minute);
-  const secondAsNumber = parseInt(second);
+  const secondAsNumber = parseInt(second ?? "");
   const hourValid = isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
   const minuteValid = isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
   const secondValid = isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
-  if (hourValid && minuteValid && !second || hourValid && minuteValid && secondValid) {
-    return true;
-  }
-  return false;
+  return hourValid && minuteValid && (!second || secondValid);
 }
 function isValidTimePart(value, part) {
   if (part === "meridiem") {
@@ -208,7 +210,8 @@ function isValidTimePart(value, part) {
   if (!isValidNumber(value)) {
     return false;
   }
-  const valueAsNumber = Number(value);
+  const valueAsString = value;
+  const valueAsNumber = Number(valueAsString);
   const isZeroOrGreater = valueAsNumber >= 0;
   const isLessThanMaxHour = valueAsNumber < 24;
   const isLessThanMaxSecond = valueAsNumber < 60;
@@ -290,8 +293,8 @@ function localizeTimeString({
       0,
       parseInt(hour),
       parseInt(minute),
-      includeSeconds && parseInt(second),
-      includeSeconds && fractionalSecond && fractionalSecondPartToMilliseconds(fractionalSecond)
+      includeSeconds && typeof second === "string" ? parseInt(second) : 0,
+      includeSeconds && fractionalSecond ? fractionalSecondPartToMilliseconds(fractionalSecond) : 0
     )
   );
   const formatter = createLocaleDateTimeFormatter({
@@ -311,7 +314,7 @@ function localizeTimeString({
       second: getLocalizedTimePart("second", parts),
       decimalSeparator: getLocalizedDecimalSeparator(locale, numberingSystem),
       fractionalSecond: getLocalizedTimePart("fractionalSecond", parts),
-      secondSuffix: locale !== "bg" && getLocalizedTimePart("secondSuffix", parts),
+      secondSuffix: locale !== "bg" ? getLocalizedTimePart("secondSuffix", parts) : null,
       meridiem: getLocalizedTimePart("meridiem", parts, locale)
     };
   } else {
@@ -341,7 +344,7 @@ function parseTimeString(value, step) {
     if (secondDecimal?.includes(".")) {
       [second, fractionalSecond] = secondDecimal.split(".");
     }
-    if (step) {
+    if (step && typeof fractionalSecond === "string") {
       fractionalSecond = formatFractionalSecond(fractionalSecond, step);
     }
     return {
@@ -422,7 +425,7 @@ class TimeController extends GenericController {
           case "Backspace":
           case "Delete":
             event.preventDefault();
-            this.setValuePart("hour", null);
+            this.setValuePart("hour", void 0);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -444,7 +447,7 @@ class TimeController extends GenericController {
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
-        if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
+        if (typeof this.minute === "string" && isValidNumber(this.minute) && this.minute.startsWith("0")) {
           const minuteAsNumber = parseInt(this.minute);
           newMinute = minuteAsNumber > maxTenthForMinuteAndSecond ? keyAsNumber : `${minuteAsNumber}${keyAsNumber}`;
         } else {
@@ -456,7 +459,7 @@ class TimeController extends GenericController {
           case "Backspace":
           case "Delete":
             event.preventDefault();
-            this.setValuePart("minute", null);
+            this.setValuePart("minute", void 0);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -478,7 +481,7 @@ class TimeController extends GenericController {
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
-        if (isValidNumber(this.second) && this.second.startsWith("0")) {
+        if (typeof this.second === "string" && isValidNumber(this.second) && this.second.startsWith("0")) {
           const secondAsNumber = parseInt(this.second);
           newSecond = secondAsNumber > maxTenthForMinuteAndSecond ? keyAsNumber : `${secondAsNumber}${keyAsNumber}`;
         } else {
@@ -490,7 +493,7 @@ class TimeController extends GenericController {
           case "Backspace":
           case "Delete":
             event.preventDefault();
-            this.setValuePart("second", null);
+            this.setValuePart("second", void 0);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -525,7 +528,7 @@ class TimeController extends GenericController {
           case "Backspace":
           case "Delete":
             event.preventDefault();
-            this.setValuePart("fractionalSecond", null);
+            this.setValuePart("fractionalSecond", void 0);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -583,7 +586,7 @@ class TimeController extends GenericController {
     this.decrementMinuteOrSecond("second");
   }
   incrementHour() {
-    const newHour = isValidNumber(this.hour) ? this.hour === "23" ? 0 : parseInt(this.hour) + 1 : 1;
+    const newHour = typeof this.hour === "string" && isValidNumber(this.hour) ? this.hour === "23" ? 0 : parseInt(this.hour) + 1 : 1;
     this.setValuePart("hour", newHour);
   }
   incrementMinute() {
@@ -694,17 +697,7 @@ class TimeController extends GenericController {
     const newValue = toISOTimeString(value, step);
     if (isValidTime(value)) {
       const { hour, minute, second, fractionalSecond } = parseTimeString(newValue, step);
-      const {
-        hour: localizedHour,
-        hourSuffix: localizedHourSuffix,
-        minute: localizedMinute,
-        minuteSuffix: localizedMinuteSuffix,
-        second: localizedSecond,
-        secondSuffix: localizedSecondSuffix,
-        decimalSeparator: localizedDecimalSeparator,
-        fractionalSecond: localizedFractionalSecond,
-        meridiem: localizedMeridiem
-      } = localizeTimeString({
+      const localized = localizeTimeString({
         hour12,
         locale,
         numberingSystem,
@@ -716,17 +709,19 @@ class TimeController extends GenericController {
       this.minute = minute;
       this.second = second;
       this.fractionalSecond = fractionalSecond;
-      this.localizedHour = localizedHour;
-      this.localizedHourSuffix = localizedHourSuffix;
-      this.localizedMinute = localizedMinute;
-      this.localizedMinuteSuffix = localizedMinuteSuffix;
-      this.localizedSecond = localizedSecond;
-      this.localizedDecimalSeparator = localizedDecimalSeparator;
-      this.localizedFractionalSecond = localizedFractionalSecond;
-      this.localizedSecondSuffix = localizedSecondSuffix;
-      if (localizedMeridiem) {
-        this.meridiem = getMeridiem(this.hour);
-        this.localizedMeridiem = localizedMeridiem;
+      if (localized) {
+        this.localizedHour = localized.hour;
+        this.localizedHourSuffix = localized.hourSuffix;
+        this.localizedMinute = localized.minute;
+        this.localizedMinuteSuffix = localized.minuteSuffix;
+        this.localizedSecond = localized.second;
+        this.localizedDecimalSeparator = localized.decimalSeparator;
+        this.localizedFractionalSecond = localized.fractionalSecond;
+        this.localizedSecondSuffix = localized.secondSuffix;
+        if (localized.meridiem) {
+          this.meridiem = getMeridiem(this.hour);
+          this.localizedMeridiem = localized.meridiem;
+        }
       }
     } else {
       this.hour = null;

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

@@ -30,7 +30,7 @@ export abstract class Card extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *

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

@@ -70,8 +70,6 @@ class Carousel extends LitElement {
       this.setMaxItemsToBreakpoint(width);
     };
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
-    this.slideDurationInterval = null;
-    this.slideInterval = null;
     this.tabListRef = createRef();
     this.timer = () => {
       let time = this.slideDurationRemaining;
@@ -97,6 +95,7 @@ class Carousel extends LitElement {
     this.items = [];
     this.maxItems = centerItemsByBreakpoint.xxsmall;
     this.playing = false;
+    this.selectedIndex = 0;
     this.slideDurationRemaining = 1;
     this.suspendedDueToFocus = false;
     this.suspendedDueToHover = false;
@@ -122,7 +121,7 @@ class Carousel extends LitElement {
     this.styles = styles;
   }
   async play() {
-    if (this.playing || !this.hasMultiple || this.autoplay !== "" && !this.autoplay && this.autoplay !== "paused") {
+    if (this.playing || !this.hasMultiple || this.autoplay !== "" && this.autoplay !== true && this.autoplay !== "paused") {
       return;
     }
     this.handlePlay(true);
@@ -287,7 +286,7 @@ class Carousel extends LitElement {
     }
   }
   handleItemSelection(event) {
-    const item = event.target;
+    const item = event.currentTarget;
     const requestedPosition = parseInt(item.dataset.index);
     if (requestedPosition === this.selectedIndex) {
       return;
@@ -355,7 +354,7 @@ class Carousel extends LitElement {
       case " ":
       case "Enter":
         event.preventDefault();
-        if (this.autoplay === "" || this.autoplay || this.autoplay === "paused") {
+        if (this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") {
           this.toggleRotation();
         }
         break;
@@ -425,7 +424,7 @@ class Carousel extends LitElement {
     return html`<div class=${safeClassMap({
       [CSS.pagination]: true,
       [CSS.containerOverlaid]: this.controlOverlay
-    })} @keydown=${this.tabListKeyDownHandler} ${ref(this.tabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") && this.hasMultiple && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("previous") || ""}${this.paginationDisabled ? this.renderPaginationAriaLive() : this.renderPaginationItems()}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("next") || ""}</div>`;
+    })} @keydown=${this.tabListKeyDownHandler} ${ref(this.tabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") && this.hasMultiple && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("previous") || ""}${this.paginationDisabled ? this.renderPaginationAriaLive() : this.renderPaginationItems()}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("next") || ""}</div>`;
   }
   renderPaginationItems() {
     const { selectedIndex, maxItems, items, label, handleItemSelection } = this;

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

@@ -27,7 +27,7 @@ export abstract class Checkbox extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
    *
@@ -38,13 +38,13 @@ export abstract class Checkbox extends LitElement {
    */
   accessor indeterminate: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { required?: string; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value in order for the form to submit.

package/dist/components/calcite-chip-group/customElement.js

@@ -91,7 +91,7 @@ class ChipGroup extends LitElement {
     event.stopPropagation();
   }
   updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip"));
+    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip")) || [];
     this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
     if (this.items?.length < 1) {
       return;

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

@@ -879,7 +879,7 @@ class ColorPicker extends LitElement {
     })}</div></calcite-tab>`);
   }
   renderChannel(value, index, ariaLabel, direction, suffix) {
-    return keyed(index, html`<calcite-input-number class=${safeClassMap(CSS.channel)} data-channel-index=${index ?? nothing} dir=${direction ?? nothing} .label=${ariaLabel} lang=${this.messages._lang ?? nothing} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${safeStyleMap({
+    return keyed(index, html`<calcite-input-number class=${safeClassMap(CSS.channel)} data-channel-index=${index ?? nothing} dir=${direction ?? nothing} .label=${ariaLabel} lang=${this.messages._lang ?? nothing} number-button-type=none .numberingSystem=${this.numberingSystem} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} @keydown=${this.handleKeyDown} .scale=${this.scale === "l" ? "m" : "s"} style=${safeStyleMap({
       marginLeft: index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : ""
     })} .suffixText=${suffix} .value=${value?.toString()}></calcite-input-number>`);
   }

package/dist/components/calcite-color-picker-hex-input/customElement.js

@@ -223,7 +223,7 @@ class ColorPickerHexInput extends LitElement {
     const hexInputValue = this.formatHexForInternalInput(value);
     const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
     const inputScale = scale === "l" ? "m" : "s";
-    return html`<div class=${safeClassMap(CSS.container)}><calcite-input-text class=${safeClassMap(CSS.hexInput)} .label=${messages?.hex || hexLabel} .maxLength=${this.alphaChannel ? 8 : 6} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} prefix-text=# .scale=${inputScale} .value=${hexInputValue} ${ref(this.hexInputRef)}></calcite-input-text>${alphaChannel ? keyed("opacity-input", html`<calcite-input-number class=${safeClassMap(CSS.opacityInput)} .label=${messages?.opacity} .max=${OPACITY_LIMITS.max} max-length=3 .min=${OPACITY_LIMITS.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${inputScale} suffix-text=% .value=${opacityInputValue} ${ref(this.opacityInputRef)}></calcite-input-number>`) : null}</div>`;
+    return html`<div class=${safeClassMap(CSS.container)}><calcite-input-text class=${safeClassMap(CSS.hexInput)} .label=${messages?.hex || hexLabel} .maxLength=${this.alphaChannel ? 8 : 6} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} prefix-text=# .scale=${inputScale} .value=${hexInputValue} ${ref(this.hexInputRef)}></calcite-input-text>${alphaChannel ? keyed("opacity-input", html`<calcite-input-number class=${safeClassMap(CSS.opacityInput)} .label=${messages?.opacity} .max=${OPACITY_LIMITS.max} max-length=3 .min=${OPACITY_LIMITS.min} number-button-type=none .numberingSystem=${this.numberingSystem} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} @keydown=${this.onInputKeyDown} .scale=${inputScale} suffix-text=% .value=${opacityInputValue} ${ref(this.opacityInputRef)}></calcite-input-number>`) : null}</div>`;
   }
 }
 customElement("calcite-color-picker-hex-input", ColorPickerHexInput);

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

@@ -484,9 +484,9 @@ class Combobox extends LitElement {
         break;
       case " ":
         if (!this.textInputRef.value.value && !event.defaultPrevented) {
-          if (!this.open) {
+          if (!this.open && this.keyboardNavItems.length) {
             this.open = true;
-            this.shiftActiveItemIndex(1);
+            this.ensureRecentSelectedItemIsActive();
           }
           event.preventDefault();
         }
@@ -566,7 +566,7 @@ class Combobox extends LitElement {
     this.topLayer.show();
     this.reposition();
     this.calciteComboboxBeforeOpen.emit();
-    setTimeout(() => this.scrollToActiveOrSelectedItem(true), 0);
+    setTimeout(() => this.scrollToActiveOrSelectedItem(this.activeItemIndex < 0), 0);
   }
   onOpen() {
     this.calciteComboboxOpen.emit();
@@ -615,9 +615,14 @@ class Combobox extends LitElement {
     this.ensureRecentSelectedItemIsActive();
   }
   ensureRecentSelectedItemIsActive() {
-    const { selectedItems } = this;
-    const targetIndex = selectedItems.length === 0 ? 0 : this.items.indexOf(selectedItems[selectedItems.length - 1]);
-    this.updateActiveItemIndex(targetIndex);
+    const { activeItemIndex, selectedItems, keyboardNavItems } = this;
+    if (activeItemIndex > -1 && keyboardNavItems[activeItemIndex]) {
+      this.updateActiveItemIndex(activeItemIndex);
+      return;
+    }
+    const selectedItem = selectedItems[selectedItems.length - 1];
+    const targetIndex = selectedItem ? keyboardNavItems.indexOf(selectedItem) : keyboardNavItems.length ? 0 : -1;
+    this.updateActiveItemIndex(targetIndex > -1 ? targetIndex : keyboardNavItems.length ? 0 : -1);
   }
   hideChip(chipEl) {
     chipEl.classList.add(CSS.chipInvisible);

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-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.
    *