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

package/dist/collection/components/modal/modal.css

@@ -146,13 +146,13 @@
   display: flex;
   width: 100%;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
   --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  overflow: hidden;
   z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
@@ -328,20 +328,10 @@ slot[name=primary] {
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-  }
-  :host([width=s]) .modal {
     height: 100%;
-  }
-  :host([width=s]) .modal {
     max-height: 100%;
-  }
-  :host([width=s]) .modal {
     width: 100%;
-  }
-  :host([width=s]) .modal {
     max-width: 100%;
-  }
-  :host([width=s]) .modal {
     border-radius: 0px;
   }
   :host([width=s]) .content {
@@ -360,20 +350,10 @@ slot[name=primary] {
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-  }
-  :host([width=m]) .modal {
     height: 100%;
-  }
-  :host([width=m]) .modal {
     max-height: 100%;
-  }
-  :host([width=m]) .modal {
     width: 100%;
-  }
-  :host([width=m]) .modal {
     max-width: 100%;
-  }
-  :host([width=m]) .modal {
     border-radius: 0px;
   }
   :host([width=m]) .content {
@@ -392,20 +372,10 @@ slot[name=primary] {
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-  }
-  :host([width=l]) .modal {
     height: 100%;
-  }
-  :host([width=l]) .modal {
     max-height: 100%;
-  }
-  :host([width=l]) .modal {
     width: 100%;
-  }
-  :host([width=l]) .modal {
     max-width: 100%;
-  }
-  :host([width=l]) .modal {
     border-radius: 0px;
   }
   :host([width=l]) .content {
@@ -497,9 +467,6 @@ slot[name=primary] {
 
   .footer {
     position: sticky;
-  }
-
-  .footer {
     bottom: 0px;
   }
 }
@@ -513,9 +480,6 @@ slot[name=primary] {
 
   .back, .secondary {
     margin: 0px;
-  }
-
-  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }

package/dist/collection/components/modal/modal.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";

package/dist/collection/components/modal/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

package/dist/collection/components/notice/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-group.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, h, Prop, Method, Fragment } from "@stencil/core";
 import { CSS, TEXT } from "./resources";

package/dist/collection/components/pagination/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -234,11 +234,11 @@ h4.heading, h5.heading {
 .header-content {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
-  overflow: hidden;
   margin-inline-end: auto;
 }
 .header-content .heading, .header-content .summary {

package/dist/collection/components/panel/panel.js

@@ -1,15 +1,16 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getElementDir, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -51,11 +52,21 @@ export class Panel {
      * Opens the action menu.
      */
     this.menuOpen = false;
+    this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.resizeHandler = () => {
+      const { panelScrollEl } = this;
+      if (!panelScrollEl ||
+        typeof panelScrollEl.scrollHeight !== "number" ||
+        typeof panelScrollEl.offsetHeight !== "number") {
+        return;
+      }
+      panelScrollEl.tabIndex = panelScrollEl.scrollHeight > panelScrollEl.offsetHeight ? 0 : -1;
+    };
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
@@ -72,6 +83,7 @@ export class Panel {
     };
     this.dismiss = () => {
       this.dismissed = true;
+      this.calcitePanelDismiss.emit();
     };
     this.panelScrollHandler = () => {
       this.calcitePanelScroll.emit();
@@ -79,6 +91,15 @@ export class Panel {
     this.backButtonClick = () => {
       this.calcitePanelBackClick.emit();
     };
+    this.setPanelScrollEl = (el) => {
+      var _a, _b;
+      this.panelScrollEl = el;
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      if (el) {
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        this.resizeHandler();
+      }
+    };
   }
   dismissedHandler() {
     this.calcitePanelDismissedChange.emit();
@@ -100,7 +121,9 @@ export class Panel {
     connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
+    var _a;
     disconnectConditionalSlotComponent(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -219,9 +242,9 @@ export class Panel {
     const hasFab = getSlotted(el, SLOTS.fab);
     const defaultSlotNode = h("slot", { key: "default-slot" });
     const contentWrapperKey = "content-wrapper";
-    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 },
+    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl },
       h("section", { class: CSS.contentContainer }, defaultSlotNode),
-      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, defaultSlotNode));
+      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, defaultSlotNode));
   }
   renderFab() {
     return (h("div", { class: CSS.fabContainer },
@@ -229,7 +252,7 @@ export class Panel {
   }
   render() {
     const { dismissed, dismissible, loading, panelKeyDownHandler } = this;
-    const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterNode()));
@@ -526,13 +549,31 @@ export class Panel {
     }
   }; }
   static get events() { return [{
+      "method": "calcitePanelDismiss",
+      "name": "calcitePanelDismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the close button has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calcitePanelDismissedChange",
       "name": "calcitePanelDismissedChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use calcitePanelDismiss instead."
+          }],
         "text": "Emitted when the close button has been clicked."
       },
       "complexType": {

package/dist/collection/components/panel/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   backButton: "back-button",

package/dist/collection/components/pick-list/pick-list.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";

package/dist/collection/components/pick-list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   sticky: "sticky-pos"

package/dist/collection/components/pick-list/shared-list-logic.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { debounce } from "lodash-es";
 import { focusElement, getSlotted } from "../../utils/dom";

package/dist/collection/components/pick-list/shared-list-render.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 var __rest = (this && this.__rest) || function (s, e) {
   var t = {};
@@ -15,11 +15,12 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { h, Host } from "@stencil/core";
+import { toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 export const List = (_a) => {
   var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = h("slot", null);
-  return (h(Host, Object.assign({ "aria-busy": loading.toString(), role: "menu" }, rest),
+  return (h(Host, Object.assign({ "aria-busy": toAriaBoolean(loading), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
         filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,

package/dist/collection/components/pick-list-group/pick-list-group.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/pick-list-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/pick-list-item/pick-list-item.css

@@ -166,6 +166,7 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
+  overflow: hidden;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -174,7 +175,6 @@
   line-height: 1.375;
   word-wrap: break-word;
   word-break: break-word;
-  overflow: hidden;
 }
 
 .title{

package/dist/collection/components/pick-list-item/pick-list-item.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { ICON_TYPES } from "../pick-list/resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -159,7 +159,7 @@ export class PickListItem {
       this.renderIcon(),
       this.renderActionsStart(),
       h("label", { "aria-label": label, class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, ref: (focusEl) => (this.focusEl = focusEl), tabIndex: 0 },
-        h("div", { "aria-checked": this.selected.toString(), class: CSS.textContainer, role: "menuitemcheckbox" },
+        h("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS.textContainer, role: "menuitemcheckbox" },
           h("span", { class: CSS.title }, label),
           description ? h("span", { class: CSS.description }, description) : null)),
       this.renderActionsEnd()));

package/dist/collection/components/pick-list-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   actions: "actions",

package/dist/collection/components/popover/PopoverManager.js

@@ -0,0 +1,64 @@
+/*!
+ * 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.82
+ */
+import { queryElementsRoots } from "../../utils/dom";
+export default class PopoverManager {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.registeredElements = new WeakMap();
+    this.registeredElementCount = 0;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.queryPopover = (composedPath) => {
+      const { registeredElements } = this;
+      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+      return registeredElements.get(registeredElement);
+    };
+    this.clickHandler = (event) => {
+      const composedPath = event.composedPath();
+      const popover = this.queryPopover(composedPath);
+      if (popover) {
+        popover.toggle();
+        return;
+      }
+      queryElementsRoots(event.target, "calcite-popover")
+        .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
+        .forEach((popover) => popover.toggle(false));
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  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 });
+  }
+  removeListeners() {
+    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+  }
+}

package/dist/collection/components/popover/popover.js

@@ -1,14 +1,16 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
-import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, POPOVER_REFERENCE, TEXT, defaultPopoverPlacement } from "./resources";
+import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS, filterComputedPlacements } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { queryElementRoots } from "../../utils/dom";
+import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
+import PopoverManager from "./PopoverManager";
+const manager = new PopoverManager();
 /**
  * @slot - A slot for adding custom content.
  */
@@ -19,6 +21,10 @@ export class Popover {
     //  Properties
     //
     // --------------------------------------------------------------------------
+    /**
+     * Automatically closes any currently open popovers when clicking outside of a popover.
+     */
+    this.autoClose = false;
     /**
      * Display a close button within the Popover.
      * @deprecated use dismissible instead.
@@ -93,7 +99,7 @@ export class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.setAttribute(ARIA_EXPANDED, open.toString());
+      effectiveReferenceElement.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
     };
     this.addReferences = () => {
       const { effectiveReferenceElement } = this;
@@ -101,8 +107,8 @@ export class Popover {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(POPOVER_REFERENCE, id);
       effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      manager.registerElement(effectiveReferenceElement, this.el);
       this.setExpandedAttr();
     };
     this.removeReferences = () => {
@@ -110,9 +116,9 @@ export class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(POPOVER_REFERENCE);
       effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
       effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      manager.unregisterElement(effectiveReferenceElement);
     };
     this.hide = () => {
       this.open = false;
@@ -274,7 +280,7 @@ export class Popover {
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
-    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
       h("div", { class: {
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
@@ -298,6 +304,24 @@ export class Popover {
     "$": ["popover.css"]
   }; }
   static get properties() { return {
+    "autoClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Automatically closes any currently open popovers when clicking outside of a popover."
+      },
+      "attribute": "auto-close",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "closeButton": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/popover/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.82
  */
 export const CSS = {
   container: "container",
@@ -19,7 +19,6 @@ export const TEXT = {
   close: "Close"
 };
 export const defaultPopoverPlacement = "auto";
-export const POPOVER_REFERENCE = "data-calcite-popover-reference";
 export const ARIA_CONTROLS = "aria-controls";
 export const ARIA_EXPANDED = "aria-expanded";
 export const HEADING_LEVEL = 2;