@esri/calcite-components 1.0.0-next.414 → 1.0.0-next.417

package/dist/cjs/{resources-415f797b.js → resources-daf15d54.js}

@@ -7,7 +7,7 @@
 const dom = require('./dom-f3df220d.js');
 const array = require('./array-a5dedf5a.js');
 const debounce = require('./debounce-95979061.js');
-const index = require('./index-8760acaf.js');
+const index = require('./index-1af0efd3.js');
 
 function mutationObserverCallback() {
   this.setUpItems();
@@ -92,7 +92,7 @@ function calciteListFocusOutHandler(event) {
   if (focusedInside) {
     return;
   }
-  items.forEach((item) => {
+  filterOutDisabled(items).forEach((item) => {
     toggleSingleSelectItemTabbing(item, selectedValues.size === 0 ? item.contains(event.target) || event.target === item : item.selected);
   });
 }
@@ -108,7 +108,7 @@ function keyDownHandler(event) {
     return;
   }
   event.preventDefault();
-  const index = array.getRoundRobinIndex(currentIndex + (key === "ArrowUp" ? -1 : 1), totalItems);
+  const index = moveItemIndex(this, target, key === "ArrowUp" ? "up" : "down");
   const item = items[index];
   items.forEach((i) => toggleSingleSelectItemTabbing(i, i === item));
   if (!multiple && selectionFollowsFocus) {
@@ -116,6 +116,25 @@ function keyDownHandler(event) {
   }
   dom.focusElement(item);
 }
+function moveItemIndex(list, item, direction) {
+  const { items } = list;
+  const { length: totalItems } = items;
+  const currentIndex = items.indexOf(item);
+  const directionFactor = direction === "up" ? -1 : 1;
+  let moveOffset = 1;
+  let index = array.getRoundRobinIndex(currentIndex + directionFactor * moveOffset++, totalItems);
+  const firstMovedIndex = index;
+  while (items[index].disabled) {
+    index = array.getRoundRobinIndex(currentIndex + directionFactor * moveOffset++, totalItems);
+    if (index === firstMovedIndex) {
+      break;
+    }
+  }
+  return index;
+}
+function filterOutDisabled(items) {
+  return items.filter((item) => !item.disabled);
+}
 function internalCalciteListChangeEvent() {
   this.calciteListChange.emit(this.selectedValues);
 }
@@ -136,6 +155,9 @@ function removeItem(event) {
   this.emitCalciteListChange();
 }
 function toggleSingleSelectItemTabbing(item, selectable) {
+  if (item.disabled) {
+    return;
+  }
   // using attribute intentionally
   if (selectable) {
     item.removeAttribute("tabindex");
@@ -145,6 +167,7 @@ function toggleSingleSelectItemTabbing(item, selectable) {
   }
 }
 async function setFocus(focusId) {
+  var _a;
   if (this.filterEnabled && focusId === "filter") {
     await dom.focusElement(this.filterEl);
     return;
@@ -154,10 +177,11 @@ async function setFocus(focusId) {
     return;
   }
   if (multiple) {
-    return items[0].setFocus();
+    return (_a = filterOutDisabled(items)[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
-  const focusTarget = items.find((item) => item.selected) || items[0];
-  if (selectionFollowsFocus) {
+  const filtered = filterOutDisabled(items);
+  const focusTarget = filtered.find((item) => item.selected) || filtered[0];
+  if (selectionFollowsFocus && focusTarget) {
     focusTarget.selected = true;
   }
   return focusTarget.setFocus();
@@ -179,7 +203,7 @@ function setUpItems(tagName) {
     }
   });
   const [first] = items;
-  if (!hasSelected && first) {
+  if (!hasSelected && first && !first.disabled) {
     toggleSingleSelectItemTabbing(first, true);
   }
 }
@@ -299,12 +323,12 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 const List = (_a) => {
   var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = index.h("slot", null);
-  return (index.h(index.Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
+  return (index.h(index.Host, Object.assign({ "aria-busy": loading.toString(), role: "menu" }, rest),
     index.h("section", null,
       index.h("header", { class: { [CSS$1.sticky]: true } },
         filterEnabled ? (index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         index.h("slot", { name: SLOTS$1.menuActions })),
-      loading || disabled ? index.h("calcite-scrim", { loading: loading }) : null,
+      loading ? index.h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));
 };
 
@@ -351,6 +375,7 @@ exports.handleFilter = handleFilter;
 exports.initialize = initialize;
 exports.initializeObserver = initializeObserver;
 exports.keyDownHandler = keyDownHandler;
+exports.moveItemIndex = moveItemIndex;
 exports.mutationObserverCallback = mutationObserverCallback;
 exports.removeItem = removeItem;
 exports.selectSiblings = selectSiblings;

package/dist/collection/collection-manifest.json

@@ -93,7 +93,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.14.0",
+    "version": "2.14.1",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/action/action.css

@@ -96,6 +96,15 @@
 
 :host([disabled]) {
   pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }
 
 .button {

package/dist/collection/components/action/action.js

@@ -5,6 +5,7 @@
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
@@ -74,6 +75,9 @@ export class Action {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods

package/dist/collection/components/block/block.css

@@ -122,6 +122,19 @@
   flex-basis: auto;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 /* Shared styles for header elements */
 .header {
   margin: 0px;
@@ -325,13 +338,4 @@ calcite-action-menu {
 }
 :host([open]) .header .title .heading {
   color: var(--calcite-ui-text-1);
-}
-
-:host([disabled]) {
-  pointer-events: none;
-  -webkit-user-select: none;
-          user-select: none;
-}
-:host([disabled]) .header-container {
-  opacity: 0.5;
 }

package/dist/collection/components/block/block.js

@@ -7,6 +7,7 @@ import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { updateHostInteraction } from "../../utils/interactive";
 import { guid } from "../../utils/guid";
 /**
  * @slot - A slot for adding content to the block.
@@ -60,6 +61,14 @@ export class Block {
       this.calciteBlockToggle.emit();
     };
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -77,9 +86,9 @@ export class Block {
   //
   // --------------------------------------------------------------------------
   renderScrim() {
-    const { disabled, loading } = this;
+    const { loading } = this;
     const defaultSlot = h("slot", null);
-    return [loading || disabled ? h("calcite-scrim", { loading: loading }) : null, defaultSlot];
+    return [loading ? h("calcite-scrim", { loading: loading }) : null, defaultSlot];
   }
   renderIcon() {
     const { el, status } = this;
@@ -101,7 +110,7 @@ export class Block {
       summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
   }
   render() {
-    const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
+    const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
     const headerContent = (h("header", { class: CSS.header },
       this.renderIcon(),
@@ -121,7 +130,7 @@ export class Block {
         h("slot", { name: SLOTS.control }))) : null,
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
-    return (h(Host, { tabIndex: disabled ? -1 : null },
+    return (h(Host, null,
       h("article", { "aria-busy": loading.toString(), class: {
           [CSS.article]: true
         } },

package/dist/collection/components/button/button.css

@@ -215,10 +215,23 @@
   line-height: inherit;
 }
 
-:host([loading]), :host([disabled]) {
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
+:host([loading]) {
   pointer-events: none;
 }
-:host([loading]) button, :host([loading]) a, :host([disabled]) button, :host([disabled]) a {
+:host([loading]) button, :host([loading]) a {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }

package/dist/collection/components/button/button.js

@@ -8,6 +8,7 @@ import { CSS, TEXT } from "./resources";
 import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
 /** @slot - A slot for adding text. */
@@ -95,6 +96,9 @@ export class Button {
       }
     }
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   render() {
     const childElType = this.href ? "a" : "button";
     const Tag = childElType;

package/dist/collection/components/checkbox/checkbox.css

@@ -142,8 +142,15 @@
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
 
 ::slotted(input[slot=hidden-form-input]) {
   bottom: 0 !important;

package/dist/collection/components/checkbox/checkbox.js

@@ -7,6 +7,7 @@ import { guid } from "../../utils/guid";
 import { HiddenFormInputSlot } from "../../utils/form";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm } from "../../utils/form";
+import { updateHostInteraction } from "../../utils/interactive";
 export class Checkbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -106,6 +107,9 @@ export class Checkbox {
     disconnectLabel(this);
     disconnectForm(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

package/dist/collection/components/color-picker/color-picker.css

@@ -85,6 +85,19 @@
   font-weight: var(--calcite-font-weight-normal);
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 :host([scale=s]) .container {
   width: 160px;
 }

package/dist/collection/components/color-picker/color-picker.js

@@ -9,6 +9,7 @@ import { focusElement } from "../../utils/dom";
 import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
+import { updateHostInteraction } from "../../utils/interactive";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
@@ -33,6 +34,10 @@ export class ColorPicker {
      * @internal
      */
     this.color = DEFAULT_COLOR;
+    /**
+     * When true, disabled prevents user interaction.
+     */
+    this.disabled = false;
     /**
      * The format of the value property.
      *
@@ -256,10 +261,12 @@ export class ColorPicker {
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
+        this.colorFieldScopeNode.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
+        this.hueScopeNode.focus();
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
@@ -378,6 +385,9 @@ export class ColorPicker {
     this.storeColorFieldScope = (node) => {
       this.colorFieldScopeNode = node;
     };
+    this.storeHueScope = (node) => {
+      this.hueScopeNode = node;
+    };
     this.renderChannelsTabTitle = (channelMode) => {
       const { channelMode: activeChannelMode, intlRgb, intlHsv } = this;
       const active = channelMode === activeChannelMode;
@@ -564,6 +574,9 @@ export class ColorPicker {
     document.removeEventListener("mousemove", this.globalMouseMoveHandler);
     document.removeEventListener("mouseup", this.globalMouseUpHandler);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Render Methods
@@ -585,7 +598,7 @@ export class ColorPicker {
             [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
           }, onMouseDown: this.handleColorFieldAndSliderMouseDown, onMouseEnter: this.handleColorFieldAndSliderMouseEnterOrMove, onMouseLeave: this.handleColorFieldAndSliderMouseLeave, onMouseMove: this.handleColorFieldAndSliderMouseEnterOrMove, ref: this.initColorFieldAndSlider }),
         h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }),
-        h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
+        h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
       hideHex && hideChannels ? null : (h("div", { class: {
           [CSS.controlSection]: true,
           [CSS.section]: true
@@ -854,6 +867,24 @@ export class ColorPicker {
       },
       "defaultValue": "DEFAULT_COLOR"
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents user interaction."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "format": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/combobox/combobox.css

@@ -92,9 +92,15 @@
 
 :host([disabled]) {
   pointer-events: none;
+  cursor: default;
   -webkit-user-select: none;
           user-select: none;
-  opacity: 0.5;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }
 
 :host([scale=s]) {

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

@@ -5,13 +5,14 @@
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
-import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
+import { createPopper, updatePopper, CSS as PopperCSS, popperMenuFlipPlacements, defaultMenuPlacement } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement, TEXT } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -66,12 +67,10 @@ export class Combobox {
     this.groupItems = [];
     this.selectedItems = [];
     this.visibleItems = [];
-    this.hideList = !this.active;
     this.activeItemIndex = -1;
     this.activeChipIndex = -1;
     this.activeDescendant = "";
     this.text = "";
-    this.open = this.active;
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
@@ -160,11 +159,11 @@ export class Combobox {
       }
     };
     this.toggleCloseEnd = () => {
-      this.hideList = true;
+      this.active = false;
       this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
     };
     this.toggleOpenEnd = () => {
-      this.hideList = false;
+      this.active = true;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
@@ -198,9 +197,7 @@ export class Combobox {
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if ((!this.active && !this.open) ||
-        composedPath.includes(this.el) ||
-        composedPath.includes(this.referenceEl)) {
+      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text) {
@@ -215,7 +212,6 @@ export class Combobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
-      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -293,18 +289,18 @@ export class Combobox {
       this.setInactiveIfNotContained(event);
     };
   }
-  activeHandler(newValue, oldValue) {
-    // when closing, wait transition time then hide to prevent overscroll
-    if (oldValue && !newValue) {
-      this.el.addEventListener("calciteComboboxClose", this.toggleCloseEnd);
-      this.open = false;
-    }
-    else if (!oldValue && newValue) {
-      this.el.addEventListener("calciteComboboxOpen", this.toggleOpenEnd);
-      this.open = true;
+  activeHandler() {
+    if (this.disabled) {
+      this.active = false;
+      return;
     }
     this.reposition();
   }
+  handleDisabledChange(value) {
+    if (!value) {
+      this.active = false;
+    }
+  }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
@@ -351,7 +347,7 @@ export class Combobox {
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: ComboboxDefaultPlacement,
+        placement: defaultMenuPlacement,
         popper
       })
       : this.createPopper();
@@ -390,6 +386,7 @@ export class Combobox {
       this.reposition();
       this.inputHeight = this.el.offsetHeight;
     }
+    updateHostInteraction(this);
   }
   disconnectedCallback() {
     var _a, _b;
@@ -414,9 +411,13 @@ export class Combobox {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+    };
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.active
     };
-    return [flipModifier];
+    return [flipModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -426,7 +427,7 @@ export class Combobox {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: ComboboxDefaultPlacement,
+      placement: defaultMenuPlacement,
       referenceEl
     });
   }
@@ -707,15 +708,15 @@ export class Combobox {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
-    const { active, setMenuEl, setListContainerEl, hideList, open } = this;
+    const { active, setMenuEl, setListContainerEl } = this;
     const classes = {
       "list-container": true,
       [PopperCSS.animation]: true,
       [PopperCSS.animationActive]: active
     };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl },
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": active }, ref: setMenuEl },
       h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl },
-        h("ul", { class: { list: true, "list--hide": hideList } },
+        h("ul", { class: { list: true, "list--hide": !active } },
           h("slot", null)))));
   }
   renderIconStart() {
@@ -729,13 +730,13 @@ export class Combobox {
       h("calcite-icon", { icon: "chevron-down", scale: "s" })));
   }
   render() {
-    const { guid, open, label } = this;
+    const { active, guid, label } = this;
     const single = this.selectionMode === "single";
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": active.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
-          "wrapper--active": open
+          "wrapper--active": active
         }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" },
         h("div", { class: "grid-input" },
           this.renderIconStart(),
@@ -1006,6 +1007,26 @@ export class Combobox {
       "attribute": "intl-remove-tag",
       "reflect": false,
       "defaultValue": "TEXT.removeTag"
+    },
+    "flipPlacements": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
+        "references": {
+          "ComputedPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the available placements that can be used when a flip occurs."
+      }
     }
   }; }
   static get states() { return {
@@ -1014,12 +1035,10 @@ export class Combobox {
     "selectedItems": {},
     "visibleItems": {},
     "needsIcon": {},
-    "hideList": {},
     "activeItemIndex": {},
     "activeChipIndex": {},
     "activeDescendant": {},
-    "text": {},
-    "open": {}
+    "text": {}
   }; }
   static get events() { return [{
       "method": "calciteLookupChange",
@@ -1171,6 +1190,9 @@ export class Combobox {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "disabled",
+      "methodName": "handleDisabledChange"
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"