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

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.5.0-next.0
  */
 '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();
@@ -10938,10 +11018,12 @@ class Block {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);
@@ -11645,6 +11727,7 @@ class Button {
   //
   //--------------------------------------------------------------------------
   async connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.hasLoader = this.loading;
@@ -11654,6 +11737,7 @@ class Button {
   }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -12843,10 +12927,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 +13076,7 @@ class Chip {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.setupTextContentObserver();
@@ -13002,6 +13089,7 @@ class Chip {
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -13224,9 +13312,11 @@ class ChipGroup {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   componentDidRender() {
+    disconnectInteractive(this);
     updateHostInteraction(this);
   }
   componentDidLoad() {
@@ -16018,6 +16108,7 @@ class ColorPicker {
     await setUpMessages(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -16027,6 +16118,7 @@ class ColorPicker {
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -18978,6 +19070,7 @@ class Combobox {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.internalValueChangeFlag = true;
@@ -19013,6 +19106,7 @@ class Combobox {
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -19478,9 +19572,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 +20471,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 +21284,7 @@ class Dropdown {
     if (this.open) {
       this.openHandler(this.open);
     }
+    connectInteractive(this);
     connectOpenCloseComponent(this);
   }
   componentWillLoad() {
@@ -21196,8 +21299,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 +21800,9 @@ class Fab {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -21705,6 +21812,9 @@ class Fab {
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -21828,6 +21938,7 @@ class Filter {
     await setUpMessages(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -21835,6 +21946,7 @@ class Filter {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -22145,6 +22257,7 @@ class FlowItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -22156,6 +22269,7 @@ class FlowItem {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -22823,6 +22937,7 @@ class InlineEditable {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectLocalized(this);
     connectMessages(this);
@@ -22837,6 +22952,7 @@ class InlineEditable {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -23362,6 +23478,7 @@ class Input {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -23384,6 +23501,7 @@ class Input {
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -24844,6 +24962,7 @@ class InputDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     const { open } = this;
     open && this.openHandler(open);
@@ -24893,6 +25012,7 @@ class InputDatePicker {
   }
   disconnectedCallback() {
     deactivateFocusTrap(this);
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -25554,6 +25674,7 @@ class InputNumber {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -25577,6 +25698,7 @@ class InputNumber {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -25985,6 +26107,7 @@ class InputText {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -26000,6 +26123,7 @@ class InputText {
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -27845,6 +27969,7 @@ class InputTimePicker {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     if (isValidTime(this.value)) {
       this.setValueDirectly(this.value);
@@ -27872,6 +27997,7 @@ class InputTimePicker {
     }
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -28040,6 +28166,9 @@ class Link {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -28049,6 +28178,9 @@ class Link {
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   render() {
     const { download, el } = this;
     const dir = getElementDir(el);
@@ -28382,9 +28514,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);
@@ -28665,6 +28799,7 @@ class ListItem {
     updateMessages(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     const { el } = this;
@@ -28684,6 +28819,7 @@ class ListItem {
     updateHostInteraction(this, "managed");
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -28876,10 +29012,14 @@ class ListItemGroup {
   connectedCallback() {
     const { el } = this;
     this.visualLevel = getDepth(el, true);
+    connectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -29986,6 +30126,7 @@ class Panel {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -30000,6 +30141,7 @@ class Panel {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     this.resizeObserver?.disconnect();
@@ -30545,9 +30687,11 @@ class PickList {
   connectedCallback() {
     initialize.call(this);
     initializeObserver.call(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     cleanUpObserver.call(this);
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -30812,6 +30956,7 @@ class PickListItem {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     connectConditionalSlotComponent(this);
@@ -30824,6 +30969,7 @@ class PickListItem {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);
@@ -31449,11 +31595,14 @@ class RadioButton {
       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) {
@@ -31562,19 +31711,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();
@@ -31646,6 +31800,7 @@ class RadioButton {
     if (this.name) {
       this.checkLastRadioButton();
     }
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
@@ -31659,6 +31814,7 @@ class RadioButton {
     }
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -31981,6 +32137,7 @@ class Rating {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     connectLabel(this);
@@ -32029,6 +32186,7 @@ class Rating {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectLabel(this);
@@ -32258,10 +32416,12 @@ class SegmentedControl {
     setComponentLoaded(this);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -32519,11 +32679,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 +33588,7 @@ class Slider {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     this.setMinMaxFromValue();
     this.setValueFromMinMax();
@@ -33433,6 +33596,7 @@ class Slider {
     connectForm(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -37266,8 +37430,10 @@ class SortableList {
   connectedCallback() {
     this.setUpSorting();
     this.beginObserving();
+    connectInteractive(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();
   }
@@ -37453,6 +37619,9 @@ class SplitButton {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -37462,6 +37631,9 @@ class SplitButton {
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   render() {
     const widthClasses = {
       [CSS$b.container]: true,
@@ -37918,6 +38090,7 @@ class StepperItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
   }
   componentWillLoad() {
@@ -37940,6 +38113,7 @@ class StepperItem {
     updateHostInteraction(this, true);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
   }
   render() {
@@ -38095,6 +38269,7 @@ class Switch {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
@@ -38105,6 +38280,7 @@ class Switch {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -38574,6 +38750,7 @@ class TabTitle {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.setupTextContentObserver();
@@ -38587,6 +38764,7 @@ class TabTitle {
       detail: this.el
     }));
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -39027,6 +39205,7 @@ class TextArea {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
     connectLocalized(this);
@@ -39044,6 +39223,7 @@ class TextArea {
     this.setTextAreaHeight();
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
@@ -39207,9 +39387,11 @@ class Tile {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -39391,6 +39573,7 @@ class TileSelect {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.renderInput();
+    connectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -39400,6 +39583,7 @@ class TileSelect {
   }
   disconnectedCallback() {
     this.input.parentNode.removeChild(this.input);
+    disconnectInteractive(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -39493,9 +39677,15 @@ class TileSelectGroup {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
   render() {
     return hAsync("slot", null);
   }
@@ -41382,9 +41572,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");
@@ -41744,6 +41936,7 @@ class ValueList {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     initialize.call(this);
@@ -41762,6 +41955,7 @@ class ValueList {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -41975,9 +42169,11 @@ class ValueListItem {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);