@esri/calcite-components 1.4.3-next.7 → 1.4.3

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3-next.6
+ * v1.4.3
  */
 'use strict';
 
@@ -7088,6 +7088,21 @@ class AccordionItem {
   }; }
 }
 
+function getUserAgentData() {
+  return navigator.userAgentData;
+}
+function getUserAgentString() {
+  const uaData = getUserAgentData();
+  return uaData?.brands
+    ? uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ")
+    : navigator.userAgent;
+}
+
+// ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
+const isFirefox = /firefox/i.test(getUserAgentString());
+const interactiveElementToParent = isFirefox
+  ? new WeakMap()
+  : null;
 function interceptedClick() {
   const { disabled } = this;
   if (!disabled) {
@@ -7095,11 +7110,21 @@ function interceptedClick() {
   }
 }
 function onPointerDown(event) {
-  // prevent click from moving focus on host
-  event.preventDefault();
+  const interactiveElement = event.target;
+  if (isFirefox && !interactiveElementToParent.get(interactiveElement)) {
+    return;
+  }
+  const { disabled } = interactiveElement;
+  if (disabled) {
+    // prevent click from moving focus on host
+    event.preventDefault();
+  }
 }
 const nonBubblingWhenDisabledMouseEvents = ["mousedown", "mouseup", "click"];
 function onNonBubblingWhenDisabledMouseEvent(event) {
+  if (isFirefox && !interactiveElementToParent.get(event.target)) {
+    return;
+  }
   const { disabled } = event.target;
   // prevent disallowed mouse events from being emitted on the disabled host (per https://github.com/whatwg/html/issues/5886)
   //⚠ we generally avoid stopping propagation of events, but this is needed to adhere to the intended spec changes above ⚠
@@ -7129,14 +7154,10 @@ function updateHostInteraction(component, hostIsTabbable = false) {
     if (component.el.contains(document.activeElement)) {
       document.activeElement.blur();
     }
-    component.el.click = interceptedClick;
-    component.el.addEventListener("pointerdown", onPointerDown, captureOnlyOptions);
-    nonBubblingWhenDisabledMouseEvents.forEach((event) => component.el.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
+    blockInteraction(component);
     return;
   }
-  component.el.click = HTMLElement.prototype.click;
-  component.el.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions);
-  nonBubblingWhenDisabledMouseEvents.forEach((event) => component.el.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
+  restoreInteraction(component);
   if (typeof hostIsTabbable === "function") {
     component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1");
   }
@@ -7149,6 +7170,63 @@ function updateHostInteraction(component, hostIsTabbable = false) {
   else ;
   component.el.removeAttribute("aria-disabled");
 }
+function blockInteraction(component) {
+  component.el.click = interceptedClick;
+  addInteractionListeners(isFirefox ? getParentElement(component) : component.el);
+}
+function addInteractionListeners(element) {
+  if (!element) {
+    // this path is only applicable to Firefox
+    return;
+  }
+  element.addEventListener("pointerdown", onPointerDown, captureOnlyOptions);
+  nonBubblingWhenDisabledMouseEvents.forEach((event) => element.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
+}
+function getParentElement(component) {
+  return interactiveElementToParent.get(component.el);
+}
+function restoreInteraction(component) {
+  delete component.el.click; // fallback on HTMLElement.prototype.click
+  removeInteractionListeners(isFirefox ? getParentElement(component) : component.el);
+}
+function removeInteractionListeners(element) {
+  if (!element) {
+    // this path is only applicable to Firefox
+    return;
+  }
+  element.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions);
+  nonBubblingWhenDisabledMouseEvents.forEach((event) => element.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
+}
+/**
+ * This utility helps disable components consistently in Firefox.
+ *
+ * It needs to be called in `connectedCallback` and is only needed for Firefox as it does not call capture event listeners before non-capture ones (see https://bugzilla.mozilla.org/show_bug.cgi?id=1731504).
+ *
+ * @param component
+ */
+function connectInteractive(component) {
+  if (!component.disabled || !isFirefox) {
+    return;
+  }
+  const parent = component.el.parentElement || component.el; /* assume element is host if it has no parent when connected */
+  interactiveElementToParent.set(component.el, parent);
+  blockInteraction(component);
+}
+/**
+ * This utility restores interactivity to disabled components consistently in Firefox.
+ *
+ * It needs to be called in `disconnectedCallback` and is only needed for Firefox as it does not call capture event listeners before non-capture ones (see https://bugzilla.mozilla.org/show_bug.cgi?id=1731504).
+ *
+ * @param component
+ */
+function disconnectInteractive(component) {
+  if (!isFirefox) {
+    return;
+  }
+  // always remove on disconnect as render or connect will restore it
+  interactiveElementToParent.delete(component.el);
+  restoreInteraction(component);
+}
 
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();
@@ -7862,6 +7940,7 @@ class Action {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -7873,6 +7952,7 @@ class Action {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     this.mutationObserver?.disconnect();
@@ -10304,7 +10384,7 @@ class Alert {
     };
     this.open = false;
     this.autoClose = false;
-    this.autoCloseDuration = this.autoClose ? "medium" : null;
+    this.autoCloseDuration = "medium";
     this.kind = "brand";
     this.icon = undefined;
     this.iconFlipRtl = false;
@@ -10368,6 +10448,9 @@ class Alert {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
+      detail: { alert: this.el }
+    }));
     window.clearTimeout(this.autoCloseTimeoutId);
     window.clearTimeout(this.queueTimeout);
     disconnectOpenCloseComponent(this);
@@ -10419,6 +10502,14 @@ class Alert {
     this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
+  // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.
+  alertUnregister(event) {
+    const queue = this.queue.filter((el) => el !== event.detail.alert);
+    this.queue = queue;
+    window.dispatchEvent(new CustomEvent("calciteInternalAlertSync", {
+      detail: { queue }
+    }));
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -10508,7 +10599,7 @@ class Alert {
       "requestedIcon": [32],
       "setFocus": [64]
     },
-    "$listeners$": [[8, "calciteInternalAlertSync", "alertSync"], [8, "calciteInternalAlertRegister", "alertRegister"]],
+    "$listeners$": [[8, "calciteInternalAlertSync", "alertSync"], [8, "calciteInternalAlertRegister", "alertRegister"], [8, "calciteInternalAlertUnregister", "alertUnregister"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["open", "open"], ["autoClose", "auto-close"], ["autoCloseDuration", "auto-close-duration"], ["kind", "kind"], ["icon", "icon"], ["iconFlipRtl", "icon-flip-rtl"], ["numberingSystem", "numbering-system"], ["placement", "placement"], ["scale", "scale"]]
   }; }
@@ -10938,10 +11029,12 @@ class Block {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);
@@ -11645,6 +11738,7 @@ class Button {
   //
   //--------------------------------------------------------------------------
   async connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.hasLoader = this.loading;
@@ -11654,6 +11748,7 @@ class Button {
   }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -12843,10 +12938,12 @@ class Checkbox {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.guid = this.el.id || `calcite-checkbox-${guid()}`;
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -12990,6 +13087,7 @@ class Chip {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.setupTextContentObserver();
@@ -13002,6 +13100,7 @@ class Chip {
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -13224,9 +13323,11 @@ class ChipGroup {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   componentDidRender() {
+    disconnectInteractive(this);
     updateHostInteraction(this);
   }
   componentDidLoad() {
@@ -16018,6 +16119,7 @@ class ColorPicker {
     await setUpMessages(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -16027,6 +16129,7 @@ class ColorPicker {
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -17146,7 +17249,7 @@ const arrow = options => ({
       [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset
+        centerOffset: center - offset + alignmentOffset
       }
     };
   }
@@ -17670,7 +17773,13 @@ function isNode(value) {
   return value instanceof getWindow(value).Node;
 }
 function getNodeName(node) {
-  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
 }
 
 function isHTMLElement(value) {
@@ -17684,8 +17793,7 @@ function isShadowRoot(node) {
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  const OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
+  return node instanceof getWindow(node).ShadowRoot || node instanceof ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -17717,6 +17825,10 @@ function isLastTraversableNode(node) {
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
+const createEmptyCoords = v => ({
+  x: v,
+  y: v
+});
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -17735,7 +17847,7 @@ function getCssDimensions(element) {
   return {
     width,
     height,
-    fallback: shouldFallback
+    $: shouldFallback
   };
 }
 
@@ -17743,23 +17855,19 @@ function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
 
-const FALLBACK_SCALE = {
-  x: 1,
-  y: 1
-};
 function getScale(element) {
   const domElement = unwrapElement(element);
   if (!isHTMLElement(domElement)) {
-    return FALLBACK_SCALE;
+    return createEmptyCoords(1);
   }
   const rect = domElement.getBoundingClientRect();
   const {
     width,
     height,
-    fallback
+    $
   } = getCssDimensions(domElement);
-  let x = (fallback ? round(rect.width) : rect.width) / width;
-  let y = (fallback ? round(rect.height) : rect.height) / height;
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
 
   // 0, NaN, or Infinity should always fallback to 1.
 
@@ -17775,10 +17883,7 @@ function getScale(element) {
   };
 }
 
-const noOffsets = {
-  x: 0,
-  y: 0
-};
+const noOffsets = /*#__PURE__*/createEmptyCoords(0);
 function getVisualOffsets(element, isFixed, floatingOffsetParent) {
   var _win$visualViewport, _win$visualViewport2;
   if (isFixed === void 0) {
@@ -17806,7 +17911,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const clientRect = element.getBoundingClientRect();
   const domElement = unwrapElement(element);
-  let scale = FALLBACK_SCALE;
+  let scale = createEmptyCoords(1);
   if (includeScale) {
     if (offsetParent) {
       if (isElement(offsetParent)) {
@@ -17829,14 +17934,14 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle(currentIFrame);
-      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
-      x += iframeRect.x;
-      y += iframeRect.y;
+      x += left;
+      y += top;
       currentIFrame = getWindow(currentIFrame).frameElement;
     }
   }
@@ -17880,14 +17985,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  let scale = {
-    x: 1,
-    y: 1
-  };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  let scale = createEmptyCoords(1);
+  const offsets = createEmptyCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -17953,9 +18052,7 @@ function getParentNode(node) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
   if (isLastTraversableNode(parentNode)) {
-    // `getParentNode` will never return a `Document` due to the fallback
-    // check, so it's either the <html> or <body> element.
-    return parentNode.ownerDocument.body;
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
   }
   if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
     return parentNode;
@@ -18007,10 +18104,7 @@ function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement(element) ? getScale(element) : {
-    x: 1,
-    y: 1
-  };
+  const scale = isHTMLElement(element) ? getScale(element) : createEmptyCoords(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -18161,10 +18255,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  const offsets = createEmptyCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -18241,6 +18332,96 @@ const computePosition = (reference, floating, options) => {
 const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers();
 async function patchFloatingUiForNonChromiumBrowsers() {
 }
+/**
+ * Positions the floating element relative to the reference element.
+ *
+ * **Note:** exported for testing purposes only
+ *
+ * @param root0
+ * @param root0.referenceEl
+ * @param root0.floatingEl
+ * @param root0.overlayPositioning
+ * @param root0.placement
+ * @param root0.flipDisabled
+ * @param root0.flipPlacements
+ * @param root0.offsetDistance
+ * @param root0.offsetSkidding
+ * @param root0.arrowEl
+ * @param root0.type
+ * @param component
+ * @param root0.referenceEl.referenceEl
+ * @param root0.referenceEl.floatingEl
+ * @param root0.referenceEl.overlayPositioning
+ * @param root0.referenceEl.placement
+ * @param root0.referenceEl.flipDisabled
+ * @param root0.referenceEl.flipPlacements
+ * @param root0.referenceEl.offsetDistance
+ * @param root0.referenceEl.offsetSkidding
+ * @param root0.referenceEl.arrowEl
+ * @param root0.referenceEl.type
+ * @param component.referenceEl
+ * @param component.floatingEl
+ * @param component.overlayPositioning
+ * @param component.placement
+ * @param component.flipDisabled
+ * @param component.flipPlacements
+ * @param component.offsetDistance
+ * @param component.offsetSkidding
+ * @param component.arrowEl
+ * @param component.type
+ */
+const positionFloatingUI = 
+/* we export arrow function to allow us to spy on it during testing */
+async (component, { referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) => {
+  if (!referenceEl || !floatingEl) {
+    return null;
+  }
+  await floatingUIBrowserCheck;
+  const { x, y, placement: effectivePlacement, strategy: position, middlewareData } = await computePosition(referenceEl, floatingEl, {
+    strategy: overlayPositioning,
+    placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
+      ? undefined
+      : getEffectivePlacement(floatingEl, placement),
+    middleware: getMiddleware({
+      placement,
+      flipDisabled,
+      flipPlacements,
+      offsetDistance,
+      offsetSkidding,
+      arrowEl,
+      type
+    })
+  });
+  if (arrowEl && middlewareData.arrow) {
+    const { x, y } = middlewareData.arrow;
+    const side = effectivePlacement.split("-")[0];
+    const alignment = x != null ? "left" : "top";
+    const transform = ARROW_CSS_TRANSFORM[side];
+    const reset = { left: "", top: "", bottom: "", right: "" };
+    if ("floatingLayout" in component) {
+      component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical";
+    }
+    Object.assign(arrowEl.style, {
+      ...reset,
+      [alignment]: `${alignment == "left" ? x : y}px`,
+      [side]: "100%",
+      transform
+    });
+  }
+  const referenceHidden = middlewareData.hide?.referenceHidden;
+  const visibility = referenceHidden ? "hidden" : null;
+  const pointerEvents = visibility ? "none" : null;
+  floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
+  const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
+  Object.assign(floatingEl.style, {
+    visibility,
+    pointerEvents,
+    position,
+    top: "0",
+    left: "0",
+    transform
+  });
+};
 /**
  * Exported for testing purposes only
  */
@@ -18341,112 +18522,34 @@ async function reposition(component, options, delayed = false) {
   if (!component.open) {
     return;
   }
-  return delayed ? debouncedReposition(component, options) : positionFloatingUI(component, options);
+  const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
+  return positionFunction(component, options);
+}
+function getDebouncedReposition(component) {
+  let debounced = componentToDebouncedRepositionMap.get(component);
+  if (debounced) {
+    return debounced;
+  }
+  debounced = debounce(positionFloatingUI, repositionDebounceTimeout, {
+    leading: true,
+    maxWait: repositionDebounceTimeout
+  });
+  componentToDebouncedRepositionMap.set(component, debounced);
+  return debounced;
 }
-const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeout, {
-  leading: true,
-  maxWait: repositionDebounceTimeout
-});
 const ARROW_CSS_TRANSFORM = {
   top: "",
   left: "rotate(-90deg)",
   bottom: "rotate(180deg)",
   right: "rotate(90deg)"
 };
-/**
- * Positions the floating element relative to the reference element.
- *
- * **Note:** exported for testing purposes only
- *
- * @param root0
- * @param root0.referenceEl
- * @param root0.floatingEl
- * @param root0.overlayPositioning
- * @param root0.placement
- * @param root0.flipDisabled
- * @param root0.flipPlacements
- * @param root0.offsetDistance
- * @param root0.offsetSkidding
- * @param root0.arrowEl
- * @param root0.type
- * @param component
- * @param root0.referenceEl.referenceEl
- * @param root0.referenceEl.floatingEl
- * @param root0.referenceEl.overlayPositioning
- * @param root0.referenceEl.placement
- * @param root0.referenceEl.flipDisabled
- * @param root0.referenceEl.flipPlacements
- * @param root0.referenceEl.offsetDistance
- * @param root0.referenceEl.offsetSkidding
- * @param root0.referenceEl.arrowEl
- * @param root0.referenceEl.type
- * @param component.referenceEl
- * @param component.floatingEl
- * @param component.overlayPositioning
- * @param component.placement
- * @param component.flipDisabled
- * @param component.flipPlacements
- * @param component.offsetDistance
- * @param component.offsetSkidding
- * @param component.arrowEl
- * @param component.type
- */
-async function positionFloatingUI(component, { referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
-  if (!referenceEl || !floatingEl) {
-    return null;
-  }
-  await floatingUIBrowserCheck;
-  const { x, y, placement: effectivePlacement, strategy: position, middlewareData } = await computePosition(referenceEl, floatingEl, {
-    strategy: overlayPositioning,
-    placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
-      ? undefined
-      : getEffectivePlacement(floatingEl, placement),
-    middleware: getMiddleware({
-      placement,
-      flipDisabled,
-      flipPlacements,
-      offsetDistance,
-      offsetSkidding,
-      arrowEl,
-      type
-    })
-  });
-  if (arrowEl && middlewareData.arrow) {
-    const { x, y } = middlewareData.arrow;
-    const side = effectivePlacement.split("-")[0];
-    const alignment = x != null ? "left" : "top";
-    const transform = ARROW_CSS_TRANSFORM[side];
-    const reset = { left: "", top: "", bottom: "", right: "" };
-    if ("floatingLayout" in component) {
-      component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical";
-    }
-    Object.assign(arrowEl.style, {
-      ...reset,
-      [alignment]: `${alignment == "left" ? x : y}px`,
-      [side]: "100%",
-      transform
-    });
-  }
-  const referenceHidden = middlewareData.hide?.referenceHidden;
-  const visibility = referenceHidden ? "hidden" : null;
-  const pointerEvents = visibility ? "none" : null;
-  floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
-  const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
-  Object.assign(floatingEl.style, {
-    visibility,
-    pointerEvents,
-    position,
-    top: "0",
-    left: "0",
-    transform
-  });
-}
 /**
  * Exported for testing purposes only
  *
  * @internal
  */
 const cleanupMap = new WeakMap();
+const componentToDebouncedRepositionMap = new WeakMap();
 /**
  * Helper to set up floating element interactions on connectedCallback.
  *
@@ -18486,11 +18589,10 @@ function disconnectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
     return;
   }
-  const cleanup = cleanupMap.get(component);
-  if (cleanup) {
-    cleanup();
-  }
+  cleanupMap.get(component)?.();
   cleanupMap.delete(component);
+  componentToDebouncedRepositionMap.get(component)?.cancel();
+  componentToDebouncedRepositionMap.delete(component);
 }
 const visiblePointerSize = 4;
 /**
@@ -18978,6 +19080,7 @@ class Combobox {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.internalValueChangeFlag = true;
@@ -19013,6 +19116,7 @@ class Combobox {
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -19478,9 +19582,11 @@ class ComboboxItem {
     this.ancestors = getAncestors(this.el);
     this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -20375,9 +20481,15 @@ class DatePickerDay {
     const dayLabel = this.dateTimeFormat.format(this.value);
     return (hAsync(Host, { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button" }, hAsync("div", { "aria-hidden": "true", class: { "day-v-wrapper": true, [CSS_UTILITY.rtl]: dir === "rtl" } }, hAsync("div", { class: "day-wrapper" }, hAsync("span", { class: "day" }, hAsync("span", { class: "text" }, formattedDay))))));
   }
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentDidRender() {
     updateHostInteraction(this, this.isTabbable);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   isTabbable() {
     return this.active;
   }
@@ -21182,6 +21294,7 @@ class Dropdown {
     if (this.open) {
       this.openHandler(this.open);
     }
+    connectInteractive(this);
     connectOpenCloseComponent(this);
   }
   componentWillLoad() {
@@ -21196,8 +21309,9 @@ class Dropdown {
   }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
-    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
+    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
   }
   render() {
@@ -21696,6 +21810,9 @@ class Fab {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -21705,6 +21822,9 @@ class Fab {
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -21828,6 +21948,7 @@ class Filter {
     await setUpMessages(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -21835,6 +21956,7 @@ class Filter {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -22145,6 +22267,7 @@ class FlowItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -22156,6 +22279,7 @@ class FlowItem {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -22823,6 +22947,7 @@ class InlineEditable {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectLocalized(this);
     connectMessages(this);
@@ -22837,6 +22962,7 @@ class InlineEditable {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -23116,7 +23242,7 @@ class Input {
         return;
       }
       const isShiftTabEvent = event.shiftKey && event.key === "Tab";
-      if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) {
+      if (supportedKeys.includes(event.key) || isShiftTabEvent) {
         if (event.key === "Enter") {
           this.emitChangeIfUserModified();
         }
@@ -23362,6 +23488,7 @@ class Input {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -23384,6 +23511,7 @@ class Input {
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -24844,6 +24972,7 @@ class InputDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     const { open } = this;
     open && this.openHandler(open);
@@ -24893,6 +25022,7 @@ class InputDatePicker {
   }
   disconnectedCallback() {
     deactivateFocusTrap(this);
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -25327,7 +25457,7 @@ class InputNumber {
         return;
       }
       const isShiftTabEvent = event.shiftKey && event.key === "Tab";
-      if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) {
+      if (supportedKeys.includes(event.key) || isShiftTabEvent) {
         if (event.key === "Enter") {
           this.emitChangeIfUserModified();
         }
@@ -25554,6 +25684,7 @@ class InputNumber {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -25577,6 +25708,7 @@ class InputNumber {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -25985,6 +26117,7 @@ class InputText {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -26000,6 +26133,7 @@ class InputText {
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -27845,6 +27979,7 @@ class InputTimePicker {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     if (isValidTime(this.value)) {
       this.setValueDirectly(this.value);
@@ -27872,6 +28007,7 @@ class InputTimePicker {
     }
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -28040,6 +28176,9 @@ class Link {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -28049,6 +28188,9 @@ class Link {
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   render() {
     const { download, el } = this;
     const dir = getElementDir(el);
@@ -28364,11 +28506,9 @@ class List$1 {
   handleCalciteInternalListItemSelect(event) {
     const target = event.target;
     const { listItems, selectionMode } = this;
-    listItems.forEach((listItem) => {
-      if (selectionMode === "single" || selectionMode === "single-persist") {
-        listItem.selected = listItem === target;
-      }
-    });
+    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+      listItems.forEach((listItem) => (listItem.selected = listItem === target));
+    }
     this.updateSelectedItems();
   }
   handleCalciteListItemClose() {
@@ -28382,9 +28522,11 @@ class List$1 {
   connectedCallback() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.updateListItems();
+    connectInteractive(this);
   }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -28653,10 +28795,8 @@ class ListItem {
       this.focusCell(null, false);
     }
   }
-  handleSelectedChange(value) {
-    if (value) {
-      this.calciteInternalListItemSelect.emit();
-    }
+  handleSelectedChange() {
+    this.calciteInternalListItemSelect.emit();
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -28665,6 +28805,7 @@ class ListItem {
     updateMessages(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     const { el } = this;
@@ -28684,6 +28825,7 @@ class ListItem {
     updateHostInteraction(this, "managed");
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -28876,10 +29018,14 @@ class ListItemGroup {
   connectedCallback() {
     const { el } = this;
     this.visualLevel = getDepth(el, true);
+    connectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -29986,6 +30132,7 @@ class Panel {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -30000,6 +30147,7 @@ class Panel {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     this.resizeObserver?.disconnect();
@@ -30545,9 +30693,11 @@ class PickList {
   connectedCallback() {
     initialize.call(this);
     initializeObserver.call(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     cleanUpObserver.call(this);
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -30812,6 +30962,7 @@ class PickListItem {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     connectConditionalSlotComponent(this);
@@ -30824,6 +30975,7 @@ class PickListItem {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);
@@ -31441,19 +31593,24 @@ class RadioButton {
     this.queryButtons = () => {
       return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
     };
-    this.isDefaultSelectable = () => {
+    this.isFocusable = () => {
       const radioButtons = this.queryButtons();
-      return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+      const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled);
+      const checked = radioButtons.find((radioButton) => radioButton.checked);
+      return firstFocusable === this.el && !checked;
     };
     this.check = () => {
       if (this.disabled) {
         return;
       }
+      this.focused = true;
+      this.setFocus();
+      if (this.checked) {
+        return;
+      }
       this.uncheckAllRadioButtonsInGroup();
       this.checked = true;
-      this.focused = true;
       this.calciteRadioButtonChange.emit();
-      this.setFocus();
     };
     this.clickHandler = () => {
       if (this.disabled) {
@@ -31538,6 +31695,12 @@ class RadioButton {
     }
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
+  disabledChanged() {
+    this.updateTabIndexOfOtherRadioButtonsInGroup();
+  }
+  hiddenChanged() {
+    this.updateTabIndexOfOtherRadioButtonsInGroup();
+  }
   nameChanged() {
     this.checkLastRadioButton();
   }
@@ -31562,19 +31725,24 @@ class RadioButton {
     input.type = "radio";
   }
   onLabelClick(event) {
-    if (!this.disabled && !this.hidden) {
-      this.uncheckOtherRadioButtonsInGroup();
-      const label = event.currentTarget;
-      const radioButton = label.for
-        ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
-        : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
-      if (radioButton) {
-        radioButton.checked = true;
-        radioButton.focused = true;
-      }
-      this.calciteRadioButtonChange.emit();
-      this.setFocus();
+    if (this.disabled || this.hidden) {
+      return;
+    }
+    const label = event.currentTarget;
+    const radioButton = label.for
+      ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+      : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+    if (!radioButton) {
+      return;
     }
+    radioButton.focused = true;
+    this.setFocus();
+    if (radioButton.checked) {
+      return;
+    }
+    this.uncheckOtherRadioButtonsInGroup();
+    radioButton.checked = true;
+    this.calciteRadioButtonChange.emit();
   }
   checkLastRadioButton() {
     const radioButtons = this.queryButtons();
@@ -31612,11 +31780,18 @@ class RadioButton {
       }
     });
   }
+  updateTabIndexOfOtherRadioButtonsInGroup() {
+    const radioButtons = this.queryButtons();
+    const otherFocusableRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid && !radioButton.disabled);
+    otherFocusableRadioButtons.forEach((radioButton) => {
+      forceUpdate$1(radioButton);
+    });
+  }
   getTabIndex() {
     if (this.disabled) {
       return undefined;
     }
-    return this.checked || this.isDefaultSelectable() ? 0 : -1;
+    return this.checked || this.isFocusable() ? 0 : -1;
   }
   //--------------------------------------------------------------------------
   //
@@ -31646,8 +31821,10 @@ class RadioButton {
     if (this.name) {
       this.checkLastRadioButton();
     }
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    this.updateTabIndexOfOtherRadioButtonsInGroup();
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -31659,8 +31836,10 @@ class RadioButton {
     }
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    this.updateTabIndexOfOtherRadioButtonsInGroup();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -31679,6 +31858,8 @@ class RadioButton {
   get el() { return getElement(this); }
   static get watchers() { return {
     "checked": ["checkedChanged"],
+    "disabled": ["disabledChanged"],
+    "hidden": ["hiddenChanged"],
     "name": ["nameChanged"]
   }; }
   static get style() { return radioButtonCss; }
@@ -31981,6 +32162,7 @@ class Rating {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     connectLabel(this);
@@ -32029,6 +32211,7 @@ class Rating {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectLabel(this);
@@ -32114,6 +32297,11 @@ const CSS$j = {
   scrim: "scrim",
   content: "content"
 };
+const BREAKPOINTS = {
+  s: 72,
+  // medium is assumed default.
+  l: 480 // Greater than or equal to 480px.
+};
 
 const scrimCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-scrim: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*/.calcite-animate.sc-calcite-scrim{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-scrim{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-scrim{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-scrim{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-scrim{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-scrim{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-scrim{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-scrim:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-scrim:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-scrim-h{display:none}/*!@:host*/.sc-calcite-scrim-h{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}/*!@.scrim*/.scrim.sc-calcite-scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-scrim-background-internal))}/*!@.content*/.content.sc-calcite-scrim{padding:1rem}";
 
@@ -32123,9 +32311,20 @@ const scrimCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{
 class Scrim {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.resizeObserver = createObserver();
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.storeLoaderEl = (el) => {
+      this.loaderEl = el;
+      this.handleResize();
+    };
     this.loading = false;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.loaderScale = undefined;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
@@ -32159,10 +32358,28 @@ class Scrim {
   render() {
     const { el, loading, messages } = this;
     const hasContent = el.innerHTML.trim().length > 0;
-    const loaderNode = loading ? hAsync("calcite-loader", { label: messages.loading }) : null;
+    const loaderNode = loading ? (hAsync("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null;
     const contentNode = hasContent ? (hAsync("div", { class: CSS$j.content }, hAsync("slot", null))) : null;
     return (hAsync("div", { class: CSS$j.scrim }, loaderNode, contentNode));
   }
+  getScale(size) {
+    if (size < BREAKPOINTS.s) {
+      return "s";
+    }
+    else if (size >= BREAKPOINTS.l) {
+      return "l";
+    }
+    else {
+      return "m";
+    }
+  }
+  handleResize() {
+    const { loaderEl, el } = this;
+    if (!loaderEl) {
+      return;
+    }
+    this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0);
+  }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -32177,6 +32394,7 @@ class Scrim {
       "loading": [516],
       "messages": [1040],
       "messageOverrides": [1040],
+      "loaderScale": [32],
       "defaultMessages": [32],
       "effectiveLocale": [32]
     },
@@ -32258,10 +32476,12 @@ class SegmentedControl {
     setComponentLoaded(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -32519,11 +32739,13 @@ class Select {
       subtree: true,
       childList: true
     });
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -33426,6 +33648,7 @@ class Slider {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     this.setMinMaxFromValue();
     this.setValueFromMinMax();
@@ -33433,6 +33656,7 @@ class Slider {
     connectForm(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -37266,8 +37490,10 @@ class SortableList {
   connectedCallback() {
     this.setUpSorting();
     this.beginObserving();
+    connectInteractive(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();
   }
@@ -37453,6 +37679,9 @@ class SplitButton {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -37462,6 +37691,9 @@ class SplitButton {
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   render() {
     const widthClasses = {
       [CSS$b.container]: true,
@@ -37918,6 +38150,7 @@ class StepperItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
   }
   componentWillLoad() {
@@ -37940,6 +38173,7 @@ class StepperItem {
     updateHostInteraction(this, true);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
   }
   render() {
@@ -38095,6 +38329,7 @@ class Switch {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
@@ -38105,6 +38340,7 @@ class Switch {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -38574,6 +38810,7 @@ class TabTitle {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.setupTextContentObserver();
@@ -38587,6 +38824,7 @@ class TabTitle {
       detail: this.el
     }));
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -39027,6 +39265,7 @@ class TextArea {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
     connectLocalized(this);
@@ -39044,6 +39283,7 @@ class TextArea {
     this.setTextAreaHeight();
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -39207,9 +39447,11 @@ class Tile {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -39391,6 +39633,7 @@ class TileSelect {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.renderInput();
+    connectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -39400,6 +39643,7 @@ class TileSelect {
   }
   disconnectedCallback() {
     this.input.parentNode.removeChild(this.input);
+    disconnectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -39493,9 +39737,15 @@ class TileSelectGroup {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   render() {
     return hAsync("slot", null);
   }
@@ -41295,7 +41545,7 @@ const ICONS$1 = {
   blank: "blank"
 };
 
-const treeItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tree-item: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*/.calcite-animate.sc-calcite-tree-item{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tree-item{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tree-item{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tree-item{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-tree-item{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-tree-item{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tree-item{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-tree-item:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-tree-item:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-tree-item-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-tree-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-tree-item-h *.sc-calcite-tree-item,.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-tree-item-h{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}/*!@[hidden]*/[hidden].sc-calcite-tree-item{display:none}/*!@.node-actions-container*/.node-actions-container.sc-calcite-tree-item{display:flex;justify-content:space-between}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-tree-item-h{visibility:hidden !important;pointer-events:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tree-item-h [calcite-hydrated][disabled].sc-calcite-tree-item{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s]) .node-actions-container*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:1.5rem}/*!@:host([scale=s]) .node-actions-container .node-container .checkbox,\n:host([scale=s]) .node-actions-container .node-container .chevron,\n:host([scale=s]) .node-actions-container .node-container .checkmark,\n:host([scale=s]) .node-actions-container .node-container .bullet-point*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.25rem}/*!@:host([scale=s]) .node-actions-container .node-container .icon-start*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) .node-actions-container*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2rem}/*!@:host([scale=m]) .node-actions-container .node-container .checkbox,\n:host([scale=m]) .node-actions-container .node-container .chevron,\n:host([scale=m]) .node-actions-container .node-container .checkmark,\n:host([scale=m]) .node-actions-container .node-container .bullet-point*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.5rem}/*!@:host([scale=m]) .node-actions-container .node-container .icon-start*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tree-item-h{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .node-actions-container*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .checkbox,\n:host([scale=l]) .node-actions-container .node-container .chevron,\n:host([scale=l]) .node-actions-container .node-container .checkmark,\n:host([scale=l]) .node-actions-container .node-container .bullet-point*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .icon-start*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([lines]) .children-container:after*/[lines].sc-calcite-tree-item-h .children-container.sc-calcite-tree-item:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-app-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}/*!@:host(:not([lines])) .node-container:after*/.sc-calcite-tree-item-h:not([lines]) .node-container.sc-calcite-tree-item:after{display:none}/*!@::slotted(*)*/.sc-calcite-tree-item-s>*{min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}/*!@::slotted(*):hover*/.sc-calcite-tree-item-s>*:hover{text-decoration:none !important}/*!@::slotted(a)*/.sc-calcite-tree-item-s>a{inline-size:100%;text-decoration-line:none}/*!@:host*/.sc-calcite-tree-item-h{outline-color:transparent}/*!@:host:focus, :host:active*/.sc-calcite-tree-item-h:focus,.sc-calcite-tree-item-h:active{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host(:focus:not([disabled]))*/.sc-calcite-tree-item-h:focus:not([disabled]){outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.actions-end*/.actions-end.sc-calcite-tree-item{display:flex;flex-direction:row;align-items:center;align-self:stretch}/*!@.checkbox*/.checkbox.sc-calcite-tree-item{line-height:0}/*!@.checkbox-label*/.checkbox-label.sc-calcite-tree-item{pointer-events:none;display:flex;align-items:center}/*!@.checkbox:focus*/.checkbox.sc-calcite-tree-item:focus{outline:2px solid transparent;outline-offset:2px}/*!@.children-container*/.children-container.sc-calcite-tree-item{position:relative;block-size:0px;overflow:hidden;margin-inline-start:1.25rem;transform:scaleY(0);opacity:0;transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;transform-origin:top}/*!@.item--expanded > .children-container*/.item--expanded.sc-calcite-tree-item>.children-container.sc-calcite-tree-item{overflow:visible;opacity:1;block-size:auto}/*!@.node-container*/.node-container.sc-calcite-tree-item{position:relative;display:flex;min-inline-size:0px;align-items:center}/*!@.node-container .checkmark,\n.node-container .bullet-point*/.node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}/*!@.node-container:hover .checkmark,\n.node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host(:focus:not([disabled])) .node-container .checkmark,\n:host(:focus:not([disabled])) .node-container .bullet-point*/.node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:1}/*!@:host([selected]) .node-container,\n:host([selected]) .node-container:hover*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([selected]) .node-container .bullet-point,\n:host([selected]) .node-container .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item{opacity:1;color:var(--calcite-ui-brand)}/*!@:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container.sc-calcite-tree-item{padding-inline-start:0.5rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container.sc-calcite-tree-item{padding-inline-start:1rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.25rem}/*!@:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.75rem}/*!@:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox*/[has-children].sc-calcite-tree-item-h .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{margin-inline-start:0}/*!@:host([has-children]) .node-container .bullet-point,\n:host([has-children]) .node-container .checkmark*/[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item{display:none}/*!@:host([has-children][expanded]:not([selected]):not([selection-mode=none])) .node-container ::slotted(*)*/.sc-calcite-tree-item-h[has-children][expanded]:not([selected]):not([selection-mode=none]) .node-container .sc-calcite-tree-item-s>*{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([has-children][selected]) .node-container[data-selection-mode=children], :host([has-children][selected]) .node-container[data-selection-mode=multichildren]*/[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=children].sc-calcite-tree-item,[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=multichildren].sc-calcite-tree-item{color:var(--calcite-ui-brand)}/*!@.chevron*/.chevron.sc-calcite-tree-item{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}/*!@.calcite--rtl .chevron*/.calcite--rtl.sc-calcite-tree-item .chevron.sc-calcite-tree-item{transform:rotate(180deg)}/*!@.item--expanded .node-container > .chevron*/.item--expanded.sc-calcite-tree-item .node-container.sc-calcite-tree-item>.chevron.sc-calcite-tree-item{transform:rotate(90deg)}/*!@:host([selected]) .checkmark,\n:host([selected]) .bullet-point*/[selected].sc-calcite-tree-item-h .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .bullet-point.sc-calcite-tree-item{color:var(--calcite-ui-brand)}";
+const treeItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tree-item: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*/.calcite-animate.sc-calcite-tree-item{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tree-item{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tree-item{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tree-item{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-tree-item{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-tree-item{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tree-item{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-tree-item:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-tree-item:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-tree-item-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-tree-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-tree-item-h *.sc-calcite-tree-item,.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-tree-item-h{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}/*!@[hidden]*/[hidden].sc-calcite-tree-item{display:none}/*!@.node-actions-container*/.node-actions-container.sc-calcite-tree-item{display:flex;justify-content:space-between}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-tree-item-h{visibility:hidden !important;pointer-events:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tree-item-h [calcite-hydrated][disabled].sc-calcite-tree-item{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s]) .node-actions-container*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:1.5rem}/*!@:host([scale=s]) .node-actions-container .node-container .checkbox,\n:host([scale=s]) .node-actions-container .node-container .chevron,\n:host([scale=s]) .node-actions-container .node-container .checkmark,\n:host([scale=s]) .node-actions-container .node-container .bullet-point*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.25rem}/*!@:host([scale=s]) .node-actions-container .node-container .icon-start*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) .node-actions-container*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2rem}/*!@:host([scale=m]) .node-actions-container .node-container .checkbox,\n:host([scale=m]) .node-actions-container .node-container .chevron,\n:host([scale=m]) .node-actions-container .node-container .checkmark,\n:host([scale=m]) .node-actions-container .node-container .bullet-point*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.5rem}/*!@:host([scale=m]) .node-actions-container .node-container .icon-start*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tree-item-h{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .node-actions-container*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .checkbox,\n:host([scale=l]) .node-actions-container .node-container .chevron,\n:host([scale=l]) .node-actions-container .node-container .checkmark,\n:host([scale=l]) .node-actions-container .node-container .bullet-point*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .icon-start*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([lines]) .children-container:after*/[lines].sc-calcite-tree-item-h .children-container.sc-calcite-tree-item:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-app-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}/*!@:host(:not([lines])) .node-container:after*/.sc-calcite-tree-item-h:not([lines]) .node-container.sc-calcite-tree-item:after{display:none}/*!@::slotted(*)*/.sc-calcite-tree-item-s>*{min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}/*!@::slotted(*):hover*/.sc-calcite-tree-item-s>*:hover{text-decoration:none !important}/*!@::slotted(a)*/.sc-calcite-tree-item-s>a{inline-size:100%;text-decoration-line:none}/*!@:host*/.sc-calcite-tree-item-h{outline-color:transparent}/*!@:host:focus, :host:active*/.sc-calcite-tree-item-h:focus,.sc-calcite-tree-item-h:active{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host(:focus:not([disabled]))*/.sc-calcite-tree-item-h:focus:not([disabled]){outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.actions-end*/.actions-end.sc-calcite-tree-item{display:flex;flex-direction:row;align-items:center;align-self:stretch}/*!@.checkbox*/.checkbox.sc-calcite-tree-item{line-height:0}/*!@.checkbox-label*/.checkbox-label.sc-calcite-tree-item{pointer-events:none;display:flex;align-items:center}/*!@.checkbox:focus*/.checkbox.sc-calcite-tree-item:focus{outline:2px solid transparent;outline-offset:2px}/*!@.children-container*/.children-container.sc-calcite-tree-item{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}/*!@.item--expanded > .children-container*/.item--expanded.sc-calcite-tree-item>.children-container.sc-calcite-tree-item{overflow:visible;opacity:1;transform:none;block-size:auto}/*!@.node-container*/.node-container.sc-calcite-tree-item{position:relative;display:flex;min-inline-size:0px;align-items:center}/*!@.node-container .checkmark,\n.node-container .bullet-point*/.node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}/*!@.node-container:hover .checkmark,\n.node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host(:focus:not([disabled])) .node-container .checkmark,\n:host(:focus:not([disabled])) .node-container .bullet-point*/.node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:1}/*!@:host([selected]) .node-container,\n:host([selected]) .node-container:hover*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([selected]) .node-container .bullet-point,\n:host([selected]) .node-container .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item{opacity:1;color:var(--calcite-ui-brand)}/*!@:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container.sc-calcite-tree-item{padding-inline-start:0.5rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container.sc-calcite-tree-item{padding-inline-start:1rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.25rem}/*!@:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.75rem}/*!@:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox*/[has-children].sc-calcite-tree-item-h .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{margin-inline-start:0}/*!@:host([has-children]) .node-container .bullet-point,\n:host([has-children]) .node-container .checkmark*/[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item{display:none}/*!@:host([has-children][expanded]:not([selected]):not([selection-mode=none])) .node-container ::slotted(*)*/.sc-calcite-tree-item-h[has-children][expanded]:not([selected]):not([selection-mode=none]) .node-container .sc-calcite-tree-item-s>*{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([has-children][selected]) .node-container[data-selection-mode=children], :host([has-children][selected]) .node-container[data-selection-mode=multichildren]*/[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=children].sc-calcite-tree-item,[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=multichildren].sc-calcite-tree-item{color:var(--calcite-ui-brand)}/*!@.chevron*/.chevron.sc-calcite-tree-item{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}/*!@.calcite--rtl .chevron*/.calcite--rtl.sc-calcite-tree-item .chevron.sc-calcite-tree-item{transform:rotate(180deg)}/*!@.item--expanded .node-container > .chevron*/.item--expanded.sc-calcite-tree-item .node-container.sc-calcite-tree-item>.chevron.sc-calcite-tree-item{transform:rotate(90deg)}/*!@:host([selected]) .checkmark,\n:host([selected]) .bullet-point*/[selected].sc-calcite-tree-item-h .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .bullet-point.sc-calcite-tree-item{color:var(--calcite-ui-brand)}";
 
 /**
  * @slot - A slot for adding text.
@@ -41306,8 +41556,6 @@ class TreeItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteInternalTreeItemSelect = createEvent(this, "calciteInternalTreeItemSelect", 6);
-    this.openTransitionProp = "opacity";
-    this.transitionProp = "expanded";
     this.iconClickHandler = (event) => {
       event.stopPropagation();
       this.expanded = !this.expanded;
@@ -41340,36 +41588,11 @@ class TreeItem {
   }
   expandedHandler(newValue) {
     this.updateParentIsExpanded(this.el, newValue);
-    onToggleOpenCloseComponent(this, true);
   }
-  getselectionMode() {
+  getSelectionMode() {
     this.isSelectionMultiLike =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
   }
-  /**
-   * Defines method for `beforeOpen` event handler.
-   */
-  onBeforeOpen() {
-    this.transitionEl.style.transform = "scaleY(1)";
-  }
-  /**
-   * Defines method for `open` event handler:
-   */
-  onOpen() {
-    this.transitionEl.style.transform = "none";
-  }
-  /**
-   * Defines method for `beforeClose` event handler:
-   */
-  onBeforeClose() {
-    // pattern needs to be defined on how we emit events for components without `open` prop.
-  }
-  /**
-   * Defines method for `close` event handler:
-   */
-  onClose() {
-    this.transitionEl.style.transform = "scaleY(0)";
-  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -41382,9 +41605,11 @@ class TreeItem {
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
     }
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");
@@ -41409,9 +41634,6 @@ class TreeItem {
     }
   }
   componentWillLoad() {
-    if (this.expanded) {
-      onToggleOpenCloseComponent(this, true);
-    }
     requestAnimationFrame(() => (this.updateAfterInitialRender = true));
   }
   componentDidLoad() {
@@ -41456,12 +41678,7 @@ class TreeItem {
       ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), hAsync("div", { class: CSS$2.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), hAsync("div", { class: {
         [CSS$2.childrenContainer]: true,
         [CSS_UTILITY.rtl]: rtl
-      }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => this.setTransitionEl(el) }, hAsync("slot", { name: SLOTS$1.children })))));
-  }
-  setTransitionEl(el) {
-    this.transitionEl = el;
+      }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined }, hAsync("slot", { name: SLOTS$1.children })))));
   }
   //--------------------------------------------------------------------------
   //
@@ -41575,7 +41792,7 @@ class TreeItem {
   get el() { return getElement(this); }
   static get watchers() { return {
     "expanded": ["expandedHandler"],
-    "selectionMode": ["getselectionMode"]
+    "selectionMode": ["getSelectionMode"]
   }; }
   static get style() { return treeItemCss; }
   static get cmpMeta() { return {
@@ -41744,6 +41961,7 @@ class ValueList {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     initialize.call(this);
@@ -41762,6 +41980,7 @@ class ValueList {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -41975,9 +42194,11 @@ class ValueListItem {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);