@esri/calcite-components 1.0.0-next.363 → 1.0.0-next.367

package/dist/collection/components/calcite-link/calcite-link.js

@@ -18,6 +18,11 @@ export class CalciteLink {
     //--------------------------------------------------------------------------
     /** is the link disabled  */
     this.disabled = false;
+    /** Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+     * Without a value, the browser will suggest a filename/extension
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+     */
+    this.download = false;
     /** the node type of the rendered child element */
     this.childElType = "span";
     //--------------------------------------------------------------------------
@@ -41,14 +46,20 @@ export class CalciteLink {
     this.childElType = this.href ? "a" : "span";
   }
   render() {
-    const dir = getElementDir(this.el);
+    const { download, el } = this;
+    const dir = getElementDir(el);
     const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const Tag = this.childElType;
     const role = this.childElType === "span" ? "link" : null;
     const tabIndex = this.disabled ? -1 : this.childElType === "span" ? 0 : null;
     return (h(Host, { role: "presentation" },
-      h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
+      h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, 
+        /*
+        When the 'download' property of type 'boolean | string' is set to true, the value is "".
+        This works around that issue for now.
+        */
+        download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));
@@ -89,6 +100,24 @@ export class CalciteLink {
       "reflect": true,
       "defaultValue": "false"
     },
+    "download": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download"
+      },
+      "attribute": "download",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "href": {
       "type": "string",
       "mutable": false,

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

@@ -5,6 +5,7 @@
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.
@@ -30,6 +31,17 @@ export class CalciteListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

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

@@ -8,6 +8,7 @@ import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
 import { TEXT, SLOTS, CSS, ICONS } from "./resources";
 import { createObserver } from "../../utils/observers";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 const isFocusableExtended = (el) => {
   return isCalciteFocusable(el) || isFocusable(el);
 };
@@ -115,11 +116,13 @@ export class CalciteModal {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
+    connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
     var _a;
     this.removeOverflowHiddenClass();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectConditionalSlotComponent(this);
   }
   render() {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
@@ -141,7 +144,7 @@ export class CalciteModal {
         h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
   }
   renderFooter() {
-    return this.hasFooter ? (h("div", { class: CSS.footer },
+    return this.hasFooter ? (h("div", { class: CSS.footer, key: "footer" },
       h("span", { class: CSS.back },
         h("slot", { name: SLOTS.back })),
       h("span", { class: CSS.secondary },
@@ -150,7 +153,7 @@ export class CalciteModal {
         h("slot", { name: SLOTS.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose },
+    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose },
       h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core
 import { CSS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "../calcite-alert/interfaces";
 import { getSlotted, setRequestedIcon } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
  * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
@@ -56,6 +57,12 @@ export class CalciteNotice {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }

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

@@ -7,6 +7,7 @@ import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @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.
@@ -82,6 +83,17 @@ export class CalcitePanel {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Methods
   //
   // --------------------------------------------------------------------------
@@ -123,7 +135,7 @@ export class CalcitePanel {
    * Allows user to override the entire header-content node.
    */
   renderHeaderSlottedContent() {
-    return (h("div", { class: CSS.headerContent, key: "header-content" },
+    return (h("div", { class: CSS.headerContent, key: "slotted-header-content" },
       h("slot", { name: SLOTS.headerContent })));
   }
   renderHeaderStartActions() {
@@ -145,7 +157,7 @@ export class CalcitePanel {
   renderMenu() {
     const { el, intlOptions, menuOpen } = this;
     const hasMenuItems = getSlotted(el, SLOTS.headerMenuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" },
+    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], key: "menu", label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" },
       h("calcite-action", { icon: ICONS.menu, slot: ACTION_MENU_SLOTS.trigger, text: intlOptions || TEXT.options }),
       h("slot", { name: SLOTS.headerMenuActions }))) : null;
   }
@@ -170,20 +182,13 @@ export class CalcitePanel {
       actionsNodeEnd,
       headerMenuNode)) : null;
   }
-  /**
-   * Allows user to override the entire footer node.
-   */
-  renderFooterSlottedContent() {
+  renderFooterNode() {
     const { el } = this;
     const hasFooterSlottedContent = getSlotted(el, SLOTS.footer);
-    return hasFooterSlottedContent ? (h("footer", { class: CSS.footer },
-      h("slot", { name: SLOTS.footer }))) : null;
-  }
-  renderFooterActions() {
-    const { el } = this;
     const hasFooterActions = getSlotted(el, SLOTS.footerActions);
-    return hasFooterActions ? (h("footer", { class: CSS.footer },
-      h("slot", { name: SLOTS.footerActions }))) : null;
+    return hasFooterSlottedContent || hasFooterActions ? (h("footer", { class: CSS.footer, key: "footer" },
+      hasFooterSlottedContent ? h("slot", { key: "footer-slot", name: SLOTS.footer }) : null,
+      hasFooterActions ? h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions }) : null)) : null;
   }
   renderContent() {
     const { el } = this;
@@ -203,7 +208,7 @@ export class CalcitePanel {
     const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
-      this.renderFooterSlottedContent() || this.renderFooterActions()));
+      this.renderFooterNode()));
     return (h(Fragment, null,
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       panelNode));

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

@@ -7,10 +7,22 @@ import { CSS, SLOTS } from "./resources";
 import { HEADING_LEVEL } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements.
  */
 export class CalcitePickListGroup {
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@st
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot actions-end - a slot for adding actions or content to the end side of the item.
  * @slot actions-start - a slot for adding actions or content to the start side of the item.
@@ -90,6 +91,17 @@ export class CalcitePickListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/collection/components/calcite-shell/calcite-shell.js

@@ -5,6 +5,7 @@
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
  * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
@@ -27,12 +28,23 @@ export class CalciteShell {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
   renderHeader() {
     const hasHeader = !!getSlotted(this.el, SLOTS.header);
-    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+    return hasHeader ? h("slot", { key: "header", name: SLOTS.header }) : null;
   }
   renderContent() {
     const content = !!this.contentBehind
@@ -53,7 +65,7 @@ export class CalciteShell {
   }
   renderFooter() {
     const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-    return hasFooter ? (h("div", { class: CSS.footer },
+    return hasFooter ? (h("div", { class: CSS.footer, key: "footer" },
       h("slot", { name: SLOTS.footer }))) : null;
   }
   renderMain() {

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.js

@@ -5,6 +5,7 @@
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -31,6 +32,17 @@ export class CalciteShellCenterRow {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -39,7 +51,7 @@ export class CalciteShellCenterRow {
     const contentNode = (h("div", { class: CSS.content },
       h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer },
+    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer, key: "action-bar" },
       h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -6,6 +6,7 @@ import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, getElementDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -151,7 +152,11 @@ export class CalciteShellPanel {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
   disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
     this.disconnectSeparator();
   }
   componentDidLoad() {
@@ -165,18 +170,18 @@ export class CalciteShellPanel {
   renderHeader() {
     const { el } = this;
     const hasHeader = getSlotted(el, SLOTS.header);
-    return hasHeader ? (h("div", { class: CSS.contentHeader },
+    return hasHeader ? (h("div", { class: CSS.contentHeader, key: "header" },
       h("slot", { name: SLOTS.header }))) : null;
   }
   render() {
     const { collapsed, detached, position, initialContentWidth, contentWidth, contentWidthMax, contentWidthMin, intlResize, resizable } = this;
     const allowResizing = !detached && resizable;
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null },
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null },
       this.renderHeader(),
       h("div", { class: CSS.contentBody },
         h("slot", null))));
-    const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
-    const actionBarNode = h("slot", { name: SLOTS.actionBar });
+    const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+    const actionBarNode = h("slot", { key: "action-bar", name: SLOTS.actionBar });
     const mainNodes = [actionBarNode, contentNode, separatorNode];
     if (position === "end") {
       mainNodes.reverse();

package/dist/collection/components/calcite-tile/calcite-tile.js

@@ -5,6 +5,7 @@
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot content-start - A slot for adding non-actionable elements before the tile content.
  * @slot content-end - A slot for adding non-actionable elements after the tile content.
@@ -34,6 +35,17 @@ export class CalciteTile {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------

package/dist/collection/components/calcite-tip/calcite-tip.js

@@ -6,6 +6,7 @@ import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text and a hyperlink.
  * @slot thumbnail - A slot for adding an HTML image element to the tip.
@@ -41,6 +42,17 @@ export class CalciteTip {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -60,7 +72,7 @@ export class CalciteTip {
   }
   renderImageFrame() {
     const { el } = this;
-    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame },
+    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame, key: "thumbnail" },
       h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderInfoNode() {

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -7,6 +7,7 @@ import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the item.
  * @slot children - A slot for adding nested `calcite-tree` elements.
@@ -78,6 +79,10 @@ export class CalciteTreeItem {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
     }
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.js

@@ -9,6 +9,7 @@ import { CSS } from "../calcite-pick-list-item/resources";
 import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../calcite-pick-list-item/resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the item.
  * @slot actions-start - A slot for adding actions or content to the start side of the item.
@@ -66,6 +67,17 @@ export class CalciteValueListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/collection/utils/conditionalSlot.js

@@ -3,24 +3,35 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { forceUpdate } from "@stencil/core";
-const slotChangedMap = new WeakMap();
-function onSlotChange() {
-  forceUpdate(this);
-}
-const eventType = "slotchange";
+import { createObserver } from "./observers";
+const observed = new Set();
+let mutationObserver;
+const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
  */
 export function connectConditionalSlotComponent(component) {
-  const boundSlotChange = onSlotChange.bind(component);
-  component.el.shadowRoot.addEventListener(eventType, boundSlotChange);
-  slotChangedMap.set(component, boundSlotChange);
+  if (!mutationObserver) {
+    mutationObserver = createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(component.el, observerOptions);
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
  */
 export function disconnectConditionalSlotComponent(component) {
-  const boundSlotChange = slotChangedMap.get(component);
-  component.el.shadowRoot.removeEventListener(eventType, boundSlotChange);
-  slotChangedMap.delete(component);
+  observed.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element] of observed.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    forceUpdate(target);
+  });
 }

package/dist/components/calcite-action-bar.js

@@ -2,10 +2,11 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { forceUpdate, HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { t as toggleChildActionText, C as CalciteExpandToggle, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, g as getOverflowCount } from './CalciteExpandToggle.js';
 import { f as focusElement, b as getSlotted } from './dom.js';
 import { c as createObserver } from './observers.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$8 } from './calcite-action2.js';
 import { d as defineCustomElement$7 } from './calcite-action-group2.js';
 import { d as defineCustomElement$6 } from './calcite-action-menu2.js';
@@ -27,28 +28,6 @@ const TEXT = {
   collapse: "Collapse"
 };
 
-const slotChangedMap = new WeakMap();
-function onSlotChange() {
-  forceUpdate(this);
-}
-const eventType = "slotchange";
-/**
- * Helper to set up a conditional slot component on connectedCallback.
- */
-function connectConditionalSlotComponent(component) {
-  const boundSlotChange = onSlotChange.bind(component);
-  component.el.shadowRoot.addEventListener(eventType, boundSlotChange);
-  slotChangedMap.set(component, boundSlotChange);
-}
-/**
- * Helper to tear down a conditional slot component on disconnectedCallback.
- */
-function disconnectConditionalSlotComponent(component) {
-  const boundSlotChange = slotChangedMap.get(component);
-  component.el.shadowRoot.removeEventListener(eventType, boundSlotChange);
-  slotChangedMap.delete(component);
-}
-
 const calciteActionBarCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{pointer-events:auto;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:stretch;align-self:stretch;max-width:15vw}:host([overflow-actions-disabled]){overflow-y:auto}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}::slotted(calcite-action-group:last-child){border-bottom-width:0px}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;padding-bottom:0px}";
 
 let CalciteActionBar$1 = class extends HTMLElement {

package/dist/components/calcite-action-group2.js

@@ -5,6 +5,7 @@
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './calcite-action-menu2.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$6 } from './calcite-action2.js';
 import { d as defineCustomElement$4 } from './calcite-icon2.js';
 import { d as defineCustomElement$3 } from './calcite-loader2.js';
@@ -60,6 +61,17 @@ let CalciteActionGroup = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Component Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/calcite-action-menu2.js

@@ -7,6 +7,7 @@ import { b as getSlotted, f as focusElement } from './dom.js';
 import { g as getRoundRobinIndex } from './array.js';
 import { g as guid } from './guid.js';
 import { c as createObserver } from './observers.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$5 } from './calcite-action2.js';
 import { d as defineCustomElement$4 } from './calcite-icon2.js';
 import { d as defineCustomElement$3 } from './calcite-loader2.js';
@@ -237,11 +238,13 @@ let CalciteActionMenu = class extends HTMLElement {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.getActions();
+    connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.disconnectMenuButtonEl();
+    disconnectConditionalSlotComponent(this);
   }
   expandedHandler() {
     this.open = false;