@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/cjs/calcite-pick-list_3.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ab066772.js');
-const resources = require('./resources-9baed1da.js');
-const observers = require('./observers-2dc895e1.js');
-const interactive = require('./interactive-3808ad50.js');
-const dom = require('./dom-66c5cb56.js');
-const Heading = require('./Heading-b864aca1.js');
-const conditionalSlot = require('./conditionalSlot-8468d1b6.js');
-require('./array-00db7b4e.js');
-require('./debounce-a29e2f71.js');
-require('./guid-364777e6.js');
+const index = require('./index-8fbe74dd.js');
+const resources = require('./resources-192c00c3.js');
+const observers = require('./observers-8169781c.js');
+const interactive = require('./interactive-b2df5d51.js');
+const dom = require('./dom-69c7e941.js');
+const Heading = require('./Heading-9546b15c.js');
+const conditionalSlot = require('./conditionalSlot-ecb74d9a.js');
+require('./array-1c85be7d.js');
+require('./debounce-a74a2080.js');
+require('./guid-263ed05b.js');
 
 const pickListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([filter-enabled]) header{margin-bottom:0.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:end;justify-content:flex-end;background-color:var(--calcite-ui-foreground-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([filter-enabled]) header.sticky-pos{position:-webkit-sticky;position:sticky;top:0px;z-index:1}calcite-filter{margin-bottom:0px}:host([loading][disabled]){min-height:2rem}";
 
@@ -30,7 +30,7 @@ const PickList = class {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
@@ -38,18 +38,18 @@ const PickList = class {
      */
     this.filterEnabled = false;
     /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
     /**
-     * Multiple works similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple items at a time.
-     * When false, only a single item can be selected at a time
-     * and selecting a new item will deselect any other selected items.
+     * Similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple `calcite-pick-list-item`s at a time.
+     * When false, only a single `calcite-pick-list-item` can be selected at a time,
+     * and a new selection will deselect previous selections.
      */
     this.multiple = false;
     /**
-     * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+     * When true and single-selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -92,12 +92,13 @@ const PickList = class {
   calciteListItemChangeHandler(event) {
     resources.calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    resources.calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    resources.calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   calciteListFocusOutHandler(event) {
     resources.calciteListFocusOutHandler.call(this, event);
@@ -120,11 +121,15 @@ const PickList = class {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Returns the currently selected items */
+  /** Returns the component's selected `calcite-pick-list-item`s. */
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return resources.setFocus.call(this, focusId);
   }
@@ -183,42 +188,44 @@ const PickListGroup = class {
 };
 PickListGroup.style = pickListGroupCss;
 
-const pickListItemCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{margin:0px;margin-bottom:1px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transition:background-color var(--calcite-animation-timing);transition:background-color var(--calcite-animation-timing);-webkit-animation:calcite-fade-in var(--calcite-animation-timing);animation:calcite-fade-in var(--calcite-animation-timing)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;cursor:pointer;-ms-flex-align:center;align-items:center;background-color:transparent;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.label:hover{background-color:var(--calcite-ui-foreground-2)}:host([non-interactive]:hover){background-color:var(--calcite-ui-foreground-1)}:host([non-interactive]) .label,:host([non-interactive]) .icon{pointer-events:none}.icon{margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;padding:0.25rem;color:var(--calcite-ui-brand);-ms-flex:0 0 auto;flex:0 0 auto;line-height:0}.icon:hover{background-color:var(--calcite-ui-foreground-2)}.icon-dot{display:-ms-flexbox;display:flex;width:1.5rem;-ms-flex-align:center;align-items:center;padding:0.5rem}.icon-dot:before{opacity:0;content:\"•\"}.icon calcite-icon{opacity:0}:host([selected]) .icon-dot:before,:host([selected]) .icon calcite-icon{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing);opacity:1}.text-container{pointer-events:none;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0.75rem;padding-right:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word;overflow:hidden}.title{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1)}.description{margin-top:0.125rem;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.actions{margin:0px;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:end;justify-content:flex-end}.actions--start~.label{-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
+const pickListItemCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{margin:0px;margin-bottom:1px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transition:background-color var(--calcite-animation-timing);transition:background-color var(--calcite-animation-timing);-webkit-animation:calcite-fade-in var(--calcite-animation-timing);animation:calcite-fade-in var(--calcite-animation-timing)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;cursor:pointer;-ms-flex-align:center;align-items:center;background-color:transparent;outline-color:transparent}.label:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.label:hover{background-color:var(--calcite-ui-foreground-2)}:host([non-interactive]:hover){background-color:var(--calcite-ui-foreground-1)}:host([non-interactive]) .label,:host([non-interactive]) .icon{pointer-events:none}.icon{margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;padding:0.25rem;color:var(--calcite-ui-brand);-ms-flex:0 0 auto;flex:0 0 auto;line-height:0}.icon:hover{background-color:var(--calcite-ui-foreground-2)}.icon-dot{display:-ms-flexbox;display:flex;width:1.5rem;-ms-flex-align:center;align-items:center;padding:0.5rem}.icon-dot:before{opacity:0;content:\"•\"}.icon calcite-icon{opacity:0}:host([selected]) .icon-dot:before,:host([selected]) .icon calcite-icon{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing);opacity:1}.text-container{pointer-events:none;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0.75rem;padding-right:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word}.title{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1)}.description{margin-top:0.125rem;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.actions{margin:0px;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:end;justify-content:flex-end}.actions--start~.label{-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
 
 const PickListItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteListItemChange = index.createEvent(this, "calciteListItemChange", 7);
     this.calciteListItemRemove = index.createEvent(this, "calciteListItemRemove", 7);
-    this.calciteListItemPropsChange = index.createEvent(this, "calciteListItemPropsChange", 7);
-    this.calciteListItemValueChange = index.createEvent(this, "calciteListItemValueChange", 7);
+    this.calciteInternalListItemPropsChange = index.createEvent(this, "calciteInternalListItemPropsChange", 7);
+    this.calciteInternalListItemValueChange = index.createEvent(this, "calciteInternalListItemValueChange", 7);
     /**
-     * When true, the item cannot be clicked and is visually muted.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When false, the item cannot be deselected by user interaction.
+     * When false, the component cannot be deselected by user interaction.
      */
     this.disableDeselect = false;
     /**
-     * @internal When true, the item cannot be selected by user interaction.
+     * @internal
      */
     this.nonInteractive = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
     /**
-     * Set this to true to display a remove action that removes the item from the list.
+     * When true, displays a remove action that removes the item from the list.
      */
     this.removable = false;
     /**
-     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     * When true, selects an item. Toggles when an item is checked/unchecked.
      */
     this.selected = false;
     /**
-     * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+     * Accessible name for the component's remove button. Only applicable if removable is "true".
+     *
      * @default "Remove"
      */
     this.intlRemove = resources.TEXT.remove;
@@ -248,13 +255,13 @@ const PickListItem = class {
     };
   }
   descriptionWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   labelWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   metadataWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   selectedWatchHandler() {
     this.calciteListItemChange.emit({
@@ -266,7 +273,7 @@ const PickListItem = class {
     this.shiftPressed = false;
   }
   valueWatchHandler(newValue, oldValue) {
-    this.calciteListItemValueChange.emit({ oldValue, newValue });
+    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
   }
   // --------------------------------------------------------------------------
   //
@@ -288,8 +295,10 @@ const PickListItem = class {
   //
   // --------------------------------------------------------------------------
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggles the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
@@ -329,7 +338,7 @@ const PickListItem = class {
   }
   render() {
     const { description, label } = this;
-    return (index.h(index.Fragment, null, this.renderIcon(), this.renderActionsStart(), index.h("label", { "aria-label": label, class: resources.CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, ref: (focusEl) => (this.focusEl = focusEl), tabIndex: 0 }, index.h("div", { "aria-checked": this.selected.toString(), class: resources.CSS.textContainer, role: "menuitemcheckbox" }, index.h("span", { class: resources.CSS.title }, label), description ? index.h("span", { class: resources.CSS.description }, description) : null)), this.renderActionsEnd()));
+    return (index.h(index.Fragment, null, this.renderIcon(), this.renderActionsStart(), index.h("label", { "aria-label": label, class: resources.CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, ref: (focusEl) => (this.focusEl = focusEl), tabIndex: 0 }, index.h("div", { "aria-checked": dom.toAriaBoolean(this.selected), class: resources.CSS.textContainer, role: "menuitemcheckbox" }, index.h("span", { class: resources.CSS.title }, label), description ? index.h("span", { class: resources.CSS.description }, description) : null)), this.renderActionsEnd()));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/calcite-popover_2.cjs.entry.js

@@ -1,17 +1,18 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ab066772.js');
-const popper = require('./popper-5aeab272.js');
-const guid = require('./guid-364777e6.js');
-const dom = require('./dom-66c5cb56.js');
-const Heading = require('./Heading-b864aca1.js');
+const index = require('./index-8fbe74dd.js');
+const popper = require('./popper-46476990.js');
+const guid = require('./guid-263ed05b.js');
+const dom = require('./dom-69c7e941.js');
+const Heading = require('./Heading-9546b15c.js');
+const observers = require('./observers-8169781c.js');
 
 const CSS = {
   container: "container",
@@ -29,13 +30,83 @@ const TEXT = {
   close: "Close"
 };
 const defaultPopoverPlacement = "auto";
-const POPOVER_REFERENCE = "data-calcite-popover-reference";
 const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
 const HEADING_LEVEL = 2;
 
-const popoverCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);border-bottom-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:center;align-self:center;white-space:normal;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex:0 0 auto;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
+class PopoverManager$1 {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.registeredElements = new Map();
+    this.registeredElementCount = 0;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.queryPopover = (composedPath) => {
+      const { registeredElements } = this;
+      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+      return registeredElements.get(registeredElement);
+    };
+    this.togglePopovers = (event) => {
+      const composedPath = event.composedPath();
+      const popover = this.queryPopover(composedPath);
+      if (popover && !popover.triggerDisabled) {
+        popover.toggle();
+        return;
+      }
+      Array.from(this.registeredElements.values())
+        .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
+        .forEach((popover) => popover.toggle(false));
+    };
+    this.keyHandler = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      this.togglePopovers(event);
+    };
+    this.clickHandler = (event) => {
+      this.togglePopovers(event);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  registerElement(referenceEl, popover) {
+    this.registeredElementCount++;
+    this.registeredElements.set(referenceEl, popover);
+    if (this.registeredElementCount === 1) {
+      this.addListeners();
+    }
+  }
+  unregisterElement(referenceEl) {
+    if (this.registeredElements.delete(referenceEl)) {
+      this.registeredElementCount--;
+    }
+    if (this.registeredElementCount === 0) {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("keydown", this.keyHandler, { capture: true });
+  }
+  removeListeners() {
+    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("keydown", this.keyHandler, { capture: true });
+  }
+}
+
+const popoverCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);border-bottom-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:center;align-self:center;white-space:normal;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex:0 0 auto;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
 
+const manager = new PopoverManager$1();
 const Popover = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -47,43 +118,56 @@ const Popover = class {
     //
     // --------------------------------------------------------------------------
     /**
-     * Display a close button within the Popover.
+     * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
+     */
+    this.autoClose = false;
+    /**
+     * When true, a close button is added to the component.
+     *
      * @deprecated use dismissible instead.
      */
     this.closeButton = false;
     /**
-     * Display a close button within the Popover.
+     * When true, a close button is added to the component.
      */
     this.dismissible = false;
     /**
-     * Prevents flipping the popover's placement when it starts to overlap its reference element.
+     * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
      */
     this.disableFlip = false;
     /**
-     * Removes the caret pointer.
+     * When true, removes the caret pointer.
      */
     this.disablePointer = false;
     /**
-     * Offset the position of the popover away from the reference element.
+     * Offsets the position of the popover away from the `referenceElement`.
+     *
      * @default 6
      */
     this.offsetDistance = popper.defaultOffsetDistance;
     /**
-     * Offset the position of the popover along the reference element.
+     * Offsets the position of the popover along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * Display and position the component.
+     * When true, displays and positions the component.
      */
     this.open = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
     this.overlayPositioning = "absolute";
     /**
-     * Determines where the component will be positioned relative to the referenceElement.
+     * Determines where the component will be positioned relative to the `referenceElement`.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = defaultPopoverPlacement;
-    /** Text for close button.
+    /**
+     * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
+     */
+    this.triggerDisabled = false;
+    /**
+     * Accessible name for the component's close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.close;
@@ -120,7 +204,9 @@ const Popover = class {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.setAttribute(ARIA_EXPANDED, open.toString());
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_EXPANDED, dom.toAriaBoolean(open));
+      }
     };
     this.addReferences = () => {
       const { effectiveReferenceElement } = this;
@@ -128,8 +214,10 @@ const Popover = class {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(POPOVER_REFERENCE, id);
-      effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      }
+      manager.registerElement(effectiveReferenceElement, this.el);
       this.setExpandedAttr();
     };
     this.removeReferences = () => {
@@ -137,9 +225,11 @@ const Popover = class {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(POPOVER_REFERENCE);
-      effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
-      effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      if ("removeAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
+        effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      }
+      manager.unregisterElement(effectiveReferenceElement);
     };
     this.hide = () => {
       this.open = false;
@@ -205,7 +295,11 @@ const Popover = class {
       })
       : this.createPopper();
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -216,7 +310,11 @@ const Popover = class {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  /** Toggles the popover's open property. */
+  /**
+   * Toggles the component's open property.
+   *
+   * @param value
+   */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -284,8 +382,8 @@ const Popover = class {
   //
   // --------------------------------------------------------------------------
   renderCloseButton() {
-    const { dismissible, closeButton, intlClose } = this;
-    return dismissible || closeButton ? (index.h("div", { class: CSS.closeButtonContainer }, index.h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose }, index.h("calcite-icon", { icon: "x", scale: "m" })))) : null;
+    const { dismissible, closeButton, intlClose, heading } = this;
+    return dismissible || closeButton ? (index.h("div", { class: CSS.closeButtonContainer }, index.h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: heading ? "s" : "m", text: intlClose }, index.h("calcite-icon", { icon: "x", scale: heading ? "s" : "m" })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
@@ -297,7 +395,7 @@ const Popover = class {
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? (index.h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
-    return (index.h(index.Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, index.h("div", { class: {
+    return (index.h(index.Host, { "aria-hidden": dom.toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, index.h("div", { class: {
         [popper.CSS.animation]: true,
         [popper.CSS.animationActive]: displayed
       }, onTransitionEnd: this.transitionEnd }, arrowNode, index.h("div", { class: {
@@ -322,6 +420,7 @@ const popoverManagerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@k
 const PopoverManager = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.mutationObserver = observers.createObserver("mutation", () => this.setAutoClose());
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -329,30 +428,31 @@ const PopoverManager = class {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+     *
      * @default `[data-calcite-popover-reference]`
      */
-    this.selector = `[${POPOVER_REFERENCE}]`;
+    this.selector = "[data-calcite-popover-reference]";
     /**
      * Automatically closes any currently open popovers when clicking outside of a popover.
      */
     this.autoClose = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.queryPopover = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, POPOVER_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(POPOVER_REFERENCE);
-      return dom.queryElementRoots(el, { id });
-    };
+  }
+  autoCloseHandler() {
+    this.setAutoClose();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.setAutoClose();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -362,27 +462,19 @@ const PopoverManager = class {
   render() {
     return index.h("slot", null);
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Private Methods
   //
-  //--------------------------------------------------------------------------
-  closeOpenPopovers(event) {
+  // --------------------------------------------------------------------------
+  setAutoClose() {
     const { autoClose, el } = this;
-    const popoverSelector = "calcite-popover";
-    const composedPath = event.composedPath();
-    const popover = this.queryPopover(composedPath);
-    if (popover) {
-      popover.toggle();
-      return;
-    }
-    if (autoClose) {
-      dom.queryElementsRoots(el, popoverSelector)
-        .filter((popover) => popover.open && !composedPath.includes(popover))
-        .forEach((popover) => popover.toggle(false));
-    }
+    el.querySelectorAll("calcite-popover").forEach((popover) => (popover.autoClose = autoClose));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "autoClose": ["autoCloseHandler"]
+  }; }
 };
 PopoverManager.style = popoverManagerCss;
 

package/dist/cjs/calcite-progress.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ab066772.js');
+const index = require('./index-8fbe74dd.js');
 
 const progressCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:block;width:100%}.track,.bar{position:absolute;top:0px;height:2px}.track{z-index:0;width:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{z-index:0;background-color:var(--calcite-ui-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{width:20%;-webkit-animation:looping-progress-bar-ani 2200ms linear infinite;animation:looping-progress-bar-ani 2200ms linear infinite}.reversed{animation-direction:reverse}.text{padding-left:0px;padding-right:0px;padding-top:1rem;padding-bottom:0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium)}@-webkit-keyframes looping-progress-bar-ani{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{width:40%}100%{-webkit-transform:translate3d(600%, 0, 0);transform:translate3d(600%, 0, 0)}}@keyframes looping-progress-bar-ani{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{width:40%}100%{-webkit-transform:translate3d(600%, 0, 0);transform:translate3d(600%, 0, 0)}}";
 
 const Progress = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Use indeterminate if finding actual progress value is impossible */
+    /** Use indeterminate if finding actual progress value is impossible. */
     this.type = "determinate";
-    /** Fraction completed, in the range of 0 - 1.0 */
+    /** The component's progress value, with a range of 0.0 - 1.0. */
     this.value = 0;
-    /** For indeterminate progress bars, reverse the animation direction */
+    /** When true and for indeterminate progress bars, reverses the animation direction. */
     this.reversed = false;
   }
   render() {