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

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

@@ -22,7 +22,7 @@ export abstract class ActionMenu extends LitElement {
    * @default false
    */
   accessor expanded: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[];
   /**
    * Specifies an accessible label for the component.
@@ -59,9 +59,7 @@ export abstract class ActionMenu extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -85,9 +85,7 @@ export abstract class Alert extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -53,13 +53,9 @@ export abstract class Autocomplete extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** 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;
   /**
    * When `true` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
@@ -180,9 +176,7 @@ export abstract class Autocomplete extends LitElement {
   /** Specifies the component's suffix text. */
   accessor suffixText: string | undefined;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -12,7 +12,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.
  */
 export abstract class AutocompleteItem extends LitElement {
-  /** Specifies a description for the component. Displays below the label text. */
+  /** Specifies a description for the component. Displays below the `label`. */
   accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

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

@@ -35,7 +35,7 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor collapsible: boolean;
-  /** Specifies a description for the component. Displays below the heading. */
+  /** Specifies a description for the component. Displays below the `heading`. */
   accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -80,7 +80,7 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * Determines where the action menu will be positioned.
@@ -131,9 +131,7 @@ export abstract class Block extends LitElement {
    */
   accessor status: Status | undefined;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -45,11 +45,7 @@ export abstract class Button extends LitElement {
    * @see [MDN - Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
    */
   accessor download: string | boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** 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;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
   accessor href: string | undefined;

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

@@ -22,11 +22,7 @@ export abstract class Checkbox extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** 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;
   /**
    * When `true`, the component is initially indeterminate, which is independent from its `checked` value.

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

@@ -24,7 +24,7 @@ export abstract class Combobox extends LitElement {
    *
    * @default false
    */
-  accessor allowCustomValues: boolean;
+  accessor allowCustomValues: boolean | undefined;
   /**
    * When `true`, disables value-clearing.
    *
@@ -40,17 +40,13 @@ export abstract class Combobox extends LitElement {
   /** The component's filtered items. */
   get filteredItems(): HTMLCalciteComboboxItemElement[];
   /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, `shortHeading`). */
-  accessor filterProps: string[];
+  accessor filterProps: string[] | undefined;
   /** The component's filter input field text. */
   accessor filterText: string;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  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;
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
+  /** 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;
   /**
    * Specifies an accessible label for the component.
    *
@@ -58,7 +54,7 @@ export abstract class Combobox extends LitElement {
    */
   accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Specifies the maximum number of `calcite-combobox-item-group`s & `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
    *
@@ -80,7 +76,7 @@ export abstract class Combobox extends LitElement {
       disabledSelectedCount?: 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`, displays and positions the component.
    *
@@ -98,9 +94,9 @@ export abstract class Combobox extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /** Specifies the input's placeholder text. */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies the input's placeholder icon. */
-  accessor placeholderIcon: IconName;
+  accessor placeholderIcon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the input's `placeholderIcon`.
    *
@@ -183,18 +179,16 @@ export abstract class Combobox extends LitElement {
    */
   accessor status: Status;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *

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

@@ -40,6 +40,7 @@ class Combobox extends LitElement {
     })(this);
     this.selectAllComboboxItemRef = createRef();
     this.allSelectedIndicatorChipRef = createRef();
+    this.data = [];
     this.cancelable = useCancelable()(this);
     this.filterItems = (() => {
       const find = (item, filteredData) => item && filteredData.some(({ el }) => item === el);
@@ -63,7 +64,7 @@ class Combobox extends LitElement {
           }
         });
         this.noMatchesFound = this.filteredItems.length === 0 && !!this.filterText;
-        this.filterTextMatchPattern = this.filterText && new RegExp(`(${escapeRegExp(this.filterText)})`, "i");
+        this.filterTextMatchPattern = this.filterText ? new RegExp(`(${escapeRegExp(this.filterText)})`, "i") : void 0;
         this.keyboardNavItems.forEach((item) => {
           item.filterTextMatchPattern = this.filterTextMatchPattern;
         });
@@ -83,6 +84,7 @@ class Combobox extends LitElement {
       }
       return this.allItems.filter((item) => item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item)));
     };
+    this.groupData = [];
     this.groupItems = [];
     this.guid = guid();
     this.ignoreSelectedEventsFlag = false;
@@ -113,7 +115,7 @@ class Combobox extends LitElement {
     this.clearButtonRef = createRef();
     this._selectedItems = [];
     this.textInputRef = createRef();
-    this._value = null;
+    this._value = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.customChipAddHandler = () => {
@@ -133,6 +135,7 @@ class Combobox extends LitElement {
     this.fitUsingCompactCountLabel = false;
     this.allItems = [];
     this.items = [];
+    this.noMatchesFound = false;
     this.clearDisabled = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -434,7 +437,7 @@ class Combobox extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   getValue() {
     const items = this.getOrderedSelectedValues(this.selectedItems.map((item) => item.value?.toString()));
@@ -494,7 +497,7 @@ class Combobox extends LitElement {
         }
         break;
       case "ArrowLeft":
-        if (this.activeChipIndex !== -1 || this.textInputRef.value.selectionStart === 0) {
+        if (this.activeChipIndex !== -1 || this.textInputRef.value?.selectionStart === 0) {
           this.previousChip();
           event.preventDefault();
         }
@@ -534,7 +537,7 @@ class Combobox extends LitElement {
         }
         break;
       case " ":
-        if (!this.textInputRef.value.value && !event.defaultPrevented) {
+        if (!this.textInputRef.value?.value && !event.defaultPrevented) {
           if (!this.open && this.keyboardNavItems.length) {
             this.open = true;
             this.ensureRecentSelectedItemIsActive();
@@ -571,7 +574,7 @@ class Combobox extends LitElement {
           break;
         }
         if (!this.clearDisabled) {
-          if (this.textInputRef.value?.value.length > 0) {
+          if (this.textInputRef.value.value.length > 0) {
             this.resetText();
             event.preventDefault();
           } else if (this.selectedItems.length > 0 && this.selectionMode !== "single-persist") {
@@ -635,7 +638,7 @@ class Combobox extends LitElement {
   }
   async setMaxScrollerHeight() {
     const { listContainerEl, open, referenceEl } = this;
-    if (!listContainerEl || !open) {
+    if (!listContainerEl || !open || !referenceEl) {
       return;
     }
     const maxScrollerHeight = this.getMaxScrollerHeight();
@@ -660,7 +663,8 @@ class Combobox extends LitElement {
       event.preventDefault();
       return;
     }
-    if (composedPath.includes(this.clearButtonRef.value)) {
+    const clearButton = this.clearButtonRef.value;
+    if (clearButton && composedPath.includes(clearButton)) {
       this.clearValue();
       event.preventDefault();
       return;
@@ -727,11 +731,11 @@ class Combobox extends LitElement {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    if (!this.textInputRef.value || !this.chipContainerEl) {
+    const { allSelectedIndicatorChipRef, chipContainerEl, selectionDisplay, placeholder, selectedIndicatorChipRef, textInputRef } = this;
+    if (!textInputRef.value || !chipContainerEl) {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    const { allSelectedIndicatorChipRef, chipContainerEl, selectionDisplay, placeholder, selectedIndicatorChipRef, textInputRef } = this;
     const chipContainerElGap = parseInt(getComputedStyle(chipContainerEl).gap);
     const chipContainerElWidth = getElementWidth(chipContainerEl);
     const { fontSize, fontFamily, minInlineSize } = getComputedStyle(textInputRef.value);
@@ -752,7 +756,7 @@ class Combobox extends LitElement {
     });
     if (selectionDisplay !== "fit" && this.allSelected && this.selectAllEnabled) {
       this.selectedItems.forEach((item) => {
-        const chipEl = this.referenceEl.querySelector(`#${IDS.chip(item.guid)}`);
+        const chipEl = this.referenceEl?.querySelector(`#${IDS.chip(item.guid)}`);
         if (chipEl) {
           this.hideChip(chipEl);
         }
@@ -760,14 +764,14 @@ class Combobox extends LitElement {
     }
     if (this.indeterminate) {
       this.selectedItems.forEach((item) => {
-        const chipEl = this.referenceEl.querySelector(`#${IDS.chip(item.guid)}`);
+        const chipEl = this.referenceEl?.querySelector(`#${IDS.chip(item.guid)}`);
         if (chipEl) {
           this.showChip(chipEl);
         }
       });
     }
     if (selectionDisplay === "fit") {
-      const chipEls = Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter((chipEl) => {
+      const chipEls = Array.from(this.renderRoot.querySelectorAll("calcite-chip")).filter((chipEl) => {
         const chipValue = chipEl.value;
         const hasValue = chipValue != null && `${chipValue}` !== "";
         return chipEl.disabled || hasValue;
@@ -792,7 +796,7 @@ class Combobox extends LitElement {
       const didHiddenCountChange = previousHiddenChipsCount !== this.selectedHiddenChipsCount;
       if (didHiddenCountChange && followUpRefresh) {
         this.fitFollowUpRefreshPromise = this.updateComplete.then(() => this.refreshSelectionDisplay(false)).then(() => {
-          this.fitFollowUpRefreshPromise = null;
+          this.fitFollowUpRefreshPromise = void 0;
         });
       }
     }
@@ -1078,7 +1082,7 @@ class Combobox extends LitElement {
   }
   focusChip() {
     const guid2 = this.selectedItems[this.activeChipIndex]?.guid;
-    const chip = guid2 ? this.referenceEl.querySelector(`#${IDS.chip(guid2)}`) : null;
+    const chip = guid2 ? this.referenceEl?.querySelector(`#${IDS.chip(guid2)}`) : void 0;
     chip?.setFocus();
   }
   scrollToActiveOrSelectedItem(scrollToSelected = false) {
@@ -1104,7 +1108,7 @@ class Combobox extends LitElement {
   }
   updateActiveItemIndex(index) {
     this.activeItemIndex = index;
-    let activeDescendant = null;
+    let activeDescendant = "";
     this.keyboardNavItems.forEach((el, i) => {
       if (i === index) {
         el.active = true;
@@ -1126,7 +1130,7 @@ class Combobox extends LitElement {
       return;
     }
     this.activeChipIndex = -1;
-    this.textInputRef.value.focus();
+    this.textInputRef.value?.focus();
     if (this.open && this.selectionDisplay === "fit" && this.isMulti()) {
       void this.refreshSelectionDisplay();
     }
@@ -1141,7 +1145,7 @@ class Combobox extends LitElement {
   }
   getDescriptionMessage() {
     const value = Array.isArray(this.value) ? this.value.join(", ") : this.value;
-    return this.readOnly ? this.messages.nonEditable?.replace("{value}", `${value}`) : value;
+    return this.readOnly ? this.messages.nonEditable?.replace("{value}", `${value}`) ?? `${value}` : value;
   }
   getChipLabel(item, isAncestors) {
     if (!isAncestors) {
@@ -1155,7 +1159,7 @@ class Combobox extends LitElement {
     return keyed(item.guid || item.value || label, html`<calcite-chip .appearance=${readOnly ? "outline" : "solid"} class=${safeClassMap({
       [CSS.chip]: true,
       [CSS.disabled]: disabled
-    })} .closable=${!disabled && !readOnly} data-testid=${`${disabled ? "disabled-chip" : "chip"}-${index}`} .disabled=${disabled} .icon=${item.icon} .iconFlipRtl=${item.iconFlipRtl} id=${(!disabled && item.guid ? `${IDS.chip(item.guid)}` : null) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag } : null} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : null} @focusin=${!disabled ? () => this.activeChipIndex = index : null} .scale=${scale} .selected=${item.selected} .tabIndex=${!disabled && activeChipIndex === index ? 0 : -1} title=${label ?? nothing} .value=${item.value}>${label}</calcite-chip>`);
+    })} .closable=${!disabled && !readOnly} data-testid=${`${disabled ? "disabled-chip" : "chip"}-${index}`} .disabled=${disabled} .icon=${item.icon} .iconFlipRtl=${item.iconFlipRtl} id=${(!disabled && item.guid ? `${IDS.chip(item.guid)}` : void 0) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag } : void 0} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : void 0} @focusin=${!disabled ? () => this.activeChipIndex = index : void 0} .scale=${scale} .selected=${item.selected} .tabIndex=${!disabled && activeChipIndex === index ? 0 : -1} title=${label ?? nothing} .value=${item.value}>${label}</calcite-chip>`);
   }
   renderChipCount(count, scale) {
     const label = this.fitUsingCompactCountLabel ? `${count}` : this.messages.disabledSelectedCount?.replace("{count}", `${count}`) ?? `+${count}`;
@@ -1256,7 +1260,7 @@ class Combobox extends LitElement {
   }
   renderSelectedIndicatorChip() {
     const { compactSelectionDisplay, selectionDisplay, scale, selectedIndicatorChipRef } = this;
-    let chipInvisible;
+    let chipInvisible = false;
     let label;
     const selectedItemsCount = this.getSelectedItems().length;
     if (compactSelectionDisplay) {
@@ -1280,7 +1284,7 @@ class Combobox extends LitElement {
   }
   renderSelectedIndicatorChipCompact() {
     const { compactSelectionDisplay, selectionDisplay, scale } = this;
-    let chipInvisible;
+    let chipInvisible = false;
     let label;
     const selectedItemsCount = this.getSelectedItems().length;
     if (compactSelectionDisplay) {

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

@@ -26,9 +26,9 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
-  /** Specifies a description for the component. Displays below the heading. */
-  accessor description: string;
+  accessor ancestors: ComboboxChildElement[] | undefined;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string | undefined;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -50,7 +50,7 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -60,7 +60,7 @@ export abstract class ComboboxItem extends LitElement {
   /** Specifies an accessible label for the component. */
   accessor label: any;
   /** Specifies additional metadata to the component for use in filtering. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -74,7 +74,7 @@ export abstract class ComboboxItem extends LitElement {
    *
    * It is recommended to use 5 characters or fewer.
    */
-  accessor shortHeading: string;
+  accessor shortHeading: string | undefined;
   /** The component's value. Falls back to `heading` if not provided. */
   accessor value: any;
   /** Fires whenever the component is selected or unselected. */

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

@@ -45,6 +45,7 @@ class ComboboxItem extends LitElement {
     this.hasContent = false;
     this.active = false;
     this.disabled = false;
+    this.filterDisabled = false;
     this.guid = guid();
     this.iconFlipRtl = false;
     this.scale = "m";

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

@@ -9,7 +9,7 @@ import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
  */
 export abstract class ComboboxItemGroup extends LitElement {
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
+  accessor ancestors: ComboboxChildElement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *

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

@@ -182,9 +182,7 @@ export abstract class Dialog extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -25,7 +25,7 @@ export abstract class Dropdown extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when their initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[];
   /**
    * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scrollbar.
@@ -87,9 +87,7 @@ export abstract class Dropdown extends LitElement {
   /** The component's selected items. */
   get selectedItems(): DropdownItem[];
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -108,7 +108,7 @@ class Filter extends LitElement {
   }
   render() {
     const { disabled, scale } = this;
-    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @calciteInputInput=${this.inputHandler} @keydown=${this.keyDownHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
   }
 }
 customElement("calcite-filter", Filter);

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

@@ -85,7 +85,7 @@ export abstract class FlowItem extends LitElement {
    * @default false
    */
   accessor collapsible: boolean;
-  /** Specifies a the component's description. */
+  /** Specifies a description for the component. */
   accessor description: string;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
@@ -153,9 +153,7 @@ export abstract class FlowItem extends LitElement {
    */
   accessor showBackButton: boolean;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -8,16 +8,16 @@ export abstract class Graph extends LitElement {
    * Array of values describing a single color stop ([offset, color, opacity])
    * These color stops should be sorted by offset value.
    */
-  accessor colorStops: ColorStop[];
+  accessor colorStops: ColorStop[] | undefined;
   /**
    * Array of tuples describing a single data point ([x, y])
    * These data points should be sorted by x-axis value.
    */
   accessor data: DataSeries;
   /** End of highlight color if highlighting range. */
-  accessor highlightMax: number;
+  accessor highlightMax: number | undefined;
   /** Start of highlight color if highlighting range. */
-  accessor highlightMin: number;
+  accessor highlightMin: number | undefined;
   /**
    * Highest point of the range.
    *

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

@@ -9,8 +9,8 @@ function slope(p0, p1, p2) {
   const dx1 = p2[0] - p1[0];
   const dy = p1[1] - p0[1];
   const dy1 = p2[1] - p1[1];
-  const m = dy / (dx || dx1 < 0 && 0);
-  const m1 = dy1 / (dx1 || dx < 0 && 0);
+  const m = dy / Number(dx || dx1 < 0 && 0);
+  const m1 = dy1 / Number(dx1 || dx < 0 && 0);
   const p = (m * dx1 + m1 * dx) / (dx + dx1);
   return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
 }
@@ -125,36 +125,32 @@ class Graph extends LitElement {
       currentMax = [max, rangeMax[1]];
     }
     const t = translate({ min: currentMin, max: currentMax, width, height });
-    const [hMinX] = t([highlightMin, currentMax[1]]);
-    const [hMaxX] = t([highlightMax, currentMax[1]]);
     const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#${IDS.linearGradient(id)})` : void 0;
-    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}${highlightMin !== void 0 ? [
-      svg`<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
+    if (highlightMin !== void 0 && highlightMax !== void 0) {
+      const [hMinX] = t([highlightMin, currentMax[1]]);
+      const [hMaxX] = t([highlightMax, currentMax[1]]);
+      return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
             M 0,0
             L ${hMinX - 1},0
             L ${hMinX - 1},${height}
             L 0,${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
             M ${hMinX + 1},0
             L ${hMaxX - 1},0
             L ${hMaxX - 1},${height}
             L ${hMinX + 1}, ${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
                 M ${hMaxX + 1},0
                 L ${width},0
                 L ${width},${height}
                 L ${hMaxX + 1}, ${height}
                 Z
-              `} fill=white /></mask>`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`
-    ] : svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
+              `} fill=white /></mask><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} /><path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} /><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`}</svg>`;
+    }
+    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
   }
 }
 customElement("calcite-graph", Graph);

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

@@ -19,7 +19,7 @@ export abstract class Icon extends LitElement {
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
-  accessor icon: IconName;
+  accessor icon: IconName | null;
   /**
    * When `true`, preloads the `icon` data.
    *
@@ -37,5 +37,5 @@ export abstract class Icon extends LitElement {
    *
    * It is recommended to set this value if your icon is semantic.
    */
-  accessor textLabel: string;
+  accessor textLabel: string | undefined;
 }