@esri/calcite-components 1.0.0-next.364 → 1.0.0-next.368

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
@@ -59,6 +60,17 @@ export class CalciteBlock {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -72,7 +84,7 @@ export class CalciteBlock {
     const showingLoadingStatus = this.loading && !this.open;
     const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status];
     const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
-    const iconEl = !statusIcon ? (h("slot", { name: SLOTS.icon })) : (h("calcite-icon", { class: {
+    const iconEl = !statusIcon ? (h("slot", { key: "icon-slot", name: SLOTS.icon })) : (h("calcite-icon", { class: {
         [CSS.statusIcon]: true,
         [CSS.valid]: status == "valid",
         [CSS.invalid]: status == "invalid",

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

@@ -6,6 +6,7 @@ import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { CSS, TEXT, SLOTS, ICONS } from "./resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
@@ -42,6 +43,17 @@ export class CalciteChip {
     };
     this.guid = guid();
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -60,7 +72,7 @@ export class CalciteChip {
   renderChipImage() {
     const { el } = this;
     const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.chipImageContainer },
+    return hasChipImage ? (h("div", { class: CSS.chipImageContainer, key: "image" },
       h("slot", { name: SLOTS.image }))) : null;
   }
   render() {

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

@@ -13,6 +13,11 @@ import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
+const itemUidPrefix = "combobox-item-";
+const chipUidPrefix = "combobox-chip-";
+const labelUidPrefix = "combobox-label-";
+const listboxUidPrefix = "combobox-listbox-";
+const inputUidPrefix = "combobox-input-";
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
@@ -560,7 +565,7 @@ export class CalciteCombobox {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = guid();
+      item.guid = `${chipUidPrefix}${guid()}`;
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -610,7 +615,7 @@ export class CalciteCombobox {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#chip-${guid}`);
+    const chip = this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`);
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -665,11 +670,11 @@ export class CalciteCombobox {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { "aria-label": label, class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: `chip-${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: `${chipUidPrefix}${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
-    const { active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
+    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
     const showLabel = !active && single && !!selectedItem;
@@ -681,16 +686,16 @@ export class CalciteCombobox {
           label: true,
           "label--spaced": needsIcon
         }, key: "label", onFocus: this.comboboxFocusHandler, tabindex: "0" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": getLabelText(this), class: {
+      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
           input: true,
           "input--single": true,
           "input--transparent": this.activeChipIndex > -1,
           "input--hidden": showLabel,
           "input--icon": single && needsIcon
-        }, disabled: disabled, id: `${guid}-input`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
+        }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: `${itemUidPrefix}${item.guid}`, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;
@@ -720,9 +725,8 @@ export class CalciteCombobox {
   render() {
     const { guid, open, label } = this;
     const single = this.selectionMode === "single";
-    const labelId = `${guid}-label`;
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": labelId, "aria-owns": guid, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
           "wrapper--active": open
@@ -730,10 +734,10 @@ export class CalciteCombobox {
         h("div", { class: "grid-input" },
           this.renderIconStart(),
           !single && this.renderChips(),
-          h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label),
+          h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label),
           this.renderInput()),
         this.renderIconEnd()),
-      h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
+      h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
       this.renderPopperContainer(),
       h(HiddenFormInputSlot, { component: this })));
   }

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-slider/calcite-slider.css

@@ -183,6 +183,9 @@
   display: inline-block;
   width: 1em;
 }
+.thumb .handle__label.hyphen--wrap {
+  display: flex;
+}
 .thumb .handle{
   box-sizing: border-box;
   border-radius: 9999px;

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

@@ -624,7 +624,7 @@ export class CalciteSlider {
     const hyphenLabel = leftValueLabel;
     const labelOffset = labelFontSize / 2;
     if (labelTransformedOverlap > 0) {
-      hyphenLabel.classList.add("hyphen");
+      hyphenLabel.classList.add("hyphen", "hyphen--wrap");
       if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
         // Neither handle overlaps the host boundary
         let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -670,7 +670,7 @@ export class CalciteSlider {
       }
     }
     else {
-      hyphenLabel.classList.remove("hyphen");
+      hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
       leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;

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() {