@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

package/dist/collection/components/combobox/combobox.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
-import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
+import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
@@ -14,7 +14,7 @@ import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
-import { toAriaBoolean } from "../../utils/dom";
+import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -33,43 +33,45 @@ export class Combobox {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, opens the combobox
+     * When `true`, displays and positions the component.
      *
-     * @deprecated use open instead
+     * @deprecated use `open` instead.
      */
     this.active = false;
-    /**When true, opens the combobox */
+    /**When `true`, displays and positions the component. */
     this.open = false;
-    /** Disable combobox input */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
+    /** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
     this.maxItems = 0;
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
     /**
-     * When true, makes the component required for form-submission.
+     * When `true`, the component must have a value in order for the form to submit.
      *
      * @internal
      */
     this.required = false;
     /**
-     * specify the selection mode
-     * - multi: allow any number of selected items (default)
-     * - single: only one selection)
-     * - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
+     * Specifies the selection mode -
+     * `"multi"` (allow any number of selected items),
+     * `"single"` (allow only one selection), or
+     * `"ancestors"` (like `"multi"`, but show ancestors of selected items as selected. Only the deepest children are shown in `calcite-chip`s).
      */
     this.selectionMode = "multi";
-    /** Specify the scale of the combobox, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** The value(s) of the selectedItem(s) */
+    /** The component's value(s) from the selected `calcite-combobox-item`(s). */
     this.value = null;
     /**
-     * string to override the English "Remove tag" text for when an item is selected.
+     * Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.
      *
      * @default "Remove tag"
      */
@@ -101,7 +103,6 @@ export class Combobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -233,11 +234,11 @@ export class Combobox {
       if (!listContainerEl || !open) {
         return;
       }
-      await this.debouncedReposition();
+      await this.reposition(true);
       const maxScrollerHeight = this.getMaxScrollerHeight();
       listContainerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
       listContainerEl.style.minWidth = `${referenceEl.clientWidth}px`;
-      await this.debouncedReposition();
+      await this.reposition(true);
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
       this.open = false;
@@ -372,6 +373,9 @@ export class Combobox {
     this.open = value;
   }
   openHandler(value) {
+    if (!value) {
+      updateAfterClose(this.floatingEl);
+    }
     if (this.disabled) {
       this.active = false;
       this.open = false;
@@ -390,7 +394,7 @@ export class Combobox {
     this.setMaxScrollerHeight();
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
@@ -409,7 +413,7 @@ export class Combobox {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   //--------------------------------------------------------------------------
   //
@@ -417,6 +421,9 @@ export class Combobox {
   //
   //--------------------------------------------------------------------------
   documentClickHandler(event) {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
     this.setInactiveIfNotContained(event);
   }
   calciteComboboxItemChangeHandler(event) {
@@ -433,17 +440,21 @@ export class Combobox {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
       type: "menu"
-    });
+    }, delayed);
   }
   /** Sets focus on the component. */
   async setFocus() {
@@ -467,7 +478,7 @@ export class Combobox {
     connectForm(this);
     connectOpenCloseComponent(this);
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
     if (this.active) {
       this.activeHandler(this.active);
     }
@@ -480,11 +491,11 @@ export class Combobox {
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
-    this.debouncedReposition();
+    this.reposition(true);
   }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
-      this.debouncedReposition();
+      this.reposition(true);
       this.inputHeight = this.el.offsetHeight;
     }
     updateHostInteraction(this);
@@ -770,18 +781,16 @@ export class Combobox {
     return (h("span", { class: {
         "input-wrap": true,
         "input-wrap--single": single
-      } },
-      showLabel && (h("span", { class: {
-          label: true,
-          "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon)
-        }, key: "label" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
-          input: true,
-          "input--single": true,
-          "input--transparent": this.activeChipIndex > -1,
-          "input--hidden": showLabel,
-          "input--icon": !!this.placeholderIcon
-        }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
+      } }, showLabel && (h("span", { class: {
+        label: true,
+        "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon)
+      }, key: "label" }, selectedItem.textLabel)), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
+        input: true,
+        "input--single": true,
+        "input--transparent": this.activeChipIndex > -1,
+        "input--hidden": showLabel,
+        "input--icon": !!this.placeholderIcon
+      }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
@@ -796,10 +805,7 @@ export class Combobox {
     return (h("div", { "aria-hidden": "true", class: {
         "floating-ui-container": true,
         "floating-ui-container--active": open || active
-      }, ref: setFloatingEl },
-      h("div", { class: classes, ref: setContainerEl },
-        h("ul", { class: { list: true, "list--hide": !(open || active) } },
-          h("slot", null)))));
+      }, ref: setFloatingEl }, h("div", { class: classes, ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !(open || active) } }, h("slot", null)))));
   }
   renderIconStart() {
     const { selectedItems, placeholderIcon, selectionMode } = this;
@@ -809,578 +815,591 @@ export class Combobox {
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
-    return (iconAtStart && (h("span", { class: "icon-start" },
-      h("calcite-icon", { class: "selected-icon", icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: "s" }))));
+    return (iconAtStart && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: "s" }))));
   }
   renderIconEnd() {
     const { active, open } = this;
-    return (h("span", { class: "icon-end" },
-      h("calcite-icon", { icon: active || open ? "chevron-up" : "chevron-down", scale: "s" })));
+    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: active || open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   render() {
     const { active, guid, label, open } = this;
     const single = this.selectionMode === "single";
-    return (h(Host, null,
-      h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
-          wrapper: true,
-          "wrapper--single": single || !this.selectedItems.length,
-          "wrapper--active": open || active
-        }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, ref: this.setReferenceEl, role: "combobox" },
-        h("div", { class: "grid-input" },
-          this.renderIconStart(),
-          !single && this.renderChips(),
-          h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label),
-          this.renderInput()),
-        this.renderIconEnd()),
-      h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
-      this.renderFloatingUIContainer(),
-      h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, null, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+        wrapper: true,
+        "wrapper--single": single || !this.selectedItems.length,
+        "wrapper--active": open || active
+      }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-combobox"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["combobox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["combobox.css"]
-  }; }
-  static get properties() { return {
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use open instead"
-          }],
-        "text": "When true, opens the combobox"
-      },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, opens the combobox"
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable combobox input"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria label for combobox (required)"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Placeholder text for input"
+  static get originalStyleUrls() {
+    return {
+      "$": ["combobox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["combobox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `open` instead."
+            }],
+          "text": "When `true`, displays and positions the component."
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "placeholderIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, displays and positions the component."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Placeholder icon for input"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "placeholder-icon",
-      "reflect": true
-    },
-    "maxItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specify the maximum number of combobox items (including nested children) to display before showing the scroller"
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the placeholder text for the input."
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "attribute": "max-items",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "placeholderIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the placeholder icon for the input."
+        },
+        "attribute": "placeholder-icon",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The name of the switch input"
+      "maxItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar."
+        },
+        "attribute": "max-items",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "name",
-      "reflect": true
-    },
-    "allowCustomValues": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the name of the component on form submission."
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Allow entry of custom values which are not in the original set of items"
+      "allowCustomValues": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, allows entry of custom values, which are not in the original set of items."
+        },
+        "attribute": "allow-custom-values",
+        "reflect": true
       },
-      "attribute": "allow-custom-values",
-      "reflect": true
-    },
-    "overlayPositioning": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OverlayPositioning",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "OverlayPositioning": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "overlayPositioning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OverlayPositioning",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "OverlayPositioning": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
-      },
-      "attribute": "overlay-positioning",
-      "reflect": true,
-      "defaultValue": "\"absolute\""
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
+        },
+        "attribute": "overlay-positioning",
+        "reflect": true,
+        "defaultValue": "\"absolute\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "When true, makes the component required for form-submission."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When `true`, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selectionMode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ComboboxSelectionMode",
-        "resolved": "\"ancestors\" | \"multi\" | \"single\"",
-        "references": {
-          "ComboboxSelectionMode": {
-            "location": "import",
-            "path": "./interfaces"
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ComboboxSelectionMode",
+          "resolved": "\"ancestors\" | \"multi\" | \"single\"",
+          "references": {
+            "ComboboxSelectionMode": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the selection mode\n- multi: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the selection mode -\n`\"multi\"` (allow any number of selected items),\n`\"single\"` (allow only one selection), or\n`\"ancestors\"` (like `\"multi\"`, but show ancestors of selected items as selected. Only the deepest children are shown in `calcite-chip`s)."
+        },
+        "attribute": "selection-mode",
+        "reflect": true,
+        "defaultValue": "\"multi\""
       },
-      "attribute": "selection-mode",
-      "reflect": true,
-      "defaultValue": "\"multi\""
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specify the scale of the combobox, defaults to m"
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value(s) of the selectedItem(s)"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "intlRemoveTag": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value(s) from the selected `calcite-combobox-item`(s)."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Remove tag\""
-          }],
-        "text": "string to override the English \"Remove tag\" text for when an item is selected."
+      "intlRemoveTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Remove tag\""
+            }],
+          "text": "Accessible name for the component's remove tag when a `calcite-combobox-item` is selected."
+        },
+        "attribute": "intl-remove-tag",
+        "reflect": false,
+        "defaultValue": "TEXT.removeTag"
       },
-      "attribute": "intl-remove-tag",
-      "reflect": false,
-      "defaultValue": "TEXT.removeTag"
-    },
-    "flipPlacements": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "EffectivePlacement[]",
-        "resolved": "Placement[]",
-        "references": {
-          "EffectivePlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "flipPlacements": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EffectivePlacement[]",
+          "resolved": "Placement[]",
+          "references": {
+            "EffectivePlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the available placements that can be used when a flip occurs."
         }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the available placements that can be used when a flip occurs."
       }
-    }
-  }; }
-  static get states() { return {
-    "items": {},
-    "groupItems": {},
-    "selectedItems": {},
-    "visibleItems": {},
-    "needsIcon": {},
-    "activeItemIndex": {},
-    "activeChipIndex": {},
-    "activeDescendant": {},
-    "text": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteLookupChange",
-      "name": "calciteLookupChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use calciteComboboxChange instead"
-          }],
-        "text": "Called when the selected items set changes"
-      },
-      "complexType": {
-        "original": "HTMLCalciteComboboxItemElement[]",
-        "resolved": "HTMLCalciteComboboxItemElement[]",
-        "references": {
-          "HTMLCalciteComboboxItemElement": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "items": {},
+      "groupItems": {},
+      "selectedItems": {},
+      "visibleItems": {},
+      "needsIcon": {},
+      "activeItemIndex": {},
+      "activeChipIndex": {},
+      "activeDescendant": {},
+      "text": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteLookupChange",
+        "name": "calciteLookupChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `calciteComboboxChange` instead."
+            }],
+          "text": "Fires when the selected items set changes."
+        },
+        "complexType": {
+          "original": "HTMLCalciteComboboxItemElement[]",
+          "resolved": "HTMLCalciteComboboxItemElement[]",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxChange",
-      "name": "calciteComboboxChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Called when the selected item(s) changes."
-      },
-      "complexType": {
-        "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
-        "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
-        "references": {
-          "HTMLCalciteComboboxItemElement": {
-            "location": "global"
+      }, {
+        "method": "calciteComboboxChange",
+        "name": "calciteComboboxChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the selected item(s) changes."
+        },
+        "complexType": {
+          "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
+          "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxFilterChange",
-      "name": "calciteComboboxFilterChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Called when the user has entered text to filter the options list"
-      },
-      "complexType": {
-        "original": "{\n    visibleItems: HTMLCalciteComboboxItemElement[];\n    text: string;\n  }",
-        "resolved": "{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }",
-        "references": {
-          "HTMLCalciteComboboxItemElement": {
-            "location": "global"
+      }, {
+        "method": "calciteComboboxFilterChange",
+        "name": "calciteComboboxFilterChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when text is added to filter the options list."
+        },
+        "complexType": {
+          "original": "{\n    visibleItems: HTMLCalciteComboboxItemElement[];\n    text: string;\n  }",
+          "resolved": "{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxChipDismiss",
-      "name": "calciteComboboxChipDismiss",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Called when a selected item in the combobox is dismissed via its chip\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead"
-      },
-      "complexType": {
-        "original": "DeprecatedEventPayload",
-        "resolved": "any",
-        "references": {
-          "DeprecatedEventPayload": {
-            "location": "import",
-            "path": "../interfaces"
+      }, {
+        "method": "calciteComboboxChipDismiss",
+        "name": "calciteComboboxChipDismiss",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when a selected item in the component is dismissed via its `calcite-chip`.\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine the removed value instead."
+        },
+        "complexType": {
+          "original": "DeprecatedEventPayload",
+          "resolved": "any",
+          "references": {
+            "DeprecatedEventPayload": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxBeforeClose",
-      "name": "calciteComboboxBeforeClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is requested to be closed and before the closing transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteComboboxClose",
-      "name": "calciteComboboxClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is closed and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteComboboxBeforeOpen",
-      "name": "calciteComboboxBeforeOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteComboboxOpen",
-      "name": "calciteComboboxOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is open and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "calciteComboboxBeforeClose",
+        "name": "calciteComboboxBeforeClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is requested to be closed, and before the closing transition begins."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
-      }
-    },
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteComboboxClose",
+        "name": "calciteComboboxClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is closed and animation is complete."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteComboboxBeforeOpen",
+        "name": "calciteComboboxBeforeOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteComboboxOpen",
+        "name": "calciteComboboxOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is open and animation is complete."
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reposition": {
+        "complexType": {
+          "signature": "(delayed?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "delayed"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Updates the position of the component.",
+          "tags": [{
+              "name": "param",
+              "text": "delayed"
+            }]
+        }
       },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "active",
-      "methodName": "activeHandler"
-    }, {
-      "propName": "open",
-      "methodName": "openHandler"
-    }, {
-      "propName": "disabled",
-      "methodName": "handleDisabledChange"
-    }, {
-      "propName": "maxItems",
-      "methodName": "maxItemsHandler"
-    }, {
-      "propName": "overlayPositioning",
-      "methodName": "overlayPositioningHandler"
-    }, {
-      "propName": "value",
-      "methodName": "valueHandler"
-    }, {
-      "propName": "flipPlacements",
-      "methodName": "flipPlacementsHandler"
-    }, {
-      "propName": "selectedItems",
-      "methodName": "selectedItemsHandler"
-    }, {
-      "propName": "text",
-      "methodName": "textHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "pointerdown",
-      "method": "documentClickHandler",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "calciteComboboxItemChange",
-      "method": "calciteComboboxItemChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "activeHandler"
+      }, {
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }, {
+        "propName": "maxItems",
+        "methodName": "maxItemsHandler"
+      }, {
+        "propName": "overlayPositioning",
+        "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "value",
+        "methodName": "valueHandler"
+      }, {
+        "propName": "flipPlacements",
+        "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "selectedItems",
+        "methodName": "selectedItemsHandler"
+      }, {
+        "propName": "text",
+        "methodName": "textHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "pointerdown",
+        "method": "documentClickHandler",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "calciteComboboxItemChange",
+        "method": "calciteComboboxItemChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }