@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

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

@@ -1,14 +1,14 @@
 /*!
  * 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.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
 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 { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
@@ -16,6 +16,9 @@ import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -27,55 +30,6 @@ const inputUidPrefix = "combobox-input-";
  */
 export class Combobox {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @deprecated use `open` instead.
-     */
-    this.active = false;
-    /**When `true`, displays and positions the component. */
-    this.open = false;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    /** 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 `"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`, the component must have a value in order for the form to submit.
-     *
-     * @internal
-     */
-    this.required = false;
-    /**
-     * 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";
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** The component's value(s) from the selected `calcite-combobox-item`(s). */
-    this.value = null;
-    /**
-     * Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.
-     *
-     * @default "Remove tag"
-     */
-    this.intlRemoveTag = TEXT.removeTag;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -83,14 +37,6 @@ export class Combobox {
     //--------------------------------------------------------------------------
     this.placement = defaultMenuPlacement;
     this.internalValueChangeFlag = false;
-    this.items = [];
-    this.groupItems = [];
-    this.selectedItems = [];
-    this.visibleItems = [];
-    this.activeItemIndex = -1;
-    this.activeChipIndex = -1;
-    this.activeDescendant = "";
-    this.text = "";
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
@@ -110,8 +56,8 @@ export class Combobox {
         : null;
     };
     this.getValue = () => {
-      const items = this.selectedItems.map((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.toString(); });
-      return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
+      const items = this.selectedItems.map((item) => item?.value?.toString());
+      return items?.length ? (items.length > 1 ? items : items[0]) : "";
     };
     this.onLabelClick = () => {
       this.setFocus();
@@ -179,7 +125,7 @@ export class Combobox {
             return;
           }
           event.preventDefault();
-          this.updateActiveItemIndex(this.visibleItems.length - 1);
+          this.updateActiveItemIndex(this.filteredItems.length - 1);
           this.scrollToActiveItem();
           if (!this.comboboxInViewport()) {
             this.el.scrollIntoView();
@@ -191,7 +137,7 @@ export class Combobox {
           break;
         case "Enter":
           if (this.activeItemIndex > -1) {
-            this.toggleSelection(this.visibleItems[this.activeItemIndex]);
+            this.toggleSelection(this.filteredItems[this.activeItemIndex]);
             event.preventDefault();
           }
           else if (this.activeChipIndex > -1) {
@@ -240,13 +186,13 @@ export class Combobox {
       listContainerEl.style.minWidth = `${referenceEl.clientWidth}px`;
       await this.reposition(true);
     };
-    this.calciteChipDismissHandler = (event, comboboxItem) => {
+    this.calciteChipCloseHandler = (comboboxItem) => {
       this.open = false;
       const selection = this.items.find((item) => item === comboboxItem);
       if (selection) {
         this.toggleSelection(selection, false);
       }
-      this.calciteComboboxChipDismiss.emit(event.detail);
+      this.calciteComboboxChipClose.emit();
     };
     this.clickHandler = (event) => {
       if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
@@ -321,17 +267,12 @@ export class Combobox {
             item.ancestors.forEach((ancestor) => (ancestor.hidden = false));
           }
         });
-        this.visibleItems = this.getVisibleItems();
-        this.calciteComboboxFilterChange.emit({ visibleItems: [...this.visibleItems], text: text });
+        this.filteredItems = this.getfilteredItems();
+        this.calciteComboboxFilterChange.emit();
       }, 100);
     })();
-    this.internalCalciteLookupChangeEvent = () => {
-      this.calciteLookupChange.emit(this.selectedItems);
-    };
-    this.emitCalciteLookupChange = debounce(this.internalCalciteLookupChangeEvent, 0);
     this.internalComboboxChangeEvent = () => {
-      const { selectedItems } = this;
-      this.calciteComboboxChange.emit({ selectedItems });
+      this.calciteComboboxChange.emit();
     };
     this.emitComboboxChange = debounce(this.internalComboboxChangeEvent, 0);
     this.updateItems = () => {
@@ -339,14 +280,17 @@ export class Combobox {
       this.groupItems = this.getGroupItems();
       this.data = this.getData();
       this.selectedItems = this.getSelectedItems();
-      this.visibleItems = this.getVisibleItems();
+      this.filteredItems = this.getfilteredItems();
       this.needsIcon = this.getNeedsIcon();
       if (!this.allowCustomValues) {
         this.setMaxScrollerHeight();
       }
     };
     this.scrollToActiveItem = () => {
-      const activeItem = this.visibleItems[this.activeItemIndex];
+      const activeItem = this.filteredItems[this.activeItemIndex];
+      if (!activeItem) {
+        return;
+      }
       const height = this.calculateSingleItemHeight(activeItem);
       const { offsetHeight, scrollTop } = this.listContainerEl;
       if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
@@ -357,36 +301,52 @@ export class Combobox {
       }
     };
     this.comboboxFocusHandler = () => {
-      var _a;
-      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+      this.textInput?.focus();
     };
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
     };
-  }
-  activeHandler(value) {
-    if (this.disabled) {
-      this.active = false;
-      this.open = false;
-      return;
-    }
-    this.open = value;
+    this.open = false;
+    this.disabled = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.placeholderIcon = undefined;
+    this.placeholderIconFlipRtl = false;
+    this.maxItems = 0;
+    this.name = undefined;
+    this.allowCustomValues = undefined;
+    this.overlayPositioning = "absolute";
+    this.required = false;
+    this.selectionMode = "multiple";
+    this.scale = "m";
+    this.value = null;
+    this.flipPlacements = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.selectedItems = [];
+    this.filteredItems = [];
+    this.items = [];
+    this.groupItems = [];
+    this.needsIcon = undefined;
+    this.activeItemIndex = -1;
+    this.activeChipIndex = -1;
+    this.activeDescendant = "";
+    this.text = "";
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   openHandler(value) {
     if (!value) {
       updateAfterClose(this.floatingEl);
     }
     if (this.disabled) {
-      this.active = false;
       this.open = false;
       return;
     }
-    this.active = value;
     this.setMaxScrollerHeight();
   }
   handleDisabledChange(value) {
     if (!value) {
-      this.active = false;
       this.open = false;
     }
   }
@@ -411,10 +371,18 @@ export class Combobox {
       this.updateItems();
     }
   }
+  onMessagesChange() {
+    /*  wired up by t9n util */
+  }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
     this.reposition(true);
   }
+  selectedItemsHandler() {
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -431,7 +399,7 @@ export class Combobox {
       return;
     }
     const target = event.target;
-    const newIndex = this.visibleItems.indexOf(target);
+    const newIndex = this.filteredItems.indexOf(target);
     this.updateActiveItemIndex(newIndex);
     this.toggleSelection(target, target.selected);
   }
@@ -458,8 +426,8 @@ export class Combobox {
   }
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
-    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+    await componentLoaded(this);
+    this.textInput?.focus();
     this.activeChipIndex = -1;
     this.activeItemIndex = -1;
   }
@@ -469,29 +437,30 @@ export class Combobox {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
+    connectLocalized(this);
+    connectMessages(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     connectLabel(this);
     connectForm(this);
     connectOpenCloseComponent(this);
     this.setFilteredPlacements();
     this.reposition(true);
-    if (this.active) {
-      this.activeHandler(this.active);
-    }
     if (this.open) {
       this.openHandler(this.open);
     }
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
     this.updateItems();
+    await setUpMessages(this);
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
     this.reposition(true);
+    setComponentLoaded(this);
   }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
@@ -501,23 +470,22 @@ export class Combobox {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
-  }
-  selectedItemsHandler() {
-    this.internalValueChangeFlag = true;
-    this.value = this.getValue();
-    this.internalValueChangeFlag = false;
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
     this.updateActiveItemIndex(-1);
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   comboboxInViewport() {
     const bounding = this.el.getBoundingClientRect();
     return (bounding.top >= 0 &&
@@ -556,11 +524,14 @@ export class Combobox {
     return maxScrollerHeight;
   }
   calculateSingleItemHeight(item) {
+    if (!item) {
+      return;
+    }
     let height = item.offsetHeight;
     // if item has children items, don't count their height twice
     const children = Array.from(item.querySelectorAll(ComboboxChildSelector));
     children
-      .map((child) => child === null || child === void 0 ? void 0 : child.offsetHeight)
+      .map((child) => child?.offsetHeight)
       .forEach((offsetHeight) => {
       height -= offsetHeight;
     });
@@ -577,7 +548,6 @@ export class Combobox {
       item.selected = value;
       this.updateAncestors(item);
       this.selectedItems = this.getSelectedItems();
-      this.emitCalciteLookupChange();
       this.emitComboboxChange();
       this.resetText();
       this.filterItems("");
@@ -617,7 +587,7 @@ export class Combobox {
       });
     }
   }
-  getVisibleItems() {
+  getfilteredItems() {
     return this.items.filter((item) => !item.hidden);
   }
   getSelectedItems() {
@@ -639,7 +609,6 @@ export class Combobox {
   }
   getData() {
     return this.items.map((item) => ({
-      constant: item.constant,
       filterDisabled: item.filterDisabled,
       value: item.value,
       label: item.textLabel
@@ -681,7 +650,6 @@ export class Combobox {
       }
       this.updateItems();
       this.filterItems("");
-      this.emitCalciteLookupChange();
       this.emitComboboxChange();
     }
   }
@@ -720,24 +688,22 @@ export class Combobox {
     this.updateActiveItemIndex(-1);
   }
   focusChip() {
-    var _a;
-    const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
+    const guid = this.selectedItems[this.activeChipIndex]?.guid;
     const chip = guid
       ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
       : null;
-    chip === null || chip === void 0 ? void 0 : chip.setFocus();
+    chip?.setFocus();
   }
   shiftActiveItemIndex(delta) {
-    const { length } = this.visibleItems;
+    const { length } = this.filteredItems;
     const newIndex = (this.activeItemIndex + length + delta) % length;
     this.updateActiveItemIndex(newIndex);
     this.scrollToActiveItem();
   }
   updateActiveItemIndex(index) {
-    var _a;
     this.activeItemIndex = index;
     let activeDescendant = null;
-    this.visibleItems.forEach((el, i) => {
+    this.filteredItems.forEach((el, i) => {
       if (i === index) {
         el.active = true;
         activeDescendant = `${itemUidPrefix}${el.guid}`;
@@ -749,7 +715,6 @@ export class Combobox {
     this.activeDescendant = activeDescendant;
     if (this.activeItemIndex > -1) {
       this.activeChipIndex = -1;
-      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
   isMulti() {
@@ -761,7 +726,7 @@ export class Combobox {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode, intlRemoveTag } = this;
+    const { activeChipIndex, scale, selectionMode, messages } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
@@ -770,20 +735,20 @@ export class Combobox {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, closable: true, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
-    const { guid, active, disabled, placeholder, selectionMode, selectedItems, open } = this;
+    const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
-    const showLabel = !(open || active) && single && !!selectedItem;
+    const showLabel = !open && single && !!selectedItem;
     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)
+        "label--icon": !!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,
@@ -793,41 +758,41 @@ export class Combobox {
       }, 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)));
+    return this.filteredItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderFloatingUIContainer() {
-    const { active, setFloatingEl, setContainerEl, open } = this;
+    const { setFloatingEl, setContainerEl, open } = this;
     const classes = {
       "list-container": true,
       [FloatingCSS.animation]: true,
-      [FloatingCSS.animationActive]: open || active
+      [FloatingCSS.animationActive]: open
     };
     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)))));
+        "floating-ui-container--active": open
+      }, ref: setFloatingEl }, h("div", { class: classes, ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !open } }, h("slot", null)))));
   }
   renderIconStart() {
-    const { selectedItems, placeholderIcon, selectionMode } = this;
+    const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
-    const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
+    const selectedIcon = selectedItem?.icon;
     const singleSelectionMode = selectionMode === "single";
     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", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, 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" })));
+    const { open } = this;
+    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   render() {
-    const { active, guid, label, open } = this;
+    const { 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: {
+    return (h(Host, { onClick: this.comboboxFocusHandler }, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "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
+        "wrapper--active": open
       }, 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"; }
@@ -842,29 +807,9 @@ export class Combobox {
       "$": ["combobox.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   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"
-      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -927,7 +872,7 @@ export class Combobox {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the placeholder text for the input."
@@ -944,7 +889,7 @@ export class Combobox {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the placeholder icon for the input."
@@ -952,6 +897,24 @@ export class Combobox {
         "attribute": "placeholder-icon",
         "reflect": true
       },
+      "placeholderIconFlipRtl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "placeholder-icon-flip-rtl",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "maxItems": {
         "type": "number",
         "mutable": false,
@@ -1052,12 +1015,15 @@ export class Combobox {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ComboboxSelectionMode",
-          "resolved": "\"ancestors\" | \"multi\" | \"single\"",
+          "original": "Extract<\n    \"single\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  >",
+          "resolved": "\"ancestors\" | \"multiple\" | \"single\"",
           "references": {
-            "ComboboxSelectionMode": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -1065,11 +1031,11 @@ export class Combobox {
         "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)."
+          "text": "specify the selection mode\n- multiple: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips"
         },
         "attribute": "selection-mode",
         "reflect": true,
-        "defaultValue": "\"multi\""
+        "defaultValue": "\"multiple\""
       },
       "scale": {
         "type": "string",
@@ -1112,46 +1078,117 @@ export class Combobox {
         "reflect": false,
         "defaultValue": "null"
       },
-      "intlRemoveTag": {
-        "type": "string",
+      "flipPlacements": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "EffectivePlacement[]",
+          "resolved": "Placement[]",
+          "references": {
+            "EffectivePlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the available placements that can be used when a flip occurs."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ComboboxMessages",
+          "resolved": "{ removeTag: string; }",
+          "references": {
+            "ComboboxMessages": {
+              "location": "import",
+              "path": "./assets/combobox/t9n"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Remove tag\""
+              "name": "internal",
+              "text": undefined
             }],
-          "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"
+          "text": "Made into a prop for testing purposes only"
+        }
       },
-      "flipPlacements": {
+      "messageOverrides": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "EffectivePlacement[]",
-          "resolved": "Placement[]",
+          "original": "Partial<ComboboxMessages>",
+          "resolved": "{ removeTag?: string; }",
           "references": {
-            "EffectivePlacement": {
+            "Partial": {
+              "location": "global"
+            },
+            "ComboboxMessages": {
               "location": "import",
-              "path": "../../utils/floating-ui"
+              "path": "./assets/combobox/t9n"
             }
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Defines the available placements that can be used when a flip occurs."
+          "text": "Use this property to override individual strings used by the component."
         }
+      },
+      "selectedItems": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteComboboxItemElement[]",
+          "resolved": "HTMLCalciteComboboxItemElement[]",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's selected items."
+        },
+        "defaultValue": "[]"
+      },
+      "filteredItems": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteComboboxItemElement[]",
+          "resolved": "HTMLCalciteComboboxItemElement[]",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's filtered items."
+        },
+        "defaultValue": "[]"
       }
     };
   }
@@ -1159,39 +1196,17 @@ export class Combobox {
     return {
       "items": {},
       "groupItems": {},
-      "selectedItems": {},
-      "visibleItems": {},
       "needsIcon": {},
       "activeItemIndex": {},
       "activeChipIndex": {},
       "activeDescendant": {},
-      "text": {}
+      "text": {},
+      "effectiveLocale": {},
+      "defaultMessages": {}
     };
   }
   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,
@@ -1202,13 +1217,9 @@ export class Combobox {
           "text": "Fires when the selected item(s) changes."
         },
         "complexType": {
-          "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
-          "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
-          "references": {
-            "HTMLCalciteComboboxItemElement": {
-              "location": "global"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
         "method": "calciteComboboxFilterChange",
@@ -1221,33 +1232,24 @@ export class Combobox {
           "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"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
-        "method": "calciteComboboxChipDismiss",
-        "name": "calciteComboboxChipDismiss",
+        "method": "calciteComboboxChipClose",
+        "name": "calciteComboboxChipClose",
         "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."
+          "text": "Fires when a selected item in the component is closed via its `calcite-chip`."
         },
         "complexType": {
-          "original": "DeprecatedEventPayload",
-          "resolved": "any",
-          "references": {
-            "DeprecatedEventPayload": {
-              "location": "import",
-              "path": "../interfaces"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
         "method": "calciteComboboxBeforeClose",
@@ -1359,9 +1361,6 @@ export class Combobox {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "active",
-        "methodName": "activeHandler"
-      }, {
         "propName": "open",
         "methodName": "openHandler"
       }, {
@@ -1376,6 +1375,9 @@ export class Combobox {
       }, {
         "propName": "value",
         "methodName": "valueHandler"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "flipPlacements",
         "methodName": "flipPlacementsHandler"
@@ -1385,6 +1387,9 @@ export class Combobox {
       }, {
         "propName": "text",
         "methodName": "textHandler"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
   static get listeners() {