@esri/calcite-components 5.2.0-next.2 → 5.2.0-next.4

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

@@ -29,7 +29,7 @@ import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useForm } from "../../chunks/useForm.js";
 import { i as isChip } from "../../chunks/resources6.js";
 import { I as IDS, C as CSS, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources7.js";
-import { h as hasActiveChildren, i as isSingleLike, g as getLabel, a as getItemAncestors, b as getItemChildren } from "../../chunks/utils2.js";
+import { h as hasActiveChildren, i as isSingleLike, o as orderValuesByPrevious, a as orderByPrevious, g as getLabel, b as getItemAncestors, c as getItemChildren } from "../../chunks/utils2.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([scale=s]){font-size:var(--calcite-font-size-relative-sm);--calcite-internal-combobox-spacing-unit-l: .5rem;--calcite-internal-combobox-spacing-unit-s: .25rem;--calcite-internal-combobox-padding-inline-end: var(--calcite-space-2xs);--calcite-internal-combobox-no-matches-spacing-unit-s: .25rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.25rem - 1px) ;--calcite-internal-close-size: 1rem}:host([scale=m]){font-size:var(--calcite-font-size-relative-base);--calcite-internal-combobox-spacing-unit-l: .75rem;--calcite-internal-combobox-spacing-unit-s: .5rem;--calcite-internal-combobox-padding-inline-end: var(--calcite-space-sm);--calcite-internal-combobox-no-matches-spacing-unit-s: .375rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.5rem - 1px) ;--calcite-internal-close-size: 1.5rem}:host([scale=l]){font-size:var(--calcite-font-size-relative-md);--calcite-internal-combobox-spacing-unit-l: 1rem;--calcite-internal-combobox-spacing-unit-s: .75rem;--calcite-internal-combobox-padding-inline-end: var(--calcite-space-sm-plus);--calcite-internal-combobox-no-matches-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-combobox-input-height: 1.5rem;--calcite-internal-combobox-input-margin-block: calc(var(--calcite-space-sm-plus) - 1px);--calcite-internal-close-size: 2rem}.wrapper{display:flex;border-width:1px;border-style:solid;outline-color:transparent;padding-block:calc(var(--calcite-internal-combobox-spacing-unit-s) / 4);padding-inline:var(--calcite-internal-combobox-spacing-unit-l) var(--calcite-internal-combobox-padding-inline-end);background-color:var(--calcite-combobox-input-background-color, var(--calcite-color-foreground-1));color:var(--calcite-combobox-input-text-color, var(--calcite-color-text-1));border-color:var(--calcite-combobox-input-border-color, var(--calcite-color-border-input))}.wrapper:hover .icon{color:var(--calcite-combobox-icon-color-hover, var(--calcite-color-text-1))}:host(:focus-within) .wrapper,.wrapper--active{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.wrapper--single{padding-block:0;padding-inline:var(--calcite-internal-combobox-spacing-unit-l) var(--calcite-internal-combobox-padding-inline-end);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;gap:var(--calcite-internal-combobox-spacing-unit-s);margin-inline-end:var(--calcite-internal-combobox-spacing-unit-s)}.grid-input.selection-display--fit,.grid-input.selection-display--single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-internal-combobox-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;width:0px;min-width:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-internal-combobox-spacing-unit-l)}.placeholder-icon{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3))}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-width:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-internal-combobox-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3))}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.floating-ui-container .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}@media(forced-colors:active){.wrapper,.floating-ui-container{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.list-container{max-height:45vh;overflow-y:auto;inline-size:var(--calcite-dropdown-width, 100%);background-color:var(--calcite-combobox-background-color, var(--calcite-color-foreground-1))}.list{margin:0;display:block;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.list--hide{height:0px;overflow:hidden}calcite-chip{--calcite-animation-timing: 0}.chip{margin-block:calc(var(--calcite-internal-combobox-spacing-unit-s) / 4);max-inline-size:100%}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.select-all{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-1));border-block-end-color:var(--calcite-combobox-divider-color, var(--calcite-combobox-item-border-color, var(--calcite-color-border-3)));border-block-end-style:solid;border-block-end-width:var(--calcite-border-width-sm);inset-block-start:0;position:sticky;z-index:var(--calcite-z-index-sticky)}.no-matches{padding-block:var(--calcite-internal-combobox-no-matches-spacing-unit-s);padding-inline:var(--calcite-internal-combobox-spacing-unit-l);color:var(--calcite-combobox-input-text-color, var(--calcite-color-text-1));background:var(--calcite-combobox-background-color, var(--calcite-color-foreground-1));cursor:pointer}.no-matches-placeholder{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3));cursor:default}.disabled{opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.clear-button--container{display:flex;cursor:pointer;align-items:center}.clear-button--container:hover calcite-action{--calcite-action-background-color: var(--calcite-clear-button-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color: var(--calcite-clear-button-icon-color-hover, var(--calcite-color-text-1))}.clear-button--container:active calcite-action{--calcite-action-background-color: var(--calcite-clear-button-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color: var(--calcite-clear-button-icon-color-press, var(--calcite-color-text-1))}.clear-button--container calcite-action{--calcite-internal-action-height: 100%;--calcite-internal-action-padding-inline: var(--calcite-spacing-none);--calcite-internal-action-padding-block: var(--calcite-spacing-none);--calcite-action-background-color: var(--calcite-clear-button-background-color, var(--calcite-color-foreground-2));--calcite-action-text-color: var(--calcite-clear-button-icon-color)}.clear-button--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-clear-button-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color-press: var(--calcite-clear-button-icon-color-hover)}.clear-button--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-clear-button-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color-press: var(--calcite-clear-button-icon-color-press)}:host([scale=s]) .clear-button--container{padding:var(--calcite-spacing-xxs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-spacing-sm-plus)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
 class Combobox extends LitElement {
   constructor() {
@@ -81,14 +81,7 @@ class Combobox extends LitElement {
         const match = this.allItems.find(({ selected }) => selected);
         return match ? [match] : [];
       }
-      return this.allItems.filter((item) => item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item))).sort((a, b) => {
-        const aIdx = this.selectedItems.indexOf(a);
-        const bIdx = this.selectedItems.indexOf(b);
-        if (aIdx > -1 && bIdx > -1) {
-          return aIdx - bIdx;
-        }
-        return bIdx - aIdx;
-      });
+      return this.allItems.filter((item) => item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item)));
     };
     this.groupItems = [];
     this.guid = guid();
@@ -396,6 +389,9 @@ class Combobox extends LitElement {
       });
     }
   }
+  updateSelectedItems() {
+    this.selectedItems = this.getOrderedSelectedItems(this.getSelectedItems());
+  }
   calciteComboboxItemChangeHandler(event) {
     if (this.ignoreSelectedEventsFlag) {
       return;
@@ -421,7 +417,7 @@ class Combobox extends LitElement {
       this.ignoreSelectedEventsFlag = true;
       enabledSelectedItems.forEach((el) => el.selected = false);
       this.ignoreSelectedEventsFlag = false;
-      this.selectedItems = this.getSelectedItems();
+      this.updateSelectedItems();
       this.emitComboboxChange();
     }
     this.open = false;
@@ -441,9 +437,19 @@ class Combobox extends LitElement {
     this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
   }
   getValue() {
-    const items = this.selectedItems.map((item) => item.value?.toString());
+    const items = this.getOrderedSelectedValues(this.selectedItems.map((item) => item.value?.toString()));
     return items.length ? items.length > 1 ? items : items[0] : "";
   }
+  getOrderedSelectedValues(selectedValues) {
+    if (!this.isMulti()) {
+      return selectedValues;
+    }
+    const previousValues = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+    return orderValuesByPrevious(selectedValues, previousValues);
+  }
+  getOrderedSelectedItems(selectedItems) {
+    return this.isMulti() ? orderByPrevious(selectedItems, this.selectedItems) : selectedItems;
+  }
   comboboxInViewport() {
     const bounding = this.el.getBoundingClientRect();
     return bounding.top >= 0 && bounding.left >= 0 && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight);
@@ -456,7 +462,7 @@ class Combobox extends LitElement {
       }
       item.selected = toggledValue;
     });
-    this.selectedItems = this.getSelectedItems();
+    this.updateSelectedItems();
     this.emitComboboxChange();
   }
   hasHiddenSelectedFitChips() {
@@ -910,7 +916,7 @@ class Combobox extends LitElement {
   handleMultiSelection(item, value) {
     item.selected = value;
     this.updateAncestors(item);
-    this.selectedItems = this.getSelectedItems();
+    this.updateSelectedItems();
     this.emitComboboxChange();
     this.resetText();
     this.filterItems("");
@@ -919,7 +925,7 @@ class Combobox extends LitElement {
     this.ignoreSelectedEventsFlag = true;
     this.items.forEach((el) => el.selected = el === item ? value : false);
     this.ignoreSelectedEventsFlag = false;
-    this.selectedItems = this.getSelectedItems();
+    this.updateSelectedItems();
     this.emitComboboxChange();
     if (this.textInputRef.value) {
       this.textInputRef.value.value = getLabel(item);
@@ -963,7 +969,7 @@ class Combobox extends LitElement {
     this.data = this.getData();
     this.groupData = this.getGroupData();
     this.updateItemProps();
-    this.selectedItems = this.getSelectedItems();
+    this.updateSelectedItems();
     this.previousAllSelected = this.allSelected;
   }
   updateItemProps() {
@@ -1169,36 +1175,32 @@ class Combobox extends LitElement {
     let selectedIndex = 0;
     let disabledIndex = 0;
     if (preserveOrder) {
-      this.allItems.forEach((item) => {
+      const selectedChipItems = this.allItems.filter((item) => item.selected && (!isAncestors || !hasActiveChildren(item)));
+      const orderedSelectedChipItems = orderByPrevious(selectedChipItems, this.selectedItems);
+      orderedSelectedChipItems.forEach((item) => {
         if (item.disabled) {
-          if (item.selected && (!isAncestors || !hasActiveChildren(item))) {
-            chips.push(this.renderChip({
-              activeChipIndex,
-              disabled: true,
-              index: disabledIndex++,
-              item,
-              messages,
-              readOnly,
-              scale,
-              isAncestors
-            }));
-          }
+          chips.push(this.renderChip({
+            activeChipIndex,
+            disabled: true,
+            index: disabledIndex++,
+            item,
+            messages,
+            readOnly,
+            scale,
+            isAncestors
+          }));
           return;
         }
-        if (!hideSelectedChipsForSelectAll) {
-          if (item.selected && (!isAncestors || !hasActiveChildren(item))) {
-            chips.push(this.renderChip({
-              activeChipIndex,
-              disabled: false,
-              index: selectedIndex++,
-              item,
-              messages,
-              readOnly,
-              scale,
-              isAncestors
-            }));
-          }
-        }
+        chips.push(this.renderChip({
+          activeChipIndex,
+          disabled: false,
+          index: selectedIndex++,
+          item,
+          messages,
+          readOnly,
+          scale,
+          isAncestors
+        }));
       });
     } else if (!hideSelectedChipsForSelectAll) {
       this.selectedItems.forEach((item) => {

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

@@ -27,7 +27,7 @@ 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. */
+  /** Specifies a description for the component. Displays below the `heading`. */
   accessor description: string;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { c as getAncestors, i as isSingleLike, d as getDepth } from "../../chunks/utils2.js";
+import { d as getAncestors, i as isSingleLike, e as getDepth } from "../../chunks/utils2.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { h as highlightText } from "../../chunks/text.js";

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap, nothing } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { c as getAncestors, d as getDepth } from "../../chunks/utils2.js";
+import { d as getAncestors, e as getDepth } from "../../chunks/utils2.js";
 const CSS = {
   firstTitle: "first-title",
   list: "list",

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-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;
 }

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

@@ -103,7 +103,7 @@ class Icon extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.intersectionObserver?.disconnect();
-    this.intersectionObserver = null;
+    this.intersectionObserver = void 0;
   }
   async loadIconPathData() {
     const { icon, scale, visible } = this;
@@ -121,8 +121,8 @@ class Icon extends LitElement {
     this.intersectionObserver = createObserver("intersection", (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.intersectionObserver.disconnect();
-          this.intersectionObserver = null;
+          this.intersectionObserver?.disconnect();
+          this.intersectionObserver = void 0;
           callback();
         }
       });
@@ -138,7 +138,7 @@ class Icon extends LitElement {
     const dir = this.direction;
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
-    const paths = [].concat(pathData || "");
+    const paths = Array.isArray(pathData) ? pathData : [pathData ?? ""];
     this.el.ariaHidden = toAriaBoolean(!semantic);
     this.el.ariaLabel = semantic ? textLabel : null;
     this.el.role = semantic ? "img" : null;

package/dist/components/calcite-inline-editable/customElement.d.ts

@@ -13,7 +13,7 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class InlineEditable extends LitElement {
   /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */
-  accessor afterConfirm: () => Promise<void>;
+  accessor afterConfirm: (() => Promise<void>) | undefined;
   /**
    * When `true` and `editingEnabled` is `true`, displays save and cancel controls.
    *

package/dist/components/calcite-inline-editable/customElement.js

@@ -30,6 +30,8 @@ class InlineEditable extends LitElement {
     this.cancelEditingButtonRef = createRef();
     this._editingEnabled = false;
     this.enableEditingButtonRef = createRef();
+    this.shouldEmitCancel = false;
+    this.valuePriorToEditing = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -102,7 +104,7 @@ class InlineEditable extends LitElement {
     this.setFocus();
   }
   enableEditing() {
-    this.valuePriorToEditing = this.inputEl?.value;
+    this.valuePriorToEditing = this.inputEl?.value ?? "";
     this.editingEnabled = true;
     this.inputEl?.setFocus();
     this.calciteInternalInlineEditableEnableEditingChange.emit();
@@ -131,7 +133,7 @@ class InlineEditable extends LitElement {
     if (event.key === "Tab" && this.shouldShowControls) {
       if (!event.shiftKey && event.target === this.inputEl) {
         event.preventDefault();
-        this.cancelEditingButtonRef.value.setFocus();
+        this.cancelEditingButtonRef.value?.setFocus();
       }
       if (!!event.shiftKey && event.target === this.cancelEditingButtonRef.value) {
         event.preventDefault();

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

@@ -35,7 +35,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor accept: string;
+  accessor accept: string | undefined;
   /**
    * Specifies the text alignment of the component's `value`.
    *
@@ -48,7 +48,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  accessor autocomplete: AutoFill;
+  accessor autocomplete: AutoFill | undefined;
   /**
    * When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
    *
@@ -68,12 +68,8 @@ export abstract class Input extends LitElement {
    * @see [MDN - files](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files)
    */
   accessor files: FileList | 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;
+  /** 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`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -81,7 +77,7 @@ export abstract class Input extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** When `true`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -89,9 +85,9 @@ export abstract class Input extends LitElement {
    */
   accessor iconFlipRtl: 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;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -104,17 +100,20 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
    */
-  accessor max: number;
+  accessor max: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the maximum length of text for the component's `value`.
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
-  accessor maxLength: number;
+  accessor maxLength: number | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
+      cancelInlineEditing?: string;
       clear?: string;
+      confirmInlineEditingChanges?: string;
+      enableInlineEditing?: string;
       loading?: string;
       required?: string;
   };
@@ -124,14 +123,14 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
    */
-  accessor min: number;
+  accessor min: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the minimum length of text for the component's `value`.
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
-  accessor minLength: number;
+  accessor minLength: number | undefined;
   /**
    * When `true` and `type` is `"email"` or `"file"`, the component can accept more than one value.
    * Read the native attribute's documentation on MDN for more info.
@@ -147,7 +146,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `type="number"`, specifies the placement of the buttons.
    *
@@ -155,7 +154,7 @@ export abstract class Input extends LitElement {
    */
   accessor numberButtonType: InputPlacement;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When the component resides in a form,
    * specifies a regular expression (regex) pattern the component's `value` must match for validation.
@@ -163,15 +162,15 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor pattern: string;
+  accessor pattern: string | undefined;
   /**
    * Specifies the component's placeholder text.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies text to display at the start of the component. */
-  accessor prefixText: string;
+  accessor prefixText: string | undefined;
   /**
    * When `true`, the component's `value` can be read, but cannot be modified.
    *
@@ -203,9 +202,9 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
    */
-  accessor step: number | "any";
+  accessor step: number | "any" | undefined;
   /** Specifies text to display at the end of the component. */
-  accessor suffixText: string;
+  accessor suffixText: string | undefined;
   /**
    * Specifies the component type.
    *
@@ -215,9 +214,9 @@ export abstract class Input extends LitElement {
    */
   accessor type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
   /** 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-input/customElement.js

@@ -138,7 +138,7 @@ class Input extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.inlineEditableEl = this.el.closest("calcite-inline-editable");
+    this.inlineEditableEl = this.el.closest("calcite-inline-editable") ?? void 0;
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
@@ -165,10 +165,10 @@ class Input extends LitElement {
   }
   willUpdate(changes) {
     if (changes.has("max")) {
-      this.maxString = this.max?.toString() || null;
+      this.maxString = this.max?.toString() ?? void 0;
     }
     if (changes.has("min")) {
-      this.minString = this.min?.toString() || null;
+      this.minString = this.min?.toString() ?? void 0;
     }
     if (changes.has("icon") || changes.has("type") && (this.hasUpdated || this.type !== "text")) {
       this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -279,7 +279,7 @@ class Input extends LitElement {
       return;
     }
     if (this.type === "file") {
-      this.files = this.childRef.value.files;
+      this.files = this.childRef.value.files ?? void 0;
     }
     this.setValue({
       nativeEvent,
@@ -318,7 +318,9 @@ class Input extends LitElement {
         origin: "user",
         value: parseNumberString(delocalizedValue)
       });
-      this.childNumberRef.value.value = this.displayedValue;
+      if (this.childNumberRef.value) {
+        this.childNumberRef.value.value = this.displayedValue;
+      }
     } else {
       this.setValue({
         nativeEvent,
@@ -373,26 +375,26 @@ class Input extends LitElement {
       useGrouping: this.groupSeparator
     };
     if (event.key === numberStringFormatter.decimal) {
-      if (!this.value && !this.childNumberRef.value.value) {
+      if (!this.value && !this.childNumberRef.value?.value) {
         return;
       }
-      if (this.value && this.childNumberRef.value.value.indexOf(numberStringFormatter.decimal) === -1) {
+      if (this.value && this.childNumberRef.value?.value.indexOf(numberStringFormatter.decimal) === -1) {
         return;
       }
     }
     if (/[eE]/.test(event.key)) {
-      if (!this.value && !this.childNumberRef.value.value) {
+      if (!this.value && !this.childNumberRef.value?.value) {
         return;
       }
-      if (this.value && !/[eE]/.test(this.childNumberRef.value.value)) {
+      if (this.value && this.childNumberRef.value && !/[eE]/.test(this.childNumberRef.value.value)) {
         return;
       }
     }
     if (event.key === "-") {
-      if (!this.value && !this.childNumberRef.value.value) {
+      if (!this.value && !this.childNumberRef.value?.value) {
         return;
       }
-      if (this.value && this.childNumberRef.value.value.split("-").length <= 2) {
+      if (this.value && this.childNumberRef.value && this.childNumberRef.value.value.split("-").length <= 2) {
         return;
       }
     }
@@ -516,7 +518,7 @@ class Input extends LitElement {
     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} 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;
+    })} 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 : void 0) ?? 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",