@esri/calcite-components 1.0.0-next.370 → 1.0.0-next.374

package/dist/components/calcite-card.js

@@ -3,6 +3,8 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$4 } from './calcite-checkbox2.js';
 import { d as defineCustomElement$3 } from './calcite-label2.js';
 import { d as defineCustomElement$2 } from './calcite-loader2.js';
@@ -88,6 +90,12 @@ let CalciteCard$1 = class extends HTMLElement {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disonnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   render() {
     return (h("div", { class: "calcite-card-container" }, this.loading ? (h("div", { class: "calcite-card-loader-container" }, h("calcite-loader", { active: true, label: this.intlLoading }))) : null, h("section", { "aria-busy": this.loading.toString(), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderThumbnail(), this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter())));
   }
@@ -96,22 +104,23 @@ let CalciteCard$1 = class extends HTMLElement {
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    const hasThumbnail = this.el.querySelector(`[slot=${SLOTS.thumbnail}]`);
-    return hasThumbnail ? (h("div", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("div", { class: CSS.thumbnailWrapper, key: "thumbnail-wrapper" }, h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
     return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
-    const title = this.el.querySelector(`[slot=${SLOTS.title}]`);
-    const subtitle = this.el.querySelector(`[slot=${SLOTS.subtitle}]`);
+    const { el } = this;
+    const title = getSlotted(el, SLOTS.title);
+    const subtitle = getSlotted(el, SLOTS.subtitle);
     const hasHeader = title || subtitle;
     return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
   }
   renderFooter() {
-    const leadingFooter = this.el.querySelector(`[slot=${SLOTS.footerLeading}]`);
-    const trailingFooter = this.el.querySelector(`[slot=${SLOTS.footerTrailing}]`);
+    const { el } = this;
+    const leadingFooter = getSlotted(el, SLOTS.footerLeading);
+    const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
     const hasFooter = leadingFooter || trailingFooter;
     return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerLeading }), h("slot", { name: SLOTS.footerTrailing }))) : null;
   }

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

@@ -3,9 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
-import { g as getElementProp } from './dom.js';
+import { g as getElementProp, b as getSlotted } from './dom.js';
 import { g as guid } from './guid.js';
 import { e as getAncestors, f as getDepth } from './utils2.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
 const CSS = {
@@ -67,9 +68,10 @@ let CalciteComboboxItem$1 = class extends HTMLElement {
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
     this.scale = getElementProp(this.el, "scale", this.scale);
+    connectConditionalSlotComponent(this);
   }
-  componentWillLoad() {
-    this.hasDefaultSlot = this.el.querySelector(":not([slot])") !== null;
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -109,10 +111,10 @@ let CalciteComboboxItem$1 = class extends HTMLElement {
       }, icon: icon || iconPath, scale: "s" }));
   }
   renderChildren() {
-    if (!this.hasDefaultSlot) {
-      return null;
+    if (getSlotted(this.el)) {
+      return (h("ul", { key: "default-slot-container" }, h("slot", null)));
     }
-    return (h("ul", null, h("slot", null)));
+    return null;
   }
   render() {
     const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";

package/dist/components/calcite-combobox.js

@@ -714,7 +714,6 @@ let CalciteCombobox$1 = class extends HTMLElement {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = `${chipUidPrefix}${guid()}`;
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -764,7 +763,9 @@ let CalciteCombobox$1 = class extends HTMLElement {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`);
+    const chip = guid
+      ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
+      : null;
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -819,7 +820,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
       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", { 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));
+      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
@@ -842,7 +843,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
       }, 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: `${itemUidPrefix}${item.guid}`, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;

package/dist/components/calcite-date-picker2.js

@@ -19,10 +19,14 @@ function getSupportedLocale(lang = "") {
   if (locales.indexOf(lang) > -1) {
     return lang;
   }
-  else {
-    const base = lang.split("-")[0];
-    return locales.indexOf(base) > -1 ? base : "en";
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
+    if (!locales.includes(lang)) {
+      lang = lang.split("-")[0];
+    }
   }
+  return locales.includes(lang) ? lang : "en";
 }
 /**
  * CLDR cache.

package/dist/components/calcite-dropdown2.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
-import { f as focusElement } from './dom.js';
+import { b as getSlotted, f as focusElement } from './dom.js';
 import { C as CSS, u as updatePopper, c as createPopper } from './popper.js';
 import { c as createObserver } from './observers.js';
 
@@ -76,7 +76,7 @@ let CalciteDropdown = class extends HTMLElement {
     //--------------------------------------------------------------------------
     this.updateItems = () => {
       this.updateSelectedItems();
-      this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
+      this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
       this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };

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

@@ -3,8 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
-import { g as getElementProp } from './dom.js';
+import { g as getElementProp, b as getSlotted } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
+import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$4 } from './calcite-button2.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
 import { d as defineCustomElement$2 } from './calcite-loader2.js';
@@ -59,26 +60,31 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
+    this.mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
     this.transitionEnd = () => {
       if (!this.editingEnabled && !!this.shouldEmitCancel) {
         this.calciteInlineEditableEditCancel.emit();
       }
     };
     this.enableEditing = () => {
-      this.valuePriorToEditing = this.inputElement.value;
+      var _a, _b;
+      this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
       this.editingEnabled = true;
-      this.inputElement.setFocus();
+      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
       this.calciteInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
       this.editingEnabled = false;
     };
     this.cancelEditing = () => {
-      this.inputElement.value = this.valuePriorToEditing;
+      if (this.inputElement) {
+        this.inputElement.value = this.valuePriorToEditing;
+      }
       this.disableEditing();
       this.enableEditingButton.setFocus();
     };
     this.escapeKeyHandler = async (e) => {
+      var _a;
       if (e.key !== "Escape") {
         if (e.key === "Tab" && this.shouldShowControls) {
           if (!e.shiftKey && e.target === this.inputElement) {
@@ -88,7 +94,7 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
           if (!!e.shiftKey && e.target === this.cancelEditingButton) {
             e.preventDefault();
             e.stopPropagation();
-            this.inputElement.setFocus();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
           }
         }
         return;
@@ -130,10 +136,14 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
     };
   }
   disabledWatcher(disabled) {
-    this.inputElement.disabled = disabled;
+    if (this.inputElement) {
+      this.inputElement.disabled = disabled;
+    }
   }
   editingEnabledWatcher(newValue, oldValue) {
-    this.inputElement.editingEnabled = newValue;
+    if (this.inputElement) {
+      this.inputElement.editingEnabled = newValue;
+    }
     if (!newValue && !!oldValue) {
       this.shouldEmitCancel = true;
     }
@@ -144,17 +154,15 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     connectLabel(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserverCallback();
   }
   disconnectedCallback() {
+    var _a;
     disconnectLabel(this);
-  }
-  componentWillLoad() {
-    this.inputElement = this.el.querySelector("calcite-input");
-    this.inputElement.disabled = this.disabled;
-    this.inputElement.label = this.inputElement.label || getLabelText(this);
-    this.scale =
-      this.scale || this.inputElement.scale || getElementProp(this.el, "scale", undefined);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
@@ -194,9 +202,26 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  mutationObserverCallback() {
+    var _a;
+    this.updateSlottedInput();
+    this.scale =
+      this.scale || ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.scale) || getElementProp(this.el, "scale", undefined);
+  }
   onLabelClick() {
     this.setFocus();
   }
+  updateSlottedInput() {
+    const inputElement = getSlotted(this.el, {
+      matches: "calcite-input"
+    });
+    this.inputElement = inputElement;
+    if (!inputElement) {
+      return;
+    }
+    this.inputElement.disabled = this.disabled;
+    this.inputElement.label = this.inputElement.label || getLabelText(this);
+  }
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }

package/dist/components/calcite-input2.js

@@ -3,12 +3,13 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
-import { T as TEXT, s as setRequestedIcon, g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { T as TEXT, b as getSlotted, s as setRequestedIcon, g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { d as delocalizeNumberString, g as getDecimalSeparator, l as localizeNumberString } from './locale.js';
 import { i as isValidNumber, p as parseNumberString, s as sanitizeNumberString, n as numberKeys } from './number.js';
 import { d as decimalPlaces } from './math.js';
+import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 import { d as defineCustomElement$1 } from './calcite-progress2.js';
 
@@ -110,6 +111,7 @@ let CalciteInput = class extends HTMLElement {
     this.childElType = "input";
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
+    this.mutationObserver = createObserver("mutation", () => this.setDisabledAction());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -148,7 +150,8 @@ let CalciteInput = class extends HTMLElement {
       }
     };
     this.inputFocusHandler = (event) => {
-      if (event.target !== this.slottedActionEl) {
+      const slottedActionEl = getSlotted(this.el, "action");
+      if (event.target !== slottedActionEl) {
         this.setFocus();
       }
       this.calciteInputFocus.emit({
@@ -392,6 +395,7 @@ let CalciteInput = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -408,10 +412,14 @@ let CalciteInput = class extends HTMLElement {
     }
     connectLabel(this);
     connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.setDisabledAction();
   }
   disconnectedCallback() {
+    var _a;
     disconnectLabel(this);
     disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     var _a, _b;
@@ -420,10 +428,6 @@ let CalciteInput = class extends HTMLElement {
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
-  componentDidLoad() {
-    this.slottedActionEl = this.el.querySelector("[slot=action]");
-    this.setDisabledAction();
-  }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
       this.setValue({
@@ -495,10 +499,10 @@ let CalciteInput = class extends HTMLElement {
     }
   }
   setDisabledAction() {
-    if (!this.slottedActionEl) {
+    const slottedActionEl = getSlotted(this.el, "action");
+    if (!slottedActionEl) {
       return;
     }
-    const slottedActionEl = this.slottedActionEl;
     this.disabled
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");

package/dist/components/calcite-modal.js

@@ -227,7 +227,7 @@ let CalciteModal$1 = class extends HTMLElement {
       }
     };
     this.updateFooterVisibility = () => {
-      this.hasFooter = !!this.el.querySelector(`[slot=${SLOTS.back}], [slot=${SLOTS.secondary}], [slot=${SLOTS.primary}]`);
+      this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
   }
   //--------------------------------------------------------------------------

package/dist/components/calcite-notice.js

@@ -80,9 +80,6 @@ let CalciteNotice$1 = class extends HTMLElement {
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  componentDidLoad() {
-    this.noticeLinkEl = this.el.querySelector("calcite-link");
-  }
   render() {
     const { el } = this;
     const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -96,11 +93,12 @@ let CalciteNotice$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    if (!this.closeButton && !this.noticeLinkEl) {
+    const noticeLinkEl = this.el.querySelector("calcite-link");
+    if (!this.closeButton && !noticeLinkEl) {
       return;
     }
-    if (this.noticeLinkEl) {
-      this.noticeLinkEl.setFocus();
+    if (noticeLinkEl) {
+      noticeLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();

package/dist/components/calcite-panel.js

@@ -157,6 +157,20 @@ let CalcitePanel$1 = class extends HTMLElement {
     }
     (_c = this.containerEl) === null || _c === void 0 ? void 0 : _c.focus();
   }
+  /** Scrolls panel content to a particular set of coordinates.
+   *
+   * ```
+   *   myCalcitePanel.scrollContentTo({
+   *     left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *     top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   *   });
+   * ```
+   */
+  async scrollContentTo(options) {
+    var _a;
+    (_a = this.panelScrollEl) === null || _a === void 0 ? void 0 : _a.scrollTo(options);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -225,7 +239,9 @@ let CalcitePanel$1 = class extends HTMLElement {
   renderContent() {
     const { el } = this;
     const hasFab = getSlotted(el, SLOTS.fab);
-    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, h("section", { class: CSS.contentContainer }, h("slot", null)), this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, h("slot", null)));
+    const defaultSlotNode = h("slot", { key: "default-slot" });
+    const contentWrapperKey = "content-wrapper";
+    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, h("section", { class: CSS.contentContainer }, defaultSlotNode), this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, defaultSlotNode));
   }
   renderFab() {
     return (h("div", { class: CSS.fabContainer }, h("slot", { name: SLOTS.fab })));
@@ -257,7 +273,8 @@ CalcitePanel$1 = /*@__PURE__*/ proxyCustomElement(CalcitePanel$1, [1, "calcite-p
     "heading": [1],
     "summary": [1],
     "menuOpen": [516, "menu-open"],
-    "setFocus": [64]
+    "setFocus": [64],
+    "scrollContentTo": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -3,6 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as createObserver } from './observers.js';
 
 const calciteRadioButtonGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;max-width:100vw}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}:host([layout=horizontal][scale=s]){gap:1rem}:host([layout=horizontal][scale=m]){gap:1.25rem}:host([layout=horizontal][scale=l]){gap:1.5rem}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column}";
 
@@ -27,6 +28,12 @@ let CalciteRadioButtonGroup$1 = class extends HTMLElement {
     this.required = false;
     /** The scale (size) of the radio button group. */
     this.scale = "m";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -63,7 +70,13 @@ let CalciteRadioButtonGroup$1 = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.passPropsToRadioButtons();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   //--------------------------------------------------------------------------
   //

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

@@ -142,10 +142,6 @@ let CalciteRadioButton$1 = class extends HTMLElement {
   }
   nameChanged() {
     this.checkLastRadioButton();
-    const currentValue = this.rootNode.querySelector(`input[name="${this.name}"]:checked`);
-    if (!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.value)) {
-      this.uncheckAllRadioButtonsInGroup();
-    }
   }
   //--------------------------------------------------------------------------
   //

package/dist/components/calcite-shell.js

@@ -59,16 +59,19 @@ let CalciteShell$1 = class extends HTMLElement {
     return hasHeader ? h("slot", { key: "header", name: SLOTS.header }) : null;
   }
   renderContent() {
+    const defaultSlotNode = h("slot", { key: "default-slot" });
+    const centerRowSlotNode = h("slot", { key: "center-row-slot", name: SLOTS.centerRow });
+    const contentContainerKey = "content-container";
     const content = !!this.contentBehind
       ? [
         h("div", { class: {
             [CSS.content]: true,
-            [CSS.contentBehind]: !!this.contentBehind
-          } }, h("slot", null)),
-        h("slot", { name: SLOTS.centerRow })
+            [CSS.contentBehind]: true
+          }, key: contentContainerKey }, defaultSlotNode),
+        centerRowSlotNode
       ]
       : [
-        h("div", { class: CSS.content }, h("slot", null), h("slot", { name: SLOTS.centerRow }))
+        h("div", { class: CSS.content, key: contentContainerKey }, defaultSlotNode, centerRowSlotNode)
       ];
     return content;
   }

package/dist/components/calcite-slider.js

@@ -93,9 +93,7 @@ let CalciteSlider$1 = class extends HTMLElement {
       }
     };
     this.dragEnd = (event) => {
-      document.removeEventListener("pointermove", this.dragUpdate);
-      document.removeEventListener("pointerup", this.dragEnd);
-      document.removeEventListener("pointercancel", this.dragEnd);
+      this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
       if (this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
@@ -130,6 +128,7 @@ let CalciteSlider$1 = class extends HTMLElement {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
+    this.removeDragListeners();
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
@@ -465,6 +464,11 @@ let CalciteSlider$1 = class extends HTMLElement {
   emitChange() {
     this.calciteSliderChange.emit();
   }
+  removeDragListeners() {
+    document.removeEventListener("pointermove", this.dragUpdate);
+    document.removeEventListener("pointerup", this.dragEnd);
+    document.removeEventListener("pointercancel", this.dragEnd);
+  }
   /**
    * Set the prop value if changed at the component level
    * @param valueProp

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

@@ -140,7 +140,8 @@ let CalciteTreeItem$1 = class extends HTMLElement {
         [CSS.chevron]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "icon", icon: ICONS.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
-    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel }, h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }), h("slot", null))) : null;
+    const defaultSlotNode = h("slot", { key: "default-slot" });
+    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel, key: "checkbox-label" }, h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }), defaultSlotNode)) : null;
     const selectedIcon = showBulletPoint
       ? ICONS.bulletPoint
       : showCheckmark
@@ -155,7 +156,7 @@ let CalciteTreeItem$1 = class extends HTMLElement {
     return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" }, h("div", { class: {
         [CSS.nodeContainer]: true,
         [CSS_UTILITY.rtl]: rtl
-      }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, bulletOrCheckIcon, checkbox ? checkbox : h("slot", null)), h("div", { class: {
+      }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, bulletOrCheckIcon, checkbox ? checkbox : defaultSlotNode), h("div", { class: {
         [CSS.childrenContainer]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, ref: (el) => (this.childrenSlotWrapper = el), role: this.hasChildren ? "group" : undefined }, h("slot", { name: SLOTS.children }))));

package/dist/components/calcite-tree.js

@@ -64,7 +64,8 @@ let CalciteTree$1 = class extends HTMLElement {
   onFocusIn(event) {
     const focusedFromRootOrOutsideTree = event.relatedTarget === this.el || !this.el.contains(event.relatedTarget);
     if (focusedFromRootOrOutsideTree) {
-      this.el.tabIndex = -1;
+      // gives user the ability to tab into external elements (modifying tabindex property will not work in firefox)
+      this.el.removeAttribute("tabindex");
     }
   }
   onFocusOut(event) {

package/dist/components/dom.js

@@ -122,9 +122,9 @@ async function focusElement(el) {
   }
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
-const defaultSlotSelector = "> :not([slot])";
+const defaultSlotSelector = ":not([slot])";
 function getSlotted(element, slotName, options) {
-  if (!Array.isArray(slotName) && typeof slotName !== "string") {
+  if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
     options = slotName;
     slotName = null;
   }
@@ -138,12 +138,15 @@ function getSlotted(element, slotName, options) {
   }
   return querySingle(element, slotSelector, options);
 }
+function getDirectChildren(el, selector) {
+  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+}
 function queryMultiple(element, slotSelector, options) {
-  let matches = Array.from(element.querySelectorAll(slotSelector));
+  let matches = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)
+    : Array.from(element.querySelectorAll(slotSelector));
   matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
-  if (slotSelector === defaultSlotSelector) {
-    matches = matches.filter((match) => match === null || match === void 0 ? void 0 : match.assignedSlot);
-  }
+  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector
     ? matches
@@ -153,11 +156,11 @@ function queryMultiple(element, slotSelector, options) {
     : matches;
 }
 function querySingle(element, slotSelector, options) {
-  let match = element.querySelector(slotSelector);
-  if (slotSelector === defaultSlotSelector) {
-    match = (match === null || match === void 0 ? void 0 : match.assignedSlot) ? match : null;
-  }
+  let match = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)[0] || null
+    : element.querySelector(slotSelector);
   match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
+  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
 }