@esri/calcite-components 1.0.0-next.383 → 1.0.0-next.387

package/dist/components/calcite-combobox.js

@@ -221,10 +221,9 @@ let Combobox = class extends HTMLElement {
     this.activeDescendant = "";
     this.text = "";
     this.open = this.active;
-    /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
-    this.maxScrollerHeight = 0;
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
+    this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
@@ -323,9 +322,14 @@ let Combobox = class extends HTMLElement {
       }
     };
     this.setMaxScrollerHeight = () => {
-      if (this.active) {
-        this.maxScrollerHeight = this.getMaxScrollerHeight(this.getCombinedItems());
+      const { active, listContainerEl } = this;
+      if (!listContainerEl || !active) {
+        return;
       }
+      this.reposition();
+      const maxScrollerHeight = this.getMaxScrollerHeight();
+      listContainerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      this.reposition();
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
       this.active = false;
@@ -366,6 +370,7 @@ let Combobox = class extends HTMLElement {
       this.menuEl = el;
     };
     this.setListContainerEl = (el) => {
+      this.resizeObserver.observe(el);
       this.listContainerEl = el;
     };
     this.setReferenceEl = (el) => {
@@ -445,15 +450,9 @@ let Combobox = class extends HTMLElement {
     }
     else if (!oldValue && newValue) {
       this.el.addEventListener("calciteComboboxOpen", this.toggleOpenEnd);
-      // give the combobox height, then reposition prior to opening
-      requestAnimationFrame(() => {
-        this.reposition();
-        this.setMaxScrollerHeight();
-        this.open = true;
-      });
+      this.open = true;
     }
     this.reposition();
-    this.setMaxScrollerHeight();
   }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
@@ -542,8 +541,9 @@ let Combobox = class extends HTMLElement {
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
@@ -586,19 +586,22 @@ let Combobox = class extends HTMLElement {
     }
     this.popper = null;
   }
-  getMaxScrollerHeight(items) {
+  getMaxScrollerHeight() {
+    const items = this.getCombinedItems().filter((item) => !item.hidden);
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
-    items.forEach((item) => {
-      if (itemsToProcess < maxItems && maxItems > 0) {
-        const height = this.calculateSingleItemHeight(item);
-        if (height > 0) {
-          maxScrollerHeight += height;
-          itemsToProcess++;
+    if (items.length > maxItems) {
+      items.forEach((item) => {
+        if (itemsToProcess < maxItems && maxItems > 0) {
+          const height = this.calculateSingleItemHeight(item);
+          if (height > 0) {
+            maxScrollerHeight += height;
+            itemsToProcess++;
+          }
         }
-      }
-    });
+      });
+    }
     return maxScrollerHeight;
   }
   calculateSingleItemHeight(item) {
@@ -846,16 +849,13 @@ let Combobox = class extends HTMLElement {
     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, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;
+    const { active, setMenuEl, setListContainerEl, hideList, open } = this;
     const classes = {
       "list-container": true,
       [CSS.animation]: true,
       [CSS.animationActive]: active
     };
-    const style = {
-      maxHeight: maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
-    };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl, style: style }, h("ul", { class: { list: true, "list--hide": hideList } }, h("slot", null)))));
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": hideList } }, h("slot", null)))));
   }
   renderIconStart() {
     const { selectionMode, needsIcon, selectedItems } = this;
@@ -910,7 +910,6 @@ Combobox = /*@__PURE__*/ proxyCustomElement(Combobox, [1, "calcite-combobox", {
     "activeDescendant": [32],
     "text": [32],
     "open": [32],
-    "maxScrollerHeight": [32],
     "reposition": [64],
     "setFocus": [64]
   }, [[4, "click", "documentClickHandler"], [0, "calciteComboboxItemChange", "calciteComboboxItemChangeHandler"]]]);

package/dist/components/calcite-popover-manager.js

@@ -32,10 +32,16 @@ let PopoverManager = class extends HTMLElement {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.getRelatedPopover = (element) => {
-      var _a;
-      const { selector, el } = this;
-      const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(POPOVER_REFERENCE);
+    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 queryElementRoots(el, { id });
     };
   }
@@ -53,20 +59,19 @@ let PopoverManager = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   closeOpenPopovers(event) {
-    const target = event.target;
     const { autoClose, el } = this;
     const popoverSelector = "calcite-popover";
-    const isTargetInsidePopover = target.closest(popoverSelector);
-    const relatedPopover = this.getRelatedPopover(target);
-    if (autoClose && !isTargetInsidePopover) {
+    const composedPath = event.composedPath();
+    const popover = this.queryPopover(composedPath);
+    if (popover) {
+      popover.toggle();
+      return;
+    }
+    if (autoClose) {
       queryElementsRoots(el, popoverSelector)
-        .filter((popover) => popover.open && popover !== relatedPopover)
+        .filter((popover) => popover.open && !composedPath.includes(popover))
         .forEach((popover) => popover.toggle(false));
     }
-    if (!el.contains(target) || !relatedPopover) {
-      return;
-    }
-    relatedPopover.toggle();
   }
   get el() { return this; }
   static get style() { return popoverManagerCss; }

package/dist/components/calcite-radio-button.js

@@ -58,7 +58,7 @@ let RadioButton = class extends HTMLElement {
       items[selectedIndex].click();
     };
     this.queryButtons = () => {
-      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
     };
     this.isDefaultSelectable = () => {
       const radioButtons = this.queryButtons();

package/dist/components/dropdown.js

@@ -85,8 +85,10 @@ let Dropdown = class extends HTMLElement {
       if (!scrollerEl || !active) {
         return;
       }
+      this.reposition();
       const maxScrollerHeight = this.getMaxScrollerHeight();
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      this.reposition();
     };
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
@@ -144,7 +146,6 @@ let Dropdown = class extends HTMLElement {
     this.reposition();
   }
   maxItemsHandler() {
-    this.reposition();
     this.setMaxScrollerHeight();
   }
   placementHandler() {

package/dist/components/popover.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './action.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-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)}.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);overflow:hidden}.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;overflow:hidden}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
+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)}.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%}";
 
 let Popover = class extends HTMLElement {
   constructor() {
@@ -249,7 +249,7 @@ let Popover = class extends HTMLElement {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { dismissible, closeButton, intlClose } = this;
-    return dismissible || closeButton ? (h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose }, h("calcite-icon", { icon: "x", scale: "m" }))) : null;
+    return dismissible || closeButton ? (h("div", { class: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose }, h("calcite-icon", { icon: "x", scale: "m" })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;

package/dist/components/resources.js

@@ -6,6 +6,7 @@ const CSS = {
   container: "container",
   arrow: "arrow",
   imageContainer: "image-container",
+  closeButtonContainer: "close-button-container",
   closeButton: "close-button",
   content: "content",
   hasHeader: "has-header",

package/dist/components/tooltip-manager.js

@@ -29,10 +29,16 @@ let TooltipManager = class extends HTMLElement {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.queryTooltip = (element) => {
-      var _a;
-      const { selector, el } = this;
-      const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(TOOLTIP_REFERENCE);
+    this.queryTooltip = (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, TOOLTIP_REFERENCE); });
+      if (!referenceElement) {
+        return null;
+      }
+      const id = referenceElement.getAttribute(TOOLTIP_REFERENCE);
       return queryElementRoots(el, { id });
     };
     this.clearHoverTimeout = (tooltip) => {
@@ -89,7 +95,7 @@ let TooltipManager = class extends HTMLElement {
       }
     };
     this.hoverEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.target);
+      const tooltip = this.queryTooltip(event.composedPath());
       this.activeTooltipHover(event);
       if (!tooltip) {
         return;
@@ -97,7 +103,7 @@ let TooltipManager = class extends HTMLElement {
       this.hoverTooltip({ tooltip, value });
     };
     this.focusEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.target);
+      const tooltip = this.queryTooltip(event.composedPath());
       if (!tooltip || tooltip === this.clickedTooltip) {
         this.clickedTooltip = null;
         return;
@@ -134,7 +140,7 @@ let TooltipManager = class extends HTMLElement {
     this.hoverEvent(event, false);
   }
   clickHandler(event) {
-    const clickedTooltip = this.queryTooltip(event.target);
+    const clickedTooltip = this.queryTooltip(event.composedPath());
     this.clickedTooltip = clickedTooltip;
     if (clickedTooltip) {
       this.toggleTooltip(clickedTooltip, false);

package/dist/custom-elements/index.js

@@ -9346,10 +9346,9 @@ let Combobox = class extends HTMLElement$1 {
     this.activeDescendant = "";
     this.text = "";
     this.open = this.active;
-    /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
-    this.maxScrollerHeight = 0;
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
+    this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
@@ -9448,9 +9447,14 @@ let Combobox = class extends HTMLElement$1 {
       }
     };
     this.setMaxScrollerHeight = () => {
-      if (this.active) {
-        this.maxScrollerHeight = this.getMaxScrollerHeight(this.getCombinedItems());
+      const { active, listContainerEl } = this;
+      if (!listContainerEl || !active) {
+        return;
       }
+      this.reposition();
+      const maxScrollerHeight = this.getMaxScrollerHeight();
+      listContainerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      this.reposition();
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
       this.active = false;
@@ -9491,6 +9495,7 @@ let Combobox = class extends HTMLElement$1 {
       this.menuEl = el;
     };
     this.setListContainerEl = (el) => {
+      this.resizeObserver.observe(el);
       this.listContainerEl = el;
     };
     this.setReferenceEl = (el) => {
@@ -9570,15 +9575,9 @@ let Combobox = class extends HTMLElement$1 {
     }
     else if (!oldValue && newValue) {
       this.el.addEventListener("calciteComboboxOpen", this.toggleOpenEnd);
-      // give the combobox height, then reposition prior to opening
-      requestAnimationFrame(() => {
-        this.reposition();
-        this.setMaxScrollerHeight();
-        this.open = true;
-      });
+      this.open = true;
     }
     this.reposition();
-    this.setMaxScrollerHeight();
   }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
@@ -9667,8 +9666,9 @@ let Combobox = class extends HTMLElement$1 {
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
@@ -9711,19 +9711,22 @@ let Combobox = class extends HTMLElement$1 {
     }
     this.popper = null;
   }
-  getMaxScrollerHeight(items) {
+  getMaxScrollerHeight() {
+    const items = this.getCombinedItems().filter((item) => !item.hidden);
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
-    items.forEach((item) => {
-      if (itemsToProcess < maxItems && maxItems > 0) {
-        const height = this.calculateSingleItemHeight(item);
-        if (height > 0) {
-          maxScrollerHeight += height;
-          itemsToProcess++;
+    if (items.length > maxItems) {
+      items.forEach((item) => {
+        if (itemsToProcess < maxItems && maxItems > 0) {
+          const height = this.calculateSingleItemHeight(item);
+          if (height > 0) {
+            maxScrollerHeight += height;
+            itemsToProcess++;
+          }
         }
-      }
-    });
+      });
+    }
     return maxScrollerHeight;
   }
   calculateSingleItemHeight(item) {
@@ -9971,16 +9974,13 @@ let Combobox = class extends HTMLElement$1 {
     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, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;
+    const { active, setMenuEl, setListContainerEl, hideList, open } = this;
     const classes = {
       "list-container": true,
       [CSS$D.animation]: true,
       [CSS$D.animationActive]: active
     };
-    const style = {
-      maxHeight: maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
-    };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl, style: style }, h("ul", { class: { list: true, "list--hide": hideList } }, h("slot", null)))));
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": hideList } }, h("slot", null)))));
   }
   renderIconStart() {
     const { selectionMode, needsIcon, selectedItems } = this;
@@ -11512,8 +11512,10 @@ let Dropdown = class extends HTMLElement$1 {
       if (!scrollerEl || !active) {
         return;
       }
+      this.reposition();
       const maxScrollerHeight = this.getMaxScrollerHeight();
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      this.reposition();
     };
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
@@ -11571,7 +11573,6 @@ let Dropdown = class extends HTMLElement$1 {
     this.reposition();
   }
   maxItemsHandler() {
-    this.reposition();
     this.setMaxScrollerHeight();
   }
   placementHandler() {
@@ -16406,6 +16407,7 @@ const CSS$g = {
   container: "container",
   arrow: "arrow",
   imageContainer: "image-container",
+  closeButtonContainer: "close-button-container",
   closeButton: "close-button",
   content: "content",
   hasHeader: "has-header",
@@ -16421,7 +16423,7 @@ const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
 const HEADING_LEVEL$2 = 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)}.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);overflow:hidden}.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;overflow:hidden}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
+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)}.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%}";
 
 let Popover = class extends HTMLElement$1 {
   constructor() {
@@ -16658,7 +16660,7 @@ let Popover = class extends HTMLElement$1 {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { dismissible, closeButton, intlClose } = this;
-    return dismissible || closeButton ? (h("calcite-action", { class: CSS$g.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose }, h("calcite-icon", { icon: "x", scale: "m" }))) : null;
+    return dismissible || closeButton ? (h("div", { class: CSS$g.closeButtonContainer }, h("calcite-action", { class: CSS$g.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose }, h("calcite-icon", { icon: "x", scale: "m" })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
@@ -16715,10 +16717,16 @@ let PopoverManager = class extends HTMLElement$1 {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.getRelatedPopover = (element) => {
-      var _a;
-      const { selector, el } = this;
-      const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(POPOVER_REFERENCE);
+    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 queryElementRoots(el, { id });
     };
   }
@@ -16736,20 +16744,19 @@ let PopoverManager = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   closeOpenPopovers(event) {
-    const target = event.target;
     const { autoClose, el } = this;
     const popoverSelector = "calcite-popover";
-    const isTargetInsidePopover = target.closest(popoverSelector);
-    const relatedPopover = this.getRelatedPopover(target);
-    if (autoClose && !isTargetInsidePopover) {
+    const composedPath = event.composedPath();
+    const popover = this.queryPopover(composedPath);
+    if (popover) {
+      popover.toggle();
+      return;
+    }
+    if (autoClose) {
       queryElementsRoots(el, popoverSelector)
-        .filter((popover) => popover.open && popover !== relatedPopover)
+        .filter((popover) => popover.open && !composedPath.includes(popover))
         .forEach((popover) => popover.toggle(false));
     }
-    if (!el.contains(target) || !relatedPopover) {
-      return;
-    }
-    relatedPopover.toggle();
   }
   get el() { return this; }
   static get style() { return popoverManagerCss; }
@@ -16831,7 +16838,7 @@ let RadioButton = class extends HTMLElement$1 {
       items[selectedIndex].click();
     };
     this.queryButtons = () => {
-      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
     };
     this.isDefaultSelectable = () => {
       const radioButtons = this.queryButtons();
@@ -24588,10 +24595,16 @@ let TooltipManager = class extends HTMLElement$1 {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.queryTooltip = (element) => {
-      var _a;
-      const { selector, el } = this;
-      const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(TOOLTIP_REFERENCE);
+    this.queryTooltip = (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, TOOLTIP_REFERENCE); });
+      if (!referenceElement) {
+        return null;
+      }
+      const id = referenceElement.getAttribute(TOOLTIP_REFERENCE);
       return queryElementRoots(el, { id });
     };
     this.clearHoverTimeout = (tooltip) => {
@@ -24648,7 +24661,7 @@ let TooltipManager = class extends HTMLElement$1 {
       }
     };
     this.hoverEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.target);
+      const tooltip = this.queryTooltip(event.composedPath());
       this.activeTooltipHover(event);
       if (!tooltip) {
         return;
@@ -24656,7 +24669,7 @@ let TooltipManager = class extends HTMLElement$1 {
       this.hoverTooltip({ tooltip, value });
     };
     this.focusEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.target);
+      const tooltip = this.queryTooltip(event.composedPath());
       if (!tooltip || tooltip === this.clickedTooltip) {
         this.clickedTooltip = null;
         return;
@@ -24693,7 +24706,7 @@ let TooltipManager = class extends HTMLElement$1 {
     this.hoverEvent(event, false);
   }
   clickHandler(event) {
-    const clickedTooltip = this.queryTooltip(event.target);
+    const clickedTooltip = this.queryTooltip(event.composedPath());
     this.clickedTooltip = clickedTooltip;
     if (clickedTooltip) {
       this.toggleTooltip(clickedTooltip, false);
@@ -25526,7 +25539,7 @@ const CalciteChip = /*@__PURE__*/proxyCustomElement(Chip, [1,"calcite-chip",{"ap
 const CalciteColorPicker = /*@__PURE__*/proxyCustomElement(ColorPicker, [1,"calcite-color-picker",{"allowEmpty":[4,"allow-empty"],"appearance":[513],"color":[1040],"format":[1],"hideHex":[4,"hide-hex"],"hideChannels":[4,"hide-channels"],"hideSaved":[4,"hide-saved"],"intlB":[1,"intl-b"],"intlBlue":[1,"intl-blue"],"intlDeleteColor":[1,"intl-delete-color"],"intlG":[1,"intl-g"],"intlGreen":[1,"intl-green"],"intlH":[1,"intl-h"],"intlHsv":[1,"intl-hsv"],"intlHex":[1,"intl-hex"],"intlHue":[1,"intl-hue"],"intlNoColor":[1,"intl-no-color"],"intlR":[1,"intl-r"],"intlRed":[1,"intl-red"],"intlRgb":[1,"intl-rgb"],"intlS":[1,"intl-s"],"intlSaturation":[1,"intl-saturation"],"intlSaveColor":[1,"intl-save-color"],"intlSaved":[1,"intl-saved"],"intlV":[1,"intl-v"],"intlValue":[1,"intl-value"],"scale":[513],"storageId":[1,"storage-id"],"value":[1025],"colorFieldAndSliderInteractive":[32],"channelMode":[32],"channels":[32],"dimensions":[32],"savedColors":[32],"colorFieldScopeTop":[32],"colorFieldScopeLeft":[32],"scopeOrientation":[32],"hueScopeLeft":[32],"hueScopeTop":[32]},[[2,"keydown","handleChannelKeyUpOrDown"],[2,"keyup","handleChannelKeyUpOrDown"]]]);
 const CalciteColorPickerHexInput = /*@__PURE__*/proxyCustomElement(ColorPickerHexInput, [1,"calcite-color-picker-hex-input",{"allowEmpty":[4,"allow-empty"],"intlHex":[1,"intl-hex"],"intlNoColor":[1,"intl-no-color"],"scale":[513],"value":[1537],"internalColor":[32]},[[2,"keydown","onInputKeyDown"]]]);
 const CalciteColorPickerSwatch = /*@__PURE__*/proxyCustomElement(ColorPickerSwatch, [1,"calcite-color-picker-swatch",{"active":[516],"color":[1],"scale":[513]}]);
-const CalciteCombobox = /*@__PURE__*/proxyCustomElement(Combobox, [1,"calcite-combobox",{"active":[1540],"disabled":[516],"label":[1],"placeholder":[1],"maxItems":[2,"max-items"],"name":[513],"allowCustomValues":[4,"allow-custom-values"],"overlayPositioning":[1,"overlay-positioning"],"required":[4],"selectionMode":[513,"selection-mode"],"scale":[513],"value":[1025],"intlRemoveTag":[1,"intl-remove-tag"],"items":[32],"groupItems":[32],"selectedItems":[32],"visibleItems":[32],"needsIcon":[32],"hideList":[32],"activeItemIndex":[32],"activeChipIndex":[32],"activeDescendant":[32],"text":[32],"open":[32],"maxScrollerHeight":[32]},[[4,"click","documentClickHandler"],[0,"calciteComboboxItemChange","calciteComboboxItemChangeHandler"]]]);
+const CalciteCombobox = /*@__PURE__*/proxyCustomElement(Combobox, [1,"calcite-combobox",{"active":[1540],"disabled":[516],"label":[1],"placeholder":[1],"maxItems":[2,"max-items"],"name":[513],"allowCustomValues":[4,"allow-custom-values"],"overlayPositioning":[1,"overlay-positioning"],"required":[4],"selectionMode":[513,"selection-mode"],"scale":[513],"value":[1025],"intlRemoveTag":[1,"intl-remove-tag"],"items":[32],"groupItems":[32],"selectedItems":[32],"visibleItems":[32],"needsIcon":[32],"hideList":[32],"activeItemIndex":[32],"activeChipIndex":[32],"activeDescendant":[32],"text":[32],"open":[32]},[[4,"click","documentClickHandler"],[0,"calciteComboboxItemChange","calciteComboboxItemChangeHandler"]]]);
 const CalciteComboboxItem = /*@__PURE__*/proxyCustomElement(ComboboxItem, [1,"calcite-combobox-item",{"disabled":[516],"selected":[1540],"active":[4],"ancestors":[1040],"guid":[1],"icon":[1],"textLabel":[513,"text-label"],"value":[8],"constant":[516]}]);
 const CalciteComboboxItemGroup = /*@__PURE__*/proxyCustomElement(ComboboxItemGroup, [1,"calcite-combobox-item-group",{"ancestors":[1040],"label":[1]}]);
 const CalciteDatePicker = /*@__PURE__*/proxyCustomElement(DatePicker, [1,"calcite-date-picker",{"activeRange":[1,"active-range"],"value":[1025],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1025],"max":[1025],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"intlYear":[1,"intl-year"],"locale":[1],"scale":[513],"range":[516],"start":[1025],"end":[1025],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"activeDate":[32],"activeStartDate":[32],"activeEndDate":[32],"localeData":[32],"hoverRange":[32]}]);