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

package/dist/custom-elements/index.js

@@ -5,7 +5,7 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
-const calciteAccordionCss = "@-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([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-width:100%;border-width:1px;border-bottom-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2);line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
+const calciteAccordionCss = "@-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([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-width:100%;border-width:1px;border-bottom-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2);line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}";
 
 let CalciteAccordion$1 = class extends HTMLElement$1 {
   constructor() {
@@ -52,7 +52,10 @@ let CalciteAccordion$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return h("slot", null);
+    return (h("div", { class: {
+        "accordion--transparent": this.appearance === "transparent",
+        "accordion--minimal": this.appearance === "minimal"
+      } }, h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -274,9 +277,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;
   }
@@ -290,12 +293,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
@@ -305,11 +311,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;
 }
@@ -332,7 +338,7 @@ function intersects(rect1, rect2) {
     rect2.bottom < rect1.top);
 }
 
-const calciteAccordionItemCss = "@-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}.icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:calc(90deg * -1);--calcite-accordion-item-active-icon-rotation:0deg;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0deg}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0deg;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0deg;--calcite-accordion-item-active-icon-rotation-rtl:calc(180deg * -1)}:host{--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host-context([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}:host-context([appearance=transparent]){--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;background-color:var(--calcite-accordion-item-background);--calcite-accordion-item-border:var(--calcite-ui-border-2)}:host .accordion-item-header{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) .accordion-item-header{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]){color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-content{display:block;color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-header{border-bottom-color:transparent}:host .accordion-item-header{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-direction:var(--calcite-accordion-item-flex-direction);flex-direction:var(--calcite-accordion-item-flex-direction)}:host .accordion-item-icon{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-margin-end:var(--calcite-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-accordion-item-icon-spacing-start);-webkit-margin-start:var(--calcite-accordion-item-icon-spacing-end);margin-inline-start:var(--calcite-accordion-item-icon-spacing-end)}:host .accordion-item-content,:host .accordion-item-header{padding:var(--calcite-accordion-item-padding);border-bottom:1px solid var(--calcite-accordion-item-border)}:host .accordion-item-header *{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .accordion-item-content{display:none;padding-top:0px;color:var(--calcite-ui-text-3);text-align:initial}:host .accordion-item-expand-icon{color:var(--calcite-ui-text-3);-webkit-margin-start:var(--calcite-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-accordion-item-icon-spacing-start);-webkit-margin-end:var(--calcite-accordion-item-icon-spacing-end);margin-inline-end:var(--calcite-accordion-item-icon-spacing-end);-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation));transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .accordion-item-expand-icon{-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1);-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation));transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([active]) .calcite--rtl .accordion-item-expand-icon{-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .accordion-item-header-text{margin-top:0px;margin-bottom:0px;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:column;flex-direction:column;padding-top:0px;padding-bottom:0px;text-align:initial;-webkit-margin-end:auto;margin-inline-end:auto}:host .accordion-item-title,:host .accordion-item-subtitle{display:-ms-flexbox;display:flex;width:100%}:host .accordion-item-title{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}:host .accordion-item-subtitle{margin-top:0.25rem;color:var(--calcite-ui-text-3)}:host(:focus) .accordion-item-title,:host(:hover) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:hover) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:hover) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:hover) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}:host(:focus) .accordion-item-title,:host(:active) .accordion-item-title,:host([active]) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:active) .accordion-item-icon,:host([active]) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:active) .accordion-item-expand-icon,:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:active) .accordion-item-subtitle,:host([active]) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}";
+const calciteAccordionItemCss = "@-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}.icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:calc(90deg * -1);--calcite-accordion-item-active-icon-rotation:0deg;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0deg}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0deg;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0deg;--calcite-accordion-item-active-icon-rotation-rtl:calc(180deg * -1)}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;background-color:var(--calcite-accordion-item-background, var(--calcite-ui-foreground-1))}:host .accordion-item-header{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) .accordion-item-header{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]){color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-content{display:block;color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-header{border-bottom-color:transparent}:host .accordion-item-header{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-direction:var(--calcite-accordion-item-flex-direction);flex-direction:var(--calcite-accordion-item-flex-direction)}:host .accordion-item-icon{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-margin-end:var(--calcite-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-accordion-item-icon-spacing-start);-webkit-margin-start:var(--calcite-accordion-item-icon-spacing-end);margin-inline-start:var(--calcite-accordion-item-icon-spacing-end)}:host .accordion-item-content,:host .accordion-item-header{padding:var(--calcite-accordion-item-padding);border-bottom:1px solid var(--calcite-accordion-item-border, var(--calcite-ui-border-2))}:host .accordion-item-header *{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .accordion-item-content{display:none;padding-top:0px;color:var(--calcite-ui-text-3);text-align:initial}:host .accordion-item-expand-icon{color:var(--calcite-ui-text-3);-webkit-margin-start:var(--calcite-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-accordion-item-icon-spacing-start);-webkit-margin-end:var(--calcite-accordion-item-icon-spacing-end);margin-inline-end:var(--calcite-accordion-item-icon-spacing-end);-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation));transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .accordion-item-expand-icon{-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1);-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation));transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([active]) .calcite--rtl .accordion-item-expand-icon{-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .accordion-item-header-text{margin-top:0px;margin-bottom:0px;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:column;flex-direction:column;padding-top:0px;padding-bottom:0px;text-align:initial;-webkit-margin-end:auto;margin-inline-end:auto}:host .accordion-item-title,:host .accordion-item-subtitle{display:-ms-flexbox;display:flex;width:100%}:host .accordion-item-title{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}:host .accordion-item-subtitle{margin-top:0.25rem;color:var(--calcite-ui-text-3)}:host(:focus) .accordion-item-title,:host(:hover) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:hover) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:hover) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:hover) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}:host(:focus) .accordion-item-title,:host(:active) .accordion-item-title,:host([active]) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:active) .accordion-item-icon,:host([active]) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:active) .accordion-item-expand-icon,:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:active) .accordion-item-subtitle,:host([active]) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}";
 
 let CalciteAccordionItem$1 = class extends HTMLElement$1 {
   constructor() {
@@ -2387,10 +2393,7 @@ let CalciteActionMenu$1 = class extends HTMLElement$1 {
     };
     this.getActions = () => {
       const { el } = this;
-      const assignedActions = this.getAssignedElements().filter((element) => element.tagName === "CALCITE-ACTION" && element.slot !== "trigger");
-      const actionElements = assignedActions.length
-        ? assignedActions
-        : Array.from(el.querySelectorAll("calcite-action:not([slot=trigger])"));
+      const actionElements = getSlotted(el, { all: true, matches: "calcite-action" });
       this.updateActions(actionElements);
       this.actionElements = actionElements;
       this.connectMenuButtonEl();
@@ -2796,9 +2799,6 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  componentDidLoad() {
-    this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
-  }
   disconnectedCallback() {
     window.clearTimeout(this.autoDismissTimeoutId);
   }
@@ -2839,11 +2839,12 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    if (!this.closeButton && !this.alertLinkEl) {
+    const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
+    if (!this.closeButton && !alertLinkEl) {
       return;
     }
-    else if (this.alertLinkEl) {
-      this.alertLinkEl.setFocus();
+    else if (alertLinkEl) {
+      alertLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();
@@ -3722,6 +3723,12 @@ let CalciteCard$1 = class extends HTMLElement$1 {
   //  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$I.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderThumbnail(), this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter())));
   }
@@ -3730,22 +3737,23 @@ let CalciteCard$1 = class extends HTMLElement$1 {
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    const hasThumbnail = this.el.querySelector(`[slot=${SLOTS$j.thumbnail}]`);
-    return hasThumbnail ? (h("div", { class: CSS$I.thumbnailWrapper }, h("slot", { name: SLOTS$j.thumbnail }))) : null;
+    return getSlotted(this.el, SLOTS$j.thumbnail) ? (h("div", { class: CSS$I.thumbnailWrapper, key: "thumbnail-wrapper" }, h("slot", { name: SLOTS$j.thumbnail }))) : null;
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
     return (h("calcite-label", { class: CSS$I.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
-    const title = this.el.querySelector(`[slot=${SLOTS$j.title}]`);
-    const subtitle = this.el.querySelector(`[slot=${SLOTS$j.subtitle}]`);
+    const { el } = this;
+    const title = getSlotted(el, SLOTS$j.title);
+    const subtitle = getSlotted(el, SLOTS$j.subtitle);
     const hasHeader = title || subtitle;
     return hasHeader ? (h("header", { class: CSS$I.header }, h("slot", { name: SLOTS$j.title }), h("slot", { name: SLOTS$j.subtitle }))) : null;
   }
   renderFooter() {
-    const leadingFooter = this.el.querySelector(`[slot=${SLOTS$j.footerLeading}]`);
-    const trailingFooter = this.el.querySelector(`[slot=${SLOTS$j.footerTrailing}]`);
+    const { el } = this;
+    const leadingFooter = getSlotted(el, SLOTS$j.footerLeading);
+    const trailingFooter = getSlotted(el, SLOTS$j.footerTrailing);
     const hasFooter = leadingFooter || trailingFooter;
     return hasFooter ? (h("footer", { class: CSS$I.footer }, h("slot", { name: SLOTS$j.footerLeading }), h("slot", { name: SLOTS$j.footerTrailing }))) : null;
   }
@@ -9831,7 +9839,6 @@ let CalciteCombobox$1 = class extends HTMLElement$1 {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = `${chipUidPrefix}${guid()}`;
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -9881,7 +9888,9 @@ let CalciteCombobox$1 = class extends HTMLElement$1 {
   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) {
@@ -9936,7 +9945,7 @@ let CalciteCombobox$1 = class extends HTMLElement$1 {
       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() {
@@ -9959,7 +9968,7 @@ let CalciteCombobox$1 = class extends HTMLElement$1 {
       }, 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;
@@ -10061,9 +10070,10 @@ let CalciteComboboxItem$1 = class extends HTMLElement$1 {
   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);
   }
   // --------------------------------------------------------------------------
   //
@@ -10103,10 +10113,10 @@ let CalciteComboboxItem$1 = class extends HTMLElement$1 {
       }, 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";
@@ -10361,10 +10371,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.
@@ -11489,7 +11503,7 @@ let CalciteDropdown$1 = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     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();
     };
@@ -12780,26 +12794,31 @@ let CalciteInlineEditable$1 = class extends HTMLElement$1 {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT$c.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) {
@@ -12809,7 +12828,7 @@ let CalciteInlineEditable$1 = class extends HTMLElement$1 {
           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;
@@ -12851,10 +12870,14 @@ let CalciteInlineEditable$1 = class extends HTMLElement$1 {
     };
   }
   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;
     }
@@ -12865,17 +12888,15 @@ let CalciteInlineEditable$1 = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   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$t.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd }, h("div", { class: CSS$t.inputWrapper }, h("slot", null)), h("div", { class: CSS$t.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS$t.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
@@ -12915,9 +12936,26 @@ let CalciteInlineEditable$1 = class extends HTMLElement$1 {
   //  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;
   }
@@ -13027,6 +13065,7 @@ let CalciteInput$1 = class extends HTMLElement$1 {
     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
@@ -13065,7 +13104,8 @@ let CalciteInput$1 = class extends HTMLElement$1 {
       }
     };
     this.inputFocusHandler = (event) => {
-      if (event.target !== this.slottedActionEl) {
+      const slottedActionEl = getSlotted(this.el, "action");
+      if (event.target !== slottedActionEl) {
         this.setFocus();
       }
       this.calciteInputFocus.emit({
@@ -13309,6 +13349,7 @@ let CalciteInput$1 = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   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");
@@ -13325,10 +13366,14 @@ let CalciteInput$1 = class extends HTMLElement$1 {
     }
     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;
@@ -13337,10 +13382,6 @@ let CalciteInput$1 = class extends HTMLElement$1 {
     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({
@@ -13412,10 +13453,10 @@ let CalciteInput$1 = class extends HTMLElement$1 {
     }
   }
   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");
@@ -14931,7 +14972,7 @@ let CalciteModal$1 = class extends HTMLElement$1 {
       }
     };
     this.updateFooterVisibility = () => {
-      this.hasFooter = !!this.el.querySelector(`[slot=${SLOTS$e.back}], [slot=${SLOTS$e.secondary}], [slot=${SLOTS$e.primary}]`);
+      this.hasFooter = !!getSlotted(this.el, [SLOTS$e.back, SLOTS$e.primary, SLOTS$e.secondary]);
     };
   }
   //--------------------------------------------------------------------------
@@ -15142,9 +15183,6 @@ let CalciteNotice$1 = class extends HTMLElement$1 {
   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$m.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -15158,11 +15196,12 @@ let CalciteNotice$1 = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /** 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();
@@ -15604,6 +15643,20 @@ let CalcitePanel$1 = class extends HTMLElement$1 {
     }
     (_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
@@ -15672,7 +15725,9 @@ let CalcitePanel$1 = class extends HTMLElement$1 {
   renderContent() {
     const { el } = this;
     const hasFab = getSlotted(el, SLOTS$c.fab);
-    return hasFab ? (h("div", { class: { [CSS$k.contentWrapper]: true, [CSS$k.contentHeight]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, h("section", { class: CSS$k.contentContainer }, h("slot", null)), this.renderFab())) : (h("section", { class: { [CSS$k.contentWrapper]: true, [CSS$k.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$k.contentWrapper]: true, [CSS$k.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, h("section", { class: CSS$k.contentContainer }, defaultSlotNode), this.renderFab())) : (h("section", { class: { [CSS$k.contentWrapper]: true, [CSS$k.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, defaultSlotNode));
   }
   renderFab() {
     return (h("div", { class: CSS$k.fabContainer }, h("slot", { name: SLOTS$c.fab })));
@@ -16864,10 +16919,6 @@ let CalciteRadioButton$1 = class extends HTMLElement$1 {
   }
   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();
-    }
   }
   //--------------------------------------------------------------------------
   //
@@ -17011,6 +17062,12 @@ let CalciteRadioButtonGroup$1 = class extends HTMLElement$1 {
     this.required = false;
     /** The scale (size) of the radio button group. */
     this.scale = "m";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -17047,7 +17104,13 @@ let CalciteRadioButtonGroup$1 = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   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();
   }
   //--------------------------------------------------------------------------
   //
@@ -17741,16 +17804,19 @@ let CalciteShell$1 = class extends HTMLElement$1 {
     return hasHeader ? h("slot", { key: "header", name: SLOTS$7.header }) : null;
   }
   renderContent() {
+    const defaultSlotNode = h("slot", { key: "default-slot" });
+    const centerRowSlotNode = h("slot", { key: "center-row-slot", name: SLOTS$7.centerRow });
+    const contentContainerKey = "content-container";
     const content = !!this.contentBehind
       ? [
         h("div", { class: {
             [CSS$b.content]: true,
-            [CSS$b.contentBehind]: !!this.contentBehind
-          } }, h("slot", null)),
-        h("slot", { name: SLOTS$7.centerRow })
+            [CSS$b.contentBehind]: true
+          }, key: contentContainerKey }, defaultSlotNode),
+        centerRowSlotNode
       ]
       : [
-        h("div", { class: CSS$b.content }, h("slot", null), h("slot", { name: SLOTS$7.centerRow }))
+        h("div", { class: CSS$b.content, key: contentContainerKey }, defaultSlotNode, centerRowSlotNode)
       ];
     return content;
   }
@@ -18155,9 +18221,7 @@ let CalciteSlider$1 = class extends HTMLElement$1 {
       }
     };
     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();
@@ -18192,6 +18256,7 @@ let CalciteSlider$1 = class extends HTMLElement$1 {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
+    this.removeDragListeners();
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
@@ -18527,6 +18592,11 @@ let CalciteSlider$1 = class extends HTMLElement$1 {
   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
@@ -24710,7 +24780,8 @@ let CalciteTree$1 = class extends HTMLElement$1 {
   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) {
@@ -24969,7 +25040,8 @@ let CalciteTreeItem$1 = class extends HTMLElement$1 {
         [CSS$1.chevron]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "icon", icon: ICONS$1.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
-    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS$1.checkboxLabel }, h("calcite-checkbox", { checked: this.selected, class: CSS$1.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$1.checkboxLabel, key: "checkbox-label" }, h("calcite-checkbox", { checked: this.selected, class: CSS$1.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }), defaultSlotNode)) : null;
     const selectedIcon = showBulletPoint
       ? ICONS$1.bulletPoint
       : showCheckmark
@@ -24984,7 +25056,7 @@ let CalciteTreeItem$1 = class extends HTMLElement$1 {
     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$1.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$1.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$1.children }))));