@esri/calcite-components 1.0.0-next.362 → 1.0.0-next.366

package/dist/collection/components/calcite-action-group/calcite-action-group.js

@@ -7,6 +7,7 @@ import { SLOTS, TEXT, ICONS } from "./resources";
 import { Fragment } from "@stencil/core/internal";
 import { getSlotted } from "../../utils/dom";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
  * @slot menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
@@ -45,6 +46,17 @@ export class CalciteActionGroup {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Component Methods
   //
   // --------------------------------------------------------------------------

package/dist/collection/components/calcite-action-menu/calcite-action-menu.js

@@ -9,6 +9,7 @@ import { Fragment } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
 import { createObserver } from "../../utils/observers";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 const SUPPORTED_BUTTON_NAV_KEYS = ["ArrowUp", "ArrowDown"];
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 /**
@@ -220,11 +221,13 @@ export class CalciteActionMenu {
     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;

package/dist/collection/components/calcite-action-pad/calcite-action-pad.js

@@ -6,6 +6,7 @@ import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stenci
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { focusElement, getSlotted } from "../../utils/dom";
 import { CSS, TEXT, SLOTS } from "./resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-action`s to the action pad.
  * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
@@ -67,6 +68,12 @@ export class CalciteActionPad {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   componentWillLoad() {
     const { el, expandDisabled, expanded } = this;
     if (!expandDisabled) {

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

@@ -50,6 +50,7 @@ export class CalciteAlert {
     this.queued = false;
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
+    this.activeTransitionProp = "opacity";
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
       this.autoDismissTimeoutId = null;
@@ -58,10 +59,19 @@ export class CalciteAlert {
       this.queue = this.queue.filter((e) => e !== this.el);
       this.determineActiveAlert();
       this.calciteAlertSync.emit({ queue: this.queue });
-      this.calciteAlertClose.emit({
-        el: this.el,
-        queue: this.queue
-      });
+    };
+    this.transitionEnd = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active
+          ? this.calciteAlertOpen.emit({
+            el: this.el,
+            queue: this.queue
+          })
+          : this.calciteAlertClose.emit({
+            el: this.el,
+            queue: this.queue
+          });
+      }
     };
   }
   watchActive() {
@@ -115,7 +125,7 @@ export class CalciteAlert {
           container: true,
           queued,
           [placement]: true
-        } },
+        }, onTransitionEnd: this.transitionEnd },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
         h("div", { class: "alert-content" },
@@ -183,10 +193,6 @@ export class CalciteAlert {
   openAlert() {
     window.clearTimeout(this.queueTimeout);
     this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
-    this.calciteAlertOpen.emit({
-      el: this.el,
-      queue: this.queue
-    });
   }
   static get is() { return "calcite-alert"; }
   static get encapsulation() { return "shadow"; }

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

@@ -7,12 +7,17 @@ import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 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.
  */
@@ -47,6 +52,10 @@ export class CalciteCombobox {
     this.scale = "m";
     /** The value(s) of the selectedItem(s) */
     this.value = null;
+    /** string to override the English "Remove tag" text for when an item is selected.
+     * @default "Remove tag"
+     */
+    this.intlRemoveTag = TEXT.removeTag;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -556,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();
@@ -606,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) {
@@ -652,7 +661,7 @@ export class CalciteCombobox {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode } = this;
+    const { activeChipIndex, scale, selectionMode, intlRemoveTag } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
@@ -661,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: "remove tag", 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;
@@ -677,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;
@@ -716,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
@@ -726,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 })));
   }
@@ -971,6 +979,27 @@ export class CalciteCombobox {
       "attribute": "value",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "intlRemoveTag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Remove tag\""
+          }],
+        "text": "string to override the English \"Remove tag\" text for when an item is selected."
+      },
+      "attribute": "intl-remove-tag",
+      "reflect": false,
+      "defaultValue": "TEXT.removeTag"
     }
   }; }
   static get states() { return {

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

@@ -6,3 +6,6 @@ export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 export const ComboboxDefaultPlacement = "bottom-leading";
+export const TEXT = {
+  removeTag: "Remove tag"
+};

package/dist/collection/components/calcite-graph/calcite-graph.css

@@ -87,13 +87,11 @@
   stroke: transparent;
   margin: 0px;
   display: block;
-  padding: 0px;
-}
-
-:host([data-style=slider-histogram]) svg {
+  height: 100%;
   width: 100%;
+  padding: 0px;
 }
-:host([data-style=slider-histogram]) svg .graph-path--highlight {
+.svg .graph-path--highlight {
   fill: var(--calcite-ui-brand);
   opacity: 0.5;
 }

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

@@ -2,9 +2,10 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Prop, h } from "@stencil/core";
+import { Component, Element, Prop, h, forceUpdate } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { area, range, translate } from "./util";
+import { createObserver } from "../../utils/observers";
 export class CalciteGraph {
   constructor() {
     //--------------------------------------------------------------------------
@@ -17,25 +18,31 @@ export class CalciteGraph {
      * These data points should be sorted by x-axis value
      */
     this.data = [];
-    /** Width of graph in pixels*/
-    this.width = 300;
-    /** Width of graph in pixels*/
-    this.height = 100;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
     this.graphId = `calcite-graph-${guid()}`;
+    this.resizeObserver = createObserver("resize", () => forceUpdate(this));
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   render() {
-    const { data, colorStops, width, height, highlightMax, highlightMin, min, max } = this;
+    const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;
     const id = this.graphId;
+    const { clientHeight: height, clientWidth: width } = el;
     // if we have no data, return empty svg
     if (!data || data.length === 0) {
       return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
@@ -137,42 +144,6 @@ export class CalciteGraph {
         "text": "Array of values describing a single color stop ([offset, color, opacity])\nThese color stops should be sorted by offset value"
       }
     },
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Width of graph in pixels"
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "300"
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Width of graph in pixels"
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "100"
-    },
     "highlightMin": {
       "type": "number",
       "mutable": false,

package/dist/collection/components/calcite-inline-editable/calcite-inline-editable.js

@@ -36,9 +36,9 @@ export class CalciteInlineEditable {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
-    this.transitionEnd = (event) => {
+    this.transitionEnd = () => {
       if (!this.editingEnabled && !!this.shouldEmitCancel) {
-        this.calciteInlineEditableEditingCancel.emit(event);
+        this.calciteInlineEditableEditCancel.emit();
       }
     };
     this.enableEditing = () => {
@@ -90,7 +90,7 @@ export class CalciteInlineEditable {
     this.confirmChangesHandler = async (e) => {
       e.preventDefault();
       e.stopPropagation();
-      this.calciteInlineEditableChangesConfirm.emit();
+      this.calciteInlineEditableEditConfirm.emit();
       try {
         if (this.afterConfirm) {
           this.loading = true;
@@ -370,39 +370,33 @@ export class CalciteInlineEditable {
     }
   }; }
   static get events() { return [{
-      "method": "calciteInlineEditableEditingCancel",
-      "name": "calciteInlineEditableEditingCancel",
+      "method": "calciteInlineEditableEditCancel",
+      "name": "calciteInlineEditableEditCancel",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Emitted when the cancel button gets clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
-      "method": "calciteInlineEditableChangesConfirm",
-      "name": "calciteInlineEditableChangesConfirm",
+      "method": "calciteInlineEditableEditConfirm",
+      "name": "calciteInlineEditableEditConfirm",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Emitted when the check button gets clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {

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

@@ -215,6 +215,9 @@ export class CalciteInput {
       const inputMin = this.minString ? parseFloat(this.minString) : null;
       const valueNudgeDelayInMs = 100;
       this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      if (this.nudgeNumberValueIntervalId) {
+        window.clearInterval(this.nudgeNumberValueIntervalId);
+      }
       let firstValueNudge = true;
       this.nudgeNumberValueIntervalId = window.setInterval(() => {
         if (firstValueNudge) {

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);
   }