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

package/dist/chunks/useTime.js

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

package/dist/chunks/utils2.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { isServer } from "lit";
 import { n as nodeListToArray } from "./dom.js";
-import { A as AllComboboxChildrenSelector, a as ComboboxItemSelector, b as ComboboxItemGroupSelector } from "./resources5.js";
+import { A as AllComboboxChildrenSelector, a as ComboboxItemSelector, b as ComboboxItemGroupSelector } from "./resources6.js";
 function getAncestors(element) {
   const parent = element.parentElement?.closest(AllComboboxChildrenSelector);
   const grandparent = parent?.parentElement?.closest(AllComboboxChildrenSelector);
@@ -47,12 +47,65 @@ function isSingleLike(selectionMode) {
 function getLabel(item) {
   return item.shortHeading || item.heading;
 }
+function orderByPrevious(items, previousItems) {
+  if (items.length < 2 || previousItems.length === 0) {
+    return items;
+  }
+  const previousItemOrder = new Map(previousItems.map((item, index) => [item, index]));
+  return [...items].sort((a, b) => {
+    const aOrder = previousItemOrder.get(a);
+    const bOrder = previousItemOrder.get(b);
+    if (aOrder !== void 0 && bOrder !== void 0) {
+      return aOrder - bOrder;
+    }
+    if (aOrder !== void 0) {
+      return -1;
+    }
+    if (bOrder !== void 0) {
+      return 1;
+    }
+    return 0;
+  });
+}
+function consumeValue(counts, value) {
+  const count = counts.get(value) ?? 0;
+  if (count === 0) {
+    return false;
+  }
+  if (count === 1) {
+    counts.delete(value);
+  } else {
+    counts.set(value, count - 1);
+  }
+  return true;
+}
+function orderValuesByPrevious(selectedValues, previousValues) {
+  if (selectedValues.length < 2 || previousValues.length === 0) {
+    return selectedValues;
+  }
+  const selectedValueCounts = /* @__PURE__ */ new Map();
+  selectedValues.forEach((value) => {
+    selectedValueCounts.set(value, (selectedValueCounts.get(value) ?? 0) + 1);
+  });
+  const orderedSelectedValues = previousValues.filter((value) => consumeValue(selectedValueCounts, value));
+  if (orderedSelectedValues.length === 0) {
+    return selectedValues;
+  }
+  selectedValues.forEach((value) => {
+    if (consumeValue(selectedValueCounts, value)) {
+      orderedSelectedValues.push(value);
+    }
+  });
+  return orderedSelectedValues;
+}
 export {
-  getItemAncestors as a,
-  getItemChildren as b,
-  getAncestors as c,
-  getDepth as d,
+  orderByPrevious as a,
+  getItemAncestors as b,
+  getItemChildren as c,
+  getAncestors as d,
+  getDepth as e,
   getLabel as g,
   hasActiveChildren as h,
-  isSingleLike as i
+  isSingleLike as i,
+  orderValuesByPrevious as o
 };

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

@@ -31,7 +31,7 @@ import type { HeadingLevel } from "../functional/Heading.js";
  */
 export abstract class AccordionItem extends LitElement {
   /** Specifies a description for the component. */
-  accessor description: string | undefined;
+  accessor description: string;
   /**
    * When `true`, expands the component and its contents.
    *
@@ -39,15 +39,15 @@ export abstract class AccordionItem extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string | undefined;
+  accessor heading: string;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel | undefined;
+  accessor headingLevel: HeadingLevel;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName | undefined;
+  accessor iconEnd: IconName;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext | undefined;
+  accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName | undefined;
+  accessor iconStart: IconName;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       collapse?: string;

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

@@ -70,7 +70,7 @@ class AccordionItem extends LitElement {
     this.listenOn(document, "calciteInternalAccordionItemsSync", this.accordionItemSyncHandler);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, { type: String }, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], accordionParent: [0, {}, { attribute: false }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, { type: String }, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

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

@@ -37,7 +37,7 @@ export abstract class Alert extends LitElement {
    * When `true`, shows a default recommended icon. Alternatively,
    * pass a Calcite UI Icon name to display a specific icon.
    */
-  accessor icon: IconName | boolean | undefined;
+  accessor icon: IconName | boolean;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -59,7 +59,7 @@ export abstract class Alert extends LitElement {
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { close?: string; };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem | undefined;
+  accessor numberingSystem: NumberingSystem;
   /**
    * When `true`, displays and positions the component.
    *

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

@@ -95,9 +95,7 @@ const manager = new AlertManager();
 class Alert extends LitElement {
   constructor() {
     super(...arguments);
-    this.initialOpenTime = -1;
-    this.isHovered = false;
-    this.lastMouseOverBegin = -1;
+    this.autoCloseTimeoutId = null;
     this.transitionProp = "opacity";
     this.totalHoverTime = 0;
     this.totalOpenTime = 0;
@@ -228,7 +226,7 @@ class Alert extends LitElement {
   }
   clearAutoCloseTimeout() {
     window.clearTimeout(this.autoCloseTimeoutId);
-    this.autoCloseTimeoutId = void 0;
+    this.autoCloseTimeoutId = null;
   }
   closeAlert() {
     this.open = false;
@@ -288,10 +286,10 @@ class Alert extends LitElement {
       [`${CSS.container}--${placement}`]: true,
       [CSS.containerEmbedded]: this.embedded,
       [CSS.focused]: this.isFocused
-    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : void 0} @pointerleave=${this.autoClose ? this.handleMouseLeave : void 0} .popover=${!this.embedded ? "manual" : void 0} ${ref(this.transitionRef)}>${effectiveIcon && this.renderIcon(effectiveIcon) || ""}<div class=${safeClassMap(CSS.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : void 0} @focusout=${this.autoClose ? this.handleKeyBoardBlur : void 0}><slot name=${SLOTS.title}></slot><slot name=${SLOTS.message}></slot><slot name=${SLOTS.link}></slot></div>${this.renderActionsEnd()}${hasQueuedAlerts ? this.renderQueueCount() : void 0}${this.renderCloseButton()}${open && active && autoClose ? html`<div class=${safeClassMap(CSS.dismissProgress)}></div>` : void 0}</div>`;
+    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} @pointerleave=${this.autoClose ? this.handleMouseLeave : null} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}>${effectiveIcon && this.renderIcon(effectiveIcon) || ""}<div class=${safeClassMap(CSS.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null}><slot name=${SLOTS.title}></slot><slot name=${SLOTS.message}></slot><slot name=${SLOTS.link}></slot></div>${this.renderActionsEnd()}${hasQueuedAlerts ? this.renderQueueCount() : null}${this.renderCloseButton()}${open && active && autoClose ? html`<div class=${safeClassMap(CSS.dismissProgress)}></div>` : null}</div>`;
   }
   renderCloseButton() {
-    return html`<calcite-action class=${safeClassMap(CSS.close)} icon=x .label=${this.messages.close} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : void 0} @focusout=${this.autoClose ? this.handleKeyBoardBlur : void 0} .scale=${this.scale} .text=${this.messages.close}></calcite-action>`;
+    return html`<calcite-action class=${safeClassMap(CSS.close)} icon=x .label=${this.messages.close} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null} .scale=${this.scale} .text=${this.messages.close}></calcite-action>`;
   }
   renderQueueCount() {
     const { openAlertCount } = this;

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

@@ -46,7 +46,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  accessor autocomplete: AutoFill | undefined;
+  accessor autocomplete: AutoFill;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -54,19 +54,19 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[] | undefined;
+  accessor flipPlacements: FlipPlacement[];
   /**
    * Specifies the `id` of the component's associated form.
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string | undefined;
+  accessor form: string;
   /**
    * When `true` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    *
    * To hide the default icon, set the property to `false` using JavaScript.
    */
-  accessor icon: IconName | boolean | undefined;
+  accessor icon: IconName | boolean;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -74,11 +74,11 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies the text typed into the component and is used to filter slotted `autocomplete-item`s. */
-  accessor inputValue: string | undefined;
+  accessor inputValue: string;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string | undefined;
+  accessor labelText: string;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -91,7 +91,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
-  accessor maxLength: number | undefined;
+  accessor maxLength: number;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       clear?: string;
@@ -104,7 +104,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
-  accessor minLength: number | undefined;
+  accessor minLength: number;
   /**
    * Specifies the name of the component.
    *
@@ -112,7 +112,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
-  accessor name: string | undefined;
+  accessor name: string;
   /**
    * When `true`, displays and positions the component.
    *
@@ -136,13 +136,13 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor pattern: string | undefined;
+  accessor pattern: string;
   /**
    * Specifies placeholder text for the component.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
-  accessor placeholder: string | undefined;
+  accessor placeholder: string;
   /**
    * Determines where the component will be positioned relative to the container element.
    *
@@ -150,7 +150,7 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor placement: MenuPlacement;
   /** Specifies the component's prefix text. */
-  accessor prefixText: string | undefined;
+  accessor prefixText: string;
   /**
    * When `true`, the component's value can be read, but cannot be modified.
    *
@@ -178,7 +178,7 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor status: Status;
   /** Specifies the component's suffix text. */
-  accessor suffixText: string | undefined;
+  accessor suffixText: string;
   /**
    * When `true` and the component is `open`, disables top layer placement.
    *
@@ -189,9 +189,9 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean | undefined;
+  accessor validationIcon: IconName | boolean;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string | undefined;
+  accessor validationMessage: string;
   /**
    * The component's current validation state.
    *

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

@@ -130,7 +130,7 @@ class Autocomplete extends LitElement {
     this.transitionRef.value?.scrollTo(options);
   }
   async selectText() {
-    return this.referenceEl?.selectText();
+    return this.referenceEl.selectText();
   }
   async setFocus(options) {
     return this.focusSetter(() => this.referenceEl, options);
@@ -163,7 +163,7 @@ class Autocomplete extends LitElement {
     }
     let itemsAndGroupsUpdated = false;
     if (changes.has("inputValue") && (this.hasUpdated || this.inputValue)) {
-      this.inputValueMatchPattern = this.inputValue ? new RegExp(`(${escapeRegExp(this.inputValue)})`, "i") : void 0;
+      this.inputValueMatchPattern = this.inputValue && new RegExp(`(${escapeRegExp(this.inputValue)})`, "i");
       this.updateItems();
       this.updateGroups();
       itemsAndGroupsUpdated = true;
@@ -260,7 +260,7 @@ class Autocomplete extends LitElement {
     });
   }
   updateItems() {
-    let activeDescendant = "";
+    let activeDescendant = null;
     this.items.forEach((item) => {
       item.scale = this.scale;
       item.inputValueMatchPattern = this.inputValueMatchPattern;
@@ -386,7 +386,7 @@ class Autocomplete extends LitElement {
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
       [CSS.contentContainer]: true,
       [CSS.floatingUIContainer]: true,
       [CSS.floatingUIContainerActive]: isOpen

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

@@ -13,7 +13,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class AutocompleteItem extends LitElement {
   /** Specifies a description for the component. Displays below the label text. */
-  accessor description: string | undefined;
+  accessor description: string;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -27,13 +27,13 @@ export abstract class AutocompleteItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName | undefined;
+  accessor iconEnd: IconName;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext | undefined;
+  accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName | undefined;
+  accessor iconStart: IconName;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * When `true`, the component is selected.
    *

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

@@ -9,9 +9,9 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class Avatar extends LitElement {
   /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
-  accessor fullName: string | undefined;
+  accessor fullName: string;
   /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * Specifies the size of the component.
    *
@@ -19,9 +19,9 @@ export abstract class Avatar extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the `src` to an image. If the image is private, include an access token in the URL. */
-  accessor thumbnail: string | undefined;
+  accessor thumbnail: string;
   /** Specifies the unique id of the user. */
-  accessor userId: string | undefined;
+  accessor userId: string;
   /** Specifies the username of the user. */
-  accessor username: string | undefined;
+  accessor username: string;
 }

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 | undefined;
+  accessor label: string;
   /**
    * When `true`, a busy indicator is displayed.
    *